react-toolbox/components/switch/config.css

25 lines
1.2 KiB
CSS

:root {
--switch-color: var(--color-primary);
--switch-text-color: var(--color-black);
--switch-thumb-off-color: var(--palette-grey-50);
--switch-track-on-color: color(var(--color-primary) a(50%));
--switch-track-off-color: color(var(--color-black) a(26%));
--switch-off-ripple-color: color(var(--color-black) a(40%));
--switch-on-focus-color: color(var(--color-primary) a(26%));
--switch-off-focus-color: color(var(--color-black) a(10%));
--switch-disabled-thumb-color: var(--palette-grey-400);
--switch-disabled-track-color: color(var(--color-black) a(12%));
--switch-disabled-text-color: color(var(--color-black) a(26%));
--switch-total-height: calc(2.4 * var(--unit));
--switch-track-length: calc(3.6 * var(--unit));
--switch-track-height: calc(1.4 * var(--unit));
--switch-thumb-size: calc(2 * var(--unit));
--switch-thumb-on-color: var(--switch-color);
--switch-focus-init-size: calc(0.8 * var(--unit));
--switch-focus-size: calc(var(--switch-total-height) * 2);
--switch-focus-diff: calc((var(--switch-focus-size) - var(--switch-focus-init-size)) / 2);
--switch-ripple-duration: 650ms;
--switch-font-size: var(--font-size-small);
--switch-field-margin-bottom: calc(1.5 * var(--unit));
}