@cmtlyt/chlorine-ui/dist/lib/button/style.css

一个令人窒息的组件库？

.cl-button,.cl-button__content{box-sizing:border-box;border-radius:var(--btn-border-radius)}.cl-button,.cl-button__content,.cl-button__content::before{border-radius:var(--btn-border-radius)}.cl-button{--btn-border-radius:5px;--btn-padding:10px 20px;--btn-spacing:1px;--btn-bgcolor:transparent;--btn-font-color:var(--main-color-block);--btn-border-color:var(--info-color);--btn-bg-opacity:0;--btn-opacity:1;--btn-icon-space:5px;position:relative;display:inline-block;width:max-content;min-width:40px;height:40px;white-space:var(--btn-spacing);letter-spacing:var(--btn-spacing);user-select:none}.cl-button:has(.disabled,.loading){cursor:not-allowed}.cl-button__content{display:flex;align-items:center;justify-content:center;padding:var(--btn-padding);width:100%;height:100%;color:var(--btn-font-color);box-shadow:inset 0 0 0 1px var(--btn-border-color);transition:box-shadow .2s,color .2s;opacity:var(--btn-opacity);cursor:pointer}.cl-button__content::before{position:absolute;top:0;left:0;right:0;bottom:0;content:"";background-color:var(--btn-bgcolor);opacity:var(--btn-bg-opacity);transition:box-shadow .2s,background-color .2s,opacity .2s}.cl-button__content span{position:relative;z-index:1;display:flex;align-items:center;gap:var(--btn-icon-space)}.cl-button__content span .icon{width:1em;height:1em;vertical-align:-.15em;fill:currentColor;overflow:hidden}.cl-button__content:hover::before{box-shadow:inset 0 0 0 999px rgba(255,255,255,.1882352941)}.cl-button__content.circle{--btn-border-radius:50%}.cl-button__content.round{--btn-border-radius:999px}.cl-button__content.text{--btn-bgcolor:transparent;--btn-font-color:var(--primary-color);--btn-padding:10px 5px;box-shadow:unset}.cl-button__content.primary{--btn-bg-opacity:1;--btn-bgcolor:var(--primary-color);--btn-font-color:var(--main-color-white)}.cl-button__content.success{--btn-bg-opacity:1;--btn-bgcolor:var(--success-color);--btn-font-color:var(--main-color-white)}.cl-button__content.info{--btn-bg-opacity:1;--btn-bgcolor:var(--info-color);--btn-font-color:var(--main-color-white)}.cl-button__content.warning{--btn-bg-opacity:1;--btn-bgcolor:var(--warning-color);--btn-font-color:var(--main-color-white)}.cl-button__content.danger{--btn-bg-opacity:1;--btn-bgcolor:var(--danger-color);--btn-font-color:var(--main-color-white)}.cl-button__content.el-primary{--btn-bg-opacity:1;--btn-bgcolor:var(--el-primary-color);--btn-font-color:var(--main-color-white)}.cl-button__content.plain{--btn-bg-opacity:0.1;--btn-font-color:var(--btn-bgcolor);--btn-border-color:var(--btn-bgcolor);transition:color .2s}.cl-button__content.plain.base{--btn-font-color:var(--main-color-block);--btn-border-color:var(--info-color)}.cl-button__content.plain.base:hover{--btn-bgcolor:transparent}.cl-button__content.plain:hover{--btn-bg-opacity:1;--btn-font-color:var(--main-color-white)}.cl-button__content.base{box-shadow:inset 0 0 0 1px var(--btn-border-color)}.cl-button__content.disabled::before,.cl-button__content.loading::before{box-shadow:inset 0 0 0 999px rgba(255,255,255,.2509803922)}.cl-button__content.base:hover{--btn-bg-opacity:0.1;--btn-border-color:var(--primary-color);--btn-bgcolor:var(--primary-color);--btn-font-color:var(--primary-color)}.cl-button__content.icon.circle{--btn-padding:10px}.cl-button__content.loading{pointer-events:none}.cl-button__content.loading .icon{animation:rotate 5s linear infinite}@keyframes rotate{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.cl-button__content.disabled{--btn-opacity:0.5;pointer-events:none}.cl-button__content.disabled.text{--btn-font-color:var(--info-color)}