ctt-babylon 0.8.17 → 0.8.18

package/lib/styles/styles/babylon/mixins.scss

@@ -0,0 +1,1031 @@
+@use './variables.scss' as *;
+@use 'sass:map';
+@use 'sass:math';
+@use 'sass:list';
+
+// MEDIA QUERYS
+$mobile: 375px;
+$small-tablet: 540px;
+$medium-tablet: 768px;
+$full-tablet: 1025px;
+$small-desktop: 1280px;
+$medium-desktop: 1366px;
+$full-desktop: 1680px;
+$full-desktop-xl: 1920px;
+
+//-------------------- Responsive sizes -------------------- //
+$extra-large-device-width: 1280px; // Large devices (desktops, less than 1280px)
+$large-device-width: 1199px; // Large devices (desktops, less than 1200px)
+$medium-device-width: 1025px; // Medium devices (tablets, less than 1025px)
+$small-device-width: 767px; // Small devices (landscape phones, less than 768px)
+$extra-small-device-width: 575px; // Extra small devices (portrait phones, less than 576px)
+
+$container-max-widths: (
+    sm: 540px,
+    md: 768px,
+    lg: 1025px,
+    xl: 1280px,
+    xxl: 1366px,
+    xxxl: 1600px,
+    xxxxl: 1921px,
+) !default;
+$grid-breakpoints: (
+    xs: 0,
+    sm: 540px,
+    md: 768px,
+    lg: 1025px,
+    xl: 1280px,
+    xxl: 1366px,
+    xxxl: 1680px,
+    xxxxl: 1921px,
+) !default;
+
+// breakpoints
+$breakpoints: (
+    'xs': 540px,
+    'sm': 768px,
+    'md': 1024px,
+    'lg': 1280px,
+    'xl': 1366px,
+    '2xl': 1680px,
+    '3xl': 1800px,
+    '4xl': 1900px,
+) !default;
+
+//-------------------- MediaQuery --------//
+@mixin full-desktop-xl {
+    //1920px
+    @media (max-width: #{$full-desktop-xl - 1px}) {
+        @content;
+    }
+}
+@mixin full-desktop {
+    //1680px
+    @media (max-width: #{$full-desktop - 1px}) {
+        @content;
+    }
+}
+
+@mixin medium-desktop {
+    //1366px
+    @media (max-width: #{$medium-desktop - 1px}) {
+        @content;
+    }
+}
+
+@mixin small-desktop {
+    //1280px
+    @media (max-width: #{$small-desktop - 1px}) {
+        @content;
+    }
+}
+
+@mixin full-tablet {
+    //992
+    @media (max-width: #{$full-tablet - 1px}) {
+        @content;
+    }
+}
+
+@mixin medium-tablet {
+    //768px
+    @media (max-width: #{$medium-tablet - 1px}) {
+        @content;
+    }
+}
+
+@mixin small-tablet {
+    //540px
+    @media (max-width: #{$small-tablet - 1px}) {
+        @content;
+    }
+}
+
+@mixin mobile {
+    //375px
+    @media (max-width: #{$mobile - 1px}) {
+        @content;
+    }
+}
+@mixin min-full-desktop-xl {
+    @media (min-width: #{$full-desktop-xl}) {
+        @content;
+    }
+}
+@mixin min-full-desktop {
+    @media (min-width: #{$full-desktop}) {
+        @content;
+    }
+}
+
+@mixin min-medium-desktop {
+    @media (min-width: #{$medium-desktop}) {
+        @content;
+    }
+}
+
+@mixin min-small-desktop {
+    @media (min-width: #{$small-desktop}) {
+        @content;
+    }
+}
+
+@mixin min-full-tablet {
+    @media (min-width: #{$full-tablet}) {
+        @content;
+    }
+}
+
+@mixin min-medium-tablet {
+    @media (min-width: #{$medium-tablet}) {
+        @content;
+    }
+}
+
+@mixin min-small-tablet {
+    @media (min-width: #{$small-tablet}) {
+        @content;
+    }
+}
+
+@mixin min-mobile {
+    @media (min-width: #{$mobile}) {
+        @content;
+    }
+}
+
+@mixin tablet {
+    @media (max-width: #{$medium-device-width}) {
+        @content;
+    }
+}
+
+//-------------------- Font size Rem conversion --------//
+@function calculateRem($size) {
+    $remSize: calc($size / 16px);
+    @return #{$remSize}rem;
+}
+@mixin fontSize($size) {
+    font-size: $size; //Fallback in px
+    font-size: calculateRem($size);
+}
+//-------------------- Border radius --------------------//
+@mixin border-radius($top, $right, $bottom, $left) {
+    -webkit-border-radius: $top $right $bottom $left;
+    -moz-border-radius: $top $right $bottom $left;
+    -ms-border-radius: $top $right $bottom $left;
+    border-radius: $top $right $bottom $left;
+}
+
+@mixin border-radius($radius) {
+    -webkit-border-radius: $radius;
+    -moz-border-radius: $radius;
+    -ms-border-radius: $radius;
+    border-radius: $radius;
+}
+
+//-------------------- Transition --------------------//
+@mixin transition-default($what: all, $length: 0.3s, $easing: '') {
+    @if ($what == transform) {
+        @if ($easing != '') {
+            -moz-transition: -moz-transform $length $easing;
+            -o-transition: -o-transform $length $easing;
+            -webkit-transition: -webkit-transform $length $easing;
+            -ms-transition: -ms-transform $length $easing;
+            transition: transform $length $easing;
+        } @else {
+            -moz-transition: -moz-transform $length;
+            -o-transition: -o-transform $length;
+            -webkit-transition: -webkit-transform $length;
+            -ms-transition: -ms-transform $length;
+            transition: transform $length;
+        }
+    } @else {
+        @if ($easing != '') {
+            -moz-transition: $what $length $easing;
+            -o-transition: $what $length $easing;
+            -webkit-transition: $what $length $easing;
+            -ms-transition: $what $length $easing;
+            transition: $what $length $easing;
+        } @else {
+            -moz-transition: $what $length ease-in-out;
+            -o-transition: $what $length ease-in-out;
+            -webkit-transition: $what $length ease-in-out;
+            -ms-transition: $what $length ease-in-out;
+            transition: $what $length ease-in-out;
+        }
+    }
+}
+@mixin transition-default-cubic-bezier(
+    $what: all,
+    $length: 0.3s cubic-bezier(0.77, 0, 0.175, 1)
+) {
+    -webkit-transition: $what $length;
+    -moz-transition: $what $length;
+    -ms-transition: $what $length;
+    -o-transition: $what $length;
+    transition: $what $length;
+}
+
+//-------------------- Transform, Translate3d, TranslateX, TranslateY, Rotate --------------------//
+@mixin transform($params) {
+    -webkit-transform: $params;
+    -moz-transform: $params;
+    -ms-transform: $params;
+    -o-transform: $params;
+    transform: $params;
+}
+//--------------------  Center vertically and/or horizontally --------------------//
+@mixin center($xy: xy) {
+    @if $xy == xy {
+        left: 50%;
+        top: 50%;
+        bottom: auto;
+        right: auto;
+        @include transform(translateX(-50%) translateY(-50%));
+    } @else if $xy == x {
+        left: 50%;
+        right: auto;
+        @include transform(translateX(-50%));
+    } @else if $xy == y {
+        top: 50%;
+        bottom: auto;
+        @include transform(translateY(-50%));
+    }
+}
+
+//-------------------- Transform, Translate3d, TranslateX, TranslateY, Rotate --------------------//
+@mixin translate3d($val, $val2, $val3) {
+    -webkit-transform: translate3d($val, $val2, $val3);
+    -ms-transform: translate3d($val, $val2, $val3);
+    -o-transform: translate3d($val, $val2, $val3);
+    transform: translate3d($val, $val2, $val3);
+}
+@mixin translateX($val...) {
+    -webkit-transform: translateX($val);
+    -ms-transform: translateX($val);
+    -o-transform: translateX($val);
+    transform: translateX($val);
+}
+@mixin translateY($val...) {
+    -webkit-transform: translateY($val);
+    -ms-transform: translateY($val);
+    -o-transform: translateY($val);
+    transform: translateY($val);
+}
+@mixin rotate($val) {
+    -webkit-transform: rotate($val);
+    -moz-transform: rotate($val);
+    -ms-transform: rotate($val);
+    -o-transform: rotate($val);
+    transform: rotate($val);
+}
+@mixin perspective($val) {
+    -webkit-perspective: $val;
+    -moz-perspective: $val;
+    -ms-perspective: $val;
+    perspective: $val;
+}
+//-------------------- Background-size --------------------//
+@mixin background-size($background-size) {
+    -webkit-background-size: $background-size;
+    -moz-background-size: $background-size;
+    -o-background-size: $background-size;
+    background-size: $background-size;
+}
+
+//-------------------- Gradients --------------------//
+@mixin linear-gradient($from, $to) {
+    background: $to;
+    background: -moz-linear-gradient(to right, $from 0%, $to 100%);
+    background: -webkit-gradient(
+        to right,
+        color-stop(0%, $from),
+        color-stop(100%, $to)
+    );
+    background: -webkit-linear-gradient(to right, $from 0%, $to 100%);
+    background: -o-linear-gradient(to right, $from 0%, $to 100%);
+    background: linear-gradient(to right, $from 0%, $to 100%);
+    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#{$from}, endColorstr=#{$to});
+}
+@mixin background-gradient($start-color, $end-color, $orientation) {
+    background: $start-color;
+    @if $orientation == 'vertical' {
+        background: -webkit-linear-gradient(top, $start-color, $end-color);
+        background: linear-gradient(to bottom, $start-color, $end-color);
+    } @else if $orientation == 'horizontal' {
+        background: -webkit-linear-gradient(left, $start-color, $end-color);
+        background: linear-gradient(to right, $start-color, $end-color);
+    } @else {
+        background: -webkit-radial-gradient(
+            center,
+            ellipse cover,
+            $start-color,
+            $end-color
+        );
+        background: radial-gradient(
+            ellipse at center,
+            $start-color,
+            $end-color
+        );
+    }
+}
+
+//-------------------- Background color and color --------------------//
+@function solid-lighten($color, $percentage) {
+    @return lighten($color, (1-$percentage) * 5%);
+}
+@function solid-darken($color, $percentage) {
+    @return darken($color, (1-$percentage) * 5%);
+}
+@mixin rgba-main($type, $color, $percentage, $shade: ligthen) {
+    @if $shade == lighten {
+        @if $type == color {
+            color: solid-lighten($color, $percentage);
+            color: rgba($color, $percentage);
+        }
+        @if $type == bg {
+            background-color: solid-lighten($color, $percentage);
+            background-color: rgba($color, $percentage);
+        }
+    } @else {
+        @if $type == color {
+            color: solid-darken($color, $percentage);
+            color: rgba($color, $percentage);
+        }
+        @if $type == bg {
+            background-color: solid-darken($color, $percentage);
+            background-color: rgba($color, $percentage);
+        }
+    }
+}
+
+//-------------------- Animation --------------------//
+@mixin animation($animationname, $time) {
+    animation: $animationname $time;
+    -webkit-animation: $animationname $time;
+    -moz-animation-name: $animationname $time;
+}
+
+@mixin animation-name($animationname) {
+    animation-name: $animationname;
+    -webkit-animation-name: $animationname;
+    -moz-animation-name: $animationname;
+}
+
+@mixin animation-duration($time) {
+    animation-duration: $time;
+    -webkit-animation-duration: $time;
+    -moz-animation-duration: $time;
+}
+
+@mixin animation-timing($timing) {
+    animation-timing-function: $timing;
+    -webkit-animation-timing-function: $timing;
+    -moz-animation-timing-function: $timing;
+}
+
+@mixin animation-delay($delay) {
+    animation-delay: $delay;
+    -webkit-animation-delay: $delay;
+    -moz-animation-delay: $delay;
+}
+
+@mixin animation-count($count) {
+    animation-iteration-count: $count;
+    -webkit-animation-iteration-count: $count;
+    -moz-animation-iteration-count: $count;
+}
+
+@mixin animation-direction($direction) {
+    animation-direction: $direction;
+    -webkit-animation-direction: $direction;
+}
+
+@mixin animation-fill($fill-mode) {
+    animation-fill-mode: $fill-mode;
+    -webkit-animation-fill-mode: $fill-mode;
+    -moz-animation-fill-mode: $fill-mode;
+}
+
+@mixin backface-visibility($arguments) {
+    -webkit-backface-visibility: $arguments;
+    -moz-backface-visibility: $arguments;
+    -ms-backface-visibility: $arguments;
+    -o-backface-visibility: $arguments;
+    backface-visibility: $arguments;
+}
+//-------------------- Box shadow --------------------//
+@mixin box-shadow($val...) {
+    -webkit-box-shadow: $val;
+    -moz-box-shadow: $val;
+    box-shadow: $val;
+}
+@mixin box-shadow-main() {
+    box-shadow: 0px 0px 10px 0px var(--cl_shadow);
+}
+@mixin box-shadow-bottom() {
+    box-shadow: 0px 3px 4px 0px var(--cl_shadow);
+}
+
+//--------------------  Center vertically and/or horizontally --------------------//
+@mixin center($xy: xy) {
+    @if $xy == xy {
+        left: 50%;
+        top: 50%;
+        bottom: auto;
+        right: auto;
+        @include transform(translateX(-50%) translateY(-50%));
+    } @else if $xy == x {
+        left: 50%;
+        right: auto;
+        @include transform(translateX(-50%));
+    } @else if $xy == y {
+        top: 50%;
+        bottom: auto;
+        @include transform(translateY(-50%));
+    }
+}
+
+//-------------------- Responsive --------------------//
+@mixin extra-desktop {
+    @media (max-width: #{$extra-large-device-width}) {
+        @content;
+    }
+}
+@mixin desktop {
+    @media (max-width: #{$large-device-width}) {
+        @content;
+    }
+}
+@mixin tablet {
+    @media (max-width: #{$medium-device-width}) {
+        @content;
+    }
+}
+@mixin mobile {
+    @media (max-width: #{$small-device-width}) {
+        @content;
+    }
+}
+@mixin extra-small-mobile {
+    @media (max-width: #{$extra-small-device-width}) {
+        @content;
+    }
+}
+
+@media (min-width: 1280px) {
+    .order-custom-xl-xxl-1 {
+        order: 1;
+    }
+    .order-custom-xl-xxl-2 {
+        order: 2;
+    }
+}
+
+/// MIXIMS BREAKPOINTS
+@function breakpoint-next(
+    $name,
+    $breakpoints: $grid-breakpoints,
+    $breakpoint-names: map-keys($breakpoints)
+) {
+    $n: index($breakpoint-names, $name);
+    @return if(
+        $n != null and $n < length($breakpoint-names),
+        nth($breakpoint-names, $n + 1),
+        null
+    );
+}
+
+@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
+    $min: map.get($breakpoints, $name);
+    @return if($min != 0, $min, null);
+}
+
+@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
+    $next: breakpoint-next($name, $breakpoints);
+    @return if($next, breakpoint-min($next, $breakpoints) - 0.02, null);
+}
+
+@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
+    @return if(breakpoint-min($name, $breakpoints) == null, '', '-#{$name}');
+}
+
+@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
+    $min: breakpoint-min($name, $breakpoints);
+    @if $min {
+        @media (min-width: $min) {
+            @content;
+        }
+    } @else {
+        @content;
+    }
+}
+
+@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
+    $max: breakpoint-max($name, $breakpoints);
+    @if $max {
+        @media (max-width: $max) {
+            @content;
+        }
+    } @else {
+        @content;
+    }
+}
+
+@mixin media-breakpoint-between(
+    $lower,
+    $upper,
+    $breakpoints: $grid-breakpoints
+) {
+    $min: breakpoint-min($lower, $breakpoints);
+    $max: breakpoint-max($upper, $breakpoints);
+
+    @if $min != null and $max != null {
+        @media (min-width: $min) and (max-width: $max) {
+            @content;
+        }
+    } @else if $max == null {
+        @include media-breakpoint-up($lower, $breakpoints) {
+            @content;
+        }
+    } @else if $min == null {
+        @include media-breakpoint-down($upper, $breakpoints) {
+            @content;
+        }
+    }
+}
+
+@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
+    $min: breakpoint-min($name, $breakpoints);
+    $max: breakpoint-max($name, $breakpoints);
+
+    @if $min != null and $max != null {
+        @media (min-width: $min) and (max-width: $max) {
+            @content;
+        }
+    } @else if $max == null {
+        @include media-breakpoint-up($name, $breakpoints) {
+            @content;
+        }
+    } @else if $min == null {
+        @include media-breakpoint-down($name, $breakpoints) {
+            @content;
+        }
+    }
+}
+
+/// MIXIMS Grid system
+
+@mixin make-container($gutter: $grid-gutter-width) {
+    width: 100%;
+    // padding-right: $gutter / 2;
+    // padding-left: $gutter / 2;
+    margin-right: auto;
+    margin-left: auto;
+}
+
+@mixin make-row($gutter: $grid-gutter-width) {
+    display: flex;
+    flex-wrap: wrap;
+    margin-right: calc(-#{$gutter} / 2);
+    margin-left: calc(-#{$gutter} / 2);
+}
+
+// For each breakpoint, define the maximum width of the container in a media query
+@mixin make-container-max-widths(
+    $max-widths: $container-max-widths,
+    $breakpoints: $grid-breakpoints
+) {
+    @each $breakpoint, $container-max-width in $max-widths {
+        @include media-breakpoint-up($breakpoint, $breakpoints) {
+            max-width: $container-max-width;
+        }
+    }
+    @include deprecate('The `make-container-max-widths` mixin', 'v4.5.2', 'v5');
+}
+
+@mixin make-col-ready($gutter: $grid-gutter-width) {
+    position: relative;
+    width: 100%;
+    padding-right: calc($gutter / 2);
+    padding-left: calc($gutter / 2);
+}
+
+@mixin make-col($size, $columns: $grid-columns) {
+    flex: 0 0 percentage(calc($size / $columns));
+    max-width: percentage(calc($size / $columns));
+}
+
+@mixin make-col-auto() {
+    flex: 0 0 auto;
+    width: auto;
+    max-width: 100%; // Reset earlier grid tiers
+}
+
+@mixin make-col-offset($size, $columns: $grid-columns) {
+    $num: calc($size / $columns);
+    margin-left: if($num == 0, 0, percentage($num));
+}
+
+@mixin row-cols($count) {
+    & > * {
+        flex: 0 0 calc(100% / $count);
+        max-width: calc(100% / $count);
+    }
+}
+
+@mixin make-grid-columns(
+    $columns: $grid-columns,
+    $gutter: $grid-gutter-width,
+    $breakpoints: $grid-breakpoints
+) {
+    // Common properties for all breakpoints
+    %grid-column {
+        position: relative;
+        width: 100%;
+        padding-right: calc($gutter / 2);
+        padding-left: calc($gutter / 2);
+    }
+
+    @each $breakpoint in map.keys($breakpoints) {
+        $infix: breakpoint-infix($breakpoint, $breakpoints);
+
+        @if $columns > 0 {
+            // Allow columns to stretch full width below their breakpoints
+            @for $i from 1 through $columns {
+                .col#{$infix}-#{$i} {
+                    @extend %grid-column;
+                }
+            }
+        }
+
+        .col#{$infix},
+        .col#{$infix}-auto {
+            @extend %grid-column;
+        }
+
+        @include media-breakpoint-up($breakpoint, $breakpoints) {
+            // Provide basic `.col-{bp}` classes for equal-width flexbox columns
+            .col#{$infix} {
+                flex-basis: 0;
+                flex-grow: 1;
+                max-width: 100%;
+            }
+
+            @if $grid-row-columns > 0 {
+                @for $i from 1 through $grid-row-columns {
+                    .row-cols#{$infix}-#{$i} {
+                        @include row-cols($i);
+                    }
+                }
+            }
+
+            .col#{$infix}-auto {
+                @include make-col-auto();
+            }
+
+            @if $columns > 0 {
+                @for $i from 1 through $columns {
+                    .col#{$infix}-#{$i} {
+                        @include make-col($i, $columns);
+                    }
+                }
+            }
+
+            .order#{$infix}-first {
+                order: -1;
+            }
+
+            .order#{$infix}-last {
+                order: $columns + 1;
+            }
+
+            @for $i from 0 through $columns {
+                .order#{$infix}-#{$i} {
+                    order: $i;
+                }
+            }
+
+            @if $columns > 0 {
+                // `$columns - 1` because offsetting by the width of an entire row isn't possible
+                @for $i from 0 through ($columns - 1) {
+                    @if not($infix == '' and $i == 0) {
+                        // Avoid emitting useless .offset-0
+                        .offset#{$infix}-#{$i} {
+                            @include make-col-offset($i, $columns);
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+@each $breakpoint in map.keys($grid-breakpoints) {
+    @include media-breakpoint-up($breakpoint) {
+        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+        .flex#{$infix}-row {
+            flex-direction: row !important;
+        }
+        .flex#{$infix}-column {
+            flex-direction: column !important;
+        }
+        .flex#{$infix}-row-reverse {
+            flex-direction: row-reverse !important;
+        }
+        .flex#{$infix}-column-reverse {
+            flex-direction: column-reverse !important;
+        }
+
+        .flex#{$infix}-wrap {
+            flex-wrap: wrap !important;
+        }
+        .flex#{$infix}-nowrap {
+            flex-wrap: nowrap !important;
+        }
+        .flex#{$infix}-wrap-reverse {
+            flex-wrap: wrap-reverse !important;
+        }
+        .flex#{$infix}-fill {
+            flex: 1 1 auto !important;
+        }
+        .flex#{$infix}-grow-0 {
+            flex-grow: 0 !important;
+        }
+        .flex#{$infix}-grow-1 {
+            flex-grow: 1 !important;
+        }
+        .flex#{$infix}-shrink-0 {
+            flex-shrink: 0 !important;
+        }
+        .flex#{$infix}-shrink-1 {
+            flex-shrink: 1 !important;
+        }
+
+        .justify-content#{$infix}-start {
+            justify-content: flex-start !important;
+        }
+        .justify-content#{$infix}-end {
+            justify-content: flex-end !important;
+        }
+        .justify-content#{$infix}-center {
+            justify-content: center !important;
+        }
+        .justify-content#{$infix}-between {
+            justify-content: space-between !important;
+        }
+        .justify-content#{$infix}-around {
+            justify-content: space-around !important;
+        }
+
+        .align-items#{$infix}-start {
+            align-items: flex-start !important;
+        }
+        .align-items#{$infix}-end {
+            align-items: flex-end !important;
+        }
+        .align-items#{$infix}-center {
+            align-items: center !important;
+        }
+        .align-items#{$infix}-baseline {
+            align-items: baseline !important;
+        }
+        .align-items#{$infix}-stretch {
+            align-items: stretch !important;
+        }
+
+        .align-content#{$infix}-start {
+            align-content: flex-start !important;
+        }
+        .align-content#{$infix}-end {
+            align-content: flex-end !important;
+        }
+        .align-content#{$infix}-center {
+            align-content: center !important;
+        }
+        .align-content#{$infix}-between {
+            align-content: space-between !important;
+        }
+        .align-content#{$infix}-around {
+            align-content: space-around !important;
+        }
+        .align-content#{$infix}-stretch {
+            align-content: stretch !important;
+        }
+
+        .align-self#{$infix}-auto {
+            align-self: auto !important;
+        }
+        .align-self#{$infix}-start {
+            align-self: flex-start !important;
+        }
+        .align-self#{$infix}-end {
+            align-self: flex-end !important;
+        }
+        .align-self#{$infix}-center {
+            align-self: center !important;
+        }
+        .align-self#{$infix}-baseline {
+            align-self: baseline !important;
+        }
+        .align-self#{$infix}-stretch {
+            align-self: stretch !important;
+        }
+
+        // Some special margin utils
+        .m#{$infix}-auto {
+            margin: auto !important;
+        }
+        .mt#{$infix}-auto,
+        .my#{$infix}-auto {
+            margin-top: auto !important;
+        }
+        .mr#{$infix}-auto,
+        .mx#{$infix}-auto {
+            margin-right: auto !important;
+        }
+        .mb#{$infix}-auto,
+        .my#{$infix}-auto {
+            margin-bottom: auto !important;
+        }
+        .ml#{$infix}-auto,
+        .mx#{$infix}-auto {
+            margin-left: auto !important;
+        }
+    }
+}
+
+/* Margenes  Padding*/
+$sizes: 0, 10, 20, 25, 30, 40, 50, 60, 70, 80, 90, 100, 150, 180;
+@each $size in $sizes {
+    .mt--#{$size} {
+        margin-top: #{$size}px !important;
+    }
+    .mb--#{$size} {
+        margin-bottom: #{$size}px !important;
+    }
+    .pt--#{$size} {
+        padding-top: #{$size}px;
+    }
+    .pb--#{$size} {
+        padding-bottom: #{$size}px;
+    }
+    .mblock--#{$size} {
+        margin-block: #{$size}px;
+    }
+    .pblock--#{$size} {
+        padding-block: #{$size}px;
+    }
+}
+
+@mixin fade-animation(
+    $fromOpacity: 0,
+    $toOpacity: 1,
+    $fromPosition: 20%,
+    $toPosition: 0,
+    $duration: 0.7s,
+    $transition: cubic-bezier(0.785, 0.135, 0.15, 0.86)
+) {
+    @keyframes opacity-animation {
+        from {
+            opacity: $fromOpacity;
+            top: $fromPosition;
+        }
+        to {
+            opacity: $toOpacity;
+            top: $toPosition;
+        }
+    }
+
+    animation: opacity-animation $duration $transition;
+}
+
+@mixin position-animation(
+    $fromValue: 100%,
+    $toValue: 0,
+    $duration: 0.7s,
+    $transition: cubic-bezier(0.785, 0.135, 0.15, 0.86)
+) {
+    @keyframes position-animation {
+        from {
+            top: $fromValue;
+        }
+        to {
+            top: $toValue;
+        }
+    }
+
+    animation: position-animation $duration $transition;
+}
+
+@keyframes move-right {
+    0% {
+        right: 30px;
+    }
+    50% {
+        right: 20px;
+    }
+    100% {
+        right: 30px;
+    }
+}
+
+//-------------------- Blanco --------------------//
+
+// breakpoints Mixin
+@mixin mq-min($key) {
+    $size: map.get($breakpoints, $key);
+    @media (min-width: $size) {
+        @content;
+    }
+}
+@mixin mq-max($key) {
+    $size: map.get($breakpoints, $key);
+    @media (max-width: ($size - 0.02)) {
+        @content;
+    }
+}
+
+//Border Radius
+$list-of-directions: (
+    'top',
+    'top-right',
+    'right',
+    'bottom-right',
+    'bottom',
+    'bottom-left',
+    'left',
+    'top-left'
+) !default;
+
+//Border Radius Mixin
+@mixin border-radius($args...) {
+    $list: list.join($list-of-directions, ('cross-left', 'cross-right', 'all'));
+    @if list.length($args) == 1 {
+        $value: list.nth($args, 1);
+        border-radius: $value;
+    } @else if list.length($args) == 2 {
+        $corner: list.nth($args, 1);
+        $value: list.nth($args, 2);
+        @if index($list, $corner) {
+            @if $corner == 'top' {
+                border-top-left-radius: $value;
+                border-top-right-radius: $value;
+            } @else if $corner == 'top-right' {
+                border-top-right-radius: $value;
+            } @else if $corner == 'right' {
+                border-top-right-radius: $value;
+                border-bottom-right-radius: $value;
+            } @else if $corner == 'bottom-right' {
+                border-bottom-right-radius: $value;
+            } @else if $corner == 'bottom' {
+                border-bottom-left-radius: $value;
+                border-bottom-right-radius: $value;
+            } @else if $corner == 'bottom-left' {
+                border-bottom-left-radius: $value;
+            } @else if $corner == 'left' {
+                border-top-left-radius: $value;
+                border-bottom-left-radius: $value;
+            } @else if $corner == 'top-left' {
+                border-top-left-radius: $value;
+            } @else if $corner == 'all' {
+                border-radius: $value;
+            } @else if $corner == 'cross-left' {
+                border-top-left-radius: $value;
+                border-bottom-right-radius: $value;
+            } @else if $corner == 'cross-right' {
+                border-top-right-radius: $value;
+                border-bottom-left-radius: $value;
+            }
+        } @else {
+            @error "Corner value must be one of the followings: #{quote($list)}.";
+        }
+    } @else if list.length($args) == 4 {
+        $args: __null($args, space, true);
+        border-top-left-radius: list.nth($args, 1);
+        border-top-right-radius: list.nth($args, 2);
+        border-bottom-right-radius: list.nth($args, 3);
+        border-bottom-left-radius: list.nth($args, 4);
+    }
+}
+
+//Line Height Mixin
+@mixin lineHeight($lhv, $fs) {
+    font-size: #{math.div($fs, 10)}rem;
+    line-height: math.div($lhv, $fs);
+}
+
+//Letter Spacing Mixin
+@mixin letterSpacingPercent($ls, $fs) {
+    letter-spacing: #{math.div(($ls * $fs), 1000)}rem;
+}
+
+$header-height-xxs: 6rem;
+$header-height-xs: 7rem;
+$header-height-sm: 8rem;
+$header-height-xxl: 9rem;
+$header-mobile-nav-height-xxs: 6.6rem;
+$header-mobile-nav-height-xs: 7.6rem;
+$header-mobile-nav-height-sm: 8.6rem;