adui
Version:
<div> <img src="https://wxa.wxs.qq.com/mpweb/delivery/legacy/wxadtouch/upload/t1/od834zef_52939fc6.png" style="margin:40px 0 0 -8px; background-color: #fcfcfc; box-shadow: none;" /> </div>
2 lines (1 loc) • 3.19 kB
CSS
:root{--adui-switch-width-lg: 44px;--adui-switch-indicator-size-lg: 22px;--adui-switch-font-size-lg: var(--font-size-large);--adui-switch-width-md: 34px;--adui-switch-indicator-size-md: 16px;--adui-switch-font-size-md: var(--font-size-medium);--adui-switch-width-sm: 28px;--adui-switch-indicator-size-sm: 12px;--adui-switch-font-size-sm: var(--font-size-small);--adui-switch-width-mn: 24px;--adui-switch-indicator-size-mn: 10px;--adui-switch-font-size-mn: var(--font-size-mini)}.adui-switch-wrapper{display:inline-block;font-size:var(--adui-switch-font-size);cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.adui-switch-wrapper:hover .adui-switch-base{background-color:rgba(0,0,0,.2)}.adui-switch-wrapper[data-actived=true] .adui-switch-indicator{transition:var(--adui-motion-duration-base) var(--adui-motion-ease-base) all}.adui-switch-wrapper[data-actived=true]:hover:active .adui-switch-indicator{inset:2px calc(100% - var(--adui-switch-indicator-size) - 8px) 2px 2px}.adui-switch-checked:hover .adui-switch-base{background-color:var(--primary-color)}.adui-switch-checked[data-actived=true]:hover:active .adui-switch-indicator{inset:2px 2px 2px calc(100% - var(--adui-switch-indicator-size) - 8px)}.adui-switch-checked .adui-switch-base{background-color:var(--primary-color)}.adui-switch-checked .adui-switch-indicator{inset:2px 2px 2px calc(100% - var(--adui-switch-indicator-size) - 2px)}.adui-switch-disabled{cursor:not-allowed}.adui-switch-disabled .adui-switch-base{opacity:.5}.adui-switch-disabled .adui-switch-indicator{opacity:.9}.adui-switch-disabled .adui-switch-text{color:var(--gray-700)}.adui-switch-base{position:relative;display:inline-block;width:var(--adui-switch-width);height:calc(var(--adui-switch-indicator-size) + 4px);vertical-align:calc(-0.125em - (var(--adui-switch-indicator-size) + 4px - var(--adui-switch-font-size))/2);background-color:rgba(0,0,0,.12);border-radius:14px;transition:var(--adui-motion-duration-base) var(--adui-motion-ease-base) all}.adui-switch-indicator{position:absolute;inset:2px calc(100% - var(--adui-switch-indicator-size) - 2px) 2px 2px;background-color:#fff;border-radius:var(--adui-switch-indicator-size);box-shadow:0 2px 4px 0 rgba(0,0,0,.05),0 5px 10px 0 rgba(0,0,0,.04),0 0 0 1px rgba(0,0,0,.03);transition:var(--adui-motion-duration-bounce) var(--adui-motion-ease-bounce) all}.adui-switch-text{margin-left:8px}.adui-switch-large{--adui-switch-width: var(--adui-switch-width-lg);--adui-switch-font-size: var(--adui-switch-font-size-lg);--adui-switch-indicator-size: var(--adui-switch-indicator-size-lg)}.adui-switch-medium{--adui-switch-width: var(--adui-switch-width-md);--adui-switch-font-size: var(--adui-switch-font-size-md);--adui-switch-indicator-size: var(--adui-switch-indicator-size-md)}.adui-switch-small{--adui-switch-width: var(--adui-switch-width-sm);--adui-switch-font-size: var(--adui-switch-font-size-sm);--adui-switch-indicator-size: var(--adui-switch-indicator-size-sm)}.adui-switch-mini{--adui-switch-width: var(--adui-switch-width-mn);--adui-switch-font-size: var(--adui-switch-font-size-mn);--adui-switch-indicator-size: var(--adui-switch-indicator-size-mn)}