base_ui/assets/permit/scss/mixin.scss

@mixin transition($all) {
  -webkit-transition: $all;
  -ms-transition: $all;
  transition: $all;
}

@mixin flexbox {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

@mixin transform($transforms) {
  -webkit-transform: $transforms;
  -moz-transform: $transforms;
  -ms-transform: $transforms;
  transform: $transforms;
}

@mixin transition($all) {
  -webkit-transition: $all;
  -ms-transition: $all;
  transition: $all;
}
@mixin lineclamp($num) {
  display: -webkit-box;
  -webkit-line-clamp: $num;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@mixin hexagon($color, $width, $height) {
  background: $color;
  position: relative;
  width: $width;
  height: $height;
  &::before {
    content: "";
    position: absolute;
    top: -($height / 2) + 1;
    left: 0;
    width: 0;
    height: 0;
    border-left: ($width / 2) solid transparent;
    border-right: $width / 2 solid transparent;
    border-bottom: $height / 2 solid $color;
  }
  &::after {
    content: "";
    position: absolute;
    bottom: -($height / 2) + 1;
    left: 0;
    width: 0;
    height: 0;
    border-left: $width / 2 solid transparent;
    border-right: $width / 2 solid transparent;
    border-top: $height / 2 solid $color;
  }
}

@mixin section-backgrounds($pic-address) {
  //background-image: url($pic-address);
  background-size: cover;
  position: relative;
  background-position: center;
  &::before {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../img/dot-pattern.png");
    z-index: 1;
  }
  &::after {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba($color: #000000, $alpha: 0.15);
    z-index: 1;
  }
}
%horizontal-center {
  @include flexbox;
  align-items: center;
}

%flex-center {
  @include flexbox;
  align-items: center;
  justify-content: center;
}

%normal-transition {
  @include transition(all 0.3s ease-in-out);
}

%cover-link {
  position: relative;
  .cover-link {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
  }
}