holygrail2 1.0.0

package/scss/abstract/_mixins.scss

@@ -0,0 +1,691 @@
+@use 'sass:math';
+@import 'breakpoints';
+
+@mixin background-alpha($color: $color-white, $alpha: 1) {
+  background-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
+}
+
+@mixin user-select($select) {
+  user-select: $select;
+}
+
+@mixin font-light() {
+  font-family: $font-family-a-l;
+  font-weight: $font-weight-light;
+}
+
+@mixin font-regular() {
+  font-family: $font-family-a-r;
+  font-weight: $font-weight-regular;
+}
+
+@mixin font-medium() {
+  font-family: $font-family-a-m;
+  font-weight: $font-weight-medium;
+}
+
+@mixin font-semibold() {
+  font-family: $font-family-a-sb;
+  font-weight: $font-weight-semibold;
+}
+
+@mixin font-bold() {
+  font-family: $font-family-a-b;
+  font-weight: $font-weight-bold;
+}
+
+@mixin font-2-regular() {
+  font-family: $font-family-b-r;
+}
+
+@mixin font-2-medium() {
+  font-family: $font-family-b-m;
+}
+
+@mixin font-2-bold() {
+  font-family: $font-family-b-b;
+}
+
+@mixin font-3-regular() {
+  font-family: $font-family-c-r;
+}
+
+@mixin font-3-medium() {
+  font-family: $font-family-c-m;
+}
+
+@mixin font-3-bold() {
+  font-family: $font-family-c-b;
+}
+
+@mixin fonters($param) {
+  @if $param== 'light' {
+    @include font-light;
+  } @else if $param== 'regular' {
+    @include font-regular;
+  } @else if $param== 'medium' {
+    @include font-medium;
+  } @else if $param== 'bold' {
+    @include font-bold;
+  } @else if $param== 'regular2' {
+    @include font-2-regular;
+  } @else if $param== 'medium2' {
+    @include font-2-medium;
+  } @else if $param== 'bold2' {
+    @include font-2-bold;
+  } @else if $param== 'regular3' {
+    @include font-3-regular;
+  } @else if $param== 'medium3' {
+    @include font-3-medium;
+  } @else if $param== 'bold3' {
+    @include font-3-bold;
+  }
+}
+
+@mixin typesFixers($headersFixers, $cssattr) {
+  @for $i from 1 through 1 {
+    @each $name, $fsize in $headersFixers {
+      $fontsize: nth($fsize, $i);
+      $fontheight: nth($fsize, 2);
+      .text-#{$name}-r {
+        @include fonters(regular);
+
+        #{$cssattr }: $fontsize;
+        line-height: $fontheight;
+      }
+      .text-#{$name}-m {
+        @include fonters(medium);
+
+        #{$cssattr }: $fontsize;
+        line-height: $fontheight;
+      }
+      .text-#{$name}-b {
+        @include fonters(bold);
+
+        #{$cssattr }: $fontsize;
+        line-height: $fontheight;
+      }
+      .text-#{$name}-2r {
+        @include fonters('regular2');
+
+        #{$cssattr }: $fontsize;
+        line-height: $fontheight;
+      }
+      .text-#{$name}-2b {
+        @include fonters('bold2');
+
+        #{$cssattr }: $fontsize;
+        line-height: $fontheight;
+      }
+    }
+  }
+}
+
+@mixin random-bgr() {
+  background: rgb(random(255) random(255) random(255));
+}
+
+@mixin fixed-bgr() {
+  background: red;
+}
+
+@function unity($value) {
+  @return math.div($value, $value * 0 + 1);
+}
+
+@mixin typesFluids($headersFluids) {
+  @for $i from 1 through 1 {
+    @each $name, $fsize in $headersFluids {
+      $u1: unit($min-vw);
+      $u2: unit($max-vw);
+      $min-font-size: nth($fsize, $i);
+      $max-font-size: nth($fsize, 2);
+      $fluid-line-height: nth($fsize, 3);
+      $u3: unit($min-font-size);
+      $u4: unit($max-font-size);
+      $u5: nth($fsize, 3);
+
+      .fluid-#{$name}-l {
+        @include font-light;
+
+        @if $u1==$u2 and $u1==$u3 and $u1==$u4 {
+          & {
+            font-size: $min-font-size;
+            line-height: $u5;
+
+            @media (min-width: $min-vw) {
+              font-size: calc(
+                #{$min-font-size} + #{unity($max-font-size - $min-font-size)} *
+                  ((100vw - #{$min-vw}) / #{unity($max-vw - $min-vw)})
+              );
+              line-height: $fluid-line-height;
+            }
+
+            @media (min-width: $max-vw) {
+              font-size: $max-font-size;
+              line-height: $fluid-line-height;
+            }
+          }
+        }
+      }
+
+      .fluid-#{$name}-r {
+        @include font-regular;
+
+        @if $u1==$u2 and $u1==$u3 and $u1==$u4 {
+          & {
+            font-size: $min-font-size;
+            line-height: $u5;
+
+            @media (min-width: $min-vw) {
+              font-size: calc(
+                #{$min-font-size} + #{unity($max-font-size - $min-font-size)} *
+                  ((100vw - #{$min-vw}) / #{unity($max-vw - $min-vw)})
+              );
+              line-height: $fluid-line-height;
+            }
+
+            @media (min-width: $max-vw) {
+              font-size: $max-font-size;
+              line-height: $fluid-line-height;
+            }
+          }
+        }
+      }
+      .fluid-#{$name}-m {
+        @include font-medium;
+
+        @if $u1==$u2 and $u1==$u3 and $u1==$u4 {
+          & {
+            font-size: $min-font-size;
+            line-height: $u5;
+
+            @media (min-width: $min-vw) {
+              font-size: calc(
+                #{$min-font-size} + #{unity($max-font-size - $min-font-size)} *
+                  ((100vw - #{$min-vw}) / #{unity($max-vw - $min-vw)})
+              );
+              line-height: $fluid-line-height;
+            }
+
+            @media (min-width: $max-vw) {
+              font-size: $max-font-size;
+              line-height: $fluid-line-height;
+            }
+          }
+        }
+      }
+
+      .fluid-#{$name}-sb {
+        @include font-semibold;
+
+        @if $u1==$u2 and $u1==$u3 and $u1==$u4 {
+          & {
+            font-size: $min-font-size;
+            line-height: $u5;
+
+            @media (min-width: $min-vw) {
+              font-size: calc(
+                #{$min-font-size} + #{unity($max-font-size - $min-font-size)} *
+                  ((100vw - #{$min-vw}) / #{unity($max-vw - $min-vw)})
+              );
+              line-height: $fluid-line-height;
+            }
+
+            @media (min-width: $max-vw) {
+              font-size: $max-font-size;
+              line-height: $fluid-line-height;
+            }
+          }
+        }
+      }
+
+      .fluid-#{$name}-b {
+        @include font-bold;
+
+        @if $u1==$u2 and $u1==$u3 and $u1==$u4 {
+          & {
+            font-size: $min-font-size;
+            line-height: $u5;
+
+            @media (min-width: $min-vw) {
+              font-size: calc(
+                #{$min-font-size} + #{unity($max-font-size - $min-font-size)} *
+                  ((100vw - #{$min-vw}) / #{unity($max-vw - $min-vw)})
+              );
+              line-height: $fluid-line-height;
+            }
+
+            @media (min-width: $max-vw) {
+              font-size: $max-font-size;
+              line-height: $fluid-line-height;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@mixin ratio($width, $height) {
+  position: relative;
+  overflow: hidden;
+
+  &::before {
+    display: block;
+    content: '';
+    width: 100%;
+    padding-top: math.div($height, $width) * 100%;
+  }
+
+  .content {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+
+  .rat-content {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+}
+
+@mixin bleed($margin) {
+  .bleed-#{$margin} {
+    padding: 0 math.div($margin, 2) + px 0 math.div($margin, 2) + px;
+    overflow: hidden;
+
+    .container-fluid {
+      margin-left: -#{math.div($margin, 2)}+ px;
+      margin-right: -#{math.div($margin, 2)}+ px;
+      padding: 0 math.div($margin, 2) + px 0 math.div($margin, 2) + px;
+    }
+
+    > .row {
+      margin-left: 0;
+      margin-right: 0;
+      box-sizing: border-box;
+      display: flex;
+      -webkit-box-flex: 0;
+      flex: 0 1 auto;
+      -webkit-box-orient: horizontal;
+      -webkit-box-direction: normal;
+      flex-flow: row wrap;
+      flex-wrap: wrap;
+    }
+
+    > [class*='col-'],
+    > .col {
+      padding: math.div($margin, 2) + px;
+      box-sizing: border-box;
+    }
+  }
+
+  .single {
+    flex-basis: 50%;
+    max-width: 50%;
+  }
+
+  .double {
+    flex-basis: 100%;
+    max-width: 100%;
+  }
+
+  @media (min-width: $break-sm) {
+    .single {
+      flex-basis: 25%;
+      max-width: 25%;
+    }
+
+    .double {
+      flex-basis: 50%;
+      max-width: 50%;
+    }
+  }
+}
+
+@mixin types($breakpoints, $headers, $cssattr) {
+  @for $i from 1 through length($breakpoints) {
+    @media (min-width: nth(map-values($breakpoints), $i)) {
+      @each $name, $fsize in $headers {
+        $fontsize: nth($fsize, $i);
+        $fontheight: nth($fsize, 5);
+        $fontweight: nth($fsize, 6);
+        .#{$name} {
+          @if nth(map-values($breakpoints), $i) ==1px {
+            @include fonters($fontweight);
+          }
+
+          #{$cssattr }: $fontsize;
+          line-height: $fontheight;
+        }
+      }
+    }
+  }
+}
+
+@mixin space($breakpoints, $paddings, $cssattr) {
+  @for $i from 1 through length($breakpoints) {
+    @media (min-width: nth(map-values($breakpoints), $i)) {
+      @each $name, $pad in $paddings {
+        $padding: nth($pad, $i);
+        .#{$name} {
+          #{$cssattr }: $padding;
+        }
+      }
+    }
+  }
+}
+
+@mixin button-variant($color, $background, $border) {
+  color: $color;
+  background-color: $background;
+  border-color: $border;
+
+  &:focus,
+  &.focus {
+    color: $color;
+    background-color: darken($background, 10%);
+    border-color: darken($border, 25%);
+  }
+
+  &:hover {
+    color: $color;
+    background-color: darken($background, 10%);
+    border-color: darken($border, 12%);
+  }
+
+  &:active,
+  &.active,
+  .open > &.dropdown-toggle {
+    background-image: none;
+    color: $color;
+    background-color: darken($background, 10%);
+    border-color: darken($border, 12%);
+    &:hover,
+    &:focus,
+    &.focus {
+      color: $color;
+      background-color: darken($background, 17%);
+      border-color: darken($border, 25%);
+    }
+  }
+
+  &.disabled,
+  &[disabled],
+  fieldset[disabled] & {
+    &:hover,
+    &:focus,
+    &.focus {
+      background-color: $background;
+      border-color: $border;
+    }
+  }
+
+  .badge {
+    color: $background;
+    background-color: $color;
+  }
+}
+
+@mixin button-size(
+  $padding-vertical,
+  $padding-horizontal,
+  $font-size,
+  $line-height,
+  $border-radius
+) {
+  padding: $padding-vertical $padding-horizontal;
+  font-size: $font-size;
+  line-height: $line-height;
+  border-radius: $border-radius;
+}
+
+@mixin box-shadow($shadow...) {
+  box-shadow: $shadow;
+}
+
+@mixin box-sizing($boxmodel) {
+  box-sizing: $boxmodel;
+}
+
+@mixin content-columns($column-count, $column-gap: $grid-gutter-width) {
+  column-count: $column-count;
+  column-gap: $column-gap;
+}
+
+@mixin tab-focus() {
+  border-color: transparent;
+  outline: thin dotted;
+  box-shadow: none;
+  outline-offset: -2px;
+}
+
+@mixin calc($property, $expression) {
+  #{$property}: -moz-calc(#{$expression});
+  #{$property}: -webkit-calc(#{$expression});
+  #{$property}: calc(#{$expression});
+}
+
+@mixin ellipsis() {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+@mixin appearance() {
+  appearance: none;
+}
+
+@mixin media($consulta) {
+  $media-max-xs: '(max-width : 480px)';
+  $media-max-sm: '(max-width : 767px)';
+  $media-max-md: '(max-width : 991px)';
+  $media-max-lg: '(max-width : 1279px)';
+
+  $media-xxs: '(min-width : 300px)';
+  $media-xs: '(min-width : 480px)';
+  $media-sm: '(min-width: 768px)';
+  $media-md: '(min-width: 992px)';
+  $media-md-2: '(min-width: 1025px)';
+  $media-lg: '(min-width: 1280px)';
+  $media-xl: '(min-width: 1500px)';
+  $media-xxl: '(min-width: 1600px)';
+  $portrait: '(min-width: 768px) and (max-width: 991px)';
+  $landscape: '(min-width: 992px) and (max-width: 1279px)';
+  $landscape-2: '(min-width: 1280px) and (max-width: 1560px)';
+
+  @if $consulta==xxs {
+    @media #{$media-xxs} {
+      @content;
+    }
+  } @else if $consulta==max-xs {
+    @media #{$media-max-xs} {
+      @content;
+    }
+  } @else if $consulta==max-sm {
+    @media #{$media-max-sm} {
+      @content;
+    }
+  } @else if $consulta==max-md {
+    @media #{$media-max-md} {
+      @content;
+    }
+  } @else if $consulta==max-lg {
+    @media #{$media-max-lg} {
+      @content;
+    }
+  } @else if $consulta==xs {
+    @media #{$media-xs} {
+      @content;
+    }
+  } @else if $consulta==sm {
+    @media #{$media-sm} {
+      @content;
+    }
+  } @else if $consulta==md {
+    @media #{$media-md} {
+      @content;
+    }
+  } @else if $consulta==md-2 {
+    @media #{$media-md-2} {
+      @content;
+    }
+  } @else if $consulta==lg {
+    @media #{$media-lg} {
+      @content;
+    }
+  } @else if $consulta==xl {
+    @media #{$media-xl} {
+      @content;
+    }
+  } @else if $consulta==xxl {
+    @media #{$media-xxl} {
+      @content;
+    }
+  } @else if $consulta==portrait {
+    @media #{$portrait} {
+      @content;
+    }
+  } @else if $consulta==land {
+    @media #{$landscape} {
+      @content;
+    }
+  } @else if $consulta==land-2 {
+    @media #{$landscape-2} {
+      @content;
+    }
+  } @else if $consulta == retina {
+    @media only screen and (-webkit-min-device-pixel-ratio: 2),
+      only screen and (min--moz-device-pixel-ratio: 2),
+      only screen and (-o-min-device-pixel-ratio: 2/1),
+      only screen and (min-device-pixel-ratio: 2),
+      only screen and (min-resolution: 192dpi),
+      only screen and (min-resolution: 2dppx) {
+      @content;
+    }
+  }
+}
+
+@function calculate-rem($size) {
+  $remSize: $size / 16px;
+
+  @return $remSize * 1rem;
+}
+
+@mixin font-size($size) {
+  font-size: $size;
+  font-size: calculate-rem($size);
+}
+
+@mixin opacity($opacity) {
+  opacity: $opacity;
+
+  $opacity-ie: $opacity * 100;
+
+  filter: alpha(opacity=$opacity-ie);
+}
+
+$spritegrid: 32;
+$spriteWidth: 600;
+$spriteHeight: 400;
+
+@mixin placeholder() {
+  &::input-placeholder {
+    @content;
+  }
+  &:placeholder {
+    @content;
+  }
+  &::placeholder {
+    @content;
+  }
+  &:input-placeholder {
+    @content;
+  }
+}
+
+@mixin transition($transition, $time, $timing: ease) {
+  transition: $transition $time $timing;
+}
+
+@mixin absolute-vertical-center() {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+@mixin absolute-vertical-bottom() {
+  position: absolute;
+  bottom: 10%;
+}
+
+@mixin rgba($property, $background: #000000, $opacity: 0.75, $mix: white) {
+  #{$property}: mix($background, $mix, $opacity * 100%);
+  #{$property}: rgba($background, $opacity);
+}
+
+@function unicode($str) {
+  @return unquote('"') + unquote(str-insert($str, '\\', 1)) + unquote('"');
+}
+
+@mixin mintypes($minbreakpoints, $headers, $cssattr) {
+  @for $i from 1 through length($minbreakpoints) {
+    @media (min-width: nth(map-values($minbreakpoints), $i)) {
+      @each $name, $fsize in $headers {
+        $fontsize: nth($fsize, $i);
+        $fontheight: nth($fsize, 3);
+        $fontweight: nth($fsize, 4);
+        .#{$name} {
+          @if nth(map-values($minbreakpoints), $i) ==1px {
+            @include fonters($fontweight);
+          }
+
+          #{$cssattr }: $fontsize;
+          line-height: $fontheight;
+        }
+      }
+    }
+  }
+}
+
+@mixin debug-types($headers) {
+  @for $i from 1 through length($headers) {
+    .#{nth(map-keys($headers), $i)} {
+      position: relative;
+      border: 1px solid #96c3ac;
+      &::after {
+        content: '#{nth(map-keys($headers), $i)} ' !important;
+        position: absolute;
+
+        @include fixed-bgr;
+
+        opacity: 0.8;
+        white-space: nowrap;
+        color: $c-white;
+        padding: 2px;
+        left: 0;
+        font-size: 10px;
+        font-weight: bold;
+      }
+    }
+  }
+}
+
+@mixin heights-mix() {
+  @each $height-name in map-keys($heights) {
+    $values: map-get($heights, $height-name);
+    .#{$height-name} {
+      min-height: nth($values, 1);
+
+      @media (min-width: $break-sm) {
+        min-height: nth($values, 2);
+      }
+    }
+  }
+}