holygrail2 1.3.27 → 1.3.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "holygrail2",
-  "version": "1.3.27",
+  "version": "1.3.30",
   "description": "A minimal, responsive, style-agnostic CSS framework.",
   "main": "scss/style.scss",
   "style": "dist/style.css",

package/scss/_variables.scss

@@ -96,7 +96,7 @@ $padding-mobile: 24px !default;
 $padding-desktop: 40px !default;
 $padding-button: 8px !default;
 $height-inputs: 40px !default;
-$height-btn: 40px !default;
+$height-btn: 32px !default;
 $text-input-m: 12px;
 $text-input-d: 12px;
 $container: 800px !default;

package/scss/abstract/_breakpoints.scss

@@ -1,3 +1,6 @@
+@use 'sass:list';
+@use 'sass:map';
+
 $minbreakpoints: (
   xs: 1px,
   md: 992px
@@ -17,11 +20,11 @@ $breakpointscols: (
   xl: 1440px
 ) !default;
 
-$colBreakpoints: length($breakpoints) !default;
-$colBreakpointscols: length($breakpointscols) !default;
-$break-xs: nth(map-values($breakpoints), 1) !default;
-$break-sm: nth(map-values($breakpoints), 2) !default;
-$break-md: nth(map-values($breakpoints), 3) !default;
-$break-lg: nth(map-values($breakpoints), 4) !default;
-$break-xl: nth(map-values($breakpointscols), 5) !default;
+$colBreakpoints: list.length($breakpoints) !default;
+$colBreakpointscols: list.length($breakpointscols) !default;
+$break-xs: list.nth(map.values($breakpoints), 1) !default;
+$break-sm: list.nth(map.values($breakpoints), 2) !default;
+$break-md: list.nth(map.values($breakpoints), 3) !default;
+$break-lg: list.nth(map.values($breakpoints), 4) !default;
+$break-xl: list.nth(map.values($breakpointscols), 5) !default;
 $min-width: 320px !default;

package/scss/abstract/_mixins.scss

@@ -1,4 +1,7 @@
+@use 'sass:list';
+@use 'sass:map';
 @use 'sass:math';
+
 @import 'breakpoints';
 
 // Define los puntos de ruptura si no están definidos
@@ -100,8 +103,8 @@ $max-vw: 1500px !default;
 @mixin typesFixers($headersFixers, $cssattr) {
   @for $i from 1 through 1 {
     @each $name, $fsize in $headersFixers {
-      $fontsize: nth($fsize, $i);
-      $fontheight: nth($fsize, 2);
+      $fontsize: list.nth($fsize, $i);
+      $fontheight: list.nth($fsize, 2);
       .text-#{$name}-r {
         @include fonters(regular);
 
@@ -151,14 +154,14 @@ $max-vw: 1500px !default;
 @mixin typesFluids($headersFluids) {
   @for $i from 1 through 1 {
     @each $name, $fsize in $headersFluids {
-      $u1: unit($min-vw);
-      $u2: unit($max-vw);
-      $min-font-size: nth($fsize, $i);
-      $max-font-size: nth($fsize, 2);
-      $fluid-line-height: nth($fsize, 3);
-      $u3: unit($min-font-size);
-      $u4: unit($max-font-size);
-      $u5: nth($fsize, 3);
+      $u1: math.unit($min-vw);
+      $u2: math.unit($max-vw);
+      $min-font-size: list.nth($fsize, $i);
+      $max-font-size: list.nth($fsize, 2);
+      $fluid-line-height: list.nth($fsize, 3);
+      $u3: math.unit($min-font-size);
+      $u4: math.unit($max-font-size);
+      $u5: list.nth($fsize, 3);
 
       .fluid-#{$name}-l {
         @include font-light;
@@ -365,14 +368,14 @@ $max-vw: 1500px !default;
 }
 
 @mixin types($breakpoints, $headers, $cssattr) {
-  @for $i from 1 through length($breakpoints) {
-    @media (min-width: nth(map-values($breakpoints), $i)) {
+  @for $i from 1 through list.length($breakpoints) {
+    @media (min-width: list.nth(map.values($breakpoints), $i)) {
       @each $name, $fsize in $headers {
-        $fontsize: nth($fsize, $i);
-        $fontheight: nth($fsize, 5);
-        $fontweight: nth($fsize, 6);
+        $fontsize: list.nth($fsize, $i);
+        $fontheight: list.nth($fsize, 5);
+        $fontweight: list.nth($fsize, 6);
         .#{$name} {
-          @if nth(map-values($breakpoints), $i) == 1px {
+          @if list.nth(map.values($breakpoints), $i) == 1px {
             @include fonters($fontweight);
           }
 
@@ -385,10 +388,10 @@ $max-vw: 1500px !default;
 }
 
 @mixin space($breakpoints, $paddings, $cssattr) {
-  @for $i from 1 through length($breakpoints) {
-    @media (min-width: nth(map-values($breakpoints), $i)) {
+  @for $i from 1 through list.length($breakpoints) {
+    @media (min-width: list.nth(map.values($breakpoints), $i)) {
       @each $name, $pad in $paddings {
-        $padding: nth($pad, $i);
+        $padding: list.nth($pad, $i);
         .#{$name} {
           #{$cssattr}: $padding;
         }
@@ -644,14 +647,14 @@ $spriteHeight: 400;
 }
 
 @mixin mintypes($minbreakpoints, $headers, $cssattr) {
-  @for $i from 1 through length($minbreakpoints) {
-    @media (min-width: nth(map-values($minbreakpoints), $i)) {
+  @for $i from 1 through list.length($minbreakpoints) {
+    @media (min-width: list.nth(map.values($minbreakpoints), $i)) {
       @each $name, $fsize in $headers {
-        $fontsize: nth($fsize, $i);
-        $fontheight: nth($fsize, 3);
-        $fontweight: nth($fsize, 4);
+        $fontsize: list.nth($fsize, $i);
+        $fontheight: list.nth($fsize, 3);
+        $fontweight: list.nth($fsize, 4);
         .#{$name} {
-          @if nth(map-values($minbreakpoints), $i) == 1px {
+          @if list.nth(map.values($minbreakpoints), $i) == 1px {
             @include fonters($fontweight);
           }
 
@@ -664,13 +667,13 @@ $spriteHeight: 400;
 }
 
 @mixin heights-mix() {
-  @each $height-name in map-keys($heights) {
-    $values: map-get($heights, $height-name);
+  @each $height-name in map.keys($heights) {
+    $values: map.get($heights, $height-name);
     .#{$height-name} {
-      min-height: nth($values, 1);
+      min-height: list.nth($values, 1);
 
       @media (min-width: $break-sm) {
-        min-height: nth($values, 2);
+        min-height: list.nth($values, 2);
       }
     }
   }

package/scss/abstract/_setup.scss

@@ -137,7 +137,7 @@ $font-weight-secondary-light: 300;
 $font-weight-secondary-medium: 400;
 $font-weight-secondary-bold: 700;
 $height-inputs: 40px;
-$height-btn: 40px;
+$height-btn: 32px;
 $text-input-m: 12px;
 $text-input-d: 12px;
 $breakpointscols: ( xs: 1px, sm: 768px, md: 992px, lg: 1280px, xl: 1440px ) !default;

package/scss/base/_a11y.scss

@@ -21,7 +21,8 @@
   }
 
   a:focus .product-card-img::before,
-  .product-media__img:focus::before {
+  .product-media__img:focus::before,
+  a:focus .media-image::before {
     content: '';
     display: block;
     outline: 2px solid #383bff !important;
@@ -37,6 +38,7 @@
     display: block;
     outline: 2px solid #383bff !important;
     outline-offset: -2px;
+    inset: 0;
   }
 
   .btn-grid .btn:focus,

package/scss/base/_grid.scss

@@ -1,4 +1,7 @@
+@use 'sass:list';
+@use 'sass:map';
 @use 'sass:math';
+
 @import '../abstract/_all';
 
 .container-full {
@@ -8,16 +11,16 @@
   padding-inline: $padding-global;
   position: relative;
   @media (min-width: $break-sm) {
-    max-width: nth(map-values($breakpoints), 2);
+    max-width: list.nth(map.values($breakpoints), 2);
     padding-inline: $padding-global;
     width: 90%;
   }
   @media (min-width: $break-md) {
-    max-width: nth(map-values($breakpoints), 3);
+    max-width: list.nth(map.values($breakpoints), 3);
     width: 80%;
   }
   @media (min-width: $break-lg) {
-    max-width: nth(map-values($breakpoints), 4);
+    max-width: list.nth(map.values($breakpoints), 4);
     width: 80%;
   }
 }
@@ -70,20 +73,20 @@
   position: relative;
   width: 100%;
   @media (min-width: $break-sm) {
-    max-width: nth(map-values($breakpoints), 2);
+    max-width: list.nth(map.values($breakpoints), 2);
     padding-inline: $padding-global;
     width: 90%;
   }
   @media (min-width: $break-md) {
-    max-width: nth(map-values($breakpoints), 3);
+    max-width: list.nth(map.values($breakpoints), 3);
     width: 80%;
   }
   @media (min-width: $break-lg) {
-    max-width: nth(map-values($breakpoints), 4);
+    max-width: list.nth(map.values($breakpoints), 4);
     width: 80%;
   }
   @media (min-width: $break-xl) {
-    max-width: nth(map-values($breakpointscols), 5);
+    max-width: list.nth(map.values($breakpointscols), 5);
     width: 100%;
   }
 }
@@ -211,17 +214,17 @@
   flex-wrap: wrap;
   margin-left: -$padding-global;
   margin-right: -$padding-global;
-  @for $i from 2 through length($breakpointscols) {
-    @media (min-width: nth(map-values($breakpointscols), $i)) {
+  @for $i from 2 through list.length($breakpointscols) {
+    @media (min-width: list.nth(map.values($breakpointscols), $i)) {
       margin-left: -$padding-global;
       margin-right: -$padding-global;
     }
   }
 }
 @for $i from 1 through 4 {
-  @media (min-width: nth(map-values($breakpointscols), $i)) {
+  @media (min-width: list.nth(map.values($breakpointscols), $i)) {
     @for $c from 1 through $totalCols {
-      .col-#{nth(map-keys($breakpointscols), $i)}-#{$c} {
+      .col-#{list.nth(map.keys($breakpointscols), $i)}-#{$c} {
         flex: 0 0 math.percentage(math.div($c, $totalCols));
         max-width: math.percentage(math.div($c, $totalCols));
       }
@@ -229,9 +232,9 @@
   }
 }
 @for $i from 5 through $colBreakpointscols {
-  @media (min-width: nth(map-values($breakpointscols), $i)) {
+  @media (min-width: list.nth(map.values($breakpointscols), $i)) {
     @for $c from 1 through $totalColsXl {
-      .col-#{nth(map-keys($breakpointscols), $i)}-#{$c} {
+      .col-#{list.nth(map.keys($breakpointscols), $i)}-#{$c} {
         flex: 0 0 math.percentage(math.div($c, $totalColsXl));
         max-width: math.percentage(math.div($c, $totalColsXl));
       }

package/scss/base/_rtl.scss

@@ -1,4 +1,7 @@
+@use 'sass:list';
+
 @import '../abstract/_all';
+
 .is-rtl {
   .fl-left {
     float: right;
@@ -64,8 +67,8 @@
   .select:not(.is-multiple, .is-loading).select-box::after {
     left: 8px;
   }
-  @for $i from 1 through length($espaciados) {
-    $espaciado: nth($espaciados, $i);
+  @for $i from 1 through list.length($espaciados) {
+    $espaciado: list.nth($espaciados, $i);
     .mr-#{$espaciado} {
       margin-right: 0;
       margin-left: #{$espaciado}px;

package/scss/base/_spacing.scss

@@ -1,3 +1,5 @@
+@use 'sass:list';
+
 @import '../abstract/_breakpoints';
 @import '../abstract/_all';
 
@@ -10,8 +12,8 @@ $break-xl: 1200px !default;
   margin: 0 auto;
 }
 
-@for $i from 1 through length($espaciados) {
-  $espaciado: nth($espaciados, $i);
+@for $i from 1 through list.length($espaciados) {
+  $espaciado: list.nth($espaciados, $i);
   .m-#{$espaciado} {
     margin: #{$espaciado}px;
   }

package/scss/elements/_buttons.scss

@@ -18,7 +18,7 @@ button {
   border: none;
   white-space: nowrap;
   cursor: pointer;
-  padding: 10px 16px 8px;
+  padding: 7px 16px 8px;
   background-color: transparent;
   min-height: $height-btn;
   @include font-regular;
@@ -448,7 +448,7 @@ button {
 }
 .btn-limited {
   height: auto;
-  min-height: 40px;
+  min-height: $height-btn;
   color: $c-white;
   background-color: $c-limited;
   border: 1px solid $c-limited;

package/scss/hg-lite/abstract/_mixins.scss

@@ -1,5 +1,9 @@
 @use './variables' as *;
 
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:meta';
+
 @mixin mq($min-screen: false, $max-screen: false, $orientation: false) {
   @if $min-screen and $max-screen {
     @media all and (min-width: $min-screen) and (max-width: $max-screen) {
@@ -17,21 +21,21 @@
 }
 
 @mixin generate-utility($utility, $breakpoint: false, $prefix: $hg-prefix) {
-  $values: map-get($utility, values);
+  $values: map.get($utility, values);
 
   @if not $prefix {
     $prefix: '';
   }
 
-  @if type-of($values) == 'string' or type-of(nth($values, 1)) != 'list' {
-    $values: zip($values, $values);
+  @if meta.type-of($values) == 'string' or meta.type-of(list.nth($values, 1)) != 'list' {
+    $values: list.zip($values, $values);
   }
 
   @each $key, $value in $values {
-    $property: map-get($utility, property);
+    $property: map.get($utility, property);
     $property-class: if(
-      map-has-key($utility, class),
-      map-get($utility, class),
+      map.has-key($utility, class),
+      map.get($utility, class),
       $property
     );
     $property-class-modifier: if($key, '-' + $key, '');

package/scss/hg-lite/abstract/_variables.scss

@@ -1,3 +1,5 @@
+@use 'sass:map';
+
 @use './functions' as *;
 
 $hg-prefix: 'hg-' !default;
@@ -10,11 +12,11 @@ $hg-breakpoints: (
   xl: 1440px
 ) !default;
 
-$hg-breakpoint-xs: map-get($hg-breakpoints, xs) !default;
-$hg-breakpoint-sm: map-get($hg-breakpoints, sm) !default;
-$hg-breakpoint-md: map-get($hg-breakpoints, md) !default;
-$hg-breakpoint-lg: map-get($hg-breakpoints, lg) !default;
-$hg-breakpoint-xl: map-get($hg-breakpoints, xl) !default;
+$hg-breakpoint-xs: map.get($hg-breakpoints, xs) !default;
+$hg-breakpoint-sm: map.get($hg-breakpoints, sm) !default;
+$hg-breakpoint-md: map.get($hg-breakpoints, md) !default;
+$hg-breakpoint-lg: map.get($hg-breakpoints, lg) !default;
+$hg-breakpoint-xl: map.get($hg-breakpoints, xl) !default;
 
 $hg-spacers: (
   12: to-rem(1),
@@ -44,30 +46,30 @@ $hg-spacers: (
   2000: to-rem(160)
 ) !default;
 
-$hg-spacer-12: map-get($hg-spacers, 12) !default;
-$hg-spacer-25: map-get($hg-spacers, 25) !default;
-$hg-spacer-50: map-get($hg-spacers, 50) !default;
-$hg-spacer-100: map-get($hg-spacers, 100) !default;
-$hg-spacer-150: map-get($hg-spacers, 150) !default;
-$hg-spacer-200: map-get($hg-spacers, 200) !default;
-$hg-spacer-250: map-get($hg-spacers, 250) !default;
-$hg-spacer-300: map-get($hg-spacers, 300) !default;
-$hg-spacer-400: map-get($hg-spacers, 400) !default;
-$hg-spacer-500: map-get($hg-spacers, 500) !default;
-$hg-spacer-600: map-get($hg-spacers, 600) !default;
-$hg-spacer-700: map-get($hg-spacers, 700) !default;
-$hg-spacer-800: map-get($hg-spacers, 800) !default;
-$hg-spacer-900: map-get($hg-spacers, 900) !default;
-$hg-spacer-1000: map-get($hg-spacers, 1000) !default;
-$hg-spacer-1200: map-get($hg-spacers, 1200) !default;
-$hg-spacer-1300: map-get($hg-spacers, 1300) !default;
-$hg-spacer-1400: map-get($hg-spacers, 1400) !default;
-$hg-spacer-1500: map-get($hg-spacers, 1500) !default;
-$hg-spacer-1600: map-get($hg-spacers, 1600) !default;
-$hg-spacer-1700: map-get($hg-spacers, 1700) !default;
-$hg-spacer-1800: map-get($hg-spacers, 1800) !default;
-$hg-spacer-1900: map-get($hg-spacers, 1900) !default;
-$hg-spacer-2000: map-get($hg-spacers, 2000) !default;
+$hg-spacer-12: map.get($hg-spacers, 12) !default;
+$hg-spacer-25: map.get($hg-spacers, 25) !default;
+$hg-spacer-50: map.get($hg-spacers, 50) !default;
+$hg-spacer-100: map.get($hg-spacers, 100) !default;
+$hg-spacer-150: map.get($hg-spacers, 150) !default;
+$hg-spacer-200: map.get($hg-spacers, 200) !default;
+$hg-spacer-250: map.get($hg-spacers, 250) !default;
+$hg-spacer-300: map.get($hg-spacers, 300) !default;
+$hg-spacer-400: map.get($hg-spacers, 400) !default;
+$hg-spacer-500: map.get($hg-spacers, 500) !default;
+$hg-spacer-600: map.get($hg-spacers, 600) !default;
+$hg-spacer-700: map.get($hg-spacers, 700) !default;
+$hg-spacer-800: map.get($hg-spacers, 800) !default;
+$hg-spacer-900: map.get($hg-spacers, 900) !default;
+$hg-spacer-1000: map.get($hg-spacers, 1000) !default;
+$hg-spacer-1200: map.get($hg-spacers, 1200) !default;
+$hg-spacer-1300: map.get($hg-spacers, 1300) !default;
+$hg-spacer-1400: map.get($hg-spacers, 1400) !default;
+$hg-spacer-1500: map.get($hg-spacers, 1500) !default;
+$hg-spacer-1600: map.get($hg-spacers, 1600) !default;
+$hg-spacer-1700: map.get($hg-spacers, 1700) !default;
+$hg-spacer-1800: map.get($hg-spacers, 1800) !default;
+$hg-spacer-1900: map.get($hg-spacers, 1900) !default;
+$hg-spacer-2000: map.get($hg-spacers, 2000) !default;
 
 $hg-utilities: (
   'display': (

package/scss/hg-lite/utilities/_utilities.scss

@@ -1,24 +1,28 @@
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:meta';
+
 @use '../abstract' as *;
 
-@each $breakpoint in map-keys($hg-breakpoints) {
+@each $breakpoint in map.keys($hg-breakpoints) {
   $break: if(
-    $breakpoint == nth(map-keys($hg-breakpoints), 1),
+    $breakpoint == list.nth(map.keys($hg-breakpoints), 1),
     '',
     '#{$breakpoint}'
   );
-  $breakpoint-value: map-get($hg-breakpoints, $breakpoint);
+  $breakpoint-value: map.get($hg-breakpoints, $breakpoint);
 
   @if $break != '' {
     @include mq($min-screen: $breakpoint-value) {
       @each $key, $utility in $hg-utilities {
-        @if type-of($utility) == 'map' and (map-get($utility, responsive)) {
+        @if meta.type-of($utility) == 'map' and (map.get($utility, responsive)) {
           @include generate-utility($utility, $break);
         }
       }
     }
   } @else {
     @each $key, $utility in $hg-utilities {
-      @if type-of($utility) == 'map' {
+      @if meta.type-of($utility) == 'map' {
         @include generate-utility($utility);
       }
     }