<style>
:host {
--cr-toggle-checked-bar-color: var(--google-blue-600);
--cr-toggle-checked-button-color: var(--google-blue-600);
--cr-toggle-checked-ripple-color:
rgba(var(--google-blue-600-rgb), .2);
--cr-toggle-ripple-diameter: 40px;
--cr-toggle-unchecked-bar-color: var(--google-grey-400);
--cr-toggle-unchecked-button-color: white;
--cr-toggle-unchecked-ripple-color:
rgba(var(--google-grey-600-rgb), .15);
-webkit-tap-highlight-color: transparent;
cursor: pointer;
display: block;
min-width: 34px;
outline: none;
position: relative;
width: 34px;
}
:host-context([chrome-refresh-2023]):host {
--cr-toggle-checked-bar-color:
var(--color-toggle-button-track-on,
var(--cr-fallback-color-primary));
--cr-toggle-checked-button-color:
var(--color-toggle-button-thumb-on,
var(--cr-fallback-color-on-primary));
--cr-toggle-unchecked-bar-color:
var(--color-toggle-button-track-off,
var(--cr-fallback-color-surface-variant));
--cr-toggle-unchecked-button-color:
var(--color-toggle-button-thumb-off,
var(--cr-fallback-color-outline));
--cr-toggle-disabled-opacity: 1;
--cr-toggle-checked-ripple-color: var(--cr-active-background-color);
--cr-toggle-unchecked-ripple-color: var(--cr-active-background-color);
--cr-toggle-ripple-diameter: 20px;
--cr-toggle-bar-border-color: var(--cr-toggle-unchecked-button-color);
--cr-toggle-bar-border: 1px solid var(--cr-toggle-bar-border-color);
--cr-toggle-bar-width: 26px;
--cr-toggle-knob-diameter: 8px;
height: fit-content;
isolation: isolate;
min-width: initial;
width: fit-content;
}
@media (forced-colors: active) {
:host {
/* TODO(crbug.com/40168415): cr-toggle heavily relies on
background-color to convey various states (on/off,
enabled/disabled). Until proper specs for HCM exist, turn off
forced-colors automatic adjustments so that the cr-toggle is at
least visible. Replace with a HCM compliant implementation once
specs exist.*/
forced-color-adjust: none;
}
}
@media (prefers-color-scheme: dark) {
:host {
--cr-toggle-checked-bar-color: var(--google-blue-300);
--cr-toggle-checked-button-color: var(--google-blue-300);
--cr-toggle-checked-ripple-color:
rgba(var(--google-blue-300-rgb), .4);
--cr-toggle-unchecked-bar-color: var(--google-grey-500);
--cr-toggle-unchecked-button-color: var(--google-grey-300);
--cr-toggle-unchecked-ripple-color:
rgba(var(--google-grey-300-rgb), .4);
}
}
/* Keep the prefers-color-scheme and [dark] rules the same. */
:host([dark]) {
--cr-toggle-checked-bar-color: var(--google-blue-300);
--cr-toggle-checked-button-color: var(--google-blue-300);
--cr-toggle-checked-ripple-color:
rgba(var(--google-blue-300-rgb), .4);
--cr-toggle-unchecked-bar-color: var(--google-grey-500);
--cr-toggle-unchecked-button-color: var(--google-grey-300);
--cr-toggle-unchecked-ripple-color:
rgba(var(--google-grey-300-rgb), .4);
}
:host-context([chrome-refresh-2023]):host(:active) {
--cr-toggle-knob-diameter: 10px;
}
:host-context([chrome-refresh-2023]):host([checked]) {
--cr-toggle-bar-border-color: var(--cr-toggle-checked-bar-color);
--cr-toggle-knob-diameter: 12px;
}
:host-context([chrome-refresh-2023]):host([checked]:active) {
--cr-toggle-knob-diameter: 14px;
}
:host([disabled]) {
cursor: initial;
opacity: var(--cr-disabled-opacity);
pointer-events: none;
}
:host-context([chrome-refresh-2023]):host([disabled]) {
--cr-toggle-checked-bar-color:
var(--color-toggle-button-track-on-disabled,
var(--cr-fallback-color-disabled-background));
--cr-toggle-checked-button-color:
var(--color-toggle-button-thumb-on-disabled, var(--cr-fallback-color-surface));
--cr-toggle-unchecked-bar-color: transparent;
--cr-toggle-unchecked-button-color:
var(--color-toggle-button-thumb-off-disabled,
var(--cr-fallback-color-disabled-foreground));
--cr-toggle-bar-border-color: var(--cr-toggle-unchecked-button-color);
opacity: var(--cr-toggle-disabled-opacity);
}
:host-context([chrome-refresh-2023]):host([checked][disabled]) {
--cr-toggle-bar-border: none;
}
#bar {
background-color: var(--cr-toggle-unchecked-bar-color);
border-radius: 8px;
height: 12px;
left: 3px;
position: absolute;
top: 2px;
transition: background-color linear 80ms;
width: 28px;
z-index: 0;
}
:host([checked]) #bar {
background-color: var(--cr-toggle-checked-bar-color);
opacity: var(--cr-toggle-checked-bar-opacity, 0.5);
}
:host-context([chrome-refresh-2023]) #bar {
border: var(--cr-toggle-bar-border);
border-radius: 50px;
box-sizing: border-box;
display: block;
height: 16px;
opacity: 1;
position: initial;
width: var(--cr-toggle-bar-width);
}
:host-context([chrome-refresh-2023]):host(:focus-visible) #bar {
outline: 2px solid var(--cr-toggle-checked-bar-color);
outline-offset: 2px;
}
#knob {
background-color: var(--cr-toggle-unchecked-button-color);
border-radius: 50%;
box-shadow: var(--cr-toggle-box-shadow, 0 1px 3px 0 rgba(0, 0, 0, .4));
display: block;
height: 16px;
position: relative;
transition: transform linear 80ms, background-color linear 80ms;
width: 16px;
z-index: 1;
}
:host([checked]) #knob {
background-color: var(--cr-toggle-checked-button-color);
transform: translate3d(18px, 0, 0);
}
:host-context([dir=rtl]):host([checked]) #knob {
transform: translate3d(-18px, 0, 0);
}
:host-context([chrome-refresh-2023]) #knob {
/* Distance between knob center to the edge of the control is the same
for both checked and unchecked. */
--cr-toggle-knob-center-edge-distance_: 8px;
/* Direction for on/off states
- +1 means 'off' to the left, 'on' to the right, used in LTR.
- -1 means 'off' to the right, 'on' to the left, used in RTL. */
--cr-toggle-knob-direction_: 1;
/* Absolute distance from the center position to either left or
right. */
--cr-toggle-knob-travel-distance_: calc(
0.5 * var(--cr-toggle-bar-width) -
var(--cr-toggle-knob-center-edge-distance_));
/* Positions in the horizontal (x-axis) dimension that the knob can be
in. The center position is only used for calculations, and is never
presented to the user. */
--cr-toggle-knob-position-center_: calc(
0.5 * var(--cr-toggle-bar-width) + -50%);
--cr-toggle-knob-position-start_: calc(
var(--cr-toggle-knob-position-center_) -
var(--cr-toggle-knob-direction_) *
var(--cr-toggle-knob-travel-distance_));
--cr-toggle-knob-position-end_: calc(
var(--cr-toggle-knob-position-center_) +
var(--cr-toggle-knob-direction_) *
var(--cr-toggle-knob-travel-distance_));
box-shadow: none;
height: var(--cr-toggle-knob-diameter);
position: absolute;
top: 50%;
transform: translate(var(--cr-toggle-knob-position-start_), -50%);
transition: transform linear 80ms, background-color linear 80ms,
width linear 80ms, height linear 80ms;
width: var(--cr-toggle-knob-diameter);
}
:host-context([dir=rtl][chrome-refresh-2023]) #knob {
left: 0;
/* Flip the knob's on/off direction for RTL */
--cr-toggle-knob-direction_: -1;
}
:host-context([chrome-refresh-2023]):host([checked]) #knob {
transform: translate(var(--cr-toggle-knob-position-end_), -50%);
}
:host-context([chrome-refresh-2023]):host([checked]:active) #knob,
:host-context([chrome-refresh-2023]):host([checked]:hover) #knob {
--cr-toggle-checked-button-color:
var(--color-toggle-button-thumb-on-hover,
var(--cr-fallback-color-primary-container));
}
:host-context([chrome-refresh-2023]):host(:hover) #knob::before {
background-color: var(--cr-hover-background-color);
border-radius: 50%;
content: '';
height: var(--cr-toggle-ripple-diameter);
left: calc(var(--cr-toggle-knob-diameter) / 2);
position: absolute;
top: calc(var(--cr-toggle-knob-diameter) / 2);
transform: translate(-50%, -50%);
width: var(--cr-toggle-ripple-diameter);
}
paper-ripple {
--paper-ripple-opacity: 1;
color: var(--cr-toggle-unchecked-ripple-color);
height: var(--cr-toggle-ripple-diameter);
left: 50%;
outline: var(--cr-toggle-ripple-ring, none);
pointer-events: none;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
transition: color linear 80ms;
width: var(--cr-toggle-ripple-diameter);
}
:host([checked]) paper-ripple {
color: var(--cr-toggle-checked-ripple-color);
}
:host-context([dir=rtl]) paper-ripple {
left: auto;
right: 50%;
transform: translate(50%, -50%);
}
</style>
<span id="bar"></span>
<span id="knob"></span>
Codebase Browser
chromium