SCSS helper snippets

helpers.scss

/* ===================== *\
    SCSS HELPERS
\* ===================== */

/* TRANSFORM =-=-=-=-=-=-=-=-=-=-=-=*/

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

@mixin transform-origin($top: center, $left: center){
    -webkit-transform-origin: $top $left;
    -ms-transform-origin: $top $left;
    transform-origin: $top $left;
}

/* FILTER =-=-=-=-=-=-=-=-=-=-=-=*/

@mixin filter($filter-type,$filter-amount) {
    -webkit-filter: $filter-type+unquote('(#{$filter-amount})');
    -moz-filter: $filter-type+unquote('(#{$filter-amount})');
    -ms-filter: $filter-type+unquote('(#{$filter-amount})');
    -o-filter: $filter-type+unquote('(#{$filter-amount})');
    filter: $filter-type+unquote('(#{$filter-amount})');
}

/* POSITIONING =-=-=-=-=-=-=-=-=-=-=-=*/

@mixin position($p_positiontype: absolute, $p_top: 0, $p_left: 0) {
    @if $p_positiontype == sticky {
        position: -webkit-sticky;
        position: -moz-sticky;
        position: -ms-sticky;
        position: -o-sticky;
        position: sticky;
    } @else {
        position: $p_positiontype;
    }
    top: $p_top;
    left: $p_left;
}
@mixin hcenter($p_top: 0){
    @include position(absolute, $p_top, 50%);
    @include transform(translateX(-50%));
}
@mixin vcenter($p_left: 0){
    @include position(absolute, 50%, $p_left);
    @include transform(translateY(-50%));
}
@mixin centercenter(){
    @include position(absolute, 50%, 50%);
    @include transform(translate(-50%, -50%));
}
@mixin hidden(){
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}
@mixin visible(){
    display: initial !important;
    visibility: visible !important;
    opacity: initial !important;
}
@mixin invisible(){
    visibility: hidden !important;
}

.vcenter {
    @include vcenter();
}
.hcenter {
    @include hcenter();
}
.centercenter {
    @include centercenter();
}
.hidden {
    @include hidden();
}
.visible {
    @include visible();
}
.invisible{
    @include invisible();
}

/* TEXT-OVERFLOW =-=-=-=-=-=-=-=-=-=-=-=*/

@mixin ellipsis-text(){
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* RESPONSIVE =-=-=-=-=-=-=-=-=-=-=-=*/

$tablet-width: 700px;
$desktop-width: 1200px;
$bigscreen-width: 2400px;
$letterbox-height: 800px;

@mixin phone {
    @media (max-width: #{$tablet-width - 1px}) {
        @content;
    }
}

@mixin tablet {
    @media (min-width: #{$tablet-width}) and (max-width: #{$desktop-width - 1px}) {
        @content;
    }
}

@mixin desktop {
    @media (min-width: #{$desktop-width}) {
        @content;
    }
}

@mixin bigscreen {
    @media (min-width: #{$bigscreen-width}) {
        @content;
    }
}

@mixin letterbox {
    @media (max-height: #{$letterbox-height}) {
        @content;
    }
}


/* DEVICES WITHOUT HOVER =-=-=-=-=-=-=-=-=-=-=-=*/

@mixin no-hover {
  @media (hover: none) { 
    @content;
  }
}

/* SCROLLBARS =-=-=-=-=-=-=-=-=-=-=-=*/

@mixin scrollbars($size, $foreground-color, $background-color, $rounding) {
    ::-webkit-scrollbar-button{
        display: none;
    }
    ::-webkit-scrollbar {
        width: $size;
        height: $size;
        border-radius: $rounding;
    }
    ::-webkit-scrollbar-thumb {
        background: $foreground-color;
        border-radius: $rounding;
        cursor: pointer;
    }
    ::-webkit-scrollbar-track {
        background: $background-color;
        width: calc(#{$size} * 2);
        border-radius: $rounding;
    }
    ::-webkit-scrollbar-track-piece {
        background: $background-color;
        width: calc(#{$size} / 2);
        border-radius: $rounding;
    }
    ::-webkit-scrollbar-corner {
        background: $background-color;
    }
    ::-webkit-resizer {
        background: $background-color;
    }
    body {
        scrollbar-face-color: $foreground-color;
        scrollbar-track-color: $background-color;
    }
}

/* COLUMNS =-=-=-=-=-=-=-=-=-=-=-=*/

@mixin columns($width, $count, $gap){
    -webkit-columns: $width $count;
    -moz-columns: $width $count;
    columns: $width $count;
    -webkit-column-gap: $gap;
    -moz-column-gap: $gap;
    column-gap: $gap;
}

@mixin column-rule($width, $type, $color){
    -webkit-column-rule: $width $type $color;
    -moz-column-rule: $width $type $color;
    column-rule: $width $type $color;
}

@mixin break-inside($value: avoid){
    -webkit-column-break-inside: $value;
    page-break-inside: $value;
    break-inside: $value;
}

/* ANIMATIONS =-=-=-=-=-=-=-=-=-=-=-=*/

@mixin keyframes($animationName) {
    @-webkit-keyframes #{$animationName} {
        @content;
    }
    @-moz-keyframes #{$animationName} {
        @content;
    }
    @-o-keyframes #{$animationName} {
        @content;
    }
    @keyframes #{$animationName} {
        @content;
    }
}
@mixin animate($name, $duration: 1s, $iteration: 1, $direction: normal, $timing-function: ease, $fillmode: forwards) {
    -webkit-animation-duration: $duration;
    -moz-animation-duration: $duration;
    -o-animation-duration: $duration;
    animation-duration: $duration;
    -webkit-animation-iteration-count: $iteration;
    -moz-animation-iteration-count: $iteration;
    -o-animation-iteration-count: $iteration;
    animation-iteration-count: $iteration;
    -webkit-animation-name: $name;
    -moz-animation-name: $name;
    -o-animation-name: $name;
    animation-name: $name;
    -webkit-animation-direction: $direction;
    -moz-animation-direction: $direction;
    -o-animation-direction: $direction;
    animation-direction: $direction;
    -webkit-animation-timing-function: $timing-function;
    -moz-animation-timing-function: $timing-function;
    -o-animation-timing-function: $timing-function;
    animation-timing-function: $timing-function;
    -webkit-animation-fill-mode: $fillmode;
    -moz-animation-fill-mode: $fillmode;
    -o-animation-fill-mode: $fillmode;
    animation-fill-mode: $fillmode;
}

@include keyframes(fadeIn) {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@include keyframes(fadeOut) {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
@include keyframes(bounce) {
    from, 20%, 53%, 80%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        @include transform(translate3d(0,0,0));
    }

    40%, 43% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        @include transform(translate3d(0,-30px,0));
    }

    70% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        @include transform(translate3d(0,-15px,0));
    }

    90% {
        @include transform(translate3d(0,-4px,0));
    }
}

@include keyframes(animatetop) {
    from {
        top: -300px;
    }
    to {
        top: initial;
    }
}

@mixin fadeIn {
    @include animate(fadeIn, 1s, 1, normal);
}
@mixin fadeOut {
    @include animate(fadeOut, 1s, 1, normal);
}
@mixin bounce {
    @include animate(bounce, .75s, 1, normal);
}
@mixin animatetop {
    @include animate(animatetop, 0.5s, 1, normal);
}

.fadeIn {
    @include fadeIn;
}
.fadeOut {
    @include fadeOut;
}
.bounce {
    @include bounce;
}

$regularEase: ease;
$easeInSine: cubic-bezier(0.47, 0, 0.745, 0.715);
$easeOutSine: cubic-bezier(0.39, 0.575, 0.565, 1);
$easeInOutSine: cubic-bezier(0.445, 0.05, 0.55, 0.95);
$easeInQuad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
$easeOutQuad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
$easeInOutQuad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
$easeInExpo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
$easeOutExpo: cubic-bezier(0.19, 1, 0.22, 1);
$easeInOutExpo: cubic-bezier(1, 0, 0, 1);
$easeInBack: cubic-bezier(0.6, -0.28, 0.735, 0.045);
$easeOutBack: cubic-bezier(0.175, 0.885, 0.32, 1.275);
$easeInOutBack: cubic-bezier(0.68, -0.55, 0.265, 1.55);
$easeInOutBack: cubic-bezier(0.68, -0.55, 0.265, 1.55);

@mixin transition($p_transitionelement: all, $p_transitiontime: 1s, $p_transitionease: ease){
    -webkit-transition: $p_transitionelement $p_transitiontime $p_transitionease;
    transition: $p_transitionelement $p_transitiontime $p_transitionease;
}

/* GRADIENTS =-=-=-=-=-=-=-=-=-=-=-=-=-=*/

@mixin verticalGradient($top, $bottom){
    background: $top;
    background: -moz-linear-gradient(top, $top 0%, $bottom 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$top), color-stop(100%,$bottom));
    background: -webkit-linear-gradient(top, $top 0%,$bottom 100%);
    background: -o-linear-gradient(top, $top 0%,$bottom 100%);
    background: -ms-linear-gradient(top, $top 0%,$bottom 100%);
    background: linear-gradient(to bottom, $top 0%,$bottom 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#000000',GradientType=0 );
}

@mixin horizontalGradient($left, $right){
    background: $left;
    background: -moz-linear-gradient(left, $left 0%, $right 100%);
    background: -webkit-gradient(linear, left, right, color-stop(0%,$left), color-stop(100%,$right));
    background: -webkit-linear-gradient(left, $left 0%,$right 100%);
    background: -o-linear-gradient(left, $left 0%,$right 100%);
    background: -ms-linear-gradient(left, $left 0%,$right 100%);
    background: linear-gradient(to right, $left 0%,$right 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#000000',GradientType=0 );
}

@mixin tlbrGradient($left, $right){
    background: $left;
    background: -moz-linear-gradient(-45deg, $left 0%, $right 100%);
    background: -webkit-gradient(linear, top left, bottom right, color-stop(0%,$left), color-stop(100%,$right));
    background: -webkit-linear-gradient(-45deg, $left 0%,$right 100%);
    background: -o-linear-gradient(left, $left 0%,$right 100%);
    background: -ms-linear-gradient(left, $left 0%,$right 100%);
    background: linear-gradient(135deg, $left 0%,$right 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#000000',GradientType=1 );
}

@mixin customLinearGradient($deg, $color-stops...){
    background: nth(nth($color-stops, 1), 1);
    background: -moz-linear-gradient(($deg - 180), $color-stops);
    background: -webkit-linear-gradient(($deg - 180), $color-stops);
    background: -o-linear-gradient(left, $color-stops);
    background: -ms-linear-gradient(left, $color-stops);
    background: linear-gradient($deg, $color-stops);
}

@mixin radialGradient($location, $color-stops...){
    background: nth(nth($color-stops, 1), 1);
    background: -moz-radial-gradient($location, ellipse cover, $color-stops);
    background: -webkit-radial-gradient($location, ellipse cover, $color-stops);
    background: radial-gradient(ellipse at $location, $color-stops);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#000000',GradientType=1 );
}

/* FORCE GPU-ACCELERATION =-=-=-=-=-=-=-=-=-=-=-=-=-=*/

@mixin gpu-accel(){
    @include transform(translate3d(0, 0, 0));
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* FULL SIZE MEDIA =-=-=-=-=-=-=-=-=-=-=-=-=-=*/

@mixin object-fit($p_size: contain, $p_pos: center center){
    -o-object-fit: $p_size;
    object-fit: $p_size;
    -o-object-position: $p_pos;
    object-position: $p_pos;
}

/* USER SELECT =-=-=-=-=-=-=-=-=-=-=-=-=-=*/

@mixin user-select($p_select: auto){
    -webkit-touch-callout: $p_select;
    -webkit-user-select: $p_select;
    -khtml-user-select: $p_select;
    -moz-user-select: $p_select;
    -ms-user-select: $p_select;
    user-select: $p_select;
}

/* METER & PROGRESS BARS =-=-=-=-=-=-=-=-=-=-=-=-=-=*/

@mixin meter($bg-color, $accent-color, $border-radius){

    meter {
        &::-webkit-meter-bar {
            background: $bg-color;
            box-shadow: 0 2px 3px rgba(0,0,0,0.2) inset;
            border-radius: $border-radius;
          }
    
        &::-webkit-meter-optimum-value,
        &::-webkit-meter-suboptimum-value,
        &::-webkit-meter-even-less-good-value {
            border-radius: $border-radius;
          }
    
        &::-webkit-meter-optimum-value {
            background: $accent-color;
          }
          
        &::-webkit-meter-suboptimum-value {
            background: darken($accent-color, 20%);
          }
          
        &::-webkit-meter-even-less-good-value  {
            background: darken($accent-color, 50%);
          }

          &::-moz-meter-bar {
            border-radius: $border-radius;
          }
          
          &:-moz-meter-optimum::-moz-meter-bar {
            background: $accent-color;
          }
          
          &:-moz-meter-sub-optimum::-moz-meter-bar {
            background: darken($accent-color, 20%);
          }
          
          &:-moz-meter-sub-sub-optimum::-moz-meter-bar {
            background: darken($accent-color, 50%);
          }
    }

}

@mixin progress($bg-color, $accent-color, $border-radius){

    progress{
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border: none;
        border-radius: $border-radius;
        background: $bg-color;
        box-shadow: none;

        &::-webkit-progress-bar {
            background: $bg-color;
            box-shadow: none;
            border-radius: $border-radius;
          }
          
        &::-webkit-progress-value {
            background-color: $accent-color;
            border-radius: $border-radius;
          }
          
        &::-moz-progress-bar {
            background-color: $accent-color;
            border-radius: $border-radius;
          }

    }

}

/* RANGE =-=-=-=-=-=-=-=-=-=-=-=-=-=*/

@mixin input-range($track-color, $thumb-color, $thumb-size, $border-radius) {
  -webkit-appearance: none;
  background: transparent;

  &:focus, &:active {
    outline: none;
    background: transparent;
  }

  &::-webkit-slider-runnable-track {
    width: 100%;
    height: calc(#{$thumb-size} / 3);
    cursor: pointer;
    animation: 0.2s;
    border-radius: $border-radius;
    background: $track-color;
  }

  &::-webkit-slider-thumb {
    width: $thumb-size;
    height: $thumb-size;
    cursor: pointer;
    border-radius: 50%;
    background: $thumb-color;
    -webkit-appearance: none;
    margin-top: -50%;
  }

  &:focus::-webkit-slider-runnable-track {
    background: $track-color;
  }

  &::-moz-range-track {
    width: 100%;
    height: calc(#{$thumb-size} / 3);
    cursor: pointer;
    animation: 0.2s;
    border-radius: $border-radius;
    background: $track-color;
  }

  &::-moz-range-thumb {
    width: $thumb-size;
    height: $thumb-size;
    cursor: pointer;
    border-radius: 50%;
    background: $thumb-color;
  }

  &::-ms-track {
    width: 100%;
    height: calc(#{$thumb-size} / 3);
    cursor: pointer;
    animation: 0.2s;
    color: transparent;
    border-width: $thumb-size 0;
    border-color: transparent;
    background: transparent;
  }

  &::-ms-fill-lower {
    border: calc(#{$thumb-size} / 3) solid $track-color;
    border-radius: $border-radius * 2;
    background: $track-color;
  }

  &::-ms-fill-upper {
    border: calc(#{$thumb-size} / 3) solid $track-color;
    border-radius: $border-radius * 2;
    background: $track-color;
  }

  &::-ms-thumb {
    width: $thumb-size;
    height: $thumb-size;
    cursor: pointer;
    border-radius: 50%;
    background: $thumb-color;
  }

  &:focus::-ms-fill-lower {
    background: $track-color;
  }

  &:focus::-ms-fill-upper {
    background: $track-color;
  }
}

/* MAKE SQUARES AND BARS =-=-=-=-=-=-=-=-=-=-=-=-=-=*/
@mixin square() {
    &:after {
        content: '';
        display: block;
        padding-bottom: 100%;
        z-index: -1;
    }
    @supports(aspect-ratio: 1) {
        &:after {
            display: none;
        }
        aspect-ratio: 1 / 1;
    }
}

@mixin lobar() {
    &:after {
        content: '';
        display: block;
        padding-bottom: 40%;
    }
    @supports(aspect-ratio: 1) {
        &:after {
            display: none;
        }
        aspect-ratio: 1 / 0.4;
    }
}

@mixin bar() {
    &:after {
        content: '';
        display: block;
        padding-bottom: 50%;
    }
    @supports(aspect-ratio: 1) {
        &:after {
            display: none;
        }
        aspect-ratio: 1 / 0.5;
    }
}

@mixin mdbar() {
    &:after {
        content: '';
        display: block;
        padding-bottom: 60%;
    }
    @supports(aspect-ratio: 1) {
        &:after {
            display: none;
        }
        aspect-ratio: 1 / 0.6;
    }
}

@mixin hibar() {
    &:after {
        content: '';
        display: block;
        padding-bottom: 80%;
    }
    @supports(aspect-ratio: 1) {
        &:after {
            display: none;
        }
        aspect-ratio: 1 / 0.8;
    }
}