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,
  & .#{$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),
  > svg.icon: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;
  }
}

@mixin input-clear {
  padding: px2rem(3px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;

  svg {
    fill: $Form-input-iconColor;
    top: 0;
    width: px2rem(10px);
    height: px2rem(10px);
  }

  &:hover svg {
    fill: darken($color: $Form-input-iconColor, $amount: 20%);
  }
}

@mixin input-input {
  display: flex;
  background-color: $Form-input-bg;
  border: $Form-input-borderWidth solid $Form-input-borderColor;
  border-radius: $Form-input-borderRadius;
  // height: $Form-input-height;
  line-height: $Form-input-lineHeight;
  padding: $Form-input-paddingY $Form-input-paddingX;
  font-size: $Form-input-fontSize;
  flex-wrap: wrap;
  justify-content: space-between;

  input {
    flex-basis: px2rem(80px);
    flex-grow: 1;
    outline: none;
    background: transparent;
    border: none;
    color: $Form-input-color;
    width: 100%;
    height: $Form-input-lineHeight * $Form-input-fontSize;

    &::placeholder {
      color: $Form-input-placeholderColor;
      user-select: none;
    }
  }
}

@mixin input-text {
  position: relative;
  max-width: 100%;

  &.is-inline {
    display: inline-block;
    width: $Form-control-widthBase;
  }

  &-input {
    @include input-input();
  }

  &.is-error > &-input {
    border-color: $Form-input-onError-borderColor;
    background-color: $Form-input-onError-bg;
  }

  &.is-focused > &-input {
    border-color: $Form-input-onFocused-borderColor;
    box-shadow: $Form-input-boxShadow;

    @if $Form-input-onFocused-bg !=$Form-input-bg {
      background-color: $Form-input-onFocused-bg;
    }
  }

  &.is-error.is-focused > &-input {
    border-color: $Form-input-onError-borderColor;
  }

  &.is-disabled > &-input {
    color: $text--muted-color;
    background: $Form-input-onDisabled-bg;
    border-color: $Form-input-onDisabled-borderColor;
  }

  &-spinner {
    line-height: $Form-input-lineHeight * $Form-input-fontSize;
  }

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

@mixin checkboxes-placeholder {
  height: $Form-input-height;
  line-height: $Form-input-lineHeight;
  font-size: $Form-input-fontSize;
  padding: ($Form-input-height - $Form-input-lineHeight * $Form-input-fontSize)/2
    $gap-sm;
  color: $text--muted-color;
}

@mixin label-variant($color) {
  background-color: $color;

  &[href] {
    &:hover,
    &:focus {
      background-color: darken($color, 10%);
    }
  }
}

@mixin icon-color {
  color: $icon-color;

  &:hover {
    color: $icon-onHover-color;
  }
}