forked from fanruan/fineui
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
540 lines
14 KiB
540 lines
14 KiB
@import "../../../index.less"; |
|
@hoverVal: opacity .3s ease; |
|
@activeVal: transform .5s ease, opacity 1s ease; |
|
@activeStopVal: transform 0s; |
|
body .bi-button, #body .bi-button { |
|
&.hack { |
|
.border-radius(0px); |
|
} |
|
.border-radius(2px); |
|
outline: 0; |
|
border: 1px solid @color-bi-border-button; |
|
background-color: @color-bi-background-button; |
|
.box-sizing(border-box); |
|
text-align: center; |
|
vertical-align: middle; |
|
cursor: pointer; |
|
&.loading { |
|
cursor: not-allowed; |
|
} |
|
&.block { |
|
font-size: inherit; |
|
border-width: 0; |
|
.border-radius(0px); |
|
} |
|
&.clear { |
|
font-size: inherit; |
|
border-width: 0; |
|
background-color: transparent; |
|
&:hover, &:focus { |
|
.opacity(0.8); |
|
} |
|
&:active { |
|
.opacity(1); |
|
} |
|
&:after { |
|
display: none; |
|
} |
|
} |
|
&.plain { |
|
font-size: inherit; |
|
border-width: 0; |
|
background-color: transparent; |
|
} |
|
&.ghost { |
|
font-size: inherit; |
|
background-color: transparent; |
|
} |
|
&.button-common { |
|
&, & .b-font:before { |
|
color: @color-bi-text-common-button; |
|
} |
|
&.light { |
|
border-width: 0; |
|
background-color: @color-bi-background-common-light-button; |
|
|
|
&, & .b-font:before { |
|
color: @color-bi-text-common-light-button; |
|
} |
|
|
|
&:hover, &:focus { |
|
background-color: @color-bi-background-hover-common-light-button; |
|
} |
|
|
|
&.active { |
|
background-color: @color-bi-background-active-common-light-button; |
|
} |
|
} |
|
&.clear, &.clear .b-font:before { |
|
color: @color-bi-text-common-clear-button; |
|
} |
|
&.plain, &.plain .b-font:before { |
|
background-color: transparent; |
|
color: @color-bi-text-common-plain-button; |
|
} |
|
&.plain { |
|
&:hover { |
|
background-color: @color-bi-background-hover-plain-button; |
|
} |
|
&:focus { |
|
background-color: @color-bi-background-active-plain-button; |
|
} |
|
} |
|
&.ghost { |
|
&, & .b-font:before { |
|
color: @color-bi-text-common-ghost-button; |
|
} |
|
&:hover, &:focus, &:hover .b-font:before, &:focus .b-font:before { |
|
color: @color-bi-text; |
|
background-color: @color-bi-background-hover-common-ghost-button; |
|
} |
|
&:active { |
|
background-color: @color-bi-background-active-common-ghost-button; |
|
} |
|
} |
|
} |
|
&.button-ignore { |
|
& { |
|
background-color: @color-bi-background-ignore-button; |
|
&:not(.clear, .ghost) { |
|
border-color: @color-bi-border-ignore-button; |
|
} |
|
} |
|
&:not(.clear, .ghost) { |
|
&, & .b-font:before { |
|
color: @color-bi-text-ignore-button; |
|
} |
|
} |
|
&.clear { |
|
background-color: transparent; |
|
border-width: 0; |
|
} |
|
&.ghost { |
|
&:hover, &:focus { |
|
border-color: @color-bi-border-ignore-button; |
|
&, & .b-font:before { |
|
color: @color-bi-text-ignore-button; |
|
} |
|
} |
|
background-color: transparent; |
|
border-color: @color-bi-border-dark-gray-line; |
|
} |
|
&.plain, &.plain .b-font:before { |
|
background-color: transparent; |
|
color: @color-bi-text-ignore-plain-button; |
|
} |
|
&.plain { |
|
&:hover { |
|
background-color: @color-bi-background-hover-plain-button; |
|
} |
|
&:focus { |
|
background-color: @color-bi-background-active-plain-button; |
|
} |
|
} |
|
} |
|
&.button-success { |
|
& { |
|
&, & .b-font:before { |
|
color: @color-bi-text-success-button; |
|
} |
|
background-color: @color-bi-background-success-button; |
|
border-color: @color-bi-border-success-button; |
|
} |
|
&.light { |
|
border-width: 0; |
|
background-color: @color-bi-background-success-light-button; |
|
|
|
&, & .b-font:before { |
|
color: @color-bi-text-success-light-button; |
|
} |
|
|
|
&:hover, &:focus { |
|
background-color: @color-bi-background-hover-success-light-button; |
|
} |
|
|
|
&.active { |
|
background-color: @color-bi-background-active-success-light-button; |
|
} |
|
} |
|
&.clear { |
|
&, & .b-font:before { |
|
color: @color-bi-text-success-clear-button; |
|
} |
|
background-color: transparent; |
|
border-width: 0; |
|
} |
|
&.ghost { |
|
&, & .b-font:before { |
|
color: @color-bi-text-success-ghost-button; |
|
} |
|
background-color: transparent; |
|
&:hover, &:focus, &:hover .b-font:before, &:focus .b-font:before { |
|
color: @color-bi-text; |
|
background-color: @color-bi-background-success-button; |
|
} |
|
&:active { |
|
background-color: @color-bi-background-success-button; |
|
} |
|
} |
|
&.plain, &.plain .b-font:before { |
|
background-color: transparent; |
|
color: @color-bi-text-success-plain-button; |
|
} |
|
&.plain { |
|
&:hover { |
|
background-color: @color-bi-background-hover-plain-button; |
|
} |
|
&:focus { |
|
background-color: @color-bi-background-active-plain-button; |
|
} |
|
} |
|
} |
|
&.button-warning { |
|
& { |
|
&, & .b-font:before { |
|
color: @color-bi-text-warning-button; |
|
} |
|
background-color: @color-bi-background-warning-button; |
|
border-color: @color-bi-border-warning-button; |
|
} |
|
&.light { |
|
border-width: 0; |
|
background-color: @color-bi-background-warning-light-button; |
|
|
|
&, & .b-font:before { |
|
color: @color-bi-text-warning-light-button; |
|
} |
|
|
|
&:hover, &:focus { |
|
background-color: @color-bi-background-hover-warning-light-button; |
|
} |
|
|
|
&.active { |
|
background-color: @color-bi-background-active-warning-light-button; |
|
} |
|
} |
|
&.clear { |
|
&, & .b-font:before { |
|
color: @color-bi-text-warning-clear-button; |
|
} |
|
background-color: transparent; |
|
border-width: 0; |
|
} |
|
&.ghost { |
|
&, & .b-font:before { |
|
color: @color-bi-text-warning-ghost-button; |
|
} |
|
background-color: transparent; |
|
&:hover, &:focus, &:hover .b-font:before, &:focus .b-font:before { |
|
color: @color-bi-text; |
|
background-color: @color-bi-background-warning-button; |
|
} |
|
&:active { |
|
background-color: @color-bi-background-warning-button; |
|
} |
|
} |
|
&.plain, &.plain .b-font:before { |
|
background-color: transparent; |
|
color: @color-bi-text-warning-plain-button; |
|
} |
|
&.plain { |
|
&:hover { |
|
background-color: @color-bi-background-hover-plain-button; |
|
} |
|
&:focus { |
|
background-color: @color-bi-background-active-plain-button; |
|
} |
|
} |
|
} |
|
&.button-error { |
|
& { |
|
&, & .b-font:before { |
|
color: @color-bi-text-error-button; |
|
} |
|
background-color: @color-bi-background-error-button; |
|
border-color: @color-bi-border-error-button; |
|
} |
|
&.light { |
|
border-width: 0; |
|
background-color: @color-bi-background-error-light-button; |
|
|
|
&, & .b-font:before { |
|
color: @color-bi-text-error-light-button; |
|
} |
|
|
|
&:hover, &:focus { |
|
background-color: @color-bi-background-hover-error-light-button; |
|
} |
|
|
|
&.active { |
|
background-color: @color-bi-background-active-error-light-button; |
|
} |
|
} |
|
&.clear { |
|
&, & .b-font:before { |
|
color: @color-bi-text-error-clear-button; |
|
} |
|
background-color: transparent; |
|
border-width: 0; |
|
} |
|
&.ghost { |
|
&, & .b-font:before { |
|
color: @color-bi-text-error-ghost-button; |
|
} |
|
background-color: transparent; |
|
&:hover, &:focus, &:hover .b-font:before, &:focus .b-font:before { |
|
color: @color-bi-text; |
|
background-color: @color-bi-background-error-button; |
|
} |
|
&:active { |
|
background-color: @color-bi-background-error-button; |
|
} |
|
} |
|
&.plain, &.plain .b-font:before { |
|
background-color: transparent; |
|
color: @color-bi-text-error-plain-button; |
|
} |
|
&.plain { |
|
&:hover { |
|
background-color: @color-bi-background-hover-plain-button; |
|
} |
|
&:focus { |
|
background-color: @color-bi-background-active-plain-button; |
|
} |
|
} |
|
} |
|
&.button-common.disabled, |
|
&.button-success.disabled, |
|
&.button-error.disabled, |
|
&.button-warning.disabled { |
|
&, &.base-disabled { |
|
&, & .b-font:before { |
|
color: @color-bi-text-disabled-button !important; |
|
} |
|
background-color: fade(@color-bi-background-disabled-button, 20%) !important; |
|
@ieColor: argb(fade(@color-bi-background-disabled-button, 20%)); |
|
filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr=@{ieColor},endColorstr=@{ieColor})"; |
|
border-color: @color-bi-border-disabled-button !important; |
|
} |
|
&:after { |
|
display: none; |
|
} |
|
} |
|
&.button-ignore.disabled { |
|
&, & .b-font:before { |
|
color: @color-bi-text-disabled-ignore-button !important; |
|
} |
|
background: @color-bi-background-disabled-ignore-button !important; |
|
border-color: @color-bi-border-disabled-ignore-button !important; |
|
&:after { |
|
display: none; |
|
} |
|
} |
|
&.button-common.disabled, |
|
&.button-success.disabled, |
|
&.button-warning.disabled, |
|
&.button-error.disabled, |
|
&.button-ignore.disabled { |
|
&.clear { |
|
&, & .b-font:before { |
|
color: @color-bi-text-disabled-ignore-clear-button !important; |
|
} |
|
background: transparent !important; |
|
border-width: 0 !important; |
|
&:hover, &:focus, &:active { |
|
.opacity(1); |
|
} |
|
} |
|
&.plain { |
|
&, & .b-font:before { |
|
color: @color-bi-text-disabled-plain-clear-button !important; |
|
} |
|
background: transparent !important; |
|
border-width: 0 !important; |
|
&:hover, &:focus, &:active { |
|
.opacity(1); |
|
} |
|
} |
|
&.ghost { |
|
&, & .b-font:before { |
|
// color: @color-bi-text-disabled-ignore-ghost-button !important; |
|
} |
|
background: transparent !important; |
|
// border-color: @color-bi-border-disabled-ignore-ghost-button !important; |
|
.opacity(0.5); |
|
} |
|
} |
|
&.button-ignore.disabled { |
|
&.ghost { |
|
.opacity(1); |
|
} |
|
} |
|
&.button-common.disabled { |
|
&.ghost { |
|
&, & .b-font:before { |
|
color: @color-bi-text-disabled-common-ghost-button !important; |
|
} |
|
border-color: @color-bi-border-disabled-common-ghost-button !important; |
|
} |
|
} |
|
&.button-success.disabled { |
|
&.ghost { |
|
&, & .b-font:before { |
|
color: @color-bi-text-disabled-success-ghost-button !important; |
|
} |
|
border-color: @color-bi-border-disabled-success-ghost-button !important; |
|
} |
|
} |
|
&.button-warning.disabled { |
|
&.ghost { |
|
&, & .b-font:before { |
|
color: @color-bi-text-disabled-warning-ghost-button !important; |
|
} |
|
border-color: @color-bi-border-disabled-warning-ghost-button !important; |
|
} |
|
} |
|
&.button-error.disabled { |
|
&.ghost { |
|
&, & .b-font:before { |
|
color: @color-bi-text-disabled-error-ghost-button !important; |
|
} |
|
border-color: @color-bi-border-disabled-error-ghost-button !important; |
|
} |
|
} |
|
} |
|
|
|
.bi-basic-button { |
|
|
|
// 按钮水波纹需要根据按钮根结点定位 |
|
position: relative; |
|
|
|
&.button-common, &.button-success, &.button-warning, &.button-error { |
|
&:after { |
|
content: ""; |
|
background-color: @color-bi-background-button-mask; |
|
.border-radius(10px); |
|
display: block; |
|
width: 100%; |
|
height: 100%; |
|
position: absolute; |
|
transform: scale(1, 1); |
|
.opacity(0); |
|
.transition(@activeVal); |
|
left: 0; |
|
top: 0; |
|
pointer-events: none; |
|
} |
|
&.hack:after { |
|
content: none; |
|
} |
|
&:active:after { |
|
transform: scale(0, 1); |
|
.opacity(0.1); |
|
.transition(@activeStopVal) |
|
} |
|
&:hover, &:focus { |
|
& .bi-button-mask { |
|
.opacity(0.1); |
|
background-color: @color-bi-background-hover-button-mask; |
|
.transition(@hoverVal); |
|
} |
|
} |
|
} |
|
&.button-ignore { |
|
&:after { |
|
content: ""; |
|
background-color: @color-bi-background-ignore-button-mask; |
|
.border-radius(10px); |
|
display: block; |
|
width: 100%; |
|
height: 100%; |
|
position: absolute; |
|
transform: scale(1, 1); |
|
.opacity(0); |
|
.transition(@activeVal); |
|
left: 0; |
|
top: 0; |
|
pointer-events: none; |
|
} |
|
&.hack:after { |
|
content: none; |
|
} |
|
&:active:after { |
|
transform: scale(0, 1); |
|
.opacity(0.1); |
|
.transition(@activeStopVal) |
|
} |
|
&:hover, &:focus { |
|
&:not(.clear, .ghost) { |
|
background-color: @color-bi-background-hover-ignore-button-mask; |
|
} |
|
.transition(@hoverVal); |
|
} |
|
} |
|
& .popup-content{ |
|
font-size: @font-size-14; |
|
} |
|
.bi-button-mask { |
|
pointer-events: none; |
|
} |
|
} |
|
|
|
.bi-theme-dark { |
|
.bi-button, #body .bi-button { |
|
&.button-ignore { |
|
background-color: @color-bi-background-ignore-button-theme-dark; |
|
&:hover, &:focus { |
|
background-color: @color-bi-background-hover-ignore-button-theme-dark; |
|
} |
|
&:active { |
|
background-color: @color-bi-background-active-ignore-button-theme-dark; |
|
} |
|
&.clear { |
|
background-color: transparent; |
|
} |
|
&.ghost { |
|
border-color: @color-bi-border-dark-gray-line-theme-dark; |
|
} |
|
} |
|
|
|
&.button-common.disabled, |
|
&.button-success.disabled, |
|
&.button-error.disabled, |
|
&.button-warning.disabled { |
|
&, &.base-disabled { |
|
border-color: @color-bi-border-dark-gray-line-theme-dark !important; |
|
background-color: fade(@color-bi-background-disabled-button-theme-dark, 20%) !important; |
|
@ieColor: argb(fade(@color-bi-background-disabled-button-theme-dark, 20%)); |
|
filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr=@{ieColor},endColorstr=@{ieColor})"; |
|
|
|
&.clear { |
|
background-color: transparent !important; |
|
} |
|
&.ghost { |
|
// 深色系下灰化就统一用灰化色 |
|
&, & .b-font:before { |
|
color: @color-bi-text-disabled-theme-dark !important; |
|
} |
|
background: transparent !important; |
|
.opacity(1); |
|
} |
|
} |
|
} |
|
&.button-ignore.disabled { |
|
&, &.base-disabled { |
|
&, & .b-font:before { |
|
color: @color-bi-text-disabled-theme-dark !important; |
|
} |
|
border-color: @color-bi-border-dark-gray-line-theme-dark !important; |
|
background-color: @color-bi-background-ignore-button-theme-dark !important; |
|
&.clear { |
|
background-color: transparent !important; |
|
} |
|
&.ghost { |
|
background: transparent !important; |
|
.opacity(1); |
|
} |
|
} |
|
} |
|
} |
|
}
|
|
|