Frank
/
fineui
forked from fanruan/fineui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

无JIRA 删掉

research/test
翠屏山最速下山传说 1 year ago
parent
4f6d87765d
commit
803d574527
2 changed files with 109 additions and 5 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 112
      packages/fineui/src/less/base/single/button/button.less
  2. 2
      packages/fineui/src/less/visual.less

112
packages/fineui/src/less/base/single/button/button.less
Unescape View File

@ -1,4 +1,5 @@
@import "../../../index.less";
@hoverVal: opacity .3s ease;
@activeVal: transform .5s ease, opacity 1s ease;
@activeStopVal: transform 0s;
@ -6,6 +7,7 @@ body .bi-button, #body .bi-button {
&.hack {
.border-radius(0px);
}
.border-radius(2px);
outline: 0;
border: 1px solid @color-bi-border-button;
@ -14,41 +16,51 @@ body .bi-button, #body .bi-button {
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;
@ -65,81 +77,101 @@ body .bi-button, #body .bi-button {
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;
@ -156,47 +188,59 @@ body .bi-button, #body .bi-button {
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;
@ -213,47 +257,59 @@ body .bi-button, #body .bi-button {
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;
@ -270,39 +326,49 @@ body .bi-button, #body .bi-button {
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,
@ -311,25 +377,30 @@ body .bi-button, #body .bi-button {
&, & .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,
@ -339,65 +410,81 @@ body .bi-button, #body .bi-button {
&, & .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;
}
}
@ -424,14 +511,17 @@ body .bi-button, #body .bi-button {
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);
@ -440,6 +530,7 @@ body .bi-button, #body .bi-button {
}
}
}
&.button-ignore {
&:after {
content: "";
@ -456,24 +547,30 @@ body .bi-button, #body .bi-button {
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{
& .popup-content {
font-size: @font-size-14;
}
.bi-button-mask {
pointer-events: none;
}
@ -483,15 +580,19 @@ body .bi-button, #body .bi-button {
.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;
}
@ -506,31 +607,36 @@ body .bi-button, #body .bi-button {
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);

2
packages/fineui/src/less/visual.less
Unescape View File

@ -43,13 +43,11 @@
.background-color(@color, @alpha) {
background-color: fade(@color, @alpha);
@ieColor: argb(fade(@color, @alpha));
filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr=@{ieColor},endColorstr=@{ieColor})";
}
.opacity(@opa) {
opacity: @opa;
@opa-ie: @opa*100;
filter: ~'alpha(opacity=@{opa-ie})';
}
.transition(@transition) {

Write Preview
Loading…
Cancel
Save