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) • 15.2 kB
CSS
.adui-button-base{position:relative;display:inline-block;margin-left:0;margin-right:0;padding-top:0;padding-bottom:0;white-space:nowrap;border:none;border-radius:4px;text-decoration:none;outline:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;transition:color var(--adui-motion-duration-base) var(--adui-motion-ease-base),background-color var(--adui-motion-duration-base) var(--adui-motion-ease-base),background-image var(--adui-motion-duration-base) var(--adui-motion-ease-base),box-shadow var(--adui-motion-duration-base) var(--adui-motion-ease-base)}.adui-button-base:not(.adui-button-light).adui-button-normal .adui-button-spinner{background-color:#fff}.adui-button-base:not(.adui-button-light).adui-button-primary .adui-button-spinner{background-color:var(--primary-color)}.adui-button-base:not(.adui-button-light).adui-button-success .adui-button-spinner{background-color:var(--ad-green)}.adui-button-base:not(.adui-button-light).adui-button-warning .adui-button-spinner{background-color:var(--ad-orange)}.adui-button-base:not(.adui-button-light).adui-button-danger .adui-button-spinner{background-color:var(--ad-red)}.adui-button-content{display:inline-block;max-width:100%}.adui-button-spinner{position:absolute;top:0;left:0;z-index:2;display:flex;width:100%;height:100%;align-items:center;justify-content:center;border-radius:4px}.adui-button-mini{padding-left:8px;padding-right:8px;height:26px;font-size:var(--font-size-mini);line-height:26px}.adui-button-mini.adui-button-hasLeftIcon{padding-left:4px}.adui-button-mini.adui-button-hasRightIcon{padding-right:4px}.adui-button-mini .adui-button-leftIcon,.adui-button-mini .adui-button-rightIcon{vertical-align:calc(-0.125em - (18px - var(--font-size-mini))/2)}.adui-button-small{padding-left:10px;padding-right:10px;height:30px;font-size:var(--font-size-small);line-height:30px}.adui-button-small.adui-button-hasLeftIcon{padding-left:6px}.adui-button-small.adui-button-hasRightIcon{padding-right:6px}.adui-button-small .adui-button-leftIcon,.adui-button-small .adui-button-rightIcon{vertical-align:calc(-0.125em - (18px - var(--font-size-small))/2)}.adui-button-medium{padding-left:13px;padding-right:13px;height:36px;font-size:var(--font-size-medium);line-height:36px}.adui-button-medium.adui-button-hasLeftIcon{padding-left:9px}.adui-button-medium.adui-button-hasRightIcon{padding-right:9px}.adui-button-medium .adui-button-leftIcon,.adui-button-medium .adui-button-rightIcon{vertical-align:calc(-0.125em - (18px - var(--font-size-medium))/2)}.adui-button-large{padding-left:16px;padding-right:16px;height:42px;font-size:var(--font-size-large);line-height:42px}.adui-button-large.adui-button-hasLeftIcon{padding-left:12px}.adui-button-large.adui-button-hasRightIcon{padding-right:12px}.adui-button-large .adui-button-leftIcon,.adui-button-large .adui-button-rightIcon{vertical-align:calc(-0.125em - (18px - var(--font-size-large))/2)}.adui-button-normal:not(.adui-button-disabled).adui-button-light{font-weight:500;color:var(--gray-800);background-color:rgba(0,0,0,0)}.adui-button-normal:not(.adui-button-disabled).adui-button-light .adui-button-leftIcon,.adui-button-normal:not(.adui-button-disabled).adui-button-light .adui-button-rightIcon{fill:currentColor}.adui-button-normal:not(.adui-button-disabled).adui-button-light::after{opacity:0;content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--gray-800);border-radius:4px;transform:scale(0.92);transition:var(--adui-motion-duration-bounce) var(--adui-motion-ease-bounce) all}.adui-button-normal:not(.adui-button-disabled).adui-button-light:hover{color:var(--gray-900)}.adui-button-normal:not(.adui-button-disabled).adui-button-light:hover::after{opacity:.1;transform:scale(1)}.adui-button-normal:not(.adui-button-disabled).adui-button-light.adui-button-active,.adui-button-normal:not(.adui-button-disabled).adui-button-light:active{color:var(--gray-900)}.adui-button-normal:not(.adui-button-disabled).adui-button-light.adui-button-active::after,.adui-button-normal:not(.adui-button-disabled).adui-button-light:active::after{opacity:.2;transform:scale(1)}.adui-button-normal:not(.adui-button-disabled):not(.adui-button-light){color:var(--gray-900);background-color:#fff;box-shadow:0 3px 6px rgba(0,0,0,.01),0 0 0 1px #ddd}.adui-button-normal:not(.adui-button-disabled):not(.adui-button-light) .adui-button-leftIcon,.adui-button-normal:not(.adui-button-disabled):not(.adui-button-light) .adui-button-rightIcon{fill:var(--gray-800)}.adui-button-normal:not(.adui-button-disabled):not(.adui-button-light):hover{background-color:var(--gray-100);box-shadow:0 3px 5px rgba(0,0,0,.03),0 0 0 1px #ddd}.adui-button-normal:not(.adui-button-disabled):not(.adui-button-light):hover:active{background-color:var(--gray-100);box-shadow:inset 0 2px 2px rgba(0,0,0,.04),0 0 0 1px #ddd}.adui-button-normal:not(.adui-button-disabled):not(.adui-button-light).adui-button-active{background-color:var(--gray-100);box-shadow:inset 0 2px 2px rgba(0,0,0,.04),0 0 0 1px #ddd}.adui-button-primary:not(.adui-button-disabled).adui-button-light{font-weight:500;color:var(--primary-color);background-color:rgba(0,0,0,0)}.adui-button-primary:not(.adui-button-disabled).adui-button-light .adui-button-leftIcon,.adui-button-primary:not(.adui-button-disabled).adui-button-light .adui-button-rightIcon{fill:currentColor}.adui-button-primary:not(.adui-button-disabled).adui-button-light::after{opacity:0;content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--primary-color);border-radius:4px;transform:scale(0.92);transition:var(--adui-motion-duration-bounce) var(--adui-motion-ease-bounce) all}.adui-button-primary:not(.adui-button-disabled).adui-button-light:hover::after{opacity:.1;transform:scale(1)}.adui-button-primary:not(.adui-button-disabled).adui-button-light.adui-button-active::after,.adui-button-primary:not(.adui-button-disabled).adui-button-light:active::after{opacity:.2;transform:scale(1)}.adui-button-primary:not(.adui-button-disabled):not(.adui-button-light){font-weight:500;color:#fff;background-color:var(--primary-color);box-shadow:0 0 0 1px rgba(0,0,0,.15),0 2px 4px 0 rgba(0,0,0,.1),0 0 0 1px var(--primary-color)}.adui-button-primary:not(.adui-button-disabled):not(.adui-button-light) .adui-button-leftIcon,.adui-button-primary:not(.adui-button-disabled):not(.adui-button-light) .adui-button-rightIcon{fill:#fff}.adui-button-primary:not(.adui-button-disabled):not(.adui-button-light):hover{background-image:linear-gradient(-180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.05) 100%);box-shadow:0 0 0 1px rgba(0,0,0,.15),0 2px 4px 0 rgba(0,0,0,.1),0 0 0 1px var(--primary-color)}.adui-button-primary:not(.adui-button-disabled):not(.adui-button-light):hover:active{background-image:linear-gradient(-180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.15) 100%);box-shadow:inset 0 1px 2px 0 rgba(0,0,0,.04),0 0 0 1px rgba(0,0,0,.3),0 0 0 1px var(--primary-color)}.adui-button-primary:not(.adui-button-disabled):not(.adui-button-light).adui-button-active{background-image:linear-gradient(-180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.15) 100%);box-shadow:inset 0 1px 2px 0 rgba(0,0,0,.04),0 0 0 1px rgba(0,0,0,.3),0 0 0 1px var(--primary-color)}.adui-button-success:not(.adui-button-disabled).adui-button-light{font-weight:500;color:var(--ad-green);background-color:rgba(0,0,0,0)}.adui-button-success:not(.adui-button-disabled).adui-button-light .adui-button-leftIcon,.adui-button-success:not(.adui-button-disabled).adui-button-light .adui-button-rightIcon{fill:currentColor}.adui-button-success:not(.adui-button-disabled).adui-button-light::after{opacity:0;content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--ad-green);border-radius:4px;transform:scale(0.92);transition:var(--adui-motion-duration-bounce) var(--adui-motion-ease-bounce) all}.adui-button-success:not(.adui-button-disabled).adui-button-light:hover::after{opacity:.1;transform:scale(1)}.adui-button-success:not(.adui-button-disabled).adui-button-light.adui-button-active::after,.adui-button-success:not(.adui-button-disabled).adui-button-light:active::after{opacity:.2;transform:scale(1)}.adui-button-success:not(.adui-button-disabled):not(.adui-button-light){font-weight:500;color:#fff;background-color:var(--ad-green);box-shadow:0 0 0 1px rgba(0,0,0,.15),0 2px 4px 0 rgba(0,0,0,.1),0 0 0 1px var(--ad-green)}.adui-button-success:not(.adui-button-disabled):not(.adui-button-light) .adui-button-leftIcon,.adui-button-success:not(.adui-button-disabled):not(.adui-button-light) .adui-button-rightIcon{fill:#fff}.adui-button-success:not(.adui-button-disabled):not(.adui-button-light):hover{background-image:linear-gradient(-180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.05) 100%);box-shadow:0 0 0 1px rgba(0,0,0,.15),0 2px 4px 0 rgba(0,0,0,.1),0 0 0 1px var(--ad-green)}.adui-button-success:not(.adui-button-disabled):not(.adui-button-light):hover:active{background-image:linear-gradient(-180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.15) 100%);box-shadow:inset 0 1px 2px 0 rgba(0,0,0,.04),0 0 0 1px rgba(0,0,0,.3),0 0 0 1px var(--ad-green)}.adui-button-success:not(.adui-button-disabled):not(.adui-button-light).adui-button-active{background-image:linear-gradient(-180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.15) 100%);box-shadow:inset 0 1px 2px 0 rgba(0,0,0,.04),0 0 0 1px rgba(0,0,0,.3),0 0 0 1px var(--ad-green)}.adui-button-warning:not(.adui-button-disabled).adui-button-light{font-weight:500;color:var(--ad-orange);background-color:rgba(0,0,0,0)}.adui-button-warning:not(.adui-button-disabled).adui-button-light .adui-button-leftIcon,.adui-button-warning:not(.adui-button-disabled).adui-button-light .adui-button-rightIcon{fill:currentColor}.adui-button-warning:not(.adui-button-disabled).adui-button-light::after{opacity:0;content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--ad-orange);border-radius:4px;transform:scale(0.92);transition:var(--adui-motion-duration-bounce) var(--adui-motion-ease-bounce) all}.adui-button-warning:not(.adui-button-disabled).adui-button-light:hover::after{opacity:.1;transform:scale(1)}.adui-button-warning:not(.adui-button-disabled).adui-button-light.adui-button-active::after,.adui-button-warning:not(.adui-button-disabled).adui-button-light:active::after{opacity:.2;transform:scale(1)}.adui-button-warning:not(.adui-button-disabled):not(.adui-button-light){font-weight:500;color:#fff;background-color:var(--ad-orange);box-shadow:0 0 0 1px rgba(0,0,0,.15),0 2px 4px 0 rgba(0,0,0,.1),0 0 0 1px var(--ad-orange)}.adui-button-warning:not(.adui-button-disabled):not(.adui-button-light) .adui-button-leftIcon,.adui-button-warning:not(.adui-button-disabled):not(.adui-button-light) .adui-button-rightIcon{fill:#fff}.adui-button-warning:not(.adui-button-disabled):not(.adui-button-light):hover{background-image:linear-gradient(-180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.05) 100%);box-shadow:0 0 0 1px rgba(0,0,0,.15),0 2px 4px 0 rgba(0,0,0,.1),0 0 0 1px var(--ad-orange)}.adui-button-warning:not(.adui-button-disabled):not(.adui-button-light):hover:active{background-image:linear-gradient(-180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.15) 100%);box-shadow:inset 0 1px 2px 0 rgba(0,0,0,.04),0 0 0 1px rgba(0,0,0,.3),0 0 0 1px var(--ad-orange)}.adui-button-warning:not(.adui-button-disabled):not(.adui-button-light).adui-button-active{background-image:linear-gradient(-180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.15) 100%);box-shadow:inset 0 1px 2px 0 rgba(0,0,0,.04),0 0 0 1px rgba(0,0,0,.3),0 0 0 1px var(--ad-orange)}.adui-button-danger:not(.adui-button-disabled).adui-button-light{font-weight:500;color:var(--ad-red);background-color:rgba(0,0,0,0)}.adui-button-danger:not(.adui-button-disabled).adui-button-light .adui-button-leftIcon,.adui-button-danger:not(.adui-button-disabled).adui-button-light .adui-button-rightIcon{fill:currentColor}.adui-button-danger:not(.adui-button-disabled).adui-button-light::after{opacity:0;content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--ad-red);border-radius:4px;transform:scale(0.92);transition:var(--adui-motion-duration-bounce) var(--adui-motion-ease-bounce) all}.adui-button-danger:not(.adui-button-disabled).adui-button-light:hover::after{opacity:.1;transform:scale(1)}.adui-button-danger:not(.adui-button-disabled).adui-button-light.adui-button-active::after,.adui-button-danger:not(.adui-button-disabled).adui-button-light:active::after{opacity:.2;transform:scale(1)}.adui-button-danger:not(.adui-button-disabled):not(.adui-button-light){font-weight:500;color:#fff;background-color:var(--ad-red);box-shadow:0 0 0 1px rgba(0,0,0,.15),0 2px 4px 0 rgba(0,0,0,.1),0 0 0 1px var(--ad-red)}.adui-button-danger:not(.adui-button-disabled):not(.adui-button-light) .adui-button-leftIcon,.adui-button-danger:not(.adui-button-disabled):not(.adui-button-light) .adui-button-rightIcon{fill:#fff}.adui-button-danger:not(.adui-button-disabled):not(.adui-button-light):hover{background-image:linear-gradient(-180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.05) 100%);box-shadow:0 0 0 1px rgba(0,0,0,.15),0 2px 4px 0 rgba(0,0,0,.1),0 0 0 1px var(--ad-red)}.adui-button-danger:not(.adui-button-disabled):not(.adui-button-light):hover:active{background-image:linear-gradient(-180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.15) 100%);box-shadow:inset 0 1px 2px 0 rgba(0,0,0,.04),0 0 0 1px rgba(0,0,0,.3),0 0 0 1px var(--ad-red)}.adui-button-danger:not(.adui-button-disabled):not(.adui-button-light).adui-button-active{background-image:linear-gradient(-180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.15) 100%);box-shadow:inset 0 1px 2px 0 rgba(0,0,0,.04),0 0 0 1px rgba(0,0,0,.3),0 0 0 1px var(--ad-red)}.adui-button-leftIcon{flex:none}.adui-button-leftIcon:not(:only-child){margin-right:4px}.adui-button-rightIcon{flex:none}.adui-button-rightIcon:not(:only-child){margin-left:4px}.adui-button-disabled{color:var(--gray-600);font-weight:500;cursor:not-allowed;background-color:rgba(0,0,0,0)}.adui-button-disabled:not(.adui-button-light){font-weight:400;background-color:rgba(0,0,0,.03);box-shadow:0 0 0 1px rgba(0,0,0,.08)}.adui-button-disabled .adui-button-leftIcon,.adui-button-disabled .adui-button-rightIcon{fill:var(--gray-600)}.adui-button-light.adui-button-loading .adui-button-leftIcon,.adui-button-light.adui-button-loading .adui-button-rightIcon,.adui-button-light.adui-button-loading .adui-button-content{opacity:0}.adui-button-light .adui-button-spinner::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:4px;opacity:.1}.adui-button-light.adui-button-normal .adui-button-spinner::after{background-color:var(--gray-800)}.adui-button-light.adui-button-primary .adui-button-spinner::after{background-color:var(--primary-color)}.adui-button-light.adui-button-success .adui-button-spinner::after{background-color:var(--ad-green)}.adui-button-light.adui-button-warning .adui-button-spinner::after{background-color:var(--ad-orange)}.adui-button-light.adui-button-danger .adui-button-spinner::after{background-color:var(--ad-red)}