naive-ui/styles/Button.scss

353 lines
10 KiB
SCSS

@import './mixins/mixins.scss';
@import './themes/vars.scss';
@mixin button-size-mixin($size) {
@include m($size + "-size") {
$height: map-get($map: $button-height, $key: $size);
$font-size: map-get($map: $button-font-size, $key: $size);
border-radius: $button-border-radius;
font-size: $font-size;
@include not-m(text) {
height: $height;
line-height: $height;
padding: map-get($map: $button-padding, $key: $size);
}
white-space: nowrap;
@include m(round) {
padding: map-get($map: $round-button-padding, $key: $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;
$icon-size: map-get($map: $button-icon-size, $key: $size);
line-height: $height;
height: $height;
width: $icon-size;
max-width: $icon-size;
vertical-align: bottom;
@include b(icon) {
font-size: $icon-size;
}
@include b(spin) {
height: $icon-size;
width: $icon-size;
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;
font-weight: 700;
border-radius: 0;
}
}
}
@mixin button-type-mixin ($type) {
@include m($type + "-type") {
color: map-get($map: $button-color, $key: $type);
background-color: map-get($map: $button-background-color, $key: $type);
box-shadow: map-get($map: $button-box-shadow, $key: $type);
@include m(text) {
box-shadow: none;
background-color: transparent;
color: map-get($--text-button-color, $type);
@include not-m(disabled) {
@include m(rippling) {
&::after {
display: none;
}
}
@include m(enter-pressed) {
background-color: transparent;
color: map-get($--text-button-color, $type + '-active');
}
&:not(:active):focus {
@include not-m(enter-pressed) {
background-color: transparent;
color: map-get($--text-button-color, $type + '-focus');
}
}
@include not-m(enter-pressed) {
&:hover {
background-color: transparent;
color: map-get($--text-button-color, $type + '-hover');
}
&:active {
background-color: transparent;
color: map-get($--text-button-color, $type + '-active');
}
}
}
}
@include m(ghost) {
background-color: map-get($map: $ghost-button-background-color, $key: $type);
color: map-get($map: $ghost-button-color, $key: $type);
box-shadow: map-get($map: $button-box-shadow, $key: $type + '-ghost');
@include not-m(disabled) {
@include m(enter-pressed) {
background-color: map-get($map: $ghost-button-background-color, $key: $type + '-active');
}
&:not(:active):focus {
@include not-m(enter-pressed) {
background-color: map-get($map: $ghost-button-background-color, $key: $type + '-hover');
}
}
@include not-m(enter-pressed) {
&:hover {
background-color: map-get($map: $ghost-button-background-color, $key: $type + '-hover');
}
&:active {
background-color: map-get($map: $ghost-button-background-color, $key: $type + '-active');
}
}
}
@include e(icon) {
@include b(icon) {
fill: map-get($map: $ghost-button-color, $key: $type) !important;
}
circle {
stroke: map-get($map: $ghost-button-color, $key: $type) !important;
}
}
}
@if $type == 'default' {
@include e(icon) {
@include b(icon) {
fill: map-get($map: $ghost-button-color, $key: $type) !important;
}
circle {
stroke: map-get($map: $ghost-button-color, $key: $type) !important;
}
}
}
@include not-m(disabled) {
@include m(enter-pressed) {
background-color: map-get($map: $button-background-color, $key: $type + '-active');
}
@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($map: $button-background-color, $key: $type + '-hover');
}
}
@include not-m(enter-pressed) {
&:hover {
background-color: map-get($map: $button-background-color, $key: $type + '-hover');
}
&:active {
background-color: map-get($map: $button-background-color, $key: $type + '-active');
}
}
}
@content;
}
}
@mixin ripple-mixin($type) {
@keyframes #{$theme}-#{$type}-button-ripple--spread {
from {
box-shadow: map-get($map: $button-box-shadow, $key: $type + '-focus-ripple-start');
}
to {
box-shadow: map-get($map: $button-box-shadow, $key: $type + '-focus-ripple-end');
}
}
@keyframes #{$theme}-#{$type}-button-ripple--opacity {
from {
opacity: .4;
}
to {
opacity: 0;
}
}
}
@include themes-mixin() {
@include ripple-mixin('default');
@include ripple-mixin('primary');
@include ripple-mixin('error');
@include ripple-mixin('success');
@include ripple-mixin('warning');
@include ripple-mixin('info');
@include b(button) {
@include once {
outline: none;
position: relative;
border: none;
font-family: $button-font-family;
display: inline-block;
align-items: center;
justify-content: center;
user-select: none;
// font-weight: 700;
text-align: center;
transition: background-color .2s $default-cubic-bezier, opacity .15s $default-cubic-bezier, box-shadow .3s $default-cubic-bezier;
cursor: pointer;
&::after {
content: "";
border-radius: inherit;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
@include e(icon) {
@include fade-in-width-expand-transition();
transition: color .3s $default-cubic-bezier;
}
@include e(content-aligner) {
display: inline-block;
line-height: inherit;
height: 100%;
font-size: inherit;
white-space: nowrap;
visibility: hidden;
width: 0;
}
@include e(content) {
white-space: nowrap;
transition: color .3s $default-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;
opacity: .4;
}
&::-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 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 elegant implementation
*/
&.n-button--default-type + .n-button--default-type {
margin-left: -1px!important;
}
}
}
@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;
}
}
}
}