amis/scss/_mixins.scss

468 lines
9.3 KiB
SCSS
Raw Normal View History

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-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-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-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 不建议用了
@mixin color-schema($bg-color: #555, $percent: 15%, $sat-percent: 100%) {
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 不建议用了
@mixin color-schema-lt($bg-color: #555, $percent: 15%, $sat-percent: 100%) {
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 不建议用了
@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%
) {
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 {
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-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 {
color: darken($text-color, 10%) !important;
2019-12-06 09:58:08 +08:00
}
& .text-lt {
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;
// 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 {
background: darken($bg-color, 5%);
2019-12-06 09:58:08 +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%);
}
2020-10-26 17:31:13 +08:00
.text-#{'' + $name} {
2019-12-06 09:58:08 +08:00
color: $bg-color;
}
2020-10-26 17:31:13 +08:00
.text-#{'' + $name}-lt {
2019-12-06 09:58:08 +08:00
color: darken($bg-color, 5%);
}
2020-10-26 17:31:13 +08:00
.text-#{'' + $name}-lter {
2019-12-06 09:58:08 +08:00
color: darken($bg-color, 10%);
}
2020-10-26 17:31:13 +08:00
.text-#{'' + $name}-dk {
2019-12-06 09:58:08 +08:00
color: darken($bg-color, 5%);
}
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(
2019-12-06 09:58:08 +08:00
$padding-y,
$padding-x,
$font-size,
$line-height,
$border-radius,
$height: auto,
$iconWdith: px2rem(20px)
2019-04-30 11:11:25 +08:00
) {
2019-12-06 09:58:08 +08:00
padding: $padding-y $padding-x;
font-size: $font-size;
line-height: $line-height;
border-radius: $border-radius;
height: $height;
.#{$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 {
margin-right: $padding-x;
}
.#{$ns}Button-icon:last-child:not(:first-child):not(.pull-left),
> .pull-right {
margin-left: $padding-x;
}
.#{$ns}Button--loading:first-child:not(:last-child):not(.pull-right),
> svg.icon:not(:last-child):not(.pull-right),
> .pull-left {
margin-right: $padding-x;
}
.#{$ns}Button--loading:last-child:not(:first-child):not(.pull-left),
> .pull-right {
margin-left: $padding-x;
}
// img 需要加一下高度限制
img.#{$ns}Button-icon {
height: var(--Button-fontSize);
vertical-align: middle;
}
2019-04-30 11:11:25 +08:00
}
@mixin button-loading-icon() {
transition: --Button-transition;
svg {
@include animation-svg(var(--Button-animation-spin));
}
}
@mixin animation-svg($animation) {
animation: $animation;
}
2019-04-30 11:11:25 +08:00
@mixin button-variant(
2019-12-06 09:58:08 +08:00
$background,
$border: $background,
$color: $white,
$hover-background: darken($background, 7.5%),
$hover-border: darken($border, 10%),
$hover-color: $color,
$active-background: darken($background, 10%),
$active-border: darken($border, 12.5%),
$active-color: $color
2019-04-30 11:11:25 +08:00
) {
2019-12-06 09:58:08 +08:00
color: $color;
background: $background;
2019-12-06 09:58:08 +08:00
border-color: $border;
box-shadow: var(--Button-boxShadow);
text-shadow: var(--Button-textShadow);
2019-12-06 09:58:08 +08:00
&:not(:disabled):not(.is-disabled) {
@include hover {
color: $hover-color;
background: $hover-background;
border-color: $hover-border;
}
@include hover-active {
color: $active-color;
background: $active-background;
border-color: $active-border;
}
2020-04-08 11:04:37 +08:00
}
2020-11-30 21:33:12 +08:00
// @include focus {
// color: $color;
// background: $background;
2020-11-30 21:33:12 +08:00
// border-color: $border;
// box-shadow: var(--Button-boxShadow);
2020-11-30 21:33:12 +08:00
// }
2020-04-08 11:04:37 +08:00
2019-12-06 09:58:08 +08:00
@include hover-focus {
2020-11-30 21:33:12 +08:00
// color: $hover-color;
// background: $hover-background;
2020-11-30 21:33:12 +08:00
// border-color: $hover-border;
box-shadow: var(--Button-boxShadow);
2019-12-06 09:58:08 +08:00
}
}
2020-05-14 20:47:05 +08:00
@mixin input-clear {
padding: var(--Form-input-clearBtn-padding);
2020-05-14 20:47:05 +08:00
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
margin-left: auto;
text-decoration: none;
2020-05-14 20:47:05 +08:00
svg {
fill: var(--Form-input-clearBtn-color);
2020-05-14 20:47:05 +08:00
top: 0;
width: var(--Form-input-clearBtn-size);
height: var(--Form-input-clearBtn-size);
2020-05-14 20:47:05 +08:00
}
&:hover svg {
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;
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;
justify-content: flex-start;
2020-05-14 20:47:05 +08:00
input {
flex-basis: px2rem(80px);
flex-grow: 1;
outline: none;
background: transparent;
border: none;
color: var(--Form-input-color);
2020-05-14 20:47:05 +08:00
width: 100%;
height: calc(var(--Form-input-lineHeight) * var(--Form-input-fontSize));
2020-05-14 20:47:05 +08:00
&::placeholder {
color: var(--Form-input-placeholderColor);
2020-05-14 20:47:05 +08:00
user-select: none;
}
}
&:hover {
border-color: var(--Form-input-onFocused-borderColor);
}
2020-05-14 20:47:05 +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;
width: var(--Form-control-widthBase);
2020-05-14 20:47:05 +08:00
}
&-input {
@include input-input();
@include input-border();
2020-05-14 20:47:05 +08:00
}
&.is-error > &-input {
border-color: var(--Form-input-onError-borderColor);
background: var(--Form-input-onError-bg);
transition: all var(--animation-duration);
2020-05-14 20:47:05 +08:00
}
&.is-focused > &-input {
border-color: var(--Form-input-onFocused-borderColor);
box-shadow: var(--Form-input-boxShadow);
background: var(--Form-input-onFocused-bg);
transition: all var(--animation-duration);
2020-05-14 20:47:05 +08:00
}
&.is-error.is-focused > &-input {
border-color: var(--Form-input-onError-borderColor);
2020-05-14 20:47:05 +08:00
}
&.is-disabled > &-input {
color: var(--text--muted-color);
background: var(--Form-input-onDisabled-bg);
border-color: var(--Form-input-onDisabled-borderColor);
transition: all var(--animation-duration);
2020-05-14 20:47:05 +08:00
}
&-spinner {
line-height: calc(
var(--Form-input-lineHeight) * var(--Form-input-fontSize)
);
2020-05-14 20:47:05 +08:00
}
&-clear {
@include input-clear();
}
// 需要能撑开
@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 {
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) {
background: $color;
2020-07-04 22:56:58 +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 {
color: var(--icon-color);
2020-08-14 17:45:59 +08:00
&:hover {
color: var(--icon-onHover-color);
2020-08-14 17:45:59 +08:00
}
}