scss 混入

Posted 2021-05-17

// iOS issue where native components in forms scale view port fix
@mixin nativeiOScomponentScale() {
  input[type="text"], input[type="text"]:focus, select:focus, textarea:focus, input:focus {
    font-size: 16px !important;
  }
}

@mixin fontSmoothing() {
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  font-smoothing: antialiased;
}

// Alignments
@mixin vertical-align {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

@mixin horizontal-align {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

@mixin center-align {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

// General Box Shadow
@mixin box-shadow($args) {
  -webkit-box-shadow: #{$args};
  -moz-box-shadow: #{$args};
  -ms-box-shadow: #{$args};
  -o-box-shadow: #{$args};
  box-shadow: #{$args};
}

// Responsive
@mixin mq-xs {
  @media (min-width: #{$screen-xs}) {
    @content;
  }
}

@mixin mq-sm {
  @media (min-width: #{$screen-sm}) {
    @content;
  }
}

@mixin mq-md {
  @media (min-width: #{$screen-md}) {
    @content;
  }
}

@mixin mq-lg {
  @media (min-width: #{$screen-lg}) {
    @content;
  }
}

@mixin mq-xlg {
  @media (min-width: #{$screen-xlg}) {
    @content;
  }
}

// General Transitions
@mixin transition($args) {
  -webkit-transition: #{$args};
  -moz-transition: #{$args};
  -ms-transition: #{$args};
  -o-transition: #{$args};
  transition: #{$args};
}