comic-plus

Version:

1 lines • 2.83 kB

CSS

.cu-switch{font-size:14px;color:var(--cu-text-color);cursor:pointer;display:inline-flex;align-items:center;vertical-align:middle;--cu-switch-on-color:var(--cu-color-primary);--cu-switch-off-color:var(--cu-background-color);--cu-switch-on-disabled:var(--cu-color-primary-light5);--cu-switch-off-disabled:var(--cu-background-color-disabled);--cu-switch-size:20px;--cu-switch-inner-size:16px;--cu-switch-active-size:22px}.cu-switch>input{display:none;width:0;height:0;opacity:0;z-index:-1}.cu-switch.large{--cu-switch-size:24px;--cu-switch-inner-size:20px;--cu-switch-active-size:26px}.cu-switch.small{--cu-switch-size:16px;--cu-switch-inner-size:12px;--cu-switch-active-size:18px;font-size:12px}.cu-switch.small .cu-switch__text{font-size:10px}.cu-switch>span{display:inline-block;vertical-align:middle;white-space:nowrap;line-height:1}.cu-switch__container{display:flex;width:100%;min-width:calc(var(--cu-switch-size) * 2);height:var(--cu-switch-size);border:1px solid transparent;border-radius:calc(var(--cu-switch-size)/ 2);position:relative;background-color:var(--cu-switch-off-color);transition:all .2s}.cu-switch.is-on .cu-switch__text{padding-right:var(--cu-switch-size)}.cu-switch.is-off .cu-switch__text{padding-left:var(--cu-switch-size)}.cu-switch .cu-switch__text{display:flex;flex:auto;width:100%;align-items:center;font-size:12px;color:#fff;padding:0 4px;transition:all .2s;box-sizing:border-box}.cu-switch .cu-switch__text>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1}.cu-switch__inner{position:absolute;top:1px;display:block;width:var(--cu-switch-inner-size);height:var(--cu-switch-inner-size);border:inherit;border-radius:inherit;background-color:#fff;transition:all .2s;box-sizing:border-box;display:flex;align-items:center;justify-content:center;color:var(--cu-text-color-light4)}.cu-switch.is-square .cu-switch__container{border-radius:calc(var(--cu-border-radius) - 1px)}.cu-switch:not(.is-disabled):active .cu-switch__inner{width:var(--cu-switch-active-size)}.cu-switch.is-on:not(.is-disabled):active .cu-switch__inner{left:calc(100% - var(--cu-switch-active-size) - 2px)}.cu-switch .cu-switch__label--on{margin-left:6px}.cu-switch .cu-switch__label--off{margin-right:6px}.cu-switch.is-on .cu-switch__inner{left:calc(100% - var(--cu-switch-inner-size) - 2px);transform-origin:right}.cu-switch.is-off .cu-switch__inner{left:2px;transform-origin:left}.cu-switch.is-on .cu-switch__container{background-color:var(--cu-switch-on-color)}.cu-switch.is-disabled .cu-switch__container{background-color:var(--cu-switch-off-disabled)}.cu-switch.is-on.is-disabled .cu-switch__container{background-color:var(--cu-switch-on-disabled)}.cu-switch.is-on .cu-switch__label--on,.cu-switch:not(.is-on) .cu-switch__label--off{color:var(--cu-color-primary)}.cu-switch.is-disabled{cursor:no-drop}