@varlet/ui/es/switch/switch.css

A Vue3 component library based on Material Design 2 and 3, supporting mobile and desktop.

:root { --switch-width: 40px; --switch-height: 24px; --switch-track-width: 38px; --switch-track-height: 14.4px; --switch-track-border-radius: calc(20px * 2 / 3); --switch-track-background: #fff; --switch-track-active-background: var(--color-primary); --switch-track-error-background: var(--color-danger); --switch-handle-width: 20px; --switch-handle-height: 20px; --switch-handle-background: var(--color-on-primary); --switch-handle-color: var(--color-primary); --switch-handle-active-color: var(--color-on-primary); --switch-handle-active-background: var(--color-primary); --switch-handle-error-background: var(--color-danger); --switch-ripple-color: var(--color-primary); --switch-ripple-size: 40px; --switch-ripple-left: -10px; --switch-ripple-active-left: 10px; --switch-loading-size: 16px; --switch-disabled-opacity: var(--opacity-disabled); --switch-variant-width: 52px; --switch-variant-height: 32px; --switch-variant-track-border-color: #888; --switch-variant-track-background: var(--color-surface-container-highest); --switch-variant-handle-width: 24px; --switch-variant-handle-height: 24px; --switch-variant-handle-color: var(--color-on-primary); --switch-variant-handle-active-color: var(--color-primary); --switch-variant-handle-background: #888; --switch-variant-handle-active-background: var(--color-on-primary); --switch-variant-ripple-left: -4px; --switch-variant-ripple-active-left: 16px;}.var-switch { display: inline-block;}.var-switch__block { position: relative; display: flex; cursor: pointer; -webkit-tap-highlight-color: transparent; align-items: center; justify-content: center; width: var(--switch-width); height: var(--switch-height); transition: filter 0.25s;}.var-switch--disabled { filter: opacity(var(--switch-disabled-opacity)); cursor: not-allowed;}.var-switch__track { width: var(--switch-track-width); height: var(--switch-track-height); border-radius: var(--switch-track-border-radius); background-color: var(--switch-track-background); transition: background-color 0.25s; filter: opacity(var(--switch-disabled-opacity));}.var-switch__track--active { background-color: var(--switch-track-active-background);}.var-switch__track--error { background-color: var(--switch-track-error-background) !important;}.var-switch__ripple { position: absolute; display: flex; align-items: center; justify-content: center; color: var(--switch-ripple-color); border-radius: 50%; overflow: hidden; outline: none; transition: 0.3s var(--cubic-bezier); width: var(--switch-ripple-size); height: var(--switch-ripple-size); left: var(--switch-ripple-left);}.var-switch__ripple--active { left: var(--switch-ripple-active-left);}.var-switch__handle { border-radius: 50%; background-color: var(--switch-handle-background); display: flex; align-items: center; justify-content: center; color: var(--switch-handle-color); transition: background-color 0.25s; width: var(--switch-handle-width); height: var(--switch-handle-height); outline: none;}.var-switch__handle--active { background-color: var(--switch-handle-active-background); color: var(--switch-handle-active-color);}.var-switch__handle--error { background-color: var(--switch-handle-error-background) !important;}.var-switch--variant .var-switch__block { width: var(--switch-variant-width); height: var(--switch-variant-height);}.var-switch--variant .var-switch__block:active .var-switch__handle { transform: scale(1.16666667);}.var-switch--variant .var-switch__track { width: 100%; height: 100%; border-radius: calc(var(--switch-variant-height) / 2); background-color: var(--switch-variant-track-background); border: 2px solid var(--switch-variant-track-border-color); filter: none;}.var-switch--variant .var-switch__track--active { background-color: var(--switch-track-active-background); border: none;}.var-switch--variant .var-switch__ripple { left: var(--switch-variant-ripple-left);}.var-switch--variant .var-switch__ripple--active { left: var(--switch-variant-ripple-active-left);}.var-switch--variant .var-switch__handle { width: var(--switch-variant-handle-width); height: var(--switch-variant-handle-height); color: var(--switch-variant-handle-color); transform: scale(0.66666667); background-color: var(--switch-variant-handle-background); transition: transform 0.2s;}.var-switch--variant .var-switch__handle--active { color: var(--switch-variant-handle-active-color); background-color: var(--switch-variant-handle-active-background); transform: none;}.var-switch--variant .var-switch--disabled:active .var-switch__handle { transform: none;}.var-switch__loading { display: inline-block; width: var(--switch-loading-size); height: var(--switch-loading-size); animation: circle 1.8s linear infinite;}.var-switch__loading svg { display: block; width: 100%; height: 100%;}.var-switch__loading svg circle { animation: circular 1.5s ease-in-out infinite; stroke: currentColor; stroke-width: 3; stroke-linecap: round;}@keyframes circle { from { transform: rotate(0deg); } to { transform: rotate(360deg); }}@keyframes circular { 0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; } 50% { stroke-dasharray: 90, 150; stroke-dashoffset: -40; } 100% { stroke-dasharray: 90, 150; stroke-dashoffset: -120; }}