hugo-theme-zzo/assets/sass/abstracts/_mixins.scss

$theme-map: null;
@mixin themify($themes) {
  @each $theme, $map in $themes {
    .theme__#{$theme} & {
      $theme-map: () !global;
      @each $key, $submap in $map {
        $value: map-get(map-get($themes, $theme), "#{$key}");
        $theme-map: map-merge(
          $theme-map,
          (
            $key: $value
          )
        ) !global;
      }
      @content;
      $theme-map: null !global;
    }
  }
}

@mixin pseudo($display: block, $pos: absolute, $content: "") {
  content: $content;
  display: $display;
  position: $pos;
}

@mixin responsive-ratio($x, $y, $pseudo: false) {
  $padding: unquote(($y / $x) * 100 + "%");
  @if $pseudo {
    &:before {
      @include pseudo($pos: relative);
      width: 100%;
      padding-top: $padding;
    }
  } @else {
    padding-top: $padding;
  }
}

@mixin css-triangle($color, $direction, $size: 6px, $position: absolute, $round: false) {
  @include pseudo($pos: $position);
  width: 0;
  height: 0;
  @if $round {
    border-radius: 3px;
  }
  @if $direction == down {
    border-left: $size solid transparent;
    border-right: $size solid transparent;
    border-top: $size solid $color;
    margin-top: 0 - round($size / 2.5);
  } @else if $direction == up {
    border-left: $size solid transparent;
    border-right: $size solid transparent;
    border-bottom: $size solid $color;
    margin-bottom: 0 - round($size / 2.5);
  } @else if $direction == right {
    border-top: $size solid transparent;
    border-bottom: $size solid transparent;
    border-left: $size solid $color;
    margin-right: -$size;
  } @else if $direction == left {
    border-top: $size solid transparent;
    border-bottom: $size solid transparent;
    border-right: $size solid $color;
    margin-left: -$size;
  }
}

@mixin font-source-sans($size: false, $colour: false, $weight: false, $lh: false) {
  font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;
  @if $size {
    font-size: $size;
  }
  @if $colour {
    color: $colour;
  }
  @if $weight {
    font-weight: $weight;
  }
  @if $lh {
    line-height: $lh;
  }
}

@mixin input-placeholder {
  &.placeholder {
    @content;
  }
  &:-moz-placeholder {
    @content;
  }
  &::-moz-placeholder {
    @content;
  }
  &:-ms-input-placeholder {
    @content;
  }
  &::-webkit-input-placeholder {
    @content;
  }
}

@mixin truncate($truncation-boundary) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: $truncation-boundary;
}

@mixin truncate2($truncation-boundary) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: $truncation-boundary;
}

@mixin box-shadow($top, $left, $blur, $size, $color, $inset: false) {
  @if $inset {
    -webkit-box-shadow: inset $top $left $blur $size $color;
    -moz-box-shadow: inset $top $left $blur $size $color;
    box-shadow: inset $top $left $blur $size $color;
  } @else {
    -webkit-box-shadow: $top $left $blur $size $color;
    -moz-box-shadow: $top $left $blur $size $color;
    box-shadow: $top $left $blur $size $color;
  }
}

@mixin on-event($self: false) {
  @if $self {
    &,
    &:hover,
    &:active,
    &:focus {
      @content;
    }
  } @else {
    &:hover,
    &:active,
    &:focus {
      @content;
    }
  }
}

@mixin transition($what: all, $time: 0.2s, $how: ease-in-out) {
  -webkit-transition: $what $time $how;
  -moz-transition: $what $time $how;
  -ms-transition: $what $time $how;
  -o-transition: $what $time $how;
  transition: $what $time $how;
}

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

// Rotate
@mixin rotate($deg) {
  @include transform(rotate(#{$deg}deg));
}

// Scale
@mixin scale($scale) {
  @include transform(scale($scale));
}

@mixin scaleX($scale) {
  @include transform(scaleX($scale));
}

@mixin scaleY($scale) {
  @include transform(scaleY($scale));
}

// Translate
@mixin translate($x, $y) {
  @include transform(translate($x, $y));
}

@mixin translateX($x) {
  @include transform(translateX($x));
}

@mixin translateY($y) {
  @include transform(translateY($y));
}

// Skew
@mixin skew($x, $y) {
  @include transform(skew(#{$x}deg, #{$y}deg));
}

// Transform Origin
@mixin transform-origin($origin) {
  -webkit-transform-origin: $origin;
  -moz-transform-origin: $origin;
  -ms-transform-origin: $origin;
  transform-origin: $origin;
}

@mixin keyframes($animation-name) {
  @-webkit-keyframes #{$animation-name} {
    @content;
  }
  @-moz-keyframes #{$animation-name} {
    @content;
  }  
  @-ms-keyframes #{$animation-name} {
    @content;
  }
  @-o-keyframes #{$animation-name} {
    @content;
  }  
  @keyframes #{$animation-name} {
    @content;
  }
}

@mixin animation($str) {
  -webkit-animation: #{$str};
  -moz-animation: #{$str};
  -ms-animation: #{$str};
  -o-animation: #{$str};
  animation: #{$str};      
}

@mixin no-select {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

@mixin clippy() {
  background-image: url('data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjRwdCIgaGVpZ2h0PSIyNHB0IiB2aWV3Qm94PSIwIDAgMjQgMjQiPlxhPHBhdGggc3R5bGU9InN0cm9rZTpub25lO2ZpbGwtcnVsZTpub256ZXJvO2ZpbGw6IzY0NjQ2NDtmaWxsLW9wYWNpdHk6MSIgZD0iTTQgMkMyLjg5NDUzMSAyIDIgMi44OTQ1MzEgMiA0VjE3QzIgMTcuNTUwNzgxIDIuNDQ5MjE5IDE4IDMgMThTNCAxNy41NTA3ODEgNCAxN1Y0SDE3QzE3LjU1MDc4MSA0IDE4IDMuNTUwNzgxIDE4IDNTMTcuNTUwNzgxIDIgMTcgMnpNOCA2QzYuODk0NTMxIDYgNiA2Ljg5NDUzMSA2IDhWMjBDNiAyMS4xMDU0NjkgNi44OTQ1MzEgMjIgOCAyMkgyMEMyMS4xMDU0NjkgMjIgMjIgMjEuMTA1NDY5IDIyIDIwVjhDMjIgNi44OTQ1MzEgMjEuMTA1NDY5IDYgMjAgNnpNOCA4SDIwVjIwSDh6TTggOCIvPjwvc3ZnPg')
}

@mixin webkit-scrollbars($foreground-color, $background-color) {
  &::-webkit-scrollbar {
      width:  0.45em;
      height: 0.45em;
  }

  &::-webkit-scrollbar-thumb {
      background: $foreground-color;
  }

  &::-webkit-scrollbar-track {
      background: $background-color;
  }
}

@mixin webkit-scrollbars2($foreground-color, $background-color) {
  ::-webkit-scrollbar {
      width:  0.45em;
      height: 0.45em;
  }

  ::-webkit-scrollbar-thumb {
      background: $foreground-color;
  }

  ::-webkit-scrollbar-track {
      background: $background-color;
  }
}

@mixin moz-scrollbars($foreground-color, $background-color) {
  scrollbar-width: thin;
  scrollbar-color: $foreground-color $background-color;
}