song-ui-u/theme/switch.css

vue3 + js的PC前端组件库

@charset "UTF-8";:root{--x-switch-height-small:24px;--x-switch-height-default:28px;--x-switch-height-large:32px;--x-switch-width-small:40px;--x-switch-width-default:48px;--x-switch-width-large:56px}.x-switch{--x-switch-text-color:var(--x-text-color-primary);--x-switch-bg-color:var(--x-neutral-color-light-6);--x-switch-disabled-text-color:var(--x-text-color-disabled);--x-switch-disabled-bg-color:var(--x-color-disabled-bg);--x-switch-checked-text-color:var(--x-color-white);--x-switch-checked-bg-color:var(--x-color-primary);--x-switch-width:var(--x-switch-width-default);--x-switch-height:var(--x-switch-height-default);--x-switch-font-size:var(--x-font-size-default);display:inline-flex;align-items:center;cursor:pointer}.x-switch input{display:none}.x-switch__input{height:var(--x-switch-height);width:var(--x-switch-width);border-radius:var(--x-component-round-round);background-color:var(--x-switch-bg-color);transition:var(--x-transition)}.x-switch__input.is-disabled,.x-switch__input.is-loading{--x-switch-bg-color:var(--x-switch-disabled-bg-color);--x-switch-text-color:var(--x-switch-disabled-text-color);cursor:not-allowed}.x-switch__handel{position:relative;display:block;width:100%;height:100%;border-radius:var(--x-component-round-round);padding:4px;box-sizing:border-box}.x-switch__button{display:flex;align-items:center;justify-content:center;position:absolute;top:4px;left:4px;z-index:10;width:calc(var(--x-switch-height) - 8px);height:calc(var(--x-switch-height) - 8px);border:none;padding:0;margin:0;background-color:#fff;border-radius:var(--x-component-round-round);outline:0;transition:var(--x-transition);box-shadow:0 0 5px 0 rgba(0,0,0,.05);font-size:var(--x-switch-font-size);color:var(--x-text-color-primary);cursor:inherit}.x-switch__button>i{transform:scale(.8)}.x-switch__button.is-checked{left:50%}.x-switch__button.is-disabled{color:var(--x-text-color-disabled)}.x-switch__inner{width:100%;height:100%;display:flex;align-items:center;overflow:hidden;color:var(--x-switch-text-color)}.x-switch__inner>span{width:50%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;transition:var(--x-transition);font-size:var(--x-switch-font-size)}.x-switch__inner>span>span{line-height:1}.x-switch__inner.transition-scale>span{transform:scale(0)}.x-switch__inner.transition-scale>span.is-checked{transform:scale(1)}.x-switch__inner.transition-slide>span:first-child{transform:translateX(-100%)}.x-switch__inner.transition-slide>span:first-child.is-checked{transform:translateX(0)}.x-switch__inner.transition-slide>span:first-child.is-checked+span{transform:translateX(100%)}.x-switch--size_small{--x-switch-font-size:var(--x-font-size-small);--x-switch-height:var(--x-switch-height-small);--x-switch-width:var(--x-switch-width-small)}.x-switch--size_default{--x-switch-font-size:var(--x-font-size-default);--x-switch-height:var(--x-switch-height-default);--x-switch-width:var(--x-switch-width-default)}.x-switch--size_large{--x-switch-font-size:var(--x-font-size-large);--x-switch-height:var(--x-switch-height-large);--x-switch-width:var(--x-switch-width-large)}.x-switch--primary.is-checked{--x-switch-text-color:var(--x-color-white);--x-switch-bg-color:var(--x-color-primary);--x-switch-disabled-text-color:var(--x-color-white);--x-switch-disabled-bg-color:var(--x-color-primary-light-5);--x-switch-checked-text-color:var(--x-color-white);--x-switch-checked-bg-color:var(--x-color-primary)}.x-switch--primary.is-disabled{--x-switch-bg-color:var(--x-switch-disabled-bg-color)}.x-switch--success.is-checked{--x-switch-text-color:var(--x-color-white);--x-switch-bg-color:var(--x-color-success);--x-switch-disabled-text-color:var(--x-color-white);--x-switch-disabled-bg-color:var(--x-color-success-light-5);--x-switch-checked-text-color:var(--x-color-white);--x-switch-checked-bg-color:var(--x-color-success)}.x-switch--success.is-disabled{--x-switch-bg-color:var(--x-switch-disabled-bg-color)}.x-switch--warning.is-checked{--x-switch-text-color:var(--x-color-white);--x-switch-bg-color:var(--x-color-warning);--x-switch-disabled-text-color:var(--x-color-white);--x-switch-disabled-bg-color:var(--x-color-warning-light-5);--x-switch-checked-text-color:var(--x-color-white);--x-switch-checked-bg-color:var(--x-color-warning)}.x-switch--warning.is-disabled{--x-switch-bg-color:var(--x-switch-disabled-bg-color)}.x-switch--error.is-checked{--x-switch-text-color:var(--x-color-white);--x-switch-bg-color:var(--x-color-error);--x-switch-disabled-text-color:var(--x-color-white);--x-switch-disabled-bg-color:var(--x-color-error-light-5);--x-switch-checked-text-color:var(--x-color-white);--x-switch-checked-bg-color:var(--x-color-error)}.x-switch--error.is-disabled{--x-switch-bg-color:var(--x-switch-disabled-bg-color)}