@alifd/next/lib/switch/variable.css

A configurable component library for web built on React.

:root {
--switch-size-m-width: 56px;
--switch-size-m-radius-container: 20px;
--switch-size-m-trigger: 24px;
--switch-size-m-radius-trigger: 20px;
--switch-size-m-inner-icon: 16px;
--switch-size-m-trigger-padding-l: 8px;
--switch-size-m-trigger-padding-r: 8px;
--switch-size-s-width: 44px;
--switch-size-s-radius-container: 20px;
--switch-size-s-trigger: 20px;
--switch-size-s-radius-trigger: 20px;
--switch-size-s-inner-icon: 12px;
--switch-size-s-trigger-padding-l: 8px;
--switch-size-s-trigger-padding-r: 8px;
--switch-border-width-container: 2px;
--switch-text-on-left: 8px;
--switch-size-s-text-on-left: 4px;
--switch-text-off-right: 8px;
--switch-size-s-text-off-right: 4px;
--switch-border-width-trigger: 1px;
--switch-normal-on-bg-color: #5584FF;
--switch-hover-on-bg-color: #3E71F7;
--switch-disabled-on-bg-color: #EBECF0;
--switch-normal-on-trigger-bg-color: #FFFFFF;
--switch-hover-on-trigger-bg-color: #FFFFFF;
--switch-disabled-on-trigger-bg-color: #F7F8FA;
--switch-normal-on-color-font: #FFFFFF;
--switch-disabled-on-color-font: #CCCCCC;
--switch-disabled-on-border-color: #C4C6CF;
--switch-handle-on-border-color: transparent;
--switch-on-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.12);
--switch-normal-off-bg-color: #EBECF0;
--switch-hover-off-bg-color: #EBECF0;
--switch-disabled-off-bg-color: #EBECF0;
--switch-normal-off-trigger-bg-color: #FFFFFF;
--switch-hover-off-trigger-bg-color: #FFFFFF;
--switch-disabled-off-trigger-bg-color: #F7F8FA;
--switch-handle-disabled-border-color: transparent;
--switch-normal-off-color-font: #999999;
--switch-disabled-off-color-font: #C4C6CF;
--switch-handle-off-border-color: transparent;
--switch-normal-off-border-color: #EBECF0;
--switch-hover-off-border-color: #EBECF0;
--switch-off-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.12);
--switch-rtl-on-shadow: -1px 0px 3px 0px rgba(0, 0, 0, 0.12);
}