mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
update polymer
This commit is contained in:
parent
22a5e48860
commit
61d616c330
44 changed files with 447 additions and 156 deletions
|
@ -62,42 +62,6 @@ Custom property | Description | Default
|
|||
outline:none;
|
||||
}
|
||||
|
||||
:host .toggle-bar {
|
||||
background-color: var(--paper-toggle-button-unchecked-bar-color, #000000);
|
||||
@apply(--paper-toggle-button-unchecked-bar);
|
||||
}
|
||||
|
||||
:host .toggle-button {
|
||||
background-color: var(--paper-toggle-button-unchecked-button-color, --paper-grey-50);
|
||||
@apply(--paper-toggle-button-unchecked-button);
|
||||
}
|
||||
|
||||
:host([checked]) .toggle-bar {
|
||||
background-color: var(--paper-toggle-button-checked-bar-color, --default-primary-color);
|
||||
@apply(--paper-toggle-button-checked-bar);
|
||||
}
|
||||
|
||||
:host([checked]) .toggle-button {
|
||||
background-color: var(--paper-toggle-button-checked-button-color, --default-primary-color);
|
||||
@apply(--paper-toggle-button-checked-button);
|
||||
}
|
||||
|
||||
:host .toggle-ink {
|
||||
color: var(--paper-toggle-button-unchecked-ink-color, --primary-text-color);
|
||||
}
|
||||
|
||||
:host([checked]) .toggle-ink {
|
||||
color: var(--paper-toggle-button-checked-ink-color, --default-primary-color);
|
||||
}
|
||||
|
||||
/* ID selectors should not be overriden by users. */
|
||||
|
||||
#toggleContainer {
|
||||
position: relative;
|
||||
width: 36px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.toggle-bar {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
|
@ -106,15 +70,8 @@ Custom property | Description | Default
|
|||
pointer-events: none;
|
||||
opacity: 0.4;
|
||||
transition: background-color linear .08s;
|
||||
}
|
||||
|
||||
:host([checked]) .toggle-bar {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
:host([disabled]) .toggle-bar {
|
||||
background-color: #000;
|
||||
opacity: 0.12;
|
||||
background-color: var(--paper-toggle-button-unchecked-bar-color, #000000);
|
||||
@apply(--paper-toggle-button-unchecked-bar);
|
||||
}
|
||||
|
||||
.toggle-button {
|
||||
|
@ -127,6 +84,8 @@ Custom property | Description | Default
|
|||
transition: -webkit-transform linear .08s, background-color linear .08s;
|
||||
transition: transform linear .08s, background-color linear .08s;
|
||||
will-change: transform;
|
||||
background-color: var(--paper-toggle-button-unchecked-button-color, --paper-grey-50);
|
||||
@apply(--paper-toggle-button-unchecked-button);
|
||||
}
|
||||
|
||||
.toggle-button.dragging {
|
||||
|
@ -134,11 +93,27 @@ Custom property | Description | Default
|
|||
transition: none;
|
||||
}
|
||||
|
||||
:host([checked]):not([disabled]) .toggle-bar {
|
||||
opacity: 0.5;
|
||||
background-color: var(--paper-toggle-button-checked-bar-color, --default-primary-color);
|
||||
@apply(--paper-toggle-button-checked-bar);
|
||||
}
|
||||
|
||||
:host([disabled]) .toggle-bar {
|
||||
background-color: #000;
|
||||
opacity: 0.12;
|
||||
}
|
||||
|
||||
:host([checked]) .toggle-button {
|
||||
-webkit-transform: translate(16px, 0);
|
||||
transform: translate(16px, 0);
|
||||
}
|
||||
|
||||
:host([checked]):not([disabled]) .toggle-button {
|
||||
background-color: var(--paper-toggle-button-checked-button-color, --default-primary-color);
|
||||
@apply(--paper-toggle-button-checked-button);
|
||||
}
|
||||
|
||||
:host([disabled]) .toggle-button {
|
||||
background-color: #bdbdbd;
|
||||
opacity: 1;
|
||||
|
@ -152,10 +127,21 @@ Custom property | Description | Default
|
|||
height: 48px;
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
color: var(--paper-toggle-button-unchecked-ink-color, --primary-text-color);
|
||||
}
|
||||
|
||||
:host([checked]) .toggle-ink {
|
||||
color: var(--paper-toggle-button-checked-ink-color, --default-primary-color);
|
||||
}
|
||||
|
||||
.toggle-container {
|
||||
position: relative;
|
||||
width: 36px;
|
||||
height: 14px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="toggleContainer">
|
||||
<div class="toggle-container">
|
||||
<div id="toggleBar" class="toggle-bar"></div>
|
||||
<div id="toggleButton" class="toggle-button">
|
||||
<paper-ripple id="ink" class="toggle-ink circle" recenters></paper-ripple>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue