1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00

update components

This commit is contained in:
Luke Pulverenti 2015-08-04 10:26:36 -04:00
parent 0b450116a5
commit 1a84e71a95
31 changed files with 646 additions and 495 deletions

View file

@ -16187,8 +16187,15 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
@apply(--paper-input-container-underline-disabled);
}
.label-and-input-container {
@apply(--layout-flex);
@apply(--layout-relative);
}
.input-content {
position: relative;
@apply(--layout-horizontal);
@apply(--layout-end);
}
.input-content ::content label,
@ -16250,6 +16257,12 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
@apply(--paper-input-container-input);
}
::content [prefix],
::content [suffix] {
@apply(--paper-font-subhead);
@apply(--paper-input-container-input);
}
/* Firefox sets a min-width on the input, which can cause layout issues */
.input-content ::content input {
min-width: 0;
@ -16276,7 +16289,11 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
</template>
<div class$="[[_computeInputContentClass(noLabelFloat,alwaysFloatLabel,focused,invalid,_inputHasContent)]]">
<content select=":not([add-on])"></content>
<content select="[prefix]" id="prefix"></content>
<div class="label-and-input-container">
<content select=":not([add-on]):not([prefix]):not([suffix])"></content>
</div>
<content select="[suffix]"></content>
</div>
<div class$="[[_computeUnderlineClass(focused,invalid)]]">
@ -16513,6 +16530,8 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
_computeInputContentClass: function(noLabelFloat, alwaysFloatLabel, focused, invalid, _inputHasContent) {
var cls = 'input-content';
if (!noLabelFloat) {
var label = this.querySelector('label');
if (alwaysFloatLabel || _inputHasContent) {
cls += ' label-is-floating';
if (invalid) {
@ -16520,6 +16539,16 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
} else if (focused) {
cls += " label-is-highlighted";
}
// The label might have a horizontal offset if a prefix element exists
// which needs to be undone when displayed as a floating label.
if (this.$.prefix && label && label.offsetParent) {
label.style.left = -label.offsetParent.offsetLeft + 'px';
}
} else {
// When the label is not floating, it should overlap the input element.
if (label) {
label.style.left = 0;
}
}
} else {
if (_inputHasContent) {
@ -16710,10 +16739,14 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
<paper-input-container no-label-float="[[noLabelFloat]]" always-float-label="[[_computeAlwaysFloatLabel(alwaysFloatLabel,placeholder)]]" auto-validate$="[[autoValidate]]" disabled$="[[disabled]]" invalid="[[invalid]]">
<content select="[prefix]"></content>
<label hidden$="[[!label]]">[[label]]</label>
<input is="iron-input" id="input" aria-labelledby$="[[_ariaLabelledBy]]" aria-describedby$="[[_ariaDescribedBy]]" disabled$="[[disabled]]" bind-value="{{value}}" invalid="{{invalid}}" prevent-invalid-input="[[preventInvalidInput]]" allowed-pattern="[[allowedPattern]]" validator="[[validator]]" type$="[[type]]" pattern$="[[pattern]]" maxlength$="[[maxlength]]" required$="[[required]]" autocomplete$="[[autocomplete]]" autofocus$="[[autofocus]]" inputmode$="[[inputmode]]" minlength$="[[minlength]]" name$="[[name]]" placeholder$="[[placeholder]]" readonly$="[[readonly]]" list$="[[list]]" size$="[[size]]" autocapitalize$="[[autocapitalize]]" autocorrect$="[[autocorrect]]">
<content select="[suffix]"></content>
<template is="dom-if" if="[[errorMessage]]">
<paper-input-error>[[errorMessage]]</paper-input-error>
</template>