mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2024-12-27 05:00:48 +08:00
580 lines
18 KiB
SCSS
580 lines
18 KiB
SCSS
@import './mixins/mixins.scss';
|
|
|
|
@mixin button-size-mixin($size) {
|
|
@include m($size + '-size') {
|
|
$height: map-get($--n-height, $size);
|
|
$font-size: map-get($--n-button-font-size, $size);
|
|
$icon-size: map-get($--n-button-icon-size, $size);
|
|
border-radius: $--n-button-border-radius;
|
|
font-size: $font-size;
|
|
@include not-m(text) {
|
|
height: $height;
|
|
line-height: $height - 2px;
|
|
padding: map-get($--n-button-padding, $size);
|
|
}
|
|
white-space: nowrap;
|
|
@include m(round) {
|
|
padding: map-get($--n-button-round-padding, $size);
|
|
border-radius: $height / 2;
|
|
}
|
|
@include m(circle) {
|
|
border-radius: $height / 2;
|
|
width: $height;
|
|
padding: 0!important;
|
|
}
|
|
@include e(content) {
|
|
display: inline-block;
|
|
line-height: inherit;
|
|
}
|
|
@include e(icon) {
|
|
display: inline-block;
|
|
position: relative;
|
|
line-height: $height - 2px;
|
|
height: $height - 2px;
|
|
width: $icon-size;
|
|
max-width: $icon-size;
|
|
vertical-align: bottom;
|
|
@include b(icon) {
|
|
font-size: $icon-size;
|
|
}
|
|
@include b(base-loading) {
|
|
height: $icon-size - 2px;
|
|
width: $icon-size - 2px;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
display: block;
|
|
@include icon-switch-transition($top: 50%, $original-transform: translateY(-50%));
|
|
}
|
|
@include m(slot) {
|
|
width: $icon-size;
|
|
font-size: $icon-size;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
vertical-align: bottom;
|
|
@include b(icon-slot) {
|
|
@include icon-switch-transition($top: 50%, $original-transform: translateY(-50%));
|
|
position: absolute;
|
|
left: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
display: block;
|
|
line-height: $icon-size;
|
|
height: $icon-size;
|
|
width: $icon-size;
|
|
font-size: $icon-size;
|
|
}
|
|
}
|
|
}
|
|
@include m(text) {
|
|
padding: 0;
|
|
border-radius: 0;
|
|
@include e(icon) {
|
|
height: $icon-size;
|
|
line-height: $icon-size;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@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;
|
|
}
|
|
}
|
|
}
|
|
@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 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: 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 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);
|
|
}
|
|
}
|
|
&: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 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 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 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;
|
|
}
|
|
}
|
|
}
|
|
&: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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin button-ripple-mixin($type) {
|
|
@keyframes #{$theme}-#{$type}-button-ripple--spread {
|
|
from {
|
|
box-shadow: map-get($--button-ripple-box-shadow, $type + '-start');
|
|
}
|
|
to {
|
|
box-shadow: map-get($--button-ripple-box-shadow, $type + '-end');
|
|
}
|
|
}
|
|
@keyframes #{$theme}-#{$type}-button-ripple--opacity {
|
|
from {
|
|
opacity: .4;
|
|
}
|
|
to {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include themes-mixin() {
|
|
@include button-ripple-mixin('default');
|
|
@include button-ripple-mixin('primary');
|
|
@include button-ripple-mixin('error');
|
|
@include button-ripple-mixin('success');
|
|
@include button-ripple-mixin('warning');
|
|
@include button-ripple-mixin('info');
|
|
@include b(button) {
|
|
@include once {
|
|
box-sizing: border-box;
|
|
outline: none;
|
|
position: relative;
|
|
z-index: auto;
|
|
border: none;
|
|
font-family: inherit;
|
|
display: inline-block;
|
|
align-items: center;
|
|
justify-content: center;
|
|
user-select: none;
|
|
text-align: center;
|
|
transition:
|
|
background-color .3s $--n-ease-in-out-cubic-bezier,
|
|
opacity .3s $--n-ease-in-out-cubic-bezier,
|
|
border-color .3s $--n-ease-in-out-cubic-bezier;
|
|
cursor: pointer;
|
|
&::after {
|
|
pointer-events: none;
|
|
content: "";
|
|
border-radius: inherit;
|
|
position: absolute;
|
|
left: -1px;
|
|
top: -1px;
|
|
right: -1px;
|
|
bottom: -1px;
|
|
}
|
|
@include e(border-mask) {
|
|
position: absolute;
|
|
left: -1px;
|
|
top: -1px;
|
|
right: -1px;
|
|
bottom: -1px;
|
|
border-radius: inherit;
|
|
box-shadow: inset 0 0 0 1px transparent;
|
|
transition: box-shadow .3s $--n-ease-in-out-cubic-bezier;
|
|
pointer-events: none;
|
|
}
|
|
@include e(icon) {
|
|
@include fade-in-width-expand-transition();
|
|
transition: color .3s $--n-ease-in-out-cubic-bezier;
|
|
}
|
|
@include e(content) {
|
|
white-space: nowrap;
|
|
transition: color .3s $--n-ease-in-out-cubic-bezier;
|
|
}
|
|
@include m(left-icon) {
|
|
@include e(icon) {
|
|
margin-right: 6px;
|
|
}
|
|
}
|
|
@include m(right-icon) {
|
|
@include e(icon) {
|
|
margin-left: 6px;
|
|
}
|
|
}
|
|
@include m(block) {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
@include m(loading) {
|
|
cursor: default;
|
|
opacity: 1;
|
|
}
|
|
@include m(disabled) {
|
|
cursor: not-allowed;
|
|
}
|
|
&::-moz-focus-inner {
|
|
border: 0;
|
|
}
|
|
@include button-size-mixin('tiny');
|
|
@include button-size-mixin('small');
|
|
@include button-size-mixin('medium');
|
|
@include button-size-mixin('large');
|
|
}
|
|
@include m(disabled) {
|
|
opacity: $--button-disabled-opacity;
|
|
}
|
|
@include button-type-mixin('default');
|
|
@include button-type-mixin('primary');
|
|
@include button-type-mixin('info');
|
|
@include button-type-mixin('success');
|
|
@include button-type-mixin('warning');
|
|
@include button-type-mixin('error');
|
|
}
|
|
}
|
|
|
|
@include b(button-group) {
|
|
white-space: nowrap;
|
|
display: inline-block;
|
|
position: relative;
|
|
@include not-m(vertical) {
|
|
@include m(block) {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
@include b(button) {
|
|
flex-grow: 1;
|
|
}
|
|
}
|
|
@include b(button) {
|
|
&:first-child:not(:last-child) {
|
|
margin-right: 0!important;
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
&:last-child:not(:first-child) {
|
|
margin-left: 0!important;
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
}
|
|
&:not(:first-child):not(:last-child) {
|
|
margin-left: 0!important;
|
|
margin-right: 0!important;
|
|
border-radius: 0!important;
|
|
}
|
|
/**
|
|
* Not an perfect implementation,
|
|
* since their border is not really "shared"
|
|
*/
|
|
@include m(default-type) {
|
|
& + {
|
|
@include b(button) {
|
|
@include m(default-type) {
|
|
border-left-width: 0px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@include m(ghost) {
|
|
@include m(primary-type) {
|
|
& + {
|
|
@include b(button) {
|
|
@include m(primary-type) {
|
|
border-left-width: 0px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@include m(success-type) {
|
|
& + {
|
|
@include b(button) {
|
|
@include m(success-type) {
|
|
border-left-width: 0px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@include m(error-type) {
|
|
& + {
|
|
@include b(button) {
|
|
@include m(error-type) {
|
|
border-left-width: 0px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@include m(info-type) {
|
|
& + {
|
|
@include b(button) {
|
|
@include m(info-type) {
|
|
border-left-width: 0px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@include m(vertical) {
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
@include b(button) {
|
|
&:first-child {
|
|
margin-bottom: 0!important;
|
|
margin-left: 0!important;
|
|
margin-right: 0!important;
|
|
border-bottom-left-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
&:last-child {
|
|
margin-top: 0!important;
|
|
margin-left: 0!important;
|
|
margin-right: 0!important;
|
|
border-top-left-radius: 0;
|
|
border-top-right-radius: 0;
|
|
}
|
|
&:not(:first-child):not(:last-child) {
|
|
margin: 0!important;
|
|
border-radius: 0!important;
|
|
}
|
|
@include m(default-type) {
|
|
& + {
|
|
@include b(button) {
|
|
@include m(default-type) {
|
|
border-top-width: 0px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@include m(ghost) {
|
|
@include m(info-type) {
|
|
& + {
|
|
@include b(button) {
|
|
@include m(info-type) {
|
|
border-top-width: 0px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@include m(success-type) {
|
|
& + {
|
|
@include b(button) {
|
|
@include m(success-type) {
|
|
border-top-width: 0px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@include m(warning-type) {
|
|
& + {
|
|
@include b(button) {
|
|
@include m(warning-type) {
|
|
border-top-width: 0px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@include m(error-type) {
|
|
& + {
|
|
@include b(button) {
|
|
@include m(error-type) {
|
|
border-top-width: 0px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@include m(primary-type) {
|
|
& + {
|
|
@include b(button) {
|
|
@include m(primary-type) {
|
|
border-top-width: 0px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
} |