1
0
Fork 0
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:
Luke Pulverenti 2016-08-03 00:30:22 -04:00
parent db0bac5a2b
commit ff0882ba79
18 changed files with 87 additions and 73 deletions

View file

@ -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;
}

View file

@ -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);