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) • 4.07 kB
CSS
.adui-radio-base{display:inline-block;font-size:var(--font-size-medium);line-height:36px}.adui-radio-base:not(.adui-radio-disabled){cursor:pointer}.adui-radio-base:not(.adui-radio-disabled):not(.adui-radio-checked):hover .adui-radio-indicator{background-color:var(--gray-100);box-shadow:0 1px 2px 0 rgba(0,0,0,.1),0 0 0 1px var(--gray-600)}.adui-radio-base:not(.adui-radio-disabled):not(.adui-radio-checked):hover:active .adui-radio-indicator{box-shadow:0 1px 2px 0 rgba(0,0,0,.1),0 0 0 1px var(--primary-color)}.adui-radio-base:not(.adui-radio-disabled).adui-radio-checked:not([data-actived=true]):active .adui-radio-indicator{animation:none}.adui-radio-base:not(.adui-radio-disabled).adui-radio-checked:not([data-actived=true]) .adui-radio-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-radio-base:not(.adui-radio-disabled).adui-radio-checked:not([data-actived=true]) .adui-radio-indicator::after{transition:transform var(--adui-motion-duration-bounce) var(--adui-motion-ease-bounce)}.adui-radio-base:not(.adui-radio-disabled).adui-radio-checked:hover:active[data-actived=true] .adui-radio-indicator::after{transform:scale(0.8)}.adui-radio-base:not(.adui-radio-disabled).adui-radio-checked .adui-radio-indicator{background-color:var(--primary-color);box-shadow:0 1px 2px 0 rgba(0,0,0,.1),0 0 0 1px rgba(0,0,0,.15),0 0 0 1px var(--primary-color)}.adui-radio-base:not(.adui-radio-disabled).adui-radio-checked .adui-radio-indicator::after{transform:scale(1)}.adui-radio-base.adui-radio-disabled{cursor:not-allowed;color:var(--gray-700)}.adui-radio-base.adui-radio-disabled .adui-radio-indicator{background-color:rgba(0,0,0,.03);box-shadow:0 0 0 1px rgba(0,0,0,.08)}.adui-radio-base.adui-radio-disabled.adui-radio-checked .adui-radio-indicator::after{background-color:var(--gray-600);transform:scale(1)}.adui-radio-base.adui-radio-noChildren .adui-radio-indicator{margin-right:0}.adui-radio-indicator{position:relative;display:inline-block;vertical-align:calc(-0.125em - (16px - var(--font-size-medium))/2);margin-right:6px;width:16px;height:16px;line-height:1;background-color:var(--gray-50);border-radius:100%;box-shadow:0 1px 2px 0 rgba(0,0,0,.1),0 0 0 1px var(--gray-500);transition:background-color var(--adui-motion-duration-base) var(--adui-motion-ease-base),box-shadow var(--adui-motion-duration-base) var(--adui-motion-ease-base)}.adui-radio-indicator::after{content:"";position:absolute;top:50%;left:50%;margin-top:-3px;margin-left:-3px;width:6px;height:6px;background-color:#fff;border-radius:100%;transform:scale(0);transition:transform var(--adui-motion-duration-base) var(--adui-motion-ease-base)}.adui-radio-helper{margin-left:4px;vertical-align:-4px}.adui-radio-large{font-size:var(--font-size-large);line-height:42px}.adui-radio-large .adui-radio-indicator{vertical-align:calc(-0.125em - (18px - var(--font-size-large))/2);margin-right:8px;width:18px;height:18px}.adui-radio-large .adui-radio-helper{vertical-align:-1px}.adui-radio-small{font-size:var(--font-size-small);line-height:30px}.adui-radio-small .adui-radio-indicator{margin-right:4px;vertical-align:calc(-0.125em - (14px - var(--font-size-small))/2);width:14px;height:14px}.adui-radio-small .adui-radio-helper{vertical-align:-4px}.adui-radio-mini{font-size:var(--font-size-mini);line-height:26px}.adui-radio-mini .adui-radio-indicator{margin-right:4px;vertical-align:calc(-0.125em - (14px - var(--font-size-mini))/2);width:14px;height:14px}.adui-radio-mini .adui-radio-helper{vertical-align:-4px}.adui-radio-group{display:flex;align-items:center;flex-wrap:wrap}.adui-radio-group .adui-radio-base:not(:last-of-type).adui-radio-mini{margin-right:12px}.adui-radio-group .adui-radio-base:not(:last-of-type).adui-radio-small{margin-right:16px}.adui-radio-group .adui-radio-base:not(:last-of-type).adui-radio-medium{margin-right:20px}.adui-radio-group .adui-radio-base:not(:last-of-type).adui-radio-large{margin-right:24px}