dh-c
Version:
The front-end development engineers jimberton gulp react component
80 lines (79 loc) • 2.26 kB
CSS
.dh-btn {
display: inline-block;
padding: 0 16px;
height: 36px;
font-size: 14px;
border-radius: 18px;
color: #999999;
border: 1px solid #d9d9d9;
background-color: #ffffff;
line-height: 1;
white-space: nowrap;
text-align: center;
background-image: none;
cursor: pointer;
user-select: none;
outline: none;
box-sizing: border-box;
-webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); }
.dh-btn.dh-btn-background-ghost {
border: 1px solid #ffffff;
background-color: transparent;
color: #ffffff; }
.dh-btn:hover {
opacity: .7; }
.dh-btn-prefix {
margin-right: 8px; }
.dh-btn-success {
color: #ffffff;
border: 1px solid transparent;
background-color: #23c132; }
.dh-btn-success.dh-btn-background-ghost {
border: 1px solid #23c132;
background-color: transparent;
color: #23c132; }
.dh-btn-danger {
color: #ffffff;
border: 1px solid transparent;
background-color: #ff5a44; }
.dh-btn-danger.dh-btn-background-ghost {
border: 1px solid #ff5a44;
background-color: transparent;
color: #ff5a44; }
.dh-btn-info {
color: #ffffff;
border: 1px solid transparent;
background-color: #287dfb; }
.dh-btn-info.dh-btn-background-ghost {
border: 1px solid #287dfb;
background-color: transparent;
color: #287dfb; }
.dh-btn-warning {
color: #ffffff;
border: 1px solid transparent;
background-color: #fcc927; }
.dh-btn-warning.dh-btn-background-ghost {
border: 1px solid #fcc927;
background-color: transparent;
color: #fcc927; }
.dh-btn-small {
height: 24px;
font-size: 12px;
border-radius: 12px; }
.dh-btn-circle {
height: 36px;
width: 36px;
padding: 0;
border-radius: 50%;
overflow: hidden; }
.dh-btn-circle.dh-btn-small {
height: 24px;
width: 24px;
font-size: 12px; }
.dh-btn-success[disabled], .dh-btn-danger[disabled], .dh-btn-info[disabled], .dh-btn-warning[disabled], .dh-btn-small[disabled], .dh-btn-circle[disabled] {
color: #ccc;
background-color: #f6f6f6;
border: 1px solid #e6e6e6;
cursor: not-allowed;
opacity: 1; }