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 2016-02-18 13:20:10 -05:00
parent 02e924e3c5
commit 05b25af69f
55 changed files with 1554 additions and 907 deletions

View file

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