zent
Version:
一套前端设计语言和基于React的实现
300 lines (290 loc) • 7.46 kB
CSS
.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
}