ctt-babylon 0.7.11 → 0.8.1

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

@@ -1,46 +1,11 @@
-@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;
+@use 'sass:math';
+@use 'sass:map';
+@use 'sass:list';
 
+@import './variables.scss';
 //-------------------- MediaQuery --------//
 @mixin full-desktop-xl {
-    //1920px
+    //1800px
     @media (max-width: #{$full-desktop-xl - 1px}) {
         @content;
     }
@@ -60,14 +25,14 @@ $grid-breakpoints: (
 }
 
 @mixin small-desktop {
-    //1280px
+    //1200px
     @media (max-width: #{$small-desktop - 1px}) {
         @content;
     }
 }
 
 @mixin full-tablet {
-    //1024
+    //992
     @media (max-width: #{$full-tablet - 1px}) {
         @content;
     }
@@ -81,7 +46,7 @@ $grid-breakpoints: (
 }
 
 @mixin small-tablet {
-    //540px
+    //576px
     @media (max-width: #{$small-tablet - 1px}) {
         @content;
     }
@@ -140,40 +105,10 @@ $grid-breakpoints: (
     }
 }
 
-@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;
@@ -187,7 +122,7 @@ $grid-breakpoints: (
             transition: transform $length;
         }
     } @else {
-        @if ($easing != "") {
+        @if ($easing != '') {
             -moz-transition: $what $length $easing;
             -o-transition: $what $length $easing;
             -webkit-transition: $what $length $easing;
@@ -202,16 +137,44 @@ $grid-breakpoints: (
         }
     }
 }
-@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;
+
+//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;
+    }
 }
 
 //-------------------- Transform, Translate3d, TranslateX, TranslateY, Rotate --------------------//
-
 @mixin transform($params) {
     -webkit-transform: $params;
     -moz-transform: $params;
@@ -219,7 +182,26 @@ $grid-breakpoints: (
     -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);
@@ -251,122 +233,7 @@ $grid-breakpoints: (
     -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;
@@ -379,487 +246,93 @@ $grid-breakpoints: (
 @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;
-    }
-}
+//-------------------- Blanco --------------------//
 
-@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 {
+// breakpoints Mixin
+@mixin mq-min($key) {
+    $size: map.get($breakpoints, $key);
+    @media (min-width: $size) {
         @content;
     }
 }
-
-@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
-    $max: breakpoint-max($name, $breakpoints);
-    @if $max {
-        @media (max-width: $max) {
-            @content;
-        }
-    } @else {
+@mixin mq-max($key) {
+    $size: map.get($breakpoints, $key);
+    @media (max-width: ($size - 0.02)) {
         @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;
-                }
-            }
+//Border Radius
+$list-of-directions: (
+    'top',
+    'top-right',
+    'right',
+    'bottom-right',
+    'bottom',
+    'bottom-left',
+    'left',
+    'top-left'
+) !default;
 
-            @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);
-                        }
-                    }
-                }
+//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);
     }
 }
 
-@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;
+//Line Height Mixin
+@mixin lineHeight($lhv, $fs) {
+    font-size: #{math.div($fs, 10)}rem;
+    line-height: math.div($lhv, $fs);
 }
 
-@keyframes move-right {
-    0% {
-        right: 30px;
-    }
-    50% {
-        right: 20px;
-    }
-    100% {
-        right: 30px;
-    }
+//Letter Spacing Mixin
+@mixin letterSpacingPercent($ls, $fs) {
+    letter-spacing: #{math.div(($ls * $fs), 1000)}rem;
 }