mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-12 12:25:16 +08:00
refactor(button): clean button style
This commit is contained in:
07akioni
parent
e5ea6775a1
commit
862ec603e7
@ -78,228 +78,147 @@
|
||||
}
|
||||
}
|
||||
|
||||
@mixin button-type-mixin ($type) {
|
||||
@include m($type + '-type') {
|
||||
color: map-get($--button-text-color, $type);
|
||||
background-color: map-get($--button-background-color, $type);
|
||||
border: 1px solid map-get($--button-border-color, $type);
|
||||
@include m(ghost, text) {
|
||||
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;
|
||||
}
|
||||
}
|
||||
@mixin button-icon-mixin($color) {
|
||||
@include e(icon) {
|
||||
@include b(icon) {
|
||||
fill: $color !important;
|
||||
stroke: $color !important;
|
||||
}
|
||||
@include m(text) {
|
||||
@include b(base-loading) {
|
||||
fill: $color !important;
|
||||
stroke: $color !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin button-type-mixin-content ($type) {
|
||||
color: map-get($--button-text-color, $type);
|
||||
background-color: map-get($--button-background-color, $type);
|
||||
border: 1px solid map-get($--button-border-color, $type);
|
||||
@include button-icon-mixin(map-get($--button-text-color, $type));
|
||||
@include not-m(disabled) {
|
||||
@include m(enter-pressed) {
|
||||
background-color: map-get($--button-background-color, $type + '-active');
|
||||
color: map-get($--button-text-color, $type + '-active');
|
||||
@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');
|
||||
}
|
||||
}
|
||||
box-shadow: map-get($--button-border-mask-box-shadow, $type + '-active');
|
||||
}
|
||||
@include button-icon-mixin(map-get($--button-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 not-m(enter-pressed) {
|
||||
&:hover {
|
||||
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'));
|
||||
}
|
||||
@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 m(enter-pressed) {
|
||||
&: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 e(icon) {
|
||||
@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 button-icon-mixin(map-get($--button-text-color, $type + '-active'));
|
||||
}
|
||||
}
|
||||
&:not(:active):focus {
|
||||
@include not-m(enter-pressed) {
|
||||
background-color: map-get($--button-background-color, $type + '-focus');
|
||||
color: map-get($--button-text-color, $type + '-focus');
|
||||
@include e(border-mask) {
|
||||
box-shadow: map-get($--button-border-mask-box-shadow, $type + '-focus');
|
||||
}
|
||||
@include button-icon-mixin(map-get($--button-text-color, $type + '-focus'));
|
||||
}
|
||||
@include m(rippling) {
|
||||
&::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);
|
||||
}
|
||||
@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) {
|
||||
background-color: map-get($--button-background-color, $type + '-focus');
|
||||
color: map-get($--button-text-color, $type + '-focus');
|
||||
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-border-mask-box-shadow, $type + '-focus');
|
||||
}
|
||||
@include e(icon) {
|
||||
@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;
|
||||
}
|
||||
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) {
|
||||
&:hover {
|
||||
background-color: map-get($--button-background-color, $type + '-hover');
|
||||
color: map-get($--button-text-color, $type + '-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-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;
|
||||
}
|
||||
box-shadow: map-get($--button-ghost-typed-border-mask-box-shadow, $type + '-hover');
|
||||
}
|
||||
@include button-icon-mixin(map-get($--button-ghost-typed-text-color, $type + '-hover'));
|
||||
}
|
||||
&:active {
|
||||
background-color: map-get($--button-background-color, $type + '-active');
|
||||
color: map-get($--button-text-color, $type + '-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-border-mask-box-shadow, $type + '-active');
|
||||
}
|
||||
@include e(icon) {
|
||||
@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;
|
||||
}
|
||||
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'));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@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);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin button-ripple-mixin($type) {
|
||||
@ -397,6 +316,22 @@
|
||||
@include m(disabled) {
|
||||
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 {
|
||||
border: 0;
|
||||
}
|
||||
@ -408,7 +343,7 @@
|
||||
@include m(disabled) {
|
||||
opacity: $--button-disabled-opacity;
|
||||
}
|
||||
@include button-type-mixin('default');
|
||||
@include button-type-mixin-content('default');
|
||||
@include button-type-mixin('primary');
|
||||
@include button-type-mixin('info');
|
||||
@include button-type-mixin('success');
|
||||
|
||||
Loading…
Reference in New Issue
Block a user