ctt-babylon 0.13.2 → 0.13.4

package/lib/styles/styles/babylon/funciones.scss

@@ -1,12 +1,12 @@
 //  -----
-$mobileSmall: "(max-width: 375px)";
-$mobile: "(max-width: 540px)";
-$tabletV: "(max-width: 768px)";
-$tabletH: "(max-width: 1080px)";
-$desktopSmall2: "(max-width: 1280px)";
-$desktopSmall: "(max-width: 1366px)";
-$desktopMax: "(max-width: 1680px)";
-$desktop: "(min-width: 1681px)";
+$mobileSmall: '(max-width: 375px)';
+$mobile: '(max-width: 540px)';
+$tabletV: '(max-width: 768px)';
+$tabletH: '(max-width: 1080px)';
+$desktopSmall2: '(max-width: 1280px)';
+$desktopSmall: '(max-width: 1366px)';
+$desktopMax: '(max-width: 1680px)';
+$desktop: '(min-width: 1681px)';
 
 //? Colors
 $color1: #fff; // Background
@@ -33,8 +33,8 @@ $greenwhats: #24cc63;
 $rewards: #fff9f9;
 
 //? Fonts
-$font: "jokker", sans-serif;
-$font2: "kinda", sans-serif;
+$font: 'jokker', sans-serif;
+$font2: 'kinda', sans-serif;
 
 //? Effect
 $transition1: 0.3s ease;
@@ -42,450 +42,450 @@ $transition1_delay: 0.3s 0.3s ease;
 
 //? Filters
 $filter_white: invert(100%) sepia(6%) saturate(3350%) hue-rotate(358deg)
-  brightness(108%) contrast(116%);
+    brightness(108%) contrast(116%);
 $filter_red: invert(42%) sepia(21%) saturate(7460%) hue-rotate(337deg)
-  brightness(108%) contrast(116%);
+    brightness(108%) contrast(116%);
 $filter_blue: invert(62%) sepia(36%) saturate(7040%) hue-rotate(200deg)
-  brightness(96%) contrast(76%);
+    brightness(96%) contrast(76%);
 $filter_green: invert(67%) sepia(70%) saturate(373%) hue-rotate(113deg)
-  brightness(93%) contrast(90%);
+    brightness(93%) contrast(90%);
 
 // Utils
 
 @mixin hover-siblings {
-  // cuando el contenedor se hace hover
-  > * {
-    transition: opacity $transition1;
-  }
-
-  &:hover {
-    // todos los hijos bajan opacidad
+    // cuando el contenedor se hace hover
     > * {
-      opacity: 0.6;
+        transition: opacity $transition1;
     }
 
-    // pero el elemento hovered recupera su opacidad total
-    > *:hover {
-      opacity: 1;
+    &:hover {
+        // todos los hijos bajan opacidad
+        > * {
+            opacity: 0.6;
+        }
+
+        // pero el elemento hovered recupera su opacidad total
+        > *:hover {
+            opacity: 1;
+        }
     }
-  }
 }
 
 @mixin basic-bg {
-  background-position: center;
-  background-size: cover;
-  background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+    background-repeat: no-repeat;
 }
 
 @mixin img-bg {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
 }
 
 @mixin center-a-element {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
 }
 
 // MV/🟡 Title Big - MD
 @mixin title-big-md {
-  font-family: $font;
-  font-weight: 400;
-  font-size: 4.4rem;
-  line-height: 5.8rem;
+    font-family: var(--font-title);
+    font-weight: var(--w_title);
+    font-size: 4.4rem;
+    line-height: 5.8rem;
 
-  @media #{$mobile} {
-    font-size: 3rem;
-    line-height: 4rem;
-  }
+    @media #{$mobile} {
+        font-size: 3rem;
+        line-height: 4rem;
+    }
 
-  @media #{$mobileSmall} {
-    font-size: 2.4rem;
-    line-height: 3rem;
-  }
+    @media #{$mobileSmall} {
+        font-size: 2.4rem;
+        line-height: 3rem;
+    }
 }
 
 // 🟡 Title Big - RG
 @mixin title-big-rg {
-  font-family: $font;
-  font-weight: 300;
-  font-size: 4.4rem;
-  line-height: 5.8rem;
-
-  @media #{$desktopSmall} {
-    font-size: 3.6rem;
-    line-height: 4.8rem;
-  }
-
-  @media #{$mobile} {
-    font-size: 3rem;
-    line-height: 4rem;
-  }
+    font-family: var(--font-title);
+    font-weight: var(--w_title);
+    font-size: 4.4rem;
+    line-height: 5.8rem;
 
-  @media #{$mobileSmall} {
-    font-size: 2.4rem;
-    line-height: 3rem;
-  }
+    @media #{$desktopSmall} {
+        font-size: 3.6rem;
+        line-height: 4.8rem;
+    }
+
+    @media #{$mobile} {
+        font-size: 3rem;
+        line-height: 4rem;
+    }
+
+    @media #{$mobileSmall} {
+        font-size: 2.4rem;
+        line-height: 3rem;
+    }
 }
 
 @mixin title-grand-big {
-  font-family: $font;
-  font-weight: 400;
-  font-size: 5.5rem;
-  line-height: 5.8rem;
-  letter-spacing: -0.055rem;
-
-  @media #{$desktopSmall} {
-    font-size: 4.2rem;
-    line-height: 4.6rem;
-  }
-
-  @media #{$tabletH} {
+    font-family: var(--font-title);
+    font-weight: var(--w_title);
     font-size: 5.5rem;
     line-height: 5.8rem;
-  }
+    letter-spacing: -0.055rem;
 
-  @media #{$mobile} {
-    font-size: 4.2rem;
-    line-height: 4.6rem;
-  }
+    @media #{$desktopSmall} {
+        font-size: 4.2rem;
+        line-height: 4.6rem;
+    }
 
-  @media #{$mobileSmall} {
-    font-size: 3rem;
-    line-height: 3.8rem;
-  }
+    @media #{$tabletH} {
+        font-size: 5.5rem;
+        line-height: 5.8rem;
+    }
+
+    @media #{$mobile} {
+        font-size: 4.2rem;
+        line-height: 4.6rem;
+    }
+
+    @media #{$mobileSmall} {
+        font-size: 3rem;
+        line-height: 3.8rem;
+    }
 }
 
 // 🟢 Subtitle Big - MD
 @mixin subtitle-big {
-  font-family: $font;
-  font-weight: 400;
-  font-size: 3.2rem;
-  line-height: 3.8rem;
-
-  @media #{$desktopSmall} {
-    font-weight: 400;
-    font-size: 2.8rem;
-    line-height: 3.2rem;
-  }
-
-  @media #{$tabletH} {
-    font-weight: 400;
+    font-family: var(--font-text);
+    font-weight: var(--w_text);
     font-size: 3.2rem;
     line-height: 3.8rem;
-  }
+
+    @media #{$desktopSmall} {
+        font-weight: 400;
+        font-size: 2.8rem;
+        line-height: 3.2rem;
+    }
+
+    @media #{$tabletH} {
+        font-weight: 400;
+        font-size: 3.2rem;
+        line-height: 3.8rem;
+    }
 }
 
 // 🟢🟠 Subtitle Text - RG 2
 @mixin subtitle-text-rg2 {
-  font-family: $font;
-  font-weight: 300;
-  font-size: 3.2rem;
-  line-height: 4.6rem;
-
-  @media #{$desktopSmall} {
-    font-size: 2.8rem;
-    line-height: 3.8rem;
-  }
-
-  @media #{$tabletH} {
+    font-family: var(--font-text);
+    font-weight: var(--w_text);
     font-size: 3.2rem;
     line-height: 4.6rem;
-  }
 
-  @media #{$mobile} {
-    font-size: 2.8rem;
-    line-height: 3.8rem;
-  }
+    @media #{$desktopSmall} {
+        font-size: 2.8rem;
+        line-height: 3.8rem;
+    }
 
-  @media #{$mobileSmall} {
-    font-size: 2.2rem;
-    line-height: 3rem;
-  }
+    @media #{$tabletH} {
+        font-size: 3.2rem;
+        line-height: 4.6rem;
+    }
+
+    @media #{$mobile} {
+        font-size: 2.8rem;
+        line-height: 3.8rem;
+    }
+
+    @media #{$mobileSmall} {
+        font-size: 2.2rem;
+        line-height: 3rem;
+    }
 }
 
 // 🟢🟠 Subtitle Text - MD 2
 @mixin subtitle-text-md2 {
-  font-family: $font;
-  font-weight: 400;
-  font-size: 3.2rem;
-  line-height: 5rem;
+    font-family: var(--font-text);
+    font-weight: var(--w_text);
+    font-size: 3.2rem;
+    line-height: 5rem;
 
-  @media #{$mobileSmall} {
-    font-size: 2.8rem;
-    line-height: 3.8rem;
-  }
+    @media #{$mobileSmall} {
+        font-size: 2.8rem;
+        line-height: 3.8rem;
+    }
 }
 
 // But/🟨 Button Box
 @mixin text-button-box {
-  font-family: $font;
-  font-weight: 500;
-  font-size: 1.8rem;
+    font-family: var(--font-text);
+    font-weight: 500;
+    font-size: 1.8rem;
 
-  @media #{$mobileSmall} {
-    font-size: 1.6rem;
-  }
+    @media #{$mobileSmall} {
+        font-size: 1.6rem;
+    }
 }
 
 // But/Button mini
 @mixin text-button-mini {
-  font-family: $font;
-  font-weight: 400;
-  font-size: 1.3rem;
-  line-height: 100%;
+    font-family: var(--font-text);
+    font-weight: 400;
+    font-size: 1.3rem;
+    line-height: 100%;
 
-  //TODO no sabemos el responsive
+    //TODO no sabemos el responsive
 }
 
 // Breadcrumbs
 @mixin text-breadcrumbs {
-  font-family: $font;
-  font-weight: 400;
-  font-style: Medium;
-  font-size: 1.3rem;
-  line-height: 100%;
+    font-family: var(--font-text);
+    font-weight: 400;
+    font-style: Medium;
+    font-size: 1.3rem;
+    line-height: 100%;
 
-  //TODO no sabemos el responsive
+    //TODO no sabemos el responsive
 }
 
 // Text Motor
 @mixin text-motor {
-  font-family: $font;
-  font-weight: 300;
-  font-size: 1.3rem;
-  line-height: 100%;
+    font-family: var(--font-text);
+    font-weight: 300;
+    font-size: 1.3rem;
+    line-height: 100%;
 
-  //TODO no veo el responsive en figma, falta añadirlo
+    //TODO no veo el responsive en figma, falta añadirlo
 }
 
 // 🟠🟠 Text Medium - MD
 @mixin text-medium-md {
-  font-family: $font;
-  font-weight: 400;
-  font-size: 2.8rem;
-  line-height: 3.6rem;
+    font-family: var(--font-text);
+    font-weight: 400;
+    font-size: 2.8rem;
+    line-height: 3.6rem;
 
-  @media #{$mobileSmall} {
-    font-size: 2.2rem;
-    line-height: 2.6rem;
-  }
+    @media #{$mobileSmall} {
+        font-size: 2.2rem;
+        line-height: 2.6rem;
+    }
 }
 
 // 🟠 Text - RG
 @mixin text-rg {
-  font-family: $font;
-  font-weight: 300;
-  font-size: 2rem;
-  line-height: 3.9rem;
-  @media #{$desktopSmall} {
-    font-size: 1.5rem;
-    line-height: 3rem;
-  }
-  @media #{$mobile} {
-    font-size: 1.1rem;
-    line-height: 2rem;
-  }
+    font-family: var(--font-text);
+    font-weight: 300;
+    font-size: 2rem;
+    line-height: 3.9rem;
+    @media #{$desktopSmall} {
+        font-size: 1.5rem;
+        line-height: 3rem;
+    }
+    @media #{$mobile} {
+        font-size: 1.1rem;
+        line-height: 2rem;
+    }
 }
 
 // 🔴 Text Medium - RG
 @mixin text-medium-rg {
-  font-family: $font;
-  font-weight: 300;
-  font-size: 2.8rem;
-  line-height: 3.6rem;
+    font-family: var(--font-text);
+    font-weight: 300;
+    font-size: 2.8rem;
+    line-height: 3.6rem;
 
-  @media #{$mobileSmall} {
-    font-size: 2.2rem;
-    line-height: 2.6rem;
-  }
+    @media #{$mobileSmall} {
+        font-size: 2.2rem;
+        line-height: 2.6rem;
+    }
 }
 
 // 🔵 Header
 @mixin text-header {
-  font-family: $font;
-  font-weight: 400;
-  font-size: 1.8rem;
-  line-height: 100%;
-  letter-spacing: 0.18rem;
-  text-transform: uppercase;
-
-  @media #{$mobileSmall} {
-    font-size: 1.4rem;
-    letter-spacing: 0.056rem;
-  }
+    font-family: var(--font-text);
+    font-weight: 400;
+    font-size: 1.8rem;
+    line-height: 100%;
+    letter-spacing: 0.18rem;
+    text-transform: uppercase;
+
+    @media #{$mobileSmall} {
+        font-size: 1.4rem;
+        letter-spacing: 0.056rem;
+    }
 }
 
 // Adventges photo MD
 @mixin text-adventges {
-  font-family: $font;
-  font-size: 1.8rem;
-  line-height: 1.8rem;
-  letter-spacing: 0.036rem;
+    font-family: var(--font-text);
+    font-size: 1.8rem;
+    line-height: 1.8rem;
+    letter-spacing: 0.036rem;
 
-  @media #{$mobileSmall} {
-    font-size: 1.6rem;
-    line-height: 1.6rem;
-    letter-spacing: 0.032rem;
-  }
+    @media #{$mobileSmall} {
+        font-size: 1.6rem;
+        line-height: 1.6rem;
+        letter-spacing: 0.032rem;
+    }
 }
 
 // Fot/🟢 Subtilte Footer - RG
 @mixin subtitle-footer-rg {
-  font-family: $font;
-  font-weight: 300;
-  font-size: 2rem;
-  line-height: 3rem;
-
-  @media #{$mobileSmall} {
+    font-family: var(--font-text);
+    font-weight: var(--w_text);
     font-size: 2rem;
-  }
+    line-height: 3rem;
+
+    @media #{$mobileSmall} {
+        font-size: 2rem;
+    }
 }
 
 // Fot/🟠 List Footer
 @mixin list-footer {
-  font-family: $font;
-  font-weight: 300;
-  font-size: 1.6rem;
-  line-height: 4rem;
+    font-family: var(--font-text);
+    font-weight: 300;
+    font-size: 1.6rem;
+    line-height: 4rem;
 }
 
 // List H+A/Subtitle Hotel-Aprt - RG
 @mixin subtitle-hotel-aprt-rg {
-  font-family: $font;
-  font-weight: 300;
-  font-size: 1.6rem;
-  line-height: 100%;
+    font-family: var(--font-text);
+    font-weight: var(--w_text);
+    font-size: 1.6rem;
+    line-height: 100%;
 }
 
 // List seo
 @mixin list-seo {
-  font-family: $font;
-  font-weight: 400;
-  font-size: 1.6rem;
-  line-height: 2.8rem;
+    font-family: var(--font-text);
+    font-weight: 400;
+    font-size: 1.6rem;
+    line-height: 2.8rem;
 }
 // Fot/🟢 Subtitle Footer - MD
 @mixin subtitle-footer-md {
-  font-family: $font;
-  font-weight: 400;
-  font-size: 2rem;
-  line-height: 100%;
-  @media #{$desktopSmall} {
-    font-size: 1.5rem;
-  }
-  @media #{$tabletH} {
-    font-size: 1.1rem;
-  }
+    font-family: var(--font-text);
+    font-weight: var(--w_text);
+    font-size: 2rem;
+    line-height: 100%;
+    @media #{$desktopSmall} {
+        font-size: 1.5rem;
+    }
+    @media #{$tabletH} {
+        font-size: 1.1rem;
+    }
 }
 
 // Fot/🟡 Title Footer - RG
 @mixin subtitle-footer-title {
-  font-family: $font;
-  font-weight: 300;
-  font-size: 3.8rem;
-  line-height: 4.4rem;
+    font-family: var(--font-text);
+    font-weight: var(--w_text);
+    font-size: 3.8rem;
+    line-height: 4.4rem;
 
-  @media #{$mobileSmall} {
-    font-size: 2.8rem;
-  }
+    @media #{$mobileSmall} {
+        font-size: 2.8rem;
+    }
 }
 
 @mixin subtitle-text--faqs {
-  font-family: $font;
-  font-weight: 300;
-  font-size: 3.2rem;
-  line-height: 4.6rem;
+    font-family: var(--font-text);
+    font-weight: var(--w_text);
+    font-size: 3.2rem;
+    line-height: 4.6rem;
 
-  @media #{$desktopSmall} {
-    font-size: 2.4rem;
-    line-height: 3.4rem;
-  }
+    @media #{$desktopSmall} {
+        font-size: 2.4rem;
+        line-height: 3.4rem;
+    }
 
-  @media #{$tabletH} {
-    font-size: 1.8rem;
-    line-height: 2.6rem;
-  }
+    @media #{$tabletH} {
+        font-size: 1.8rem;
+        line-height: 2.6rem;
+    }
 }
 
 // MV/🟠 Text - RG - M540
 @mixin text-rg-m540 {
-  font-family: $font;
-  font-weight: 300;
-  font-size: 2rem;
-  line-height: 3rem;
+    font-family: var(--font-text);
+    font-weight: 300;
+    font-size: 2rem;
+    line-height: 3rem;
 
-  @media #{$mobileSmall} {
-    font-size: 1.6rem;
-    line-height: 2.2rem;
-  }
+    @media #{$mobileSmall} {
+        font-size: 1.6rem;
+        line-height: 2.2rem;
+    }
 }
 
 // 🟡🟩 Title Ofert
 @mixin title-ofert {
-  font-family: $font;
-  font-weight: 300;
-  font-size: 3.2rem;
-  line-height: 100%;
+    font-family: var(--font-title);
+    font-weight: var(--w_title);
+    font-size: 3.2rem;
+    line-height: 100%;
 
-  @media #{$mobile} {
-    font-size: 2.4rem;
-    line-height: 2.8rem;
-  }
-  @media #{$mobileSmall} {
-    font-size: 2rem;
-    line-height: 2.6rem;
-  }
+    @media #{$mobile} {
+        font-size: 2.4rem;
+        line-height: 2.8rem;
+    }
+    @media #{$mobileSmall} {
+        font-size: 2rem;
+        line-height: 2.6rem;
+    }
 }
 
 // 🟩 Price Ofert
 @mixin price-ofert {
-  font-family: $font;
-  font-weight: 300;
-  font-size: 4.4rem;
-  line-height: 100%;
+    font-family: var(--font-title);
+    font-weight: 300;
+    font-size: 4.4rem;
+    line-height: 100%;
 
-  @media #{$mobileSmall} {
-    font-size: 3.8rem;
-  }
+    @media #{$mobileSmall} {
+        font-size: 3.8rem;
+    }
 }
 
 // 🟡 Title Grand Big
 @mixin title-grand-big {
-  font-family: $font;
-  font-weight: 500;
-  font-size: 5.5rem;
-  line-height: 5.8rem;
+    font-family: var(--font-title);
+    font-weight: var(--w_title);
+    font-size: 5.5rem;
+    line-height: 5.8rem;
 }
 
 // Title item
 @mixin title-item {
-  font-family: $font;
-  font-weight: 400;
-  font-size: 1.8rem;
-  line-height: 2.8rem;
-  @media #{$mobileSmall} {
-    line-height: 2.4rem;
-  }
+    font-family: var(--font-title);
+    font-weight: var(--w_title);
+    font-size: 1.8rem;
+    line-height: 2.8rem;
+    @media #{$mobileSmall} {
+        line-height: 2.4rem;
+    }
 }
 // Text Service Subt.
 @mixin text-service-subt {
-  font-family: $font;
-  font-weight: 400;
-  font-size: 1.4rem;
-  line-height: 1.7rem;
-  @media #{$mobileSmall} {
-    line-height: 2.4rem;
-  }
+    font-family: var(--font-text);
+    font-weight: 400;
+    font-size: 1.4rem;
+    line-height: 1.7rem;
+    @media #{$mobileSmall} {
+        line-height: 2.4rem;
+    }
 }
 
 // But/🟨 button campo line
 @mixin button-campo-line {
-  font-family: $font;
-  font-weight: 500;
-  font-size: 1.5rem;
-  line-height: 100%;
+    font-family: var(--font-text);
+    font-weight: 500;
+    font-size: 1.5rem;
+    line-height: 100%;
 }