182 lines
4.7 KiB
SCSS
182 lines
4.7 KiB
SCSS
.nz-btn {
|
|
border-radius: $--button-border-radius;
|
|
cursor: pointer;
|
|
text-align: center;
|
|
box-sizing: border-box;
|
|
-webkit-appearance: none;
|
|
white-space: nowrap;
|
|
font-size: 14px;
|
|
line-height: 16px;
|
|
position: relative;
|
|
}
|
|
.to-top {
|
|
position: fixed;
|
|
right: 17px;
|
|
border-radius: 50%;
|
|
height: 40px;
|
|
width: 40px;
|
|
border: none;
|
|
cursor: pointer;
|
|
opacity: 0;
|
|
background-color: #aaa;
|
|
outline: none;
|
|
z-index: 100;
|
|
color: white;
|
|
transition: opacity .2s linear, top .2s linear;
|
|
transform: translateY(-50%);
|
|
bottom: 35px;
|
|
}
|
|
.to-top.to-top-is-hover, .nz-table .el-table__body-wrapper.ps--scrolling-y .to-top {
|
|
opacity: 0.5;
|
|
}
|
|
.to-top>i {
|
|
font-size: 20px;
|
|
}
|
|
.to-top:hover {
|
|
opacity: 1;
|
|
color: white;
|
|
}
|
|
.nz-btn-size-large {
|
|
padding: 0 15px;
|
|
height: 28px;
|
|
}
|
|
.nz-btn.nz-btn-size-normal {
|
|
height: 30px;
|
|
line-height: 30px;
|
|
text-align: center;
|
|
min-width: 74px;
|
|
padding: 0 10px;
|
|
}
|
|
.nz-btn.nz-btn-size-small {
|
|
height: 24px;
|
|
line-height: 22px;
|
|
text-align: center;
|
|
min-width: 60px;
|
|
padding: 0 10px;
|
|
}
|
|
.nz-btn.nz-btn-size-mini {
|
|
height: 22px;
|
|
line-height: 22px;
|
|
text-align: center;
|
|
min-width: 40px;
|
|
padding: 0 5px;
|
|
}
|
|
.nz-btn.nz-btn-style-normal { /* 新版橙色按钮 */
|
|
background: $--button-primary-background-color;
|
|
color: $--button-primary-color;
|
|
border: 1px solid $--button-primary-background-color;
|
|
}
|
|
.nz-btn.nz-btn-style-error { /* 红色按钮 */
|
|
background: $--color-danger;
|
|
color: $--button-primary-color;
|
|
border: 1px solid $--color-danger;
|
|
}
|
|
.nz-btn.nz-btn-style-gray { /* 灰色按钮 */
|
|
background: $--button-gray-background-color;
|
|
border: 1px solid $--button-gray-border-color;
|
|
color: $--button-gray-color;
|
|
letter-spacing: 0;
|
|
}
|
|
.nz-btn.nz-btn-style-normal:hover:not(.nz-btn-disabled) { /* 橙色按钮hover */
|
|
background: $--button-primary-hover-background-color;
|
|
color: $--button-primary-color;
|
|
border: 1px solid $--button-primary-hover-background-color;
|
|
}
|
|
.nz-btn.nz-btn-style-error:hover:not(.nz-btn-disabled) { /* 红色按钮hover */
|
|
background: #F38b73;
|
|
color: $--button-primary-color;
|
|
border: 1px solid #F38b73;
|
|
}
|
|
.nz-btn.nz-btn-style-gray:hover:not(.nz-btn-disabled) { /* 灰色按钮hover */
|
|
border: 1px solid $--button-gray-hover-border-color;
|
|
background: $--button-gray-hover-background-color;
|
|
color: $--button-gray-hover-color;
|
|
letter-spacing: 0;
|
|
}
|
|
.nz-btn.nz-btn-style-gray:hover:not(.nz-btn-disabled) { /* 浅灰色按钮hover */
|
|
border: 1px solid $--button-gray-hover-border-color;
|
|
background: $--button-gray-hover-background-color;
|
|
color: $--button-gray-hover-color;
|
|
letter-spacing: 0;
|
|
}
|
|
.nz-btn.nz-btn-style-normal:active:not(.nz-btn-disabled) { /* 橙色按钮active' */
|
|
background: $--button-primary-active-background-color;
|
|
color: $--button-primary-color;
|
|
border-color: $--button-primary-active-background-color;
|
|
}
|
|
.nz-btn.nz-btn-style-error:active:not(.nz-btn-disabled) { /* 红色按钮active' */
|
|
background: #EF7C62;
|
|
color: $--button-primary-color;
|
|
border-color: #Eb6D51;
|
|
}
|
|
.nz-btn.nz-btn-style-gray:active:not(.nz-btn-disabled) { /* 灰色按钮active*/
|
|
background: $--button-gray-active-background-color;
|
|
border: 1px solid $--button-gray-active-border-color;
|
|
color: $--button-gray-active-color;
|
|
letter-spacing: 0;
|
|
}
|
|
.nz-btn.nz-btn-style-gray:active:not(.nz-btn-disabled) { /* 浅灰色按钮active*/
|
|
background: $--button-gray-active-background-color;
|
|
border: 1px solid $--button-gray-active-border-color;
|
|
color: $--button-gray-active-color;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
.nz-btn:focus {
|
|
outline: 0;
|
|
}
|
|
.nz-btn .nz-btn-text{
|
|
font-weight: 500;
|
|
white-space: nowrap;
|
|
}
|
|
.nz-btn-disabled {
|
|
background-image: none;
|
|
opacity: .6;
|
|
cursor: default !important;
|
|
}
|
|
.nz-btn-group {
|
|
border-radius: 2px;
|
|
display: flex;
|
|
}
|
|
.nz-btn-group-size-small {
|
|
max-height: 24px;
|
|
}
|
|
.nz-btn-group .nz-btn:first-child:not(:last-child) {
|
|
border-bottom-right-radius: 0;
|
|
border-top-right-radius: 0;
|
|
}
|
|
.gray-filter {
|
|
filter: opacity(50%);
|
|
}
|
|
.nz-btn-group .nz-btn:last-child:not(:first-child) {
|
|
border-bottom-left-radius: 0;
|
|
border-top-left-radius: 0;
|
|
}
|
|
.nz-btn-group .nz-btn:not(:first-child):not(:last-child) {
|
|
border-radius: 0;
|
|
}
|
|
.nz-btn-group .nz-btn {
|
|
box-shadow: none;
|
|
vertical-align: top;
|
|
}
|
|
.nz-btn-group .nz-btn:not(:last-of-type) {
|
|
border-right: 1px solid rgba(162,162,162,0.50);
|
|
}
|
|
.nz-btn-group.nz-btn-group-light {
|
|
box-shadow: 0 0 1px 1px rgba(162,162,162,0.50);
|
|
}
|
|
.nz-btn-group .nz-input-group-middle input {
|
|
border-radius:0 !important;
|
|
border: none;
|
|
border-right: 1px solid rgba(162,162,162,0.50) !important;
|
|
}
|
|
.nz-btn-group .nz-input-group-left input {
|
|
border-radius: 4px 0 0 4px !important;
|
|
border: none;
|
|
border-right: 1px solid rgba(162,162,162,0.50) !important;
|
|
}
|
|
.nz-btn-group .nz-input-group-right input {
|
|
border-radius:0 4px 4px 0 !important;
|
|
border: none;
|
|
}
|