@opentiny/vue-theme/switch/index.css

An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.

.tiny-switch{--tv-Switch-on-bg-color:var(--tv-color-bg-active-control, #1476ff);--tv-Switch-off-bg-color:var(--tv-color-bg-control-unactive, #c2c2c2);--tv-Switch-disabled-bg-color:var(--tv-color-bg-disabled-control-unactive, #dbdbdb);--tv-Switch-checked-disabled-bg-color:var(--tv-color-bg-disabled-control-active, #AEAEAE);--tv-Switch-disabled-text-color:var(--tv-color-text-disabled, #c2c2c2);--tv-Switch-disabled-dot-bg-color:var(--tv-color-bg-secondary, #ffffff);--tv-Switch-dot-bg-color:var(--tv-color-bg-inverse, #ffffff);--tv-Switch-dot-size:16px;--tv-Switch-dot-position-left:2px;--tv-Switch-dot-position-top:2px;--tv-Switch-dot-offset:calc(var(--tv-Switch-dot-size) + 2px);--tv-Switch-text-color:var(--tv-color-text-inverse, #ffffff);--tv-Switch-width:40px;--tv-Switch-height:20px;--tv-Switch-border-radius:15px;--tv-Switch-inner-font-size:var(--tv-font-size-sm, 12px);--tv-Switch-inner-border-radius:var(--tv-border-radius-round, 999px);--tv-Switch-text-width:46px;--tv-Switch-mini-height:16px;--tv-Switch-mini-width:32px;--tv-Switch-mini-button-height:12px;--tv-Switch-mini-button-width:12px;--tv-Switch-mini-button-left:18px;--tv-Switch-on-loading-font-size:var(--tv-font-size-sm, 12px);--tv-Switch-on-loading-fill:var(--tv-color-bg-disabled-control-active, #AEAEAE);--tv-Switch-off-loading-font-size:var(--tv-font-size-sm, 12px);--tv-Switch-off-loading-fill:var(--tv-color-bg-disabled-control-unactive, #dbdbdb);--tv-Switch-loading-mini-font-size:8px;display:inline-block;width:var(--tv-Switch-width);height:var(--tv-Switch-height);line-height:var(--tv-Switch-height);border-radius:var(--tv-Switch-border-radius);vertical-align:middle;background-color:var(--tv-Switch-off-bg-color);position:relative;cursor:pointer;outline:0;-webkit-transition:border .2s ease-in-out,background-color .2s ease-in-out;transition:border .2s ease-in-out,background-color .2s ease-in-out}.tiny-switch:focus-visible{outline:2px solid var(--tv-Switch-on-bg-color);outline-offset:1px}.tiny-switch .tiny-switch-inner{color:var(--tv-Switch-text-color);font-size:var(--tv-Switch-inner-font-size);position:absolute}.tiny-switch__text{width:var(--tv-Switch-text-width)}.tiny-switch__text .tiny-switch-inner{left:calc(var(--tv-Switch-dot-size));width:calc(100% - var(--tv-Switch-dot-size));text-align:center;overflow:hidden}.tiny-switch__on-loading{font-size:var(--tv-Switch-on-loading-font-size);fill:var(--tv-Switch-on-loading-fill)}.tiny-switch__off-loading{font-size:var(--tv-Switch-off-loading-font-size);fill:var(--tv-Switch-off-loading-fill)}.tiny-switch__loading-mini{font-size:var(--tv-Switch-loading-mini-font-size)}.tiny-switch.mini{width:var(--tv-Switch-mini-width);height:var(--tv-Switch-mini-height)}.tiny-switch.disabled,.tiny-switch.tiny-switch-checked.disabled{cursor:not-allowed;background:var(--tv-Switch-disabled-bg-color);border-color:var(--tv-Switch-disabled-bg-color)}.tiny-switch.disabled:after,.tiny-switch.tiny-switch-checked.disabled:after{cursor:not-allowed}.tiny-switch.tiny-switch-checked.disabled{background:var(--tv-Switch-checked-disabled-bg-color)}.tiny-switch__button{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;content:'';width:var(--tv-Switch-dot-size);height:var(--tv-Switch-dot-size);border-radius:50%;background-color:var(--tv-Switch-dot-bg-color);position:absolute;left:var(--tv-Switch-dot-position-left);top:var(--tv-Switch-dot-position-top);cursor:pointer;-webkit-transition:left .2s ease-in-out,width .2s ease-in-out;transition:left .2s ease-in-out,width .2s ease-in-out}.tiny-switch.mini .tiny-switch__button{height:var(--tv-Switch-mini-button-height);width:var(--tv-Switch-mini-button-width)}.tiny-switch.tiny-switch-checked{background-color:var(--tv-Switch-on-bg-color)}.tiny-switch.tiny-switch-checked .tiny-switch-inner{left:2px;width:calc(100% - var(--tv-Switch-dot-size));text-align:center;overflow:hidden}.tiny-switch.tiny-switch-checked .tiny-switch__button{left:calc(100% - var(--tv-Switch-dot-offset))}.tiny-switch.tiny-switch-checked.tiny-switch.mini .tiny-switch__button{left:var(--tv-Switch-mini-button-left)}.disabled .tiny-switch__button{background-color:var(--tv-color-bg-inverse-disabled)}