mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
update shared components
This commit is contained in:
parent
db0bac5a2b
commit
ff0882ba79
18 changed files with 87 additions and 73 deletions
|
@ -1,4 +1,4 @@
|
|||
[is="emby-input"] {
|
||||
.emby-input {
|
||||
display: block;
|
||||
margin: 0;
|
||||
margin-bottom: 0 !important;
|
||||
|
@ -33,12 +33,12 @@
|
|||
transition: all .2s ease-out;
|
||||
}
|
||||
|
||||
.inputLabel.blank:not(.nofloat) {
|
||||
transform-origin: left top;
|
||||
transform: scale(1.3,1.3) translateY(86%);
|
||||
}
|
||||
.inputLabel-float {
|
||||
transform-origin: left top;
|
||||
transform: scale(1.3,1.3) translateY(86%);
|
||||
}
|
||||
|
||||
.inputLabel.focused:not(.blank) {
|
||||
.inputLabelFocused {
|
||||
color: #52B54B;
|
||||
}
|
||||
|
||||
|
@ -53,7 +53,7 @@
|
|||
transform-origin: center center;
|
||||
}
|
||||
|
||||
[is="emby-input"]:focus + .emby-input-selectionbar {
|
||||
.emby-input:focus + .emby-input-selectionbar {
|
||||
background-color: #52B54B;
|
||||
transform: none;
|
||||
}
|
||||
|
|
|
@ -36,20 +36,18 @@
|
|||
|
||||
EmbyInputPrototype.attachedCallback = function () {
|
||||
|
||||
if (this.getAttribute('data-embyinput') == 'true') {
|
||||
if (this.classList.contains('emby-input')) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.setAttribute('data-embyinput', 'true');
|
||||
this.classList.add('emby-input');
|
||||
|
||||
var parentNode = this.parentNode;
|
||||
var label = this.ownerDocument.createElement('label');
|
||||
label.innerHTML = this.getAttribute('label') || '';
|
||||
label.classList.add('inputLabel');
|
||||
|
||||
if (!supportsFloatingLabel || this.type == 'date') {
|
||||
label.classList.add('nofloat');
|
||||
}
|
||||
var instanceSupportsFloat = supportsFloatingLabel && this.type != 'date';
|
||||
|
||||
label.htmlFor = this.id;
|
||||
parentNode.insertBefore(label, this);
|
||||
|
@ -60,19 +58,24 @@
|
|||
|
||||
function onChange() {
|
||||
if (this.value) {
|
||||
label.classList.remove('blank');
|
||||
label.classList.remove('inputLabel-float');
|
||||
} else {
|
||||
label.classList.add('blank');
|
||||
|
||||
if (instanceSupportsFloat) {
|
||||
label.classList.add('inputLabel-float');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.addEventListener('focus', function () {
|
||||
onChange.call(this);
|
||||
label.classList.add('focused');
|
||||
label.classList.add('inputLabelFocused');
|
||||
label.classList.remove('inputLabelUnfocused');
|
||||
});
|
||||
this.addEventListener('blur', function () {
|
||||
onChange.call(this);
|
||||
label.classList.remove('focused');
|
||||
label.classList.remove('inputLabelFocused');
|
||||
label.classList.add('inputLabelUnfocused');
|
||||
});
|
||||
|
||||
this.addEventListener('change', onChange);
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue