mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
update components
This commit is contained in:
parent
02e924e3c5
commit
05b25af69f
55 changed files with 1554 additions and 907 deletions
|
@ -10,7 +10,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
|
||||
<link rel="import" href="../polymer/polymer.html">
|
||||
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
|
||||
<link rel="import" href="../paper-styles/color.html">
|
||||
<link rel="import" href="../paper-styles/default-theme.html">
|
||||
<link rel="import" href="../paper-styles/typography.html">
|
||||
|
||||
|
@ -74,8 +73,8 @@ The following custom properties and mixins are available for styling:
|
|||
Custom property | Description | Default
|
||||
----------------|-------------|----------
|
||||
`--paper-input-container-color` | Label and underline color when the input is not focused | `--secondary-text-color`
|
||||
`--paper-input-container-focus-color` | Label and underline color when the input is focused | `--default-primary-color`
|
||||
`--paper-input-container-invalid-color` | Label and underline color when the input is is invalid | `--google-red-500`
|
||||
`--paper-input-container-focus-color` | Label and underline color when the input is focused | `--primary-color`
|
||||
`--paper-input-container-invalid-color` | Label and underline color when the input is is invalid | `--error-color`
|
||||
`--paper-input-container-input-color` | Input foreground color | `--primary-text-color`
|
||||
`--paper-input-container` | Mixin applied to the container | `{}`
|
||||
`--paper-input-container-disabled` | Mixin applied to the container when it's disabled | `{}`
|
||||
|
@ -125,8 +124,9 @@ This element is `display:block` by default, but you can set the `inline` attribu
|
|||
.focused-line {
|
||||
@apply(--layout-fit);
|
||||
|
||||
background: var(--paper-input-container-focus-color, --default-primary-color);
|
||||
background: var(--paper-input-container-focus-color, --primary-color);
|
||||
height: 2px;
|
||||
|
||||
-webkit-transform-origin: center center;
|
||||
transform-origin: center center;
|
||||
-webkit-transform: scale3d(0,1,1);
|
||||
|
@ -145,7 +145,7 @@ This element is `display:block` by default, but you can set the `inline` attribu
|
|||
}
|
||||
|
||||
.underline.is-invalid .focused-line {
|
||||
background: var(--paper-input-container-invalid-color, --google-red-500);
|
||||
background: var(--paper-input-container-invalid-color, --error-color);
|
||||
-webkit-transform: none;
|
||||
transform: none;
|
||||
-webkit-transition: -webkit-transform 0.25s;
|
||||
|
@ -157,8 +157,8 @@ This element is `display:block` by default, but you can set the `inline` attribu
|
|||
.unfocused-line {
|
||||
@apply(--layout-fit);
|
||||
|
||||
height: 1px;
|
||||
background: var(--paper-input-container-color, --secondary-text-color);
|
||||
height: 1px;
|
||||
|
||||
@apply(--paper-input-container-underline);
|
||||
}
|
||||
|
@ -174,6 +174,7 @@ This element is `display:block` by default, but you can set the `inline` attribu
|
|||
.label-and-input-container {
|
||||
@apply(--layout-flex-auto);
|
||||
@apply(--layout-relative);
|
||||
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
@ -194,26 +195,26 @@ This element is `display:block` by default, but you can set the `inline` attribu
|
|||
width: 100%;
|
||||
font: inherit;
|
||||
color: var(--paper-input-container-color, --secondary-text-color);
|
||||
-webkit-transition: -webkit-transform 0.25s, width 0.25s;
|
||||
transition: transform 0.25s, width 0.25s;
|
||||
-webkit-transform-origin: left top;
|
||||
transform-origin: left top;
|
||||
|
||||
@apply(--paper-font-common-nowrap);
|
||||
@apply(--paper-font-subhead);
|
||||
@apply(--paper-input-container-label);
|
||||
@apply(--paper-transition-easing);
|
||||
}
|
||||
|
||||
.input-content.label-is-floating ::content label,
|
||||
.input-content.label-is-floating ::content .paper-input-label {
|
||||
-webkit-transform: translateY(-75%) scale(0.75);
|
||||
transform: translateY(-75%) scale(0.75);
|
||||
-webkit-transition: -webkit-transform 0.25s, width 0.25s;
|
||||
transition: transform 0.25s, width 0.25s;
|
||||
-webkit-transform-origin: left top;
|
||||
transform-origin: left top;
|
||||
|
||||
/* Since we scale to 75/100 of the size, we actually have 100/75 of the
|
||||
original space now available */
|
||||
width: 133%;
|
||||
|
||||
@apply(--paper-transition-easing);
|
||||
@apply(--paper-input-container-label-floating);
|
||||
}
|
||||
|
||||
|
@ -229,14 +230,14 @@ This element is `display:block` by default, but you can set the `inline` attribu
|
|||
|
||||
.input-content.label-is-highlighted ::content label,
|
||||
.input-content.label-is-highlighted ::content .paper-input-label {
|
||||
color: var(--paper-input-container-focus-color, --default-primary-color);
|
||||
color: var(--paper-input-container-focus-color, --primary-color);
|
||||
|
||||
@apply(--paper-input-container-label-focus);
|
||||
}
|
||||
|
||||
.input-content.is-invalid ::content label,
|
||||
.input-content.is-invalid ::content .paper-input-label {
|
||||
color: var(--paper-input-container-invalid-color, --google-red-500);
|
||||
color: var(--paper-input-container-invalid-color, --error-color);
|
||||
}
|
||||
|
||||
.input-content.label-is-hidden ::content label,
|
||||
|
@ -266,12 +267,14 @@ This element is `display:block` by default, but you can set the `inline` attribu
|
|||
|
||||
::content [prefix] {
|
||||
@apply(--paper-font-subhead);
|
||||
|
||||
@apply(--paper-input-prefix);
|
||||
@apply(--layout-flex-none);
|
||||
}
|
||||
|
||||
::content [suffix] {
|
||||
@apply(--paper-font-subhead);
|
||||
|
||||
@apply(--paper-input-suffix);
|
||||
@apply(--layout-flex-none);
|
||||
}
|
||||
|
@ -290,11 +293,11 @@ This element is `display:block` by default, but you can set the `inline` attribu
|
|||
}
|
||||
|
||||
.add-on-content.is-invalid ::content * {
|
||||
color: var(--paper-input-container-invalid-color, --google-red-500);
|
||||
color: var(--paper-input-container-invalid-color, --error-color);
|
||||
}
|
||||
|
||||
.add-on-content.is-highlighted ::content * {
|
||||
color: var(--paper-input-container-focus-color, --default-primary-color);
|
||||
color: var(--paper-input-container-focus-color, --primary-color);
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue