UNPKG

zent

Version:

一套前端设计语言和基于React的实现

300 lines (290 loc) 7.46 kB
.zent-btn { display: inline-block; height: 30px; line-height: 30px; padding: 0 10px; border-radius: 2px; font-size: 12px; color: #333; background: #fff; border: 1px solid #bbb; text-align: center; vertical-align: middle; box-sizing: border-box; cursor: pointer; -webkit-transition: background-color 0.3s; transition: background-color 0.3s } .zent-btn:focus { outline: none } .zent-btn:link, .zent-btn:visited, .zent-btn:focus { color: #333; text-decoration: none } .zent-btn:hover { color: #276ACC; border-color: #276ACC; text-decoration: none } .zent-btn:active { color: #333; background: #e5e5e5; border-color: #bbb; text-decoration: none } .zent-btn.zent-btn-loading {} .zent-btn.zent-btn-loading:hover, .zent-btn.zent-btn-loading:active { background: #fff; border: 1px solid #bbb } .zent-btn + .zent-btn { margin-left: 10px; } /*大小相关*/ .zent-btn-large { height: 36px; line-height: 34px; padding: 0 30px; } .zent-btn-small{ height: 26px; line-height: 24px; padding: 0 5px; } .zent-btn-block { display: block; width: 100%; padding: 0; } /*风格相关*/ .zent-btn-primary { color: #fff; background: #3283fa; border-color: #3283fa } .zent-btn-primary:link, .zent-btn-primary:visited, .zent-btn-primary:focus { color: #fff } .zent-btn-primary:hover { color: #fff; background: #66a3ff; border-color: #2e7df1 } .zent-btn-primary:active { color: #fff; background: #276ACC; border-color: #2e7df1 } .zent-btn-primary.zent-btn-loading {} .zent-btn-primary.zent-btn-loading:hover, .zent-btn-primary.zent-btn-loading:active { background: #3283fa; border-color: #3283fa } .zent-btn-primary.zent-btn-loading::after { border-color: #fff transparent transparent transparent } .zent-btn-primary-outline { color: #3283fa; border-color: #3283fa; background: #fff } .zent-btn-primary-outline:link, .zent-btn-primary-outline:visited, .zent-btn-primary-outline:focus { color: #3283fa } .zent-btn-primary-outline:hover { color: #276ACC; border-color: #276ACC } .zent-btn-primary-outline:active { color: #276ACC; background: #e5e5e5; border-color: #3283fa } .zent-btn-primary-outline.zent-btn-loading {} .zent-btn-primary-outline.zent-btn-loading:hover, .zent-btn-primary-outline.zent-btn-loading:active { border-color: #3283fa; background: #fff } .zent-btn-primary-outline.zent-btn-loading::after { border-color: #3283fa transparent transparent transparent } .zent-btn-danger { color: #fff; background: #ff4343; border-color: #f63535 } .zent-btn-danger:link, .zent-btn-danger:visited, .zent-btn-danger:focus { color: #fff } .zent-btn-danger:hover { color: #fff; background: #ff6666; border-color: #f63535 } .zent-btn-danger:active { color: #fff; background: #CF2F2F; border-color: #f63535 } .zent-btn-danger.zent-btn-loading {} .zent-btn-danger.zent-btn-loading:hover, .zent-btn-danger.zent-btn-loading:active { background: #ff4343; border-color: #f63535 } .zent-btn-danger.zent-btn-loading::after { border-color: #fff transparent transparent transparent } .zent-btn-danger-outline { color: #ff4343; border-color: #ff4343; background: #fff } .zent-btn-danger-outline:link, .zent-btn-danger-outline:visited, .zent-btn-danger-outline:focus { color: #ff4343 } .zent-btn-danger-outline:hover { color: #CF2F2F; border-color: #CF2F2F } .zent-btn-danger-outline:active { color: #CF2F2F; background: #e5e5e5; border-color: #ff4343 } .zent-btn-danger-outline.zent-btn-loading {} .zent-btn-danger-outline.zent-btn-loading:hover, .zent-btn-danger-outline.zent-btn-loading:active { border-color: #ff4343; background: #fff } .zent-btn-danger-outline.zent-btn-loading::after { border-color: #ff4343 transparent transparent transparent } .zent-btn-success { color: #fff; background: #06bf04; border-color: #00ab00 } .zent-btn-success:link, .zent-btn-success:visited, .zent-btn-success:focus { color: #fff } .zent-btn-success:hover { color: #fff; background: #12D24D; border-color: #00ab00 } .zent-btn-success:active { color: #fff; background: #0BA40A; border-color: #00ab00 } .zent-btn-success.zent-btn-loading {} .zent-btn-success.zent-btn-loading:hover, .zent-btn-success.zent-btn-loading:active { background: #06bf04; border-color: #00ab00 } .zent-btn-success.zent-btn-loading::after { border-color: #fff transparent transparent transparent } .zent-btn-success-outline { color: #06bf04; border-color: #06bf04; background: #fff } .zent-btn-success-outline:link, .zent-btn-success-outline:visited, .zent-btn-success-outline:focus { color: #06bf04 } .zent-btn-success-outline:hover { color: #0BA40A; border-color: #0BA40A } .zent-btn-success-outline:active { color: #0BA40A; background: #e5e5e5; border-color: #06bf04 } .zent-btn-success-outline.zent-btn-loading {} .zent-btn-success-outline.zent-btn-loading:hover, .zent-btn-success-outline.zent-btn-loading:active { border-color: #06bf04; background: #fff } .zent-btn-success-outline.zent-btn-loading::after { border-color: #06bf04 transparent transparent transparent } /*状态相关*/ .zent-btn-disabled, .zent-btn-disabled[disabled] { color: #bbb; background: #f8f8f8; border-color: #e5e5e5; cursor: not-allowed } .zent-btn-disabled:link, .zent-btn-disabled:visited, .zent-btn-disabled:focus, .zent-btn-disabled[disabled]:link, .zent-btn-disabled[disabled]:visited, .zent-btn-disabled[disabled]:focus { color: #bbb } .zent-btn-disabled:hover, .zent-btn-disabled[disabled]:hover { color: #bbb; background: #f8f8f8; border-color: #e5e5e5 } .zent-btn-disabled:active, .zent-btn-disabled[disabled]:active { color: #bbb; background: #f8f8f8; border-color: #e5e5e5 } .zent-btn-loading { position: relative; color: transparent; cursor: not-allowed } .zent-btn-loading:link, .zent-btn-loading:visited, .zent-btn-loading:focus, .zent-btn-loading:hover, .zent-btn-loading:active { color: transparent } .zent-btn-loading::before, .zent-btn-loading::after { content: ''; position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; margin-left: -8px; margin-top: -8px; border: 3px solid rgba(0, 0, 0, 0.1); border-radius: 8px; box-sizing: border-box } .zent-btn-loading::after { border-color: #666666 transparent transparent transparent; -webkit-animation: btn-spin 0.6s linear; animation: btn-spin 0.6s linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite } @-webkit-keyframes btn-spin { 0% { -webkit-transform: rotate(0); transform: rotate(0) } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg) } } @keyframes btn-spin { 0% { -webkit-transform: rotate(0); transform: rotate(0) } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg) } } .zent-btn-border-transparent { border-color: transparent } .zent-btn-border-transparent:hover { border-color: transparent } .zent-btn-border-transparent:active { border-color: transparent }