You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
433 lines
12 KiB
433 lines
12 KiB
@import '../../next-core/lib/next.scss';
|
|
|
|
@import './scss/variable.scss';
|
|
@import './scss/normalize.scss';
|
|
@import './scss/mixin.scss';
|
|
|
|
#{$btn-prefix} {
|
|
& {
|
|
position: relative;
|
|
display: inline-block;
|
|
font-style: normal;
|
|
font-family: inherit;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
transition: all .3s ease-out;
|
|
box-shadow: $btn-shadow;
|
|
border-radius: $btn-corner;
|
|
border-style: solid;
|
|
text-align: center;
|
|
|
|
&,
|
|
&:active,
|
|
&:focus {
|
|
outline: 0;
|
|
}
|
|
|
|
&.disabled,
|
|
&[disabled] {
|
|
@include button-color(
|
|
$btn-color-disabled,
|
|
$btn-color-disabled,
|
|
$btn-bg-disabled,
|
|
$btn-bg-disabled,
|
|
$btn-border-color-disabled,
|
|
$btn-border-color-disabled
|
|
);
|
|
}
|
|
|
|
&[disabled] {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
&:after {
|
|
text-align: center;
|
|
position: absolute;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: opacity 0.5s ease;
|
|
}
|
|
}
|
|
|
|
/* 重要性维度*/
|
|
/* ----------------------------------------*/
|
|
|
|
&-primary {
|
|
border-style: $btn-primary-border-style;
|
|
|
|
@include button-color(
|
|
$btn-primary-color,
|
|
$btn-primary-color-hover,
|
|
$btn-primary-bg,
|
|
$btn-primary-bg-hover,
|
|
$btn-primary-border-color,
|
|
$btn-primary-border-color-hover
|
|
);
|
|
}
|
|
&-secondary {
|
|
border-style: $btn-secondary-border-style;
|
|
|
|
@include button-color(
|
|
$btn-secondary-color,
|
|
$btn-secondary-color-hover,
|
|
$btn-secondary-bg,
|
|
$btn-secondary-bg-hover,
|
|
$btn-secondary-border-color,
|
|
$btn-secondary-border-color-hover
|
|
);
|
|
}
|
|
&-normal {
|
|
border-style: $btn-normal-border-style;
|
|
|
|
@include button-color(
|
|
$btn-normal-color,
|
|
$btn-normal-color-hover,
|
|
$btn-normal-bg,
|
|
$btn-normal-bg-hover,
|
|
$btn-normal-border-color,
|
|
$btn-normal-border-color-hover
|
|
);
|
|
}
|
|
|
|
/* 尺寸维度*/
|
|
/* ----------------------------------------*/
|
|
|
|
&-small {
|
|
@include button-size(
|
|
$btn-size-s-margin,
|
|
$btn-size-s-padding,
|
|
$btn-size-s-height,
|
|
$btn-size-s-font,
|
|
$btn-size-s-border-width,
|
|
$btn-size-s-icon-margin,
|
|
$btn-size-s-icon-size,
|
|
$btn-size-s-icon-split-size
|
|
);
|
|
}
|
|
&-medium {
|
|
@include button-size(
|
|
$btn-size-m-margin,
|
|
$btn-size-m-padding,
|
|
$btn-size-m-height,
|
|
$btn-size-m-font,
|
|
$btn-size-m-border-width,
|
|
$btn-size-m-icon-margin,
|
|
$btn-size-m-icon-size,
|
|
$btn-size-m-icon-split-size
|
|
);
|
|
}
|
|
&-large {
|
|
@include button-size(
|
|
$btn-size-l-margin,
|
|
$btn-size-l-padding,
|
|
$btn-size-l-height,
|
|
$btn-size-l-font,
|
|
$btn-size-l-border-width,
|
|
$btn-size-l-icon-margin,
|
|
$btn-size-l-icon-size,
|
|
$btn-size-l-icon-split-size
|
|
);
|
|
}
|
|
|
|
/* 形状维度*/
|
|
/* ----------------------------------------*/
|
|
|
|
&-ghost {
|
|
box-shadow: none;
|
|
border-style: $btn-ghost-border-style;
|
|
|
|
&#{$btn-prefix}-dark {
|
|
@include button-color(
|
|
$btn-ghost-dark-color,
|
|
$btn-ghost-dark-color-hover,
|
|
$btn-ghost-dark-bg-normal,
|
|
$btn-ghost-dark-bg-hover,
|
|
$btn-ghost-dark-border-color,
|
|
$btn-ghost-dark-border-color-hover
|
|
);
|
|
&.disabled,
|
|
&[disabled] {
|
|
@include button-color(
|
|
$btn-ghost-dark-color-disabled,
|
|
$btn-ghost-dark-color-disabled,
|
|
$btn-ghost-dark-bg-disabled,
|
|
$btn-ghost-dark-bg-disabled,
|
|
$btn-ghost-dark-border-color-disabled,
|
|
$btn-ghost-dark-border-color-disabled
|
|
);
|
|
}
|
|
}
|
|
&#{$btn-prefix}-light {
|
|
@include button-color(
|
|
$btn-ghost-light-color,
|
|
$btn-ghost-light-color-hover,
|
|
$btn-ghost-light-bg-normal,
|
|
$btn-ghost-light-bg-hover,
|
|
$btn-ghost-light-border-color,
|
|
$btn-ghost-light-border-color-hover
|
|
);
|
|
|
|
&.disabled,
|
|
&[disabled] {
|
|
@include button-color(
|
|
$btn-ghost-light-color-disabled,
|
|
$btn-ghost-light-color-disabled,
|
|
$btn-ghost-light-bg-disabled,
|
|
$btn-ghost-light-bg-disabled,
|
|
$btn-ghost-light-border-color-disabled,
|
|
$btn-ghost-light-border-color-disabled
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
&-warning {
|
|
border-style: $btn-warning-border-style;
|
|
|
|
&#{$btn-prefix}-primary {
|
|
@include button-color(
|
|
$btn-warning-primary-color,
|
|
$btn-warning-primary-color-hover,
|
|
$btn-warning-primary-bg,
|
|
$btn-warning-primary-bg-hover,
|
|
$btn-warning-primary-border-color,
|
|
$btn-warning-primary-border-color-hover
|
|
);
|
|
&.disabled,
|
|
&[disabled] {
|
|
@include button-color(
|
|
$btn-warning-primary-color-disabled,
|
|
$btn-warning-primary-color-disabled,
|
|
$btn-warning-primary-bg-disabled,
|
|
$btn-warning-primary-bg-disabled,
|
|
$btn-warning-primary-border-color-disabled,
|
|
$btn-warning-primary-border-color-disabled
|
|
);
|
|
}
|
|
}
|
|
&#{$btn-prefix}-normal {
|
|
@include button-color(
|
|
$btn-warning-normal-color,
|
|
$btn-warning-normal-color-hover,
|
|
$btn-warning-normal-bg,
|
|
$btn-warning-normal-bg-hover,
|
|
$btn-warning-normal-border-color,
|
|
$btn-warning-normal-border-color-hover
|
|
);
|
|
|
|
&.disabled,
|
|
&[disabled] {
|
|
@include button-color(
|
|
$btn-warning-normal-color-disabled,
|
|
$btn-warning-normal-color-disabled,
|
|
$btn-warning-normal-bg-disabled,
|
|
$btn-warning-normal-bg-disabled,
|
|
$btn-warning-normal-border-color-disabled,
|
|
$btn-warning-normal-border-color-disabled
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* loading*/
|
|
/* ----------------------------------------*/
|
|
|
|
&-loading {
|
|
pointer-events: none;
|
|
|
|
&:after {
|
|
font-family: $icon-font-family;
|
|
content: $icon-content-loading;
|
|
opacity: 1;
|
|
visibility: visible;
|
|
-webkit-animation: loadingCircle 2s infinite linear;
|
|
animation: loadingCircle 2s infinite linear;
|
|
}
|
|
}
|
|
|
|
&-text {
|
|
box-shadow: none;
|
|
|
|
&#{$btn-prefix}-primary {
|
|
@include button-color(
|
|
$btn-text-primary-color,
|
|
$btn-text-primary-color-hover,
|
|
transparent,
|
|
transparent,
|
|
transparent,
|
|
transparent
|
|
);
|
|
}
|
|
&#{$btn-prefix}-secondary {
|
|
@include button-color(
|
|
$btn-text-secondary-color,
|
|
$btn-text-secondary-color-hover,
|
|
transparent,
|
|
transparent,
|
|
transparent,
|
|
transparent
|
|
);
|
|
}
|
|
&#{$btn-prefix}-normal {
|
|
@include button-color(
|
|
$btn-text-normal-color,
|
|
$btn-text-normal-color-hover,
|
|
transparent,
|
|
transparent,
|
|
transparent,
|
|
transparent
|
|
);
|
|
}
|
|
&#{$btn-prefix}-large {
|
|
@include button-size(
|
|
$btn-text-size-l-margin,
|
|
0,
|
|
$btn-text-size-l-height,
|
|
$btn-text-size-l-font,
|
|
0,
|
|
$btn-text-icon-l-margin,
|
|
$btn-size-l-icon-size,
|
|
$btn-size-l-icon-split-size
|
|
);
|
|
}
|
|
&#{$btn-prefix}-medium {
|
|
@include button-size(
|
|
$btn-text-size-m-margin,
|
|
0,
|
|
$btn-text-size-m-height,
|
|
$btn-text-size-m-font,
|
|
0,
|
|
$btn-text-icon-m-margin,
|
|
$btn-size-m-icon-size,
|
|
$btn-size-m-icon-split-size
|
|
);
|
|
}
|
|
&#{$btn-prefix}-small {
|
|
@include button-size(
|
|
$btn-text-size-s-margin,
|
|
0,
|
|
$btn-text-size-s-height,
|
|
$btn-text-size-s-font,
|
|
0,
|
|
$btn-text-icon-s-margin,
|
|
$btn-size-s-icon-size,
|
|
$btn-size-s-icon-split-size
|
|
);
|
|
}
|
|
&.disabled,
|
|
&[disabled] {
|
|
@include button-color(
|
|
$btn-text-disabled-color,
|
|
$btn-text-disabled-color,
|
|
transparent,
|
|
transparent,
|
|
transparent,
|
|
transparent
|
|
);
|
|
}
|
|
&#{$btn-prefix}-loading {
|
|
@include button-color(
|
|
$btn-text-loading-color,
|
|
$btn-text-loading-color,
|
|
transparent,
|
|
transparent,
|
|
transparent,
|
|
transparent
|
|
);
|
|
}
|
|
}
|
|
|
|
/* 组合*/
|
|
/* ----------------------------------------*/
|
|
|
|
&-group {
|
|
position: relative;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
|
|
> #{$btn-prefix} {
|
|
position: relative;
|
|
float: left;
|
|
box-shadow: none;
|
|
|
|
&:hover,
|
|
&:focus,
|
|
&:active,
|
|
&.active {
|
|
z-index: 1;
|
|
}
|
|
&.disabled,
|
|
&[disabled] {
|
|
z-index: 0;
|
|
}
|
|
}
|
|
|
|
#{$btn-prefix}#{$btn-prefix} {
|
|
margin: 0 0 0 -1px;
|
|
}
|
|
|
|
#{$btn-prefix}:not(:first-child):not(:last-child) {
|
|
border-radius: 0;
|
|
}
|
|
|
|
> #{$btn-prefix}:first-child {
|
|
margin: 0;
|
|
}
|
|
|
|
> #{$btn-prefix}:first-child:not(:last-child) {
|
|
border-bottom-right-radius: 0;
|
|
border-top-right-radius: 0;
|
|
}
|
|
|
|
> #{$btn-prefix}:last-child:not(:first-child) {
|
|
border-bottom-left-radius: 0;
|
|
border-top-left-radius: 0;
|
|
}
|
|
|
|
> #{$btn-prefix}-primary:not(:first-child) {
|
|
border-left-color: transparentize($color-white, 0.8);
|
|
|
|
&:hover {
|
|
border-left-color: transparent;
|
|
}
|
|
&.disabled,
|
|
&[disabled] {
|
|
border-left-color: $color-line1-1;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-split {
|
|
> #{$btn-prefix}:last-child:not(:first-child) {
|
|
&#{$btn-prefix}-large {
|
|
width: $s-10;
|
|
padding: 0;
|
|
}
|
|
|
|
&#{$btn-prefix}-medium {
|
|
width: $s-7;
|
|
padding: 0;
|
|
}
|
|
|
|
&#{$btn-prefix}-small {
|
|
width: $s-5;
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
> #{$btn-prefix}:first-child:not(:last-child) {
|
|
&#{$btn-prefix}-large {
|
|
padding: 0 $s-3 0 $s-5;
|
|
}
|
|
|
|
&#{$btn-prefix}-medium {
|
|
padding: 0 $s-3 0 $s-4;
|
|
}
|
|
|
|
&#{$btn-prefix}-small {
|
|
padding: 0 $s-2 0 $s-3;
|
|
}
|
|
}
|
|
}
|
|
}
|