ctt-babylon 0.6.20 → 0.7.0

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

@@ -1,11 +1,46 @@
-@use 'sass:math';
-@use 'sass:map';
-@use 'sass:list';
+@use "./variables.scss" as *;
+@use "sass:map";
+
+// 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;
 
-@import './variables.scss';
 //-------------------- MediaQuery --------//
 @mixin full-desktop-xl {
-    //1800px
+    //1920px
     @media (max-width: #{$full-desktop-xl - 1px}) {
         @content;
     }
@@ -25,14 +60,14 @@
 }
 
 @mixin small-desktop {
-    //1200px
+    //1280px
     @media (max-width: #{$small-desktop - 1px}) {
         @content;
     }
 }
 
 @mixin full-tablet {
-    //992
+    //1024
     @media (max-width: #{$full-tablet - 1px}) {
         @content;
     }
@@ -46,7 +81,7 @@
 }
 
 @mixin small-tablet {
-    //576px
+    //540px
     @media (max-width: #{$small-tablet - 1px}) {
         @content;
     }
@@ -105,10 +140,40 @@
     }
 }
 
+@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: '') {
+@mixin transition-default($what: all, $length: 0.3s, $easing: "") {
     @if ($what == transform) {
-        @if ($easing != '') {
+        @if ($easing != "") {
             -moz-transition: -moz-transform $length $easing;
             -o-transition: -o-transform $length $easing;
             -webkit-transition: -webkit-transform $length $easing;
@@ -122,7 +187,7 @@
             transition: transform $length;
         }
     } @else {
-        @if ($easing != '') {
+        @if ($easing != "") {
             -moz-transition: $what $length $easing;
             -o-transition: $what $length $easing;
             -webkit-transition: $what $length $easing;
@@ -137,44 +202,16 @@
         }
     }
 }
-
-//transition
-$transition: all 0.5s;
-$transition-linear: linear 0.5s;
-
-/* Margenes  Padding*/
-$sizes: 0, 10, 20, 25, 30, 40, 50, 60, 70, 80, 90, 100;
-@each $size in $sizes {
-    .mt--#{$size} {
-        margin-top: #{$size}px !important;
-    }
-    .mb--#{$size} {
-        margin-bottom: #{$size}px !important;
-    }
-    .mr--#{$size} {
-        margin-right: #{$size}px !important;
-    }
-    .ml--#{$size} {
-        margin-left: #{$size}px !important;
-    }
-    .pt--#{$size} {
-        padding-top: #{$size}px;
-    }
-    .pb--#{$size} {
-        padding-bottom: #{$size}px;
-    }
-    .pl--#{$size} {
-        padding-left: #{$size}px !important;
-    }
-    .mblock--#{$size} {
-        margin-block: #{$size}px;
-    }
-    .pblock--#{$size} {
-        padding-block: #{$size}px;
-    }
+@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;
@@ -182,26 +219,7 @@ $sizes: 0, 10, 20, 25, 30, 40, 50, 60, 70, 80, 90, 100;
     -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);
@@ -233,7 +251,122 @@ $sizes: 0, 10, 20, 25, 30, 40, 50, 60, 70, 80, 90, 100;
     -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;
@@ -246,93 +379,487 @@ $sizes: 0, 10, 20, 25, 30, 40, 50, 60, 70, 80, 90, 100;
 @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%));
+    }
+}
 
-//-------------------- Blanco --------------------//
+//-------------------- 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;
+    }
+}
 
-// breakpoints Mixin
-@mixin mq-min($key) {
-    $size: map.get($breakpoints, $key);
-    @media (min-width: $size) {
+@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 mq-max($key) {
-    $size: map.get($breakpoints, $key);
-    @media (max-width: ($size - 0.02)) {
+
+@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
+    $max: breakpoint-max($name, $breakpoints);
+    @if $max {
+        @media (max-width: $max) {
+            @content;
+        }
+    } @else {
         @content;
     }
 }
 
-//Border Radius
-$list-of-directions: (
-    'top',
-    'top-right',
-    'right',
-    'bottom-right',
-    'bottom',
-    'bottom-left',
-    'left',
-    'top-left'
-) !default;
+@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
+    $min: breakpoint-min($lower, $breakpoints);
+    $max: breakpoint-max($upper, $breakpoints);
 
-//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;
+    @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;
+                }
             }
-        } @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);
+
+        .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;
+        }
     }
 }
 
-//Line Height Mixin
-@mixin lineHeight($lhv, $fs) {
-    font-size: #{math.div($fs, 10)}rem;
-    line-height: math.div($lhv, $fs);
+/* 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;
+    }
 }
 
-//Letter Spacing Mixin
-@mixin letterSpacingPercent($ls, $fs) {
-    letter-spacing: #{math.div(($ls * $fs), 1000)}rem;
+@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;
+    }
 }