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) • 9.11 kB
CSS
:root{--adui-checkbox-bg: var(--gray-0);--adui-checkbox-border: var(--gray-500);--adui-checkbox-border-hover: var(--gray-600);--adui-checkbox-border-active: var(--primary-color);--adui-checkbox-bg-checked: var(--primary-color);--adui-checkbox-bg-checked-hover: var(--primary-color);--adui-checkbox-bg-checked-active: var(--primary-color);--adui-checkbox-color: var(--adui-color-black-12);--adui-checkbox-color-disabled: var(--adui-color-black-8);--adui-checkbox-border-disabled: var(--adui-color-black-6);--adui-checkbox-bg-disabled: var(--adui-color-black-3);--adui-checkbox-border-checked-disabled: var(--adui-color-brand-2);--adui-checkbox-bg-checked-disabled: var(--adui-color-brand-2);--adui-checkbox-group-spacing-vertical: 16px;--adui-checkbox-group-spacing-horizontal: 24px;--adui-checkbox-size-mn: 14px;--adui-checkbox-indicator-scale-mn: 0.875;--adui-checkbox-spacing-mn: 4px;--adui-checkbox-font-size-mn: var(--font-size-mini);--adui-checkbox-font-leading-mn: 26px;--adui-checkbox-size-sm: 14px;--adui-checkbox-indicator-scale-sm: 0.875;--adui-checkbox-spacing-sm: 6px;--adui-checkbox-font-size-sm: var(--font-size-small);--adui-checkbox-font-leading-sm: 30px;--adui-checkbox-size-md: 16px;--adui-checkbox-indicator-scale-md: 1;--adui-checkbox-spacing-md: 8px;--adui-checkbox-font-size-md: var(--font-size-medium);--adui-checkbox-font-leading-md: 34px;--adui-checkbox-size-lg: 18px;--adui-checkbox-indicator-scale-lg: 1.125;--adui-checkbox-spacing-lg: 8px;--adui-checkbox-font-size-lg: var(--font-size-large);--adui-checkbox-font-leading-lg: 38px}.adui-checkbox-large{--adui-checkbox-font-size: var(--adui-checkbox-font-size-lg);--adui-checkbox-font-leading: var(--adui-checkbox-font-leading-lg);--adui-checkbox-spacing: var(--adui-checkbox-spacing-lg);--adui-checkbox-indicator-scale: var(--adui-checkbox-indicator-scale-lg);--adui-checkbox-size: var(--adui-checkbox-size-lg)}.adui-checkbox-medium{--adui-checkbox-font-size: var(--adui-checkbox-font-size-md);--adui-checkbox-font-leading: var(--adui-checkbox-font-leading-md);--adui-checkbox-spacing: var(--adui-checkbox-spacing-md);--adui-checkbox-indicator-scale: var(--adui-checkbox-indicator-scale-md);--adui-checkbox-size: var(--adui-checkbox-size-md)}.adui-checkbox-small{--adui-checkbox-font-size: var(--adui-checkbox-font-size-sm);--adui-checkbox-font-leading: var(--adui-checkbox-font-leading-sm);--adui-checkbox-spacing: var(--adui-checkbox-spacing-sm);--adui-checkbox-indicator-scale: var(--adui-checkbox-indicator-scale-sm);--adui-checkbox-size: var(--adui-checkbox-size-sm)}.adui-checkbox-mini{--adui-checkbox-font-size: var(--adui-checkbox-font-size-mn);--adui-checkbox-font-leading: var(--adui-checkbox-font-leading-mn);--adui-checkbox-spacing: var(--adui-checkbox-spacing-mn);--adui-checkbox-indicator-scale: var(--adui-checkbox-indicator-scale-mn);--adui-checkbox-size: var(--adui-checkbox-size-mn)}.adui-checkbox-base{--adui-checkbox-indicator-shadow: var(--adui-checkbox-border);display:inline-block;font-size:var(--adui-checkbox-font-size);line-height:var(--adui-checkbox-font-leading)}.adui-checkbox-base:not(.adui-checkbox-disabled){cursor:pointer}.adui-checkbox-base:not(.adui-checkbox-disabled):not(.adui-checkbox-checked):not(.adui-checkbox-indeterminate):hover .adui-checkbox-indicator{--adui-checkbox-indicator-shadow: var(--adui-checkbox-border-hover)}.adui-checkbox-base:not(.adui-checkbox-disabled):not(.adui-checkbox-checked):not(.adui-checkbox-indeterminate):hover:active[data-actived=true] .adui-checkbox-indicator{--adui-checkbox-indicator-shadow: var( --adui-checkbox-border-active )}.adui-checkbox-base:not(.adui-checkbox-disabled):not(.adui-checkbox-checked):not(.adui-checkbox-indeterminate):hover:active[data-actived=true] .adui-checkbox-indicator-inner{transform:rotate(45deg) scale(1);transition:0s ease}.adui-checkbox-base:not(.adui-checkbox-disabled):not(.adui-checkbox-checked):not(.adui-checkbox-indeterminate):hover:active[data-actived=true] .adui-checkbox-indicator-inner::before{background-color:var(--adui-checkbox-bg-checked);transform:scale(1, 1);transition:.1s ease transform}.adui-checkbox-base:not(.adui-checkbox-disabled):not(.adui-checkbox-checked):not(.adui-checkbox-indeterminate):hover:active[data-actived=true] .adui-checkbox-indicator-inner::after{background-color:var(--adui-checkbox-bg-checked);transition:.1s ease background-color}.adui-checkbox-base:not(.adui-checkbox-disabled).adui-checkbox-checked .adui-checkbox-indicator{--adui-checkbox-indicator-shadow: var(--adui-checkbox-bg-checked);background-color:var(--adui-checkbox-bg-checked)}.adui-checkbox-base:not(.adui-checkbox-disabled).adui-checkbox-checked .adui-checkbox-indicator-inner::after{transition:var(--adui-motion-duration-base) var(--adui-motion-ease-base) transform}.adui-checkbox-base:not(.adui-checkbox-disabled).adui-checkbox-checked:hover .adui-checkbox-indicator{--adui-checkbox-indicator-shadow: var( --adui-checkbox-bg-checked-hover );background-color:var(--adui-checkbox-bg-checked-hover)}.adui-checkbox-base:not(.adui-checkbox-disabled).adui-checkbox-checked:hover:active .adui-checkbox-indicator{--adui-checkbox-indicator-shadow: var( --adui-checkbox-bg-checked-active );background-color:var(--adui-checkbox-bg-checked-active);animation:none}.adui-checkbox-base:not(.adui-checkbox-disabled).adui-checkbox-checked:hover:active[data-actived=true] .adui-checkbox-indicator-inner::after{transform:scale(1, 0);transition:var(--adui-motion-duration-base) var(--adui-motion-ease-base) transform}.adui-checkbox-indicator{position:relative;display:inline-block;margin-right:var(--adui-checkbox-spacing);width:var(--adui-checkbox-size);height:var(--adui-checkbox-size);vertical-align:calc(-0.125em - (var(--adui-checkbox-size) - var(--adui-checkbox-font-size))/2);background-color:var(--adui-checkbox-bg);border-radius:2px;box-shadow:0 1px 2px 0 rgba(0,0,0,.1),0 0 0 1px var(--adui-checkbox-indicator-shadow);transition:all var(--adui-motion-ease-base) var(--adui-motion-duration-base);animation:none}.adui-checkbox-indicator-inner{position:absolute;top:calc(50% - 5px);left:calc(50% - 2.5px);width:5px;height:8px;transform:rotate(45deg) scale(0)}.adui-checkbox-indicator-inner::before,.adui-checkbox-indicator-inner::after{content:"";position:absolute;bottom:0;background-color:#fff;transition:var(--adui-motion-duration-base) ease opacity,0s ease var(--adui-motion-duration-base) transform,0s ease var(--adui-motion-duration-base) background-color}.adui-checkbox-indicator-inner::before{left:0;width:100%;height:2px;transform-origin:0 50%;transform:scale(0, 1)}.adui-checkbox-indicator-inner::after{right:0;width:2px;height:100%;transform-origin:50% 100%;transform:scale(1, 0)}.adui-checkbox-helper{margin-left:calc(var(--adui-checkbox-spacing) - 2px);vertical-align:calc(-0.125em - (18px - var(--adui-checkbox-font-size))/2)}.adui-checkbox-group .adui-checkbox-base:not(:last-of-type){margin-right:calc(var(--adui-checkbox-font-leading) - 14px)}.adui-checkbox-noChildren{line-height:0}.adui-checkbox-noChildren .adui-checkbox-indicator{margin-right:0}.adui-checkbox-checked .adui-checkbox-indicator::after{transform:scale(var(--adui-checkbox-indicator-scale))}.adui-checkbox-checked:not([data-actived=true]) .adui-checkbox-indicator{animation:aduiCheckboxIndicatorScale ease var(--adui-motion-duration-base) both}@keyframes aduiCheckboxIndicatorScale{0%{transform:scale(1, 1)}60%{transform:scale(1.05, 1.05)}100%{transform:scale(1, 1)}}.adui-checkbox-checked:not([data-actived=true]):not(.adui-checkbox-indeterminate) .adui-checkbox-indicator-inner{transform:rotate(45deg) scale(1);transition:var(--adui-motion-duration-bounce) var(--adui-motion-ease-bounce) all}.adui-checkbox-checked:not([data-actived=true]):not(.adui-checkbox-indeterminate) .adui-checkbox-indicator-inner::before,.adui-checkbox-checked:not([data-actived=true]):not(.adui-checkbox-indeterminate) .adui-checkbox-indicator-inner::after{transform:scale(1, 1);transition:0s ease all }.adui-checkbox-checked .adui-checkbox-indicator-inner{transform:rotate(45deg) scale(1);transition:0s}.adui-checkbox-checked .adui-checkbox-indicator-inner::before,.adui-checkbox-checked .adui-checkbox-indicator-inner::after{background-color:#fff;transform:scale(1, 1);transition:var(--adui-motion-duration-base) var(--adui-motion-ease-base) transform}.adui-checkbox-indeterminate{--adui-checkbox-indicator-shadow: var(--adui-checkbox-bg-checked)}.adui-checkbox-indeterminate .adui-checkbox-indicator{background-color:var(--adui-checkbox-bg-checked)}.adui-checkbox-indeterminate .adui-checkbox-indicator-inner{position:absolute;top:50%;left:50%;width:10px;height:2px;background-color:#fff;transform:translate(-50%, -50%)}.adui-checkbox-disabled{--adui-checkbox-indicator-shadow: var(--adui-checkbox-border-disabled);cursor:not-allowed}.adui-checkbox-disabled .adui-checkbox-indicator{background-color:rgba(0,0,0,.03);box-shadow:0 0 0 1px rgba(0,0,0,.08)}.adui-checkbox-disabled.adui-checkbox-checked .adui-checkbox-indicator-inner::before,.adui-checkbox-disabled.adui-checkbox-checked .adui-checkbox-indicator-inner::after{background-color:var(--gray-600)}