amis2/scss/_mixins.scss
2020-04-08 11:04:37 +08:00

282 lines
5.2 KiB
SCSS

// 媒体查询最小阈值
@mixin media-breakpoint-up($name, $breakpoints: $breakpoints) {
$min: breakpoint-min($name, $breakpoints);
@if $min {
@media (min-width: $min) {
@content;
}
} @else {
@content;
}
}
//媒体查询最大阈值
@mixin media-breakpoint-down($name, $breakpoints: $breakpoints) {
$max: breakpoint-max($name, $breakpoints);
@if $max {
@media (max-width: $max) {
@content;
}
} @else {
@content;
}
}
//媒体查询中间阈值
@mixin media-breakpoint-between($min, $max, $breakpoints: $breakpoints) {
$min: breakpoint-min($min, $breakpoints);
$max: breakpoint-max($max, $breakpoints);
@media (min-width: $min) and (max-width: $max) {
@content;
}
}
@mixin clearfix() {
&::before,
&::after {
display: table;
content: '';
}
&::after {
clear: both;
}
}
@mixin color-schema($bg-color: #555, $percent: 15%, $sat-percent: 100%) {
background-color: saturate(darken($bg-color, $percent), $sat-percent);
}
@mixin color-schema-lt($bg-color: #555, $percent: 15%, $sat-percent: 100%) {
background-color: desaturate(lighten($bg-color, $percent), $sat-percent);
}
@mixin color-variant(
$bg-color: #555,
$lt-percent: 10%,
$lter-percent: 15%,
$dk-percent: 10%,
$dker-percent: 15%
) {
background-color: $bg-color;
&.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;
}
}
@mixin font-variant($bg-color) {
$font-color: desaturate(lighten($bg-color, 40%), 10%);
$link-color: desaturate(lighten($bg-color, 50%), 10%);
$hover-color: #fff;
color: $font-color;
& a,
& .#{$ns}Button--link {
color: $link-color;
&:hover {
color: $hover-color;
}
}
& .open > a {
&,
&:hover,
&:focus {
color: $hover-color;
}
}
& .text-muted {
color: darken($font-color, 10%) !important;
}
& .text-lt {
color: lighten($font-color, 25%) !important;
}
// &.auto,
// & .auto {
// & .list-group-item {
// border-color: darken($bg-color, 5%) !important;
// background-color: transparent;
// &:hover,
// &:focus,
// &:active,
// &.active {
// @include color-schema($bg-color, 5%, 2.5% !important);
// }
// }
// }
}
@mixin text-wariant($bg-color, $name) {
a.bg-#{$name}:hover {
background-color: darken($bg-color, 5%);
}
a.text-#{$name}:hover {
color: darken($bg-color, 5%);
}
.text-#{$name} {
color: $bg-color;
}
.text-#{$name}-lt {
color: darken($bg-color, 5%);
}
.text-#{$name}-lter {
color: darken($bg-color, 10%);
}
.text-#{$name}-dk {
color: darken($bg-color, 5%);
}
.text-#{$name}-dker {
color: darken($bg-color, 10%);
}
}
@mixin hover {
&:hover {
@content;
}
}
@mixin focus {
&:focus {
@content;
}
}
@mixin hover-focus {
&:hover:focus {
@content;
}
}
@mixin hover-active {
&:hover:active {
@content;
}
}
@mixin button-size(
$padding-y,
$padding-x,
$font-size,
$line-height,
$border-radius,
$height: auto,
$iconWdith: px2rem(20px)
) {
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),
> .pull-left {
margin-right: $padding-x;
}
.#{$ns}Button-icon:last-child:not(:first-child):not(.pull-left),
> .pull-right {
margin-left: $padding-x;
}
}
@mixin button-variant(
$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
) {
color: $color;
background-color: $background;
border-color: $border;
box-shadow: $Button-boxShadow;
@include hover {
color: $hover-color;
background-color: $hover-background;
border-color: $hover-border;
}
@include focus {
color: $color;
background-color: $background;
border-color: $border;
box-shadow: $Button-boxShadow;
}
@include hover-focus {
color: $hover-color;
background-color: $hover-background;
border-color: $hover-border;
box-shadow: $Button-boxShadow;
}
&.is-disabled,
&:disabled {
@if variable-exists(Button-onDisabled-bg) {
background-color: $Button-onDisabled-bg;
} @else {
background-color: $background;
}
@if variable-exists(Button-onDisabled-color) {
color: $Button-onDisabled-color;
} @else {
color: $color;
}
@if variable-exists(Button-onDisabled-borderColor) {
border-color: $Button-onDisabled-borderColor;
} @else {
border-color: $border;
}
}
&:not(:disabled):not(.is-disabled):active,
&:not(:disabled):not(.is-disabled).is-active {
color: $active-color;
background-color: $active-background;
border-color: $active-border;
}
}