amis2/scss/_mixins.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 {
        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 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-focus {
        color: $hover-color;
        background-color: $hover-background;
        border-color: $hover-border;
    }

    &.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;
    }
}