double-ui-vue/es/button/style.css

基于vue框架的ui库

.d-button{display:inline-block;vertical-align:middle;padding-left:8px;padding-right:8px;border-radius:4px;border-width:1px;border-style:solid;font-size:0;text-align:center;transition:background-color .3s,border .3s}.d-button+.d-button{margin-left:12px}.d-button .d-button-content{display:flex;align-items:center;justify-content:center;width:100%}.d-button .d-button-loading{margin-right:4px;width:16px;height:16px}.d-button-default{background-color:var(--theme);border-color:var(--grey-400);color:var(--grey-900)}.d-button-default:hover{border-color:var(--blue-500)}.d-button-default:hover .d-button-text{color:var(--blue-500)}.d-button-default:active{border-color:var(--blue-600)}.d-button-default:active .d-button-text{color:var(--blue-600)}.d-button-blue{background-color:var(--blue-500);border-color:var(--blue-500);color:var(--white)}.d-button-blue:hover{background-color:var(--blue-400);border-color:var(--blue-400)}.d-button-blue:active{background-color:var(--blue-600);border-color:var(--blue-600)}.d-button-word{background:none;border-color:transparent;color:var(--grey-900)}.d-button-word .d-button-text{font-weight:500}.d-button-word:hover .d-button-text{color:var(--blue-500)}.d-button-word:active .d-button-text{color:var(--blue-600)}.d-button-large{max-width:128px;min-width:80px;height:40px}.d-button-large .d-button-content{height:38px;line-height:38px}.d-button-medium{max-width:116px;min-width:80px;height:32px}.d-button-medium .d-button-content{height:30px;line-height:30px}.d-button-small{max-width:108px;min-width:60px;height:28px}.d-button-small .d-button-content{height:26px;line-height:26px}.d-button-normal{cursor:pointer}.d-button.d-button-disabled{cursor:not-allowed}.d-button.d-button-disabled .d-button-text{color:var(--grey-400)}.d-button-disabled:not([type="word"]){background-color:var(--grey-200);border-color:var(--grey-200)}.d-button-text{font-size:14px;transition:color .3s}.d-min-loading{display:inline-block;width:100%;height:100%;line-height:100%;text-align:center}.d-min-loading .d-min-loading-line{width:100%;height:100%;min-width:12px;min-height:12px;-webkit-animation:loading16px .5s linear infinite;animation:loading16px .5s linear infinite}@-webkit-keyframes loading16px{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes loading16px{0%{transform:rotate(0)}to{transform:rotate(360deg)}}