2019-04-30 11:11:25 +08:00
|
|
|
|
// 媒体查询最小阈值
|
|
|
|
|
|
@mixin media-breakpoint-up($name, $breakpoints: $breakpoints) {
|
2019-12-06 09:58:08 +08:00
|
|
|
|
$min: breakpoint-min($name, $breakpoints);
|
2019-05-15 16:10:20 +08:00
|
|
|
|
|
2019-12-06 09:58:08 +08:00
|
|
|
|
@if $min {
|
|
|
|
|
|
@media (min-width: $min) {
|
|
|
|
|
|
@content;
|
2019-04-30 11:11:25 +08:00
|
|
|
|
}
|
2019-12-06 09:58:08 +08:00
|
|
|
|
} @else {
|
|
|
|
|
|
@content;
|
|
|
|
|
|
}
|
2019-04-30 11:11:25 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
//媒体查询最大阈值
|
|
|
|
|
|
@mixin media-breakpoint-down($name, $breakpoints: $breakpoints) {
|
2019-12-06 09:58:08 +08:00
|
|
|
|
$max: breakpoint-max($name, $breakpoints);
|
2019-05-15 16:10:20 +08:00
|
|
|
|
|
2019-12-06 09:58:08 +08:00
|
|
|
|
@if $max {
|
|
|
|
|
|
@media (max-width: $max) {
|
|
|
|
|
|
@content;
|
2019-04-30 11:11:25 +08:00
|
|
|
|
}
|
2019-12-06 09:58:08 +08:00
|
|
|
|
} @else {
|
|
|
|
|
|
@content;
|
|
|
|
|
|
}
|
2019-04-30 11:11:25 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
//媒体查询中间阈值
|
|
|
|
|
|
@mixin media-breakpoint-between($min, $max, $breakpoints: $breakpoints) {
|
2019-12-06 09:58:08 +08:00
|
|
|
|
$min: breakpoint-min($min, $breakpoints);
|
|
|
|
|
|
$max: breakpoint-max($max, $breakpoints);
|
2019-05-15 16:10:20 +08:00
|
|
|
|
|
2019-12-06 09:58:08 +08:00
|
|
|
|
@media (min-width: $min) and (max-width: $max) {
|
|
|
|
|
|
@content;
|
|
|
|
|
|
}
|
2019-04-30 11:11:25 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
2020-11-24 23:08:04 +08:00
|
|
|
|
@mixin media-device($name, $devices: $devices) {
|
|
|
|
|
|
$n: map-get($devices, $name);
|
|
|
|
|
|
|
|
|
|
|
|
@media #{$n} {
|
|
|
|
|
|
@content;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2019-04-30 11:11:25 +08:00
|
|
|
|
@mixin clearfix() {
|
2019-12-06 09:58:08 +08:00
|
|
|
|
&::before,
|
|
|
|
|
|
&::after {
|
|
|
|
|
|
display: table;
|
|
|
|
|
|
content: '';
|
|
|
|
|
|
}
|
|
|
|
|
|
&::after {
|
|
|
|
|
|
clear: both;
|
|
|
|
|
|
}
|
2019-04-30 11:11:25 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
2020-11-25 20:07:42 +08:00
|
|
|
|
// @deprecated 不建议用了
|
2019-05-15 16:10:20 +08:00
|
|
|
|
@mixin color-schema($bg-color: #555, $percent: 15%, $sat-percent: 100%) {
|
2020-12-21 10:08:40 +08:00
|
|
|
|
background: saturate(darken($bg-color, $percent), $sat-percent);
|
2019-04-30 11:11:25 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
2020-11-25 20:07:42 +08:00
|
|
|
|
// @deprecated 不建议用了
|
2019-05-15 16:10:20 +08:00
|
|
|
|
@mixin color-schema-lt($bg-color: #555, $percent: 15%, $sat-percent: 100%) {
|
2020-12-21 10:08:40 +08:00
|
|
|
|
background: desaturate(lighten($bg-color, $percent), $sat-percent);
|
2019-04-30 11:11:25 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
2020-11-25 20:07:42 +08:00
|
|
|
|
// @deprecated 不建议用了
|
2019-05-15 16:10:20 +08:00
|
|
|
|
@mixin color-variant(
|
2019-12-06 09:58:08 +08:00
|
|
|
|
$bg-color: #555,
|
|
|
|
|
|
$lt-percent: 10%,
|
|
|
|
|
|
$lter-percent: 15%,
|
|
|
|
|
|
$dk-percent: 10%,
|
|
|
|
|
|
$dker-percent: 15%
|
2019-05-15 16:10:20 +08:00
|
|
|
|
) {
|
2021-01-29 14:55:47 +08:00
|
|
|
|
background-color: $bg-color;
|
2019-12-06 09:58:08 +08:00
|
|
|
|
|
|
|
|
|
|
&.lt,
|
|
|
|
|
|
& .lt {
|
|
|
|
|
|
@include color-schema-lt($bg-color, $lt-percent, 2.5%);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&.lter,
|
|
|
|
|
|
& .lter {
|
|
|
|
|
|
@include color-schema-lt($bg-color, $lter-percent, 5%);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&.dk,
|
|
|
|
|
|
& .dk {
|
|
|
|
|
|
@include color-schema($bg-color, $dk-percent, 2.5%);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&.dker,
|
|
|
|
|
|
& .dker {
|
|
|
|
|
|
@include color-schema($bg-color, $dker-percent, 5%);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&.bg,
|
|
|
|
|
|
& .bg {
|
2021-01-29 14:55:47 +08:00
|
|
|
|
background-color: $bg-color;
|
2019-12-06 09:58:08 +08:00
|
|
|
|
}
|
2019-04-30 11:11:25 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
2020-11-25 20:07:42 +08:00
|
|
|
|
// @deprecated 不建议用了
|
2019-04-30 11:11:25 +08:00
|
|
|
|
@mixin font-variant($bg-color) {
|
2019-12-06 09:58:08 +08:00
|
|
|
|
$font-color: desaturate(lighten($bg-color, 40%), 10%);
|
|
|
|
|
|
$link-color: desaturate(lighten($bg-color, 50%), 10%);
|
|
|
|
|
|
$hover-color: #fff;
|
|
|
|
|
|
color: $font-color;
|
2019-05-15 16:10:20 +08:00
|
|
|
|
|
2019-12-12 19:30:46 +08:00
|
|
|
|
& a,
|
|
|
|
|
|
& .#{$ns}Button--link {
|
2019-12-06 09:58:08 +08:00
|
|
|
|
color: $link-color;
|
2019-04-30 11:11:25 +08:00
|
|
|
|
|
2019-12-06 09:58:08 +08:00
|
|
|
|
&:hover {
|
|
|
|
|
|
color: $hover-color;
|
2019-04-30 11:11:25 +08:00
|
|
|
|
}
|
2019-12-06 09:58:08 +08:00
|
|
|
|
}
|
2019-04-30 11:11:25 +08:00
|
|
|
|
|
2019-12-06 09:58:08 +08:00
|
|
|
|
& .open > a {
|
|
|
|
|
|
&,
|
|
|
|
|
|
&:hover,
|
|
|
|
|
|
&:focus {
|
|
|
|
|
|
color: $hover-color;
|
2019-04-30 11:11:25 +08:00
|
|
|
|
}
|
2019-12-06 09:58:08 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
& .text-muted {
|
2020-12-21 10:08:40 +08:00
|
|
|
|
color: darken($text-color, 10%) !important;
|
2019-12-06 09:58:08 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
& .text-lt {
|
2020-12-21 10:08:40 +08:00
|
|
|
|
color: lighten($text-color, 25%) !important;
|
2019-12-06 09:58:08 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
2019-12-12 19:30:46 +08:00
|
|
|
|
// &.auto,
|
|
|
|
|
|
// & .auto {
|
|
|
|
|
|
// & .list-group-item {
|
|
|
|
|
|
// border-color: darken($bg-color, 5%) !important;
|
2020-12-21 10:08:40 +08:00
|
|
|
|
// background: transparent;
|
2019-12-12 19:30:46 +08:00
|
|
|
|
|
|
|
|
|
|
// &:hover,
|
|
|
|
|
|
// &:focus,
|
|
|
|
|
|
// &:active,
|
|
|
|
|
|
// &.active {
|
|
|
|
|
|
// @include color-schema($bg-color, 5%, 2.5% !important);
|
|
|
|
|
|
// }
|
|
|
|
|
|
// }
|
|
|
|
|
|
// }
|
2019-04-30 11:11:25 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
2020-11-25 20:07:42 +08:00
|
|
|
|
// @deprecated 不建议用了
|
2019-04-30 11:11:25 +08:00
|
|
|
|
@mixin text-wariant($bg-color, $name) {
|
2020-10-26 17:31:13 +08:00
|
|
|
|
a.bg-#{'' + $name}:hover {
|
2020-12-21 10:08:40 +08:00
|
|
|
|
background: darken($bg-color, 5%);
|
2019-12-06 09:58:08 +08:00
|
|
|
|
}
|
2019-05-15 16:10:20 +08:00
|
|
|
|
|
2020-10-26 17:31:13 +08:00
|
|
|
|
a.text-#{'' + $name}:hover {
|
2019-12-06 09:58:08 +08:00
|
|
|
|
color: darken($bg-color, 5%);
|
|
|
|
|
|
}
|
2019-05-15 16:10:20 +08:00
|
|
|
|
|
2020-10-26 17:31:13 +08:00
|
|
|
|
.text-#{'' + $name} {
|
2019-12-06 09:58:08 +08:00
|
|
|
|
color: $bg-color;
|
|
|
|
|
|
}
|
2019-05-15 16:10:20 +08:00
|
|
|
|
|
2020-10-26 17:31:13 +08:00
|
|
|
|
.text-#{'' + $name}-lt {
|
2019-12-06 09:58:08 +08:00
|
|
|
|
color: darken($bg-color, 5%);
|
|
|
|
|
|
}
|
2019-05-15 16:10:20 +08:00
|
|
|
|
|
2020-10-26 17:31:13 +08:00
|
|
|
|
.text-#{'' + $name}-lter {
|
2019-12-06 09:58:08 +08:00
|
|
|
|
color: darken($bg-color, 10%);
|
|
|
|
|
|
}
|
2019-05-15 16:10:20 +08:00
|
|
|
|
|
2020-10-26 17:31:13 +08:00
|
|
|
|
.text-#{'' + $name}-dk {
|
2019-12-06 09:58:08 +08:00
|
|
|
|
color: darken($bg-color, 5%);
|
|
|
|
|
|
}
|
2019-05-15 16:10:20 +08:00
|
|
|
|
|
2020-10-26 17:31:13 +08:00
|
|
|
|
.text-#{'' + $name}-dker {
|
2019-12-06 09:58:08 +08:00
|
|
|
|
color: darken($bg-color, 10%);
|
|
|
|
|
|
}
|
2019-04-30 11:11:25 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
@mixin hover {
|
2019-12-06 09:58:08 +08:00
|
|
|
|
&:hover {
|
|
|
|
|
|
@content;
|
|
|
|
|
|
}
|
2019-04-30 11:11:25 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
2020-04-08 11:04:37 +08:00
|
|
|
|
@mixin focus {
|
2019-12-06 09:58:08 +08:00
|
|
|
|
&:focus {
|
|
|
|
|
|
@content;
|
|
|
|
|
|
}
|
2019-04-30 11:11:25 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
2020-04-08 11:04:37 +08:00
|
|
|
|
@mixin hover-focus {
|
|
|
|
|
|
&:hover:focus {
|
|
|
|
|
|
@content;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2019-04-30 11:11:25 +08:00
|
|
|
|
@mixin hover-active {
|
2019-12-06 09:58:08 +08:00
|
|
|
|
&:hover:active {
|
|
|
|
|
|
@content;
|
|
|
|
|
|
}
|
2019-04-30 11:11:25 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
@mixin button-size(
|
2022-10-19 10:38:52 +08:00
|
|
|
|
$font-size: var(--button-size-default-font-size),
|
|
|
|
|
|
$line-height: var(--button-size-default-font-lineHeight),
|
|
|
|
|
|
$border-radius-top-right: var(--button-size-default-top-right-border-radius),
|
|
|
|
|
|
$border-radius-top-left: var(--button-size-default-top-left-border-radius),
|
|
|
|
|
|
$border-radius-bottom-right:
|
|
|
|
|
|
var(--button-size-default-bottom-right-border-radius),
|
|
|
|
|
|
$border-radius-bottom-left:
|
|
|
|
|
|
var(--button-size-default-bottom-left-border-radius),
|
|
|
|
|
|
$height: var(--button-size-default-height),
|
|
|
|
|
|
$paddingTop: var(--button-size-default-paddingTop),
|
|
|
|
|
|
$paddingBottom: var(--button-size-default-paddingBottom),
|
|
|
|
|
|
$paddingLeft: var(--button-size-default-paddingLeft),
|
|
|
|
|
|
$paddingRight: var(--button-size-default-paddingRight),
|
|
|
|
|
|
$marginTop: var(--button-size-default-marginTop),
|
|
|
|
|
|
$marginBottom: var(--button-size-default-marginBottom),
|
|
|
|
|
|
$marginLeft: var(--button-size-default-marginLeft),
|
|
|
|
|
|
$marginRight: var(--button-size-default-marginRight),
|
|
|
|
|
|
$minWidth: var(--button-size-default-minWidth),
|
|
|
|
|
|
$iconSize: var(--button-size-default-icon-size),
|
|
|
|
|
|
$iconMargin: var(--button-size-default-icon-margin)
|
2019-04-30 11:11:25 +08:00
|
|
|
|
) {
|
2019-12-06 09:58:08 +08:00
|
|
|
|
font-size: $font-size;
|
|
|
|
|
|
line-height: $line-height;
|
2022-10-19 10:38:52 +08:00
|
|
|
|
border-radius: $border-radius-top-right $border-radius-top-left
|
|
|
|
|
|
$border-radius-bottom-right $border-radius-bottom-left;
|
2019-12-06 09:58:08 +08:00
|
|
|
|
height: $height;
|
2022-10-19 10:38:52 +08:00
|
|
|
|
padding: $paddingTop $paddingRight $paddingBottom $paddingLeft;
|
|
|
|
|
|
margin: $marginTop $marginRight $marginBottom $marginLeft;
|
2019-12-06 09:58:08 +08:00
|
|
|
|
|
|
|
|
|
|
.#{$ns}Button-icon:first-child:not(:last-child):not(.pull-right),
|
2020-06-08 18:46:28 +08:00
|
|
|
|
> svg.icon:not(:last-child):not(.pull-right),
|
2019-12-06 09:58:08 +08:00
|
|
|
|
> .pull-left {
|
2022-10-19 10:38:52 +08:00
|
|
|
|
margin-right: $iconMargin;
|
|
|
|
|
|
font-size: $iconSize;
|
2019-12-06 09:58:08 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.#{$ns}Button-icon:last-child:not(:first-child):not(.pull-left),
|
|
|
|
|
|
> .pull-right {
|
2022-10-19 10:38:52 +08:00
|
|
|
|
font-size: $iconSize;
|
|
|
|
|
|
margin-left: $iconMargin;
|
2019-12-06 09:58:08 +08:00
|
|
|
|
}
|
2021-01-28 16:30:38 +08:00
|
|
|
|
|
2021-10-29 17:38:57 +08:00
|
|
|
|
.#{$ns}Button--loading:first-child:not(:last-child):not(.pull-right),
|
|
|
|
|
|
> svg.icon:not(:last-child):not(.pull-right),
|
|
|
|
|
|
> .pull-left {
|
2022-10-19 10:38:52 +08:00
|
|
|
|
font-size: $iconSize;
|
|
|
|
|
|
margin-right: $iconMargin;
|
2021-10-29 17:38:57 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.#{$ns}Button--loading:last-child:not(:first-child):not(.pull-left),
|
|
|
|
|
|
> .pull-right {
|
2022-10-19 10:38:52 +08:00
|
|
|
|
font-size: $iconSize;
|
|
|
|
|
|
margin-left: $iconMargin;
|
2021-10-29 17:38:57 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
2021-01-28 16:30:38 +08:00
|
|
|
|
// img 需要加一下高度限制
|
|
|
|
|
|
img.#{$ns}Button-icon {
|
2022-10-19 10:38:52 +08:00
|
|
|
|
height: $iconSize;
|
2021-01-28 16:30:38 +08:00
|
|
|
|
vertical-align: middle;
|
|
|
|
|
|
}
|
2019-04-30 11:11:25 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
2021-10-29 17:38:57 +08:00
|
|
|
|
@mixin button-loading-icon() {
|
|
|
|
|
|
transition: --Button-transition;
|
|
|
|
|
|
svg {
|
2021-11-16 15:49:52 +08:00
|
|
|
|
@include animation-svg(var(--Button-animation-spin));
|
2021-10-29 17:38:57 +08:00
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
@mixin animation-svg($animation) {
|
|
|
|
|
|
animation: $animation;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2019-04-30 11:11:25 +08:00
|
|
|
|
@mixin button-variant(
|
2022-10-19 10:38:52 +08:00
|
|
|
|
// 常规
|
|
|
|
|
|
$bg-color: var(--button-default-default-bg-color),
|
|
|
|
|
|
$font-color: var(--button-default-default-font-color),
|
|
|
|
|
|
$border-color-top: var(--button-default-default-top-border-color),
|
|
|
|
|
|
$border-color-right: var(--button-default-default-right-border-color),
|
|
|
|
|
|
$border-color-bottom: var(--button-default-default-bottom-border-color),
|
|
|
|
|
|
$border-color-left: var(--button-default-default-left-border-color),
|
|
|
|
|
|
$border-width-top: var(--button-default-default-top-border-width),
|
|
|
|
|
|
$border-width-right: var(--button-default-default-right-border-width),
|
|
|
|
|
|
$border-width-bottom: var(--button-default-default-bottom-border-width),
|
|
|
|
|
|
$border-width-left: var(--button-default-default-left-border-width),
|
|
|
|
|
|
$border-style-top: var(--button-default-default-top-border-style),
|
|
|
|
|
|
$border-style-right: var(--button-default-default-right-border-style),
|
|
|
|
|
|
$border-style-bottom: var(--button-default-default-bottom-border-style),
|
|
|
|
|
|
$border-style-left: var(--button-default-default-left-border-style),
|
|
|
|
|
|
$shadow: var(--button-default-default-shadow),
|
|
|
|
|
|
// 悬浮
|
|
|
|
|
|
$hover-bg-color: var(--button-default-hover-bg-color),
|
|
|
|
|
|
$hover-font-color: var(--button-default-hover-font-color),
|
|
|
|
|
|
$hover-border-color-top: var(--button-default-hover-top-border-color),
|
|
|
|
|
|
$hover-border-color-right: var(--button-default-hover-right-border-color),
|
|
|
|
|
|
$hover-border-color-bottom: var(--button-default-hover-bottom-border-color),
|
|
|
|
|
|
$hover-border-color-left: var(--button-default-hover-left-border-color),
|
|
|
|
|
|
$hover-border-width-top: var(--button-default-hover-top-border-width),
|
|
|
|
|
|
$hover-border-width-right: var(--button-default-hover-right-border-width),
|
|
|
|
|
|
$hover-border-width-bottom: var(--button-default-hover-bottom-border-width),
|
|
|
|
|
|
$hover-border-width-left: var(--button-default-hover-left-border-width),
|
|
|
|
|
|
$hover-border-style-top: var(--button-default-hover-top-border-style),
|
|
|
|
|
|
$hover-border-style-right: var(--button-default-hover-right-border-style),
|
|
|
|
|
|
$hover-border-style-bottom: var(--button-default-hover-bottom-border-style),
|
|
|
|
|
|
$hover-border-style-left: var(--button-default-hover-left-border-style),
|
|
|
|
|
|
$hover-shadow: var(--button-default-hover-shadow),
|
|
|
|
|
|
// 点击
|
|
|
|
|
|
$active-bg-color: var(--button-default-active-bg-color),
|
|
|
|
|
|
$active-font-color: var(--button-default-active-font-color),
|
|
|
|
|
|
$active-border-color-top: var(--button-default-active-top-border-color),
|
|
|
|
|
|
$active-border-color-right: var(--button-default-active-right-border-color),
|
|
|
|
|
|
$active-border-color-bottom: var(--button-default-active-bottom-border-color),
|
|
|
|
|
|
$active-border-color-left: var(--button-default-active-left-border-color),
|
|
|
|
|
|
$active-border-width-top: var(--button-default-active-top-border-width),
|
|
|
|
|
|
$active-border-width-right: var(--button-default-active-right-border-width),
|
|
|
|
|
|
$active-border-width-bottom: var(--button-default-active-bottom-border-width),
|
|
|
|
|
|
$active-border-width-left: var(--button-default-active-left-border-width),
|
|
|
|
|
|
$active-border-style-top: var(--button-default-active-top-border-style),
|
|
|
|
|
|
$active-border-style-right: var(--button-default-active-right-border-style),
|
|
|
|
|
|
$active-border-style-bottom: var(--button-default-active-bottom-border-style),
|
|
|
|
|
|
$active-border-style-left: var(--button-default-active-left-border-style),
|
|
|
|
|
|
$active-shadow: var(--button-default-active-shadow),
|
|
|
|
|
|
// 禁用
|
|
|
|
|
|
$disabled-bg-color: var(--button-default-disabled-bg-color),
|
|
|
|
|
|
$disabled-font-color: var(--button-default-disabled-font-color),
|
|
|
|
|
|
$disabled-border-color-top: var(--button-default-disabled-top-border-color),
|
|
|
|
|
|
$disabled-border-color-right:
|
|
|
|
|
|
var(--button-default-disabled-right-border-color),
|
|
|
|
|
|
$disabled-border-color-bottom:
|
|
|
|
|
|
var(--button-default-disabled-bottom-border-color),
|
|
|
|
|
|
$disabled-border-color-left: var(--button-default-disabled-left-border-color),
|
|
|
|
|
|
$disabled-border-width-top: var(--button-default-disabled-top-border-width),
|
|
|
|
|
|
$disabled-border-width-right:
|
|
|
|
|
|
var(--button-default-disabled-right-border-width),
|
|
|
|
|
|
$disabled-border-width-bottom:
|
|
|
|
|
|
var(--button-default-disabled-bottom-border-width),
|
|
|
|
|
|
$disabled-border-width-left: var(--button-default-disabled-left-border-width),
|
|
|
|
|
|
$disabled-border-style-top: var(--button-default-disabled-top-border-style),
|
|
|
|
|
|
$disabled-border-style-right:
|
|
|
|
|
|
var(--button-default-disabled-right-border-style),
|
|
|
|
|
|
$disabled-border-style-bottom:
|
|
|
|
|
|
var(--button-default-disabled-bottom-border-style),
|
|
|
|
|
|
$disabled-border-style-left: var(--button-default-disabled-left-border-style),
|
|
|
|
|
|
$disabled-shadow: var(--button-default-disabled-shadow)
|
2019-04-30 11:11:25 +08:00
|
|
|
|
) {
|
2022-10-19 10:38:52 +08:00
|
|
|
|
color: $font-color;
|
|
|
|
|
|
background: $bg-color;
|
|
|
|
|
|
border-color: $border-color-top $border-color-right $border-color-bottom
|
|
|
|
|
|
$border-color-left;
|
|
|
|
|
|
border-width: $border-width-top $border-width-right $border-width-bottom
|
|
|
|
|
|
$border-width-left;
|
|
|
|
|
|
border-style: $border-style-top $border-style-right $border-style-bottom
|
|
|
|
|
|
$border-style-left;
|
|
|
|
|
|
box-shadow: $shadow;
|
|
|
|
|
|
|
|
|
|
|
|
// text-shadow: var(--Button-textShadow);
|
2019-12-06 09:58:08 +08:00
|
|
|
|
|
2021-05-19 22:01:43 +08:00
|
|
|
|
&:not(:disabled):not(.is-disabled) {
|
|
|
|
|
|
@include hover {
|
2022-10-19 10:38:52 +08:00
|
|
|
|
color: $hover-font-color;
|
|
|
|
|
|
background: $hover-bg-color;
|
|
|
|
|
|
border-color: $hover-border-color-top $hover-border-color-right
|
|
|
|
|
|
$hover-border-color-bottom $hover-border-color-left;
|
|
|
|
|
|
border-width: $hover-border-width-top $hover-border-width-right
|
|
|
|
|
|
$hover-border-width-bottom $hover-border-width-left;
|
|
|
|
|
|
border-style: $hover-border-style-top $hover-border-style-right
|
|
|
|
|
|
$hover-border-style-bottom $hover-border-style-left;
|
|
|
|
|
|
box-shadow: $hover-shadow;
|
2021-05-19 22:01:43 +08:00
|
|
|
|
}
|
2021-10-29 17:38:57 +08:00
|
|
|
|
@include hover-active {
|
2022-10-19 10:38:52 +08:00
|
|
|
|
color: $active-font-color;
|
|
|
|
|
|
background: $active-bg-color;
|
|
|
|
|
|
border-color: $active-border-color-top $active-border-color-right
|
|
|
|
|
|
$active-border-color-bottom $active-border-color-left;
|
|
|
|
|
|
border-width: $active-border-width-top $active-border-width-right
|
|
|
|
|
|
$active-border-width-bottom $active-border-width-left;
|
|
|
|
|
|
border-style: $active-border-style-top $active-border-style-right
|
|
|
|
|
|
$active-border-style-bottom $active-border-style-left;
|
|
|
|
|
|
box-shadow: $active-shadow;
|
2021-10-29 17:38:57 +08:00
|
|
|
|
}
|
2020-04-08 11:04:37 +08:00
|
|
|
|
}
|
2022-10-19 10:38:52 +08:00
|
|
|
|
&:disabled,
|
|
|
|
|
|
&.is-disabled {
|
|
|
|
|
|
color: $disabled-font-color;
|
|
|
|
|
|
background: $disabled-bg-color;
|
|
|
|
|
|
border-color: $disabled-border-color-top $disabled-border-color-right
|
|
|
|
|
|
$disabled-border-color-bottom $disabled-border-color-left;
|
|
|
|
|
|
border-width: $disabled-border-width-top $disabled-border-width-right
|
|
|
|
|
|
$disabled-border-width-bottom $disabled-border-width-left;
|
|
|
|
|
|
border-style: $disabled-border-style-top $disabled-border-style-right
|
|
|
|
|
|
$disabled-border-style-bottom $disabled-border-style-left;
|
|
|
|
|
|
box-shadow: $disabled-shadow;
|
|
|
|
|
|
}
|
2020-04-08 11:04:37 +08:00
|
|
|
|
|
2019-12-06 09:58:08 +08:00
|
|
|
|
@include hover-focus {
|
2020-12-21 10:08:40 +08:00
|
|
|
|
box-shadow: var(--Button-boxShadow);
|
2019-12-06 09:58:08 +08:00
|
|
|
|
}
|
2019-05-15 16:10:20 +08:00
|
|
|
|
}
|
2020-05-14 20:47:05 +08:00
|
|
|
|
|
|
|
|
|
|
@mixin input-clear {
|
2022-01-20 18:30:52 +08:00
|
|
|
|
padding: var(--Form-input-clearBtn-padding);
|
2020-05-14 20:47:05 +08:00
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: center;
|
2020-12-17 10:55:58 +08:00
|
|
|
|
margin-left: auto;
|
2022-01-20 18:30:52 +08:00
|
|
|
|
text-decoration: none;
|
2020-05-14 20:47:05 +08:00
|
|
|
|
|
|
|
|
|
|
svg {
|
2022-01-20 18:30:52 +08:00
|
|
|
|
fill: var(--Form-input-clearBtn-color);
|
2020-05-14 20:47:05 +08:00
|
|
|
|
top: 0;
|
2022-01-20 18:30:52 +08:00
|
|
|
|
width: var(--Form-input-clearBtn-size);
|
|
|
|
|
|
height: var(--Form-input-clearBtn-size);
|
2020-05-14 20:47:05 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&:hover svg {
|
2022-01-20 18:30:52 +08:00
|
|
|
|
fill: var(--Form-input-clearBtn-color-onHover);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&:active svg {
|
|
|
|
|
|
fill: var(--Form-input-clearBtn-color-onActive);
|
2020-05-14 20:47:05 +08:00
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
@mixin input-input {
|
|
|
|
|
|
display: flex;
|
2020-12-21 10:08:40 +08:00
|
|
|
|
background: var(--Form-input-bg);
|
|
|
|
|
|
border: var(--Form-input-borderWidth) solid var(--Form-input-borderColor);
|
|
|
|
|
|
border-radius: var(--Form-input-borderRadius);
|
|
|
|
|
|
// height: var(--Form-input-height);
|
|
|
|
|
|
line-height: var(--Form-input-lineHeight);
|
|
|
|
|
|
padding: var(--Form-input-paddingY) var(--Form-input-paddingX);
|
|
|
|
|
|
font-size: var(--Form-input-fontSize);
|
2020-05-14 20:47:05 +08:00
|
|
|
|
flex-wrap: wrap;
|
2020-12-18 12:28:26 +08:00
|
|
|
|
justify-content: flex-start;
|
2020-05-14 20:47:05 +08:00
|
|
|
|
|
|
|
|
|
|
input {
|
2022-06-13 20:19:54 +08:00
|
|
|
|
flex-basis: px2rem(30px);
|
2020-05-14 20:47:05 +08:00
|
|
|
|
flex-grow: 1;
|
|
|
|
|
|
outline: none;
|
|
|
|
|
|
background: transparent;
|
|
|
|
|
|
border: none;
|
2020-12-21 10:08:40 +08:00
|
|
|
|
color: var(--Form-input-color);
|
2020-05-14 20:47:05 +08:00
|
|
|
|
width: 100%;
|
2020-12-21 10:08:40 +08:00
|
|
|
|
height: calc(var(--Form-input-lineHeight) * var(--Form-input-fontSize));
|
2020-05-14 20:47:05 +08:00
|
|
|
|
|
|
|
|
|
|
&::placeholder {
|
2020-12-21 10:08:40 +08:00
|
|
|
|
color: var(--Form-input-placeholderColor);
|
2020-05-14 20:47:05 +08:00
|
|
|
|
user-select: none;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
2021-01-22 11:29:04 +08:00
|
|
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
|
|
border-color: var(--Form-input-onFocused-borderColor);
|
|
|
|
|
|
}
|
2020-05-14 20:47:05 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
feat: inputText, textarea, select 支持配置 borderMode 包括,全边框,半边框,无边框 (#2375)
* feat: inputText, textarea, select 支持配置 borderMode 包括,全边框,半边框,无边框
* 及时更新
2021-08-11 16:17:43 +08:00
|
|
|
|
@mixin input-border {
|
|
|
|
|
|
&--borderHalf {
|
|
|
|
|
|
border-left-color: transparent !important;
|
|
|
|
|
|
border-right-color: transparent !important;
|
|
|
|
|
|
border-top-color: transparent !important;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&--borderNone {
|
|
|
|
|
|
border-color: transparent !important;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2020-05-14 20:47:05 +08:00
|
|
|
|
@mixin input-text {
|
|
|
|
|
|
position: relative;
|
2020-08-04 16:45:49 +08:00
|
|
|
|
max-width: 100%;
|
2020-05-14 20:47:05 +08:00
|
|
|
|
|
|
|
|
|
|
&.is-inline {
|
|
|
|
|
|
display: inline-block;
|
2020-12-21 10:08:40 +08:00
|
|
|
|
width: var(--Form-control-widthBase);
|
2020-05-14 20:47:05 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&-input {
|
|
|
|
|
|
@include input-input();
|
feat: inputText, textarea, select 支持配置 borderMode 包括,全边框,半边框,无边框 (#2375)
* feat: inputText, textarea, select 支持配置 borderMode 包括,全边框,半边框,无边框
* 及时更新
2021-08-11 16:17:43 +08:00
|
|
|
|
@include input-border();
|
2020-05-14 20:47:05 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&.is-error > &-input {
|
2020-12-21 10:08:40 +08:00
|
|
|
|
border-color: var(--Form-input-onError-borderColor);
|
|
|
|
|
|
background: var(--Form-input-onError-bg);
|
2021-01-22 11:29:04 +08:00
|
|
|
|
transition: all var(--animation-duration);
|
2020-05-14 20:47:05 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&.is-focused > &-input {
|
2020-12-21 10:08:40 +08:00
|
|
|
|
border-color: var(--Form-input-onFocused-borderColor);
|
|
|
|
|
|
box-shadow: var(--Form-input-boxShadow);
|
|
|
|
|
|
background: var(--Form-input-onFocused-bg);
|
2021-01-22 11:29:04 +08:00
|
|
|
|
transition: all var(--animation-duration);
|
2020-05-14 20:47:05 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&.is-error.is-focused > &-input {
|
2020-12-21 10:08:40 +08:00
|
|
|
|
border-color: var(--Form-input-onError-borderColor);
|
2020-05-14 20:47:05 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&.is-disabled > &-input {
|
2020-12-21 10:08:40 +08:00
|
|
|
|
color: var(--text--muted-color);
|
|
|
|
|
|
background: var(--Form-input-onDisabled-bg);
|
|
|
|
|
|
border-color: var(--Form-input-onDisabled-borderColor);
|
2021-01-22 11:29:04 +08:00
|
|
|
|
transition: all var(--animation-duration);
|
2022-09-26 14:15:31 +08:00
|
|
|
|
|
|
|
|
|
|
& > input {
|
|
|
|
|
|
color: var(--text--muted-color);
|
|
|
|
|
|
}
|
2020-05-14 20:47:05 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&-spinner {
|
2020-12-21 10:08:40 +08:00
|
|
|
|
line-height: calc(
|
|
|
|
|
|
var(--Form-input-lineHeight) * var(--Form-input-fontSize)
|
|
|
|
|
|
);
|
2020-05-14 20:47:05 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&-clear {
|
|
|
|
|
|
@include input-clear();
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2022-05-12 10:24:26 +08:00
|
|
|
|
&-revealPassword {
|
2022-04-12 14:13:56 +08:00
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
color: var(--text--muted-color);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2020-05-14 20:47:05 +08:00
|
|
|
|
// 需要能撑开
|
|
|
|
|
|
@include media-breakpoint-up(sm) {
|
|
|
|
|
|
&.#{$ns}Form-control--sizeXs > &-input,
|
|
|
|
|
|
&.#{$ns}Form-control--sizeSm > &-input,
|
|
|
|
|
|
&.#{$ns}Form-control--sizeMd > &-input,
|
|
|
|
|
|
&.#{$ns}Form-control--sizeLg > &-input {
|
|
|
|
|
|
min-width: 100%;
|
|
|
|
|
|
display: inline-flex;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
2020-05-27 20:09:39 +08:00
|
|
|
|
|
|
|
|
|
|
@mixin checkboxes-placeholder {
|
2020-12-21 10:08:40 +08:00
|
|
|
|
height: var(--Form-input-height);
|
|
|
|
|
|
line-height: var(--Form-input-lineHeight);
|
|
|
|
|
|
font-size: var(--Form-input-fontSize);
|
|
|
|
|
|
padding: calc(
|
|
|
|
|
|
(
|
|
|
|
|
|
var(--Form-input-height) - var(--Form-input-lineHeight) *
|
|
|
|
|
|
var(--Form-input-fontSize)
|
|
|
|
|
|
) / 2
|
|
|
|
|
|
)
|
|
|
|
|
|
var(--gap-sm);
|
|
|
|
|
|
color: var(--text--muted-color);
|
2020-05-27 20:09:39 +08:00
|
|
|
|
}
|
2020-07-04 22:56:58 +08:00
|
|
|
|
|
|
|
|
|
|
@mixin label-variant($color) {
|
2020-12-21 10:08:40 +08:00
|
|
|
|
background: $color;
|
2020-07-04 22:56:58 +08:00
|
|
|
|
|
2020-12-21 10:08:40 +08:00
|
|
|
|
// todo：不支持了
|
|
|
|
|
|
// &[href] {
|
|
|
|
|
|
// &:hover,
|
|
|
|
|
|
// &:focus {
|
|
|
|
|
|
// background: darken($color, 10%);
|
|
|
|
|
|
// }
|
|
|
|
|
|
// }
|
2020-07-04 22:56:58 +08:00
|
|
|
|
}
|
2020-08-14 17:45:59 +08:00
|
|
|
|
|
|
|
|
|
|
@mixin icon-color {
|
2020-12-21 10:08:40 +08:00
|
|
|
|
color: var(--icon-color);
|
2020-08-14 17:45:59 +08:00
|
|
|
|
|
|
|
|
|
|
&:hover {
|
2020-12-21 10:08:40 +08:00
|
|
|
|
color: var(--icon-onHover-color);
|
2020-08-14 17:45:59 +08:00
|
|
|
|
}
|
|
|
|
|
|
}
|
2022-09-29 18:39:22 +08:00
|
|
|
|
|
|
|
|
|
|
@mixin truncate {
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
|
}
|
