CSSSassCollectionMixins.scss

// File: CSSSassCollectionMixins.scss
// Author: Milanowicz
// Description: Sass Mixin Collection
@use "sass:math";

//########################################################
//##               Sass Mixin Toolkit File              ##
//########################################################

@mixin FontFace ($font-name, $font-file,
                  $font-weight: $font-weight,
                  $font-style: $font-style) {
  @font-face {
    font-family: "#{$font-name}";
    src: url("#{$font-file}-webfont.eot");
    src: url("#{$font-file}-webfont.eot?#iefix") format("embedded-opentype"),
    url("#{$font-file}-webfont.woff") format("woff"),
    url("#{$font-file}-webfont@ttf") format("truetype"),
    url("#{$font-file}-webfont.svg##{$font-name}") format("svg");
    font-weight: $font-weight;
    font-style: $font-style;
  }
}

@mixin FontSize ($font-size: $font-size, $important: false) {
  $remValue: math.div($font-size, 16);
  $pxValue: ($font-size);
  @if $important {
    font-size: #{$pxValue}px !important;
    font-size: #{$remValue}rem !important;
  } @else {
    font-size: #{$pxValue}px;
    font-size: #{$remValue}rem;
  }
}

@mixin LineHeight ($line-height: $line-height, $important: false) {
  $remValue: math.div($line-height, 16);
  $pxValue: ($line-height);

  @if $important {
    line-height: #{$pxValue}px !important;
    line-height: #{$remValue}rem !important;
  } @else {
    line-height: #{$pxValue}px;
    line-height: #{$remValue}rem;
  }
}

// Font Style Mixins
@mixin Text ($font-family,
              $font-size: $font-size,
              $color: $color-black,
              $font-style: $font-style,
              $line-height: $line-height,
              $text-transform: $text-transform,
              $font-weight: $font-weight) {

  font-family: $font-family;
  @include FontSize($font-size);
  color: $color;
  font-style: $font-style;
  @include LineHeight($line-height);
  text-transform: $text-transform;
  font-weight: $font-weight;
}

@mixin Hyphens ($word-break: break-all, $hyphens: auto) {
  -ms-word-break: $word-break;
  word-break: $word-break;

  // Non standard for webkit
  word-break: break-word;

  -webkit-hyphens: $hyphens;
  -moz-hyphens: $hyphens;
  hyphens: $hyphens;
}


// HTML Helper

@mixin OutlineBorder () {
  border: 0 none;
  outline: 0 none;
}

@mixin MarginPadding ($margin: 0, $padding: 0, $important: false) {
  @if $important {
    margin: $margin !important;
    padding: $padding !important;
  } @else {
    margin: $margin;
    padding: $padding;
  }
}


// Background Image or Icon mixins

@mixin BackgroundOpacity ($color: $background-color, $opacity: $opacity) {

  $RGBColor: rgb(red($color), green($color), blue($color));
  $RGBAColor: rgba(red($color), green($color), blue($color), $opacity);

  background: $RGBColor;
  background: transparent\9;
  background: $RGBAColor;

  // IE9 and down
  //filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d')", argb($RGBAColor),argb($RGBAColor)); // IE9 and down
}

@mixin BackgroundSize ($arguments) {
  -webkit-background-size: $arguments;
  -moz-background-size: $arguments;
  -ms-background-size: $arguments;
  -o-background-size: $arguments;
  background-size: $arguments;
}

@mixin BackgroundClip ($argument: $background-clip-type) {
  -moz-background-clip: $argument;
  -webkit-background-clip: $argument;
  background-clip: $argument;
}

@mixin BackgroundPosition ($x: 50%, $y: 50%) {
  background-position-x: $x;
  background-position-y: $y;
  background-position: $x $y;
}

@mixin BackgroundVisibility ($arguments) {
  -webkit-backface-visibility: $arguments;
  backface-visibility: $arguments;
}

@mixin BackgroundImage ($filename, $filename-big: '', $width: auto, $height: auto) {
  background-image: url($filename);
  @include BackgroundSize($width $height);

  @if ($filename-big != '') {
    @media #{$high-dpi} {
      background-image: url($filename-big);
      @include BackgroundSize($width $height);
    }
  }
}

@mixin BackgroundIcon ($filename, $filename-big: '', $width: auto, $height: auto) {
  background-image: data-uri($filename);
  *background-image: url($filename);
  @inclue BackgroundSize($width $height);

  @media #{$high-dpi} {
    background-image: data-uri($filename-big);
    *background-image: url($filename-big);
    @include BackgroundSize($width $height);
  }
}
@mixin BackgroundIconSize ($width: auto, $height: auto) {
  @include BackgroundSize($width $height);
  @media #{$high-dpi} {
    @include BackgroundSize($width $height);
  }
}


// HTML Box Styles

@mixin BoxSize ($width, $height: 0, $important: false) {
  @if $important {
    width: $width !important;
    @if $height != 0 {
      height: $height !important;
    } @else {
      height: $width !important;
    }
  } @else {
    width: $width;
    @if $height != 0 {
      height: $height;
    } @else {
      height: $width;
    }
  }
}

@mixin BoxSquare ($Size, $important: false) {
  @if $important {
    width: $Size !important;
    height: $Size !important;
  } @else {
    width: $Size;
    height: $Size;
  }
}

@mixin Height ($height) {
  height: $height !important;
}

@mixin Width ($width) {
  width: $width !important;
}

@mixin BoxShadow ($arguments) {
  -webkit-box-shadow: $arguments;
  -moz-box-shadow: $arguments;
  box-shadow: $arguments;
}
@mixin BoxShadowInset ($offset-x:3px, $offset-y:3px, $blur-radius:3px, $spread-radius:3px, $color: $box-shadow-inset-color) {
  -webkit-box-shadow: inset $offset-x $offset-y $blur-radius $spread-radius $color;
  -moz-box-shadow: inset $offset-x $offset-y $blur-radius $spread-radius $color;
  box-shadow: inset $offset-x $offset-y $blur-radius $spread-radius $color;
}

@mixin BoxRounded ($radius: $box-rounded-radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
  @include BackgroundClip(padding-box);
}
@mixin BoxRadius ($top-right: 0, $bottom-right: 0, $bottom-left: 0, $top-left: 0) {

  -webkit-border-top-right-radius: $top-right;
  -webkit-border-bottom-right-radius: $bottom-right;
  -webkit-border-bottom-left-radius: $bottom-left;
  -webkit-border-top-left-radius: $top-left;

  -moz-border-radius-topright: $top-right;
  -moz-border-radius-bottomright: $bottom-right;
  -moz-border-radius-bottomleft: $bottom-left;
  -moz-border-radius-topleft: $top-left;

  border-top-right-radius: $top-right;
  border-bottom-right-radius: $bottom-right;
  border-bottom-left-radius: $bottom-left;
  border-top-left-radius: $top-left;

  @include BackgroundClip(padding-box);
}

@mixin BoxSizing ($Type: $box-sizing-type, $important: false) {
  @if $important {
    -webkit-box-sizing: $Type !important;
    -moz-box-sizing: $Type !important;
    box-sizing: $Type !important;
  } @else {
    -webkit-box-sizing: $Type;
    -moz-box-sizing: $Type;
    box-sizing: $Type;
  }
}

@mixin LinearGradient ($arguments) {
  background: -webkit-gradient($arguments);
  background: -webkit-linear-gradient($arguments);
  background: -moz-linear-gradient($arguments);
  background: -ms-linear-gradient($arguments);
  background: -o-linear-gradient($arguments);
}

@mixin GradientVertical ($start-color: $gradient-start-color, $end-color: $gradient-end-color) {
  background-color: $start-color;
  background: -webkit-gradient(linear, left top, left bottom, from($start-color), to($end-color));
  background: -webkit-linear-gradient(top, $start-color, $end-color);
  background: -moz-linear-gradient(top, $start-color, $end-color);
  background: -ms-linear-gradient(top, $start-color, $end-color);
  background: -o-linear-gradient(top, $start-color, $end-color);
}
@mixin GradientHorizontal ($start-color: $gradient-start-color, $end-color: $gradient-end-color) {
  background-color: $start-color;
  background-image: -webkit-gradient(linear, left top, right top, from($start-color), to($end-color));
  background-image: -webkit-linear-gradient(left, $start-color, $end-color);
  background-image: -moz-linear-gradient(left, $start-color, $end-color);
  background-image: -ms-linear-gradient(left, $start-color, $end-color);
  background-image: -o-linear-gradient(left, $start-color, $end-color);
}

@mixin Opacity ($opacity: $opacity) {
  -moz-opacity: $opacity;
  -khtml-opacity: $opacity;
  -webkit-opacity: $opacity;
  opacity: $opacity;
  $opperc: ($opacity * 100);
  //-ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=#{$opperc})";
  //filter: ~"alpha(opacity=#{$opperc})";
}


// HTML5 Flexbox

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

@mixin Flexbox ($arguments) {
  @include FlexboxDisplay();
  -webkit-box-flex: $arguments;
  -moz-box-flex:  $arguments;
  -webkit-flex:  $arguments;
  -ms-flex:  $arguments;
  flex:  $arguments;
}

@mixin FlexboxOrder ($arguments) {
  -webkit-box-ordinal-group: $arguments;
  -moz-box-ordinal-group: $arguments;
  -ms-flex-order: $arguments;
  -webkit-order: $arguments;
  order: $arguments;
}


// CSS3 Animation, Transform and Transition mixins

@mixin Animation ($arguments) {
  -webkit-animation: $arguments;
  -moz-animation: $arguments;
  -o-animation:$arguments;
  animation: $arguments;
}

@mixin AnimationDelay ($arguments) {
  -webkit-animation-delay: $arguments;
  animation-delay: $arguments;
}

@mixin AnimationDirection ($arguments) {
  -webkit-animation-direction: $arguments;
  -moz-animation-direction: $arguments;
  animation-direction: $arguments;
}

@mixin AnimationDuration ($arguments) {
  -webkit-animation-duration: $arguments;
  animation-duration: $arguments;
}

@mixin AnimationFillMode ($arguments) {
  -webkit-animation-fill-mode: $arguments;
  animation-fill-mode: $arguments;
}

@mixin AnimationIterationCount ($arguments) {
  -webkit-animation-iteration-count: $arguments;
  animation-iteration-count: $arguments;
}

@mixin AnimationPlayState ($arguments) {
  -webkit-animation-play-state: $arguments;
  animation-play-state: $arguments;
}

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

@mixin Transform ($arguments) {
  -webkit-transform: $arguments;
  -moz-transform: $arguments;
  -ms-transform: $arguments;
  -o-transform: $arguments;
  transform: $arguments;
}

@mixin TransformOrigin ($x: center, $y: center) {
  -webkit-transform-origin: $x $y;
  -moz-transform-origin: $x $y;
  -ms-transform-origin: $x $y;
  -o-transform-origin: $x $y;
  transform-origin: $x $y;
}

@mixin Transition ($arguments: all $transition-duration $transition-ease) {
  -webkit-transition: $arguments;
  -moz-transition: $arguments;
  -o-transition: $arguments;
  transition: $arguments;
}

@mixin TransitionDuration ($duration: $transition-duration) {
  -moz-transition-duration: $duration;
  -webkit-transition-duration: $duration;
  -o-transition-duration: $duration;
  transition-duration: $duration;
}

@mixin Perspective ($value: 1000) {
  -webkit-perspective: $value;
  -moz-perspective: $value;
  -ms-perspective: $value;
  perspective: $value;
}

@mixin Rotation ($degree: $rotation-degree) {
  @include Transform(rotate($degree));
}
@mixin Scale ($ratio: $scale-ratio){
  @include Transform(scale($ratio));
}
@mixin Skew ($rotation-degree, $rotation-degree2) {
  @include Transform(skew($rotation-degree, $rotation-degree2));
}
@mixin Translate ($x:0, $y:0) {
  @include Transform(translate($x, $y));
}
@mixin Translate3D ($x:0, $y:0, $Z: 0) {
  @include Transform(translate($x, $y, $Z));
}


// HTML Forms

@mixin FormInputPlaceholder() {
  $selector: '';
  $prefixes: (
          moz: "::-moz",
          webkit: "::-webkit",
          ie: ":-ms"
  );
  @each $prop, $value in $prefixes {
    @if $prop != "moz" {
      $selector: #{$value}-input-placeholder;
    } @else {
      $selector: #{$value}-placeholder;
    }
    @if & {
      &#{$selector} {
        @content;
      }
    } @else {
      #{$selector} {
        @content;
      }
    }
  }
  &::placeholder {
    @content;
  }
}

@mixin FormPlaceholderColor ($color: $color-black) {
  @include FormInputPlaceholder() {
    color: $color;
  }
}