mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-01-12 12:25:16 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(button): clean button style

Browse Source
This commit is contained in:
07akioni 2020-05-15 17:51:51 +08:00
parent e5ea6775a1
commit 862ec603e7
1 changed files with 126 additions and 191 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

297
styles/Button.scss
View File

@ -78,145 +78,24 @@
} }
} }
@mixin button-type-mixin ($type) { @mixin button-icon-mixin($color) {
@include m($type + '-type') { @include e(icon) {
@include b(icon) {
fill: $color !important;
stroke: $color !important;
}
@include b(base-loading) {
fill: $color !important;
stroke: $color !important;
}
}
}
@mixin button-type-mixin-content ($type) {
color: map-get($--button-text-color, $type); color: map-get($--button-text-color, $type);
background-color: map-get($--button-background-color, $type); background-color: map-get($--button-background-color, $type);
border: 1px solid map-get($--button-border-color, $type); border: 1px solid map-get($--button-border-color, $type);
@include m(ghost, text) { @include button-icon-mixin(map-get($--button-text-color, $type));
background-color: map-get($--button-ghost-typed-background-color, $type);
color: map-get($--button-ghost-typed-text-color, $type);
border: 1px solid map-get($--button-ghost-typed-border-color, $type);
@include not-m(disabled) {
@include m(enter-pressed) {
background-color: map-get($--button-ghost-typed-background-color, $type + '-active');
color: map-get($--button-ghost-typed-text-color, $type + '-active');
@include e(border-mask) {
box-shadow: map-get($--button-ghost-typed-border-mask-box-shadow, $type + '-active');
}
@include e(icon) {
@include b(icon) {
fill: map-get($--button-ghost-typed-text-color, $type + '-active') !important;
stroke: map-get($--button-ghost-typed-text-color, $type + '-active') !important;
}
@include b(base-loading) {
fill: map-get($--button-ghost-typed-text-color, $type + '-active') !important;
stroke: map-get($--button-ghost-typed-text-color, $type + '-active') !important;
}
}
}
&:not(:active):focus {
@include not-m(enter-pressed) {
color: map-get($--button-ghost-typed-text-color, $type + '-focus');
background-color: map-get($--button-ghost-typed-background-color, $type + '-focus');
@include e(border-mask) {
box-shadow: map-get($--button-ghost-typed-border-mask-box-shadow, $type + '-focus');
}
@include e(icon) {
@include b(icon) {
fill: map-get($--button-ghost-typed-text-color, $type + '-focus') !important;
stroke: map-get($--button-ghost-typed-text-color, $type + '-focus') !important;
}
@include b(base-loading) {
fill: map-get($--button-ghost-typed-text-color, $type + '-focus') !important;
stroke: map-get($--button-ghost-typed-text-color, $type + '-focus') !important;
}
}
}
}
@include not-m(enter-pressed) {
&:hover {
background-color: map-get($--button-ghost-typed-background-color, $type + '-hover');
color: map-get($--button-ghost-typed-text-color, $type + '-hover');
@include e(border-mask) {
box-shadow: map-get($--button-ghost-typed-border-mask-box-shadow, $type + '-hover');
}
@include e(icon) {
@include b(icon) {
fill: map-get($--button-ghost-typed-text-color, $type + '-hover') !important;
stroke: map-get($--button-ghost-typed-text-color, $type + '-hover') !important;
}
@include b(base-loading) {
fill: map-get($--button-ghost-typed-text-color, $type + '-hover') !important;
stroke: map-get($--button-ghost-typed-text-color, $type + '-hover') !important;
}
}
}
&:active {
background-color: map-get($--button-ghost-typed-background-color, $type + '-active');
color: map-get($--button-ghost-typed-text-color, $type + '-active');
@include e(border-mask) {
box-shadow: map-get($--button-ghost-typed-border-mask-box-shadow, $type + '-active');
}
@include e(icon) {
@include b(icon) {
fill: map-get($--button-ghost-typed-text-color, $type + '-active') !important;
stroke: map-get($--button-ghost-typed-text-color, $type + '-active') !important;
}
@include b(base-loading) {
fill: map-get($--button-ghost-typed-text-color, $type + '-active') !important;
stroke: map-get($--button-ghost-typed-text-color, $type + '-active') !important;
}
}
}
}
}
@include e(icon) {
@include b(icon) {
fill: map-get($--button-ghost-typed-text-color, $type) !important;
stroke: map-get($--button-ghost-typed-text-color, $type) !important;
}
@include b(base-loading) {
fill: map-get($--button-ghost-typed-text-color, $type) !important;
stroke: map-get($--button-ghost-typed-text-color, $type) !important;
}
}
}
@include m(text) {
@include e(border-mask) {
box-shadow: none !important;
}
border: none;
background-color: transparent;
color: map-get($--button-text-typed-text-color, $type);
@include not-m(disabled) {
@include m(rippling) {
&::after {
display: none;
}
}
@include m(enter-pressed) {
background-color: transparent;
color: map-get($--button-text-typed-text-color, $type + '-active');
}
&:not(:active):focus {
@include not-m(enter-pressed) {
background-color: transparent;
color: map-get($--button-text-typed-text-color, $type + '-focus');
}
}
@include not-m(enter-pressed) {
&:hover {
background-color: transparent;
color: map-get($--button-text-typed-text-color, $type + '-hover');
}
&:active {
background-color: transparent;
color: map-get($--button-text-typed-text-color, $type + '-active');
}
}
}
}
@include e(icon) {
@include b(icon) {
fill: map-get($--button-text-color, $type) !important;
stroke: map-get($--button-text-color, $type) !important;
}
@include b(base-loading) {
fill: map-get($--button-text-color, $type) !important;
stroke: map-get($--button-text-color, $type) !important;
}
}
@include not-m(disabled) { @include not-m(disabled) {
@include m(enter-pressed) { @include m(enter-pressed) {
background-color: map-get($--button-background-color, $type + '-active'); background-color: map-get($--button-background-color, $type + '-active');
@ -224,23 +103,24 @@
@include e(border-mask) { @include e(border-mask) {
box-shadow: map-get($--button-border-mask-box-shadow, $type + '-active'); box-shadow: map-get($--button-border-mask-box-shadow, $type + '-active');
} }
@include e(icon) { @include button-icon-mixin(map-get($--button-text-color, $type + '-active'));
@include b(icon) {
fill: map-get($--button-text-color, $type + '-active') !important;
stroke: map-get($--button-text-color, $type + '-active') !important;
} }
@include b(base-loading) { @include not-m(enter-pressed) {
fill: map-get($--button-text-color, $type + '-active') !important; &:hover {
stroke: map-get($--button-text-color, $type + '-active') !important; background-color: map-get($--button-background-color, $type + '-hover');
color: map-get($--button-text-color, $type + '-hover');
@include e(border-mask) {
box-shadow: map-get($--button-border-mask-box-shadow, $type + '-hover');
} }
@include button-icon-mixin(map-get($--button-text-color, $type + '-hover'));
} }
&:active {
background-color: map-get($--button-background-color, $type + '-active');
color: map-get($--button-text-color, $type + '-active');
@include e(border-mask) {
box-shadow: map-get($--button-border-mask-box-shadow, $type + '-active');
} }
@include m(rippling) { @include button-icon-mixin(map-get($--button-text-color, $type + '-active'));
&::after {
z-index: 1;
animation-name: #{$theme}-#{$type}-button-ripple--spread, #{$theme}-#{$type}-button-ripple--opacity;
animation-duration: .6s;
animation-timing-function: cubic-bezier(0, .4, .5, .9), cubic-bezier(.5, .2, .8, .5);
} }
} }
&:not(:active):focus { &:not(:active):focus {
@ -250,55 +130,94 @@
@include e(border-mask) { @include e(border-mask) {
box-shadow: map-get($--button-border-mask-box-shadow, $type + '-focus'); box-shadow: map-get($--button-border-mask-box-shadow, $type + '-focus');
} }
@include e(icon) { @include button-icon-mixin(map-get($--button-text-color, $type + '-focus'));
@include b(icon) {
fill: map-get($--button-text-color, $type + '-focus') !important;
stroke: map-get($--button-text-color, $type + '-focus') !important;
}
@include b(base-loading) {
fill: map-get($--button-text-color, $type + '-focus') !important;
stroke: map-get($--button-text-color, $type + '-focus') !important;
} }
} }
@include m(rippling) {
&::after {
animation-name: #{$theme}-#{$type}-button-ripple--spread, #{$theme}-#{$type}-button-ripple--opacity;
}
}
}
@include m(ghost) {
background-color: map-get($--button-ghost-typed-background-color, $type);
color: map-get($--button-ghost-typed-text-color, $type);
border: 1px solid map-get($--button-ghost-typed-border-color, $type);
@include button-icon-mixin(map-get($--button-ghost-typed-text-color, $type));
@include not-m(disabled) {
@include m(enter-pressed) {
background-color: map-get($--button-ghost-typed-background-color, $type + '-active');
color: map-get($--button-ghost-typed-text-color, $type + '-active');
@include e(border-mask) {
box-shadow: map-get($--button-ghost-typed-border-mask-box-shadow, $type + '-active');
}
@include button-icon-mixin(map-get($--button-ghost-typed-text-color, $type + '-active'));
}
&:not(:active):focus {
@include not-m(enter-pressed) {
color: map-get($--button-ghost-typed-text-color, $type + '-focus');
background-color: map-get($--button-ghost-typed-background-color, $type + '-focus');
@include e(border-mask) {
box-shadow: map-get($--button-ghost-typed-border-mask-box-shadow, $type + '-focus');
}
@include button-icon-mixin(map-get($--button-ghost-typed-text-color, $type + '-focus'));
} }
} }
@include not-m(enter-pressed) { @include not-m(enter-pressed) {
&:hover { &:hover {
background-color: map-get($--button-background-color, $type + '-hover'); background-color: map-get($--button-ghost-typed-background-color, $type + '-hover');
color: map-get($--button-text-color, $type + '-hover'); color: map-get($--button-ghost-typed-text-color, $type + '-hover');
@include e(border-mask) { @include e(border-mask) {
box-shadow: map-get($--button-border-mask-box-shadow, $type + '-hover'); box-shadow: map-get($--button-ghost-typed-border-mask-box-shadow, $type + '-hover');
}
@include e(icon) {
@include b(icon) {
fill: map-get($--button-text-color, $type + '-hover') !important;
stroke: map-get($--button-text-color, $type + '-hover') !important;
}
@include b(base-loading) {
fill: map-get($--button-text-color, $type + '-hover') !important;
stroke: map-get($--button-text-color, $type + '-hover') !important;
}
} }
@include button-icon-mixin(map-get($--button-ghost-typed-text-color, $type + '-hover'));
} }
&:active { &:active {
background-color: map-get($--button-background-color, $type + '-active'); background-color: map-get($--button-ghost-typed-background-color, $type + '-active');
color: map-get($--button-text-color, $type + '-active'); color: map-get($--button-ghost-typed-text-color, $type + '-active');
@include e(border-mask) { @include e(border-mask) {
box-shadow: map-get($--button-border-mask-box-shadow, $type + '-active'); box-shadow: map-get($--button-ghost-typed-border-mask-box-shadow, $type + '-active');
} }
@include e(icon) { @include button-icon-mixin(map-get($--button-ghost-typed-text-color, $type + '-active'));
@include b(icon) {
fill: map-get($--button-text-color, $type + '-active') !important;
stroke: map-get($--button-text-color, $type + '-active') !important;
} }
@include b(base-loading) { }
fill: map-get($--button-text-color, $type + '-active') !important; }
stroke: map-get($--button-text-color, $type + '-active') !important; }
@include m(text) {
@include button-icon-mixin(map-get($--button-ghost-typed-text-color, $type));
color: map-get($--button-text-typed-text-color, $type);
@include not-m(disabled) {
@include m(enter-pressed) {
background-color: transparent;
color: map-get($--button-text-typed-text-color, $type + '-active');
@include button-icon-mixin(map-get($--button-ghost-typed-text-color, $type + '-active'));
}
&:not(:active):focus {
@include not-m(enter-pressed) {
background-color: transparent;
color: map-get($--button-text-typed-text-color, $type + '-focus');
@include button-icon-mixin(map-get($--button-ghost-typed-text-color, $type + '-focus'));
}
}
@include not-m(enter-pressed) {
&:hover {
background-color: transparent;
color: map-get($--button-text-typed-text-color, $type + '-hover');
@include button-icon-mixin(map-get($--button-ghost-typed-text-color, $type + '-hover'));
}
&:active {
background-color: transparent;
color: map-get($--button-text-typed-text-color, $type + '-active');
@include button-icon-mixin(map-get($--button-ghost-typed-text-color, $type + '-active'));
} }
} }
} }
} }
} }
@mixin button-type-mixin ($type) {
@include m($type + '-type') {
@include button-type-mixin-content($type);
} }
} }
@ -397,6 +316,22 @@
@include m(disabled) { @include m(disabled) {
cursor: not-allowed; cursor: not-allowed;
} }
@include not-m(disabled) {
@include m(rippling) {
&::after {
z-index: 1;
animation-duration: .6s;
animation-timing-function: cubic-bezier(0, .4, .5, .9), cubic-bezier(.5, .2, .8, .5);
}
}
}
@include m(text) {
@include e(border-mask) {
box-shadow: none !important;
}
border: none !important;
background-color: transparent !important;
}
&::-moz-focus-inner { &::-moz-focus-inner {
border: 0; border: 0;
} }
@ -408,7 +343,7 @@
@include m(disabled) { @include m(disabled) {
opacity: $--button-disabled-opacity; opacity: $--button-disabled-opacity;
} }
@include button-type-mixin('default'); @include button-type-mixin-content('default');
@include button-type-mixin('primary'); @include button-type-mixin('primary');
@include button-type-mixin('info'); @include button-type-mixin('info');
@include button-type-mixin('success'); @include button-type-mixin('success');