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) {
|
@mixin button-icon-mixin($color) {
|
||||||
@include m($type + '-type') {
|
@include e(icon) {
|
||||||
color: map-get($--button-text-color, $type);
|
@include b(icon) {
|
||||||
background-color: map-get($--button-background-color, $type);
|
fill: $color !important;
|
||||||
border: 1px solid map-get($--button-border-color, $type);
|
stroke: $color !important;
|
||||||
@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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
@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) {
|
@include e(border-mask) {
|
||||||
box-shadow: none !important;
|
box-shadow: map-get($--button-border-mask-box-shadow, $type + '-active');
|
||||||
}
|
|
||||||
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 button-icon-mixin(map-get($--button-text-color, $type + '-active'));
|
||||||
}
|
}
|
||||||
@include e(icon) {
|
@include not-m(enter-pressed) {
|
||||||
@include b(icon) {
|
&:hover {
|
||||||
fill: map-get($--button-text-color, $type) !important;
|
background-color: map-get($--button-background-color, $type + '-hover');
|
||||||
stroke: map-get($--button-text-color, $type) !important;
|
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) {
|
&:active {
|
||||||
fill: map-get($--button-text-color, $type) !important;
|
|
||||||
stroke: map-get($--button-text-color, $type) !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@include not-m(disabled) {
|
|
||||||
@include m(enter-pressed) {
|
|
||||||
background-color: map-get($--button-background-color, $type + '-active');
|
background-color: map-get($--button-background-color, $type + '-active');
|
||||||
color: map-get($--button-text-color, $type + '-active');
|
color: map-get($--button-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-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;
|
&:not(:active):focus {
|
||||||
}
|
@include not-m(enter-pressed) {
|
||||||
@include b(base-loading) {
|
background-color: map-get($--button-background-color, $type + '-focus');
|
||||||
fill: map-get($--button-text-color, $type + '-active') !important;
|
color: map-get($--button-text-color, $type + '-focus');
|
||||||
stroke: map-get($--button-text-color, $type + '-active') !important;
|
@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 {
|
@include m(rippling) {
|
||||||
z-index: 1;
|
&::after {
|
||||||
animation-name: #{$theme}-#{$type}-button-ripple--spread, #{$theme}-#{$type}-button-ripple--opacity;
|
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(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 {
|
&:not(:active):focus {
|
||||||
@include not-m(enter-pressed) {
|
@include not-m(enter-pressed) {
|
||||||
background-color: map-get($--button-background-color, $type + '-focus');
|
color: map-get($--button-ghost-typed-text-color, $type + '-focus');
|
||||||
color: map-get($--button-text-color, $type + '-focus');
|
background-color: map-get($--button-ghost-typed-background-color, $type + '-focus');
|
||||||
@include e(border-mask) {
|
@include e(border-mask) {
|
||||||
box-shadow: map-get($--button-border-mask-box-shadow, $type + '-focus');
|
box-shadow: map-get($--button-ghost-typed-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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
@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 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-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) {
|
@mixin button-ripple-mixin($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');
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user