@razerspine/pug-ui-kit 1.2.1 → 1.3.0

package/scss/layout/_layout.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 @use '../settings/index' as *;
 
 .layout {
@@ -14,7 +15,7 @@
   font-size: $base-font-size;
   font-weight: 400;
   line-height: 1.5;
-  @media screen and (min-width: map-get($breakpoints, lg)) {
+  @media screen and (min-width: map.get($breakpoints, lg)) {
     grid-template-areas:
       'header header header header'
       'gutter-left aside main gutter-right'

package/scss/utils/_helpers.scss

@@ -1,3 +1,6 @@
+@use "sass:map";
+@use "sass:meta";
+
 $space-scale: (
         0: 0,
         1: 4px,
@@ -10,9 +13,9 @@ $space-scale: (
 );
 
 @function space($key) {
-  @return map-get($space-scale, $key);
+  @return map.get($space-scale, $key);
 }
 
 @function suf($k) {
-  @return if(type-of($k) == 'number', $k, $k);
+  @return $k;
 }

package/scss/utils/_mixins.scss

@@ -1,7 +1,8 @@
+@use "sass:map";
 @use '../settings/index' as *;
 
 @function breakpoint($key) {
-  @return map-get($breakpoints, $key);
+  @return map.get($breakpoints, $key);
 }
 
 @mixin respond-to($key) {

package/scss/utils/_utilities.scss

@@ -1,5 +1,7 @@
 @use 'sass:math';
 @use 'helpers';
+@use "sass:map";
+@use "sass:meta";
 
 // SPACING utilities: m- p- (margin/padding) with directions
 $space-map: (0: 0rem, 1: 0.5rem, 2: 1rem, 3: 1.5rem, 4: 2rem);
@@ -7,8 +9,8 @@ $directions: ("" : "", t: "-top", r: "-right", b: "-bottom", l: "-left", x: ("-l
 $scales: 0 1 2 3 4;
 
 @function helpers-space($key) {
-  @if map-has-key($space-map, $key) {
-    @return map-get($space-map, $key);
+  @if map.has-key($space-map, $key) {
+    @return map.get($space-map, $key);
   } @else {
     @warn "Unknown spacing key `#{$key}`. Returning 0rem.";
     @return 0rem;
@@ -17,33 +19,45 @@ $scales: 0 1 2 3 4;
 
 @each $d, $prop in $directions {
   @each $s in $scales {
-    // Margin class
-    $m-class: if($d == "", ".m-#{$s}", ".m-#{$d}-#{$s}");
-    #{$m-class} {
-      @if $d == "" {
+
+    // =====================
+    // Margin
+    // =====================
+    @if $d == "" {
+      .m-#{$s} {
         margin: helpers-space($s);
-      } @else if type-of($prop) == 'list' {
-        @each $p in $prop {
-          margin#{$p}: helpers-space($s);
+      }
+    } @else {
+      .m-#{$d}-#{$s} {
+        @if meta.type-of($prop) == 'list' {
+          @each $p in $prop {
+            margin#{$p}: helpers-space($s);
+          }
+        } @else {
+          margin#{$prop}: helpers-space($s);
         }
-      } @else {
-        margin#{$prop}: helpers-space($s);
       }
     }
 
-    // Padding class
-    $p-class: if($d == "", ".p-#{$s}", ".p-#{$d}-#{$s}");
-    #{$p-class} {
-      @if $d == "" {
+    // =====================
+    // Padding
+    // =====================
+    @if $d == "" {
+      .p-#{$s} {
         padding: helpers-space($s);
-      } @else if type-of($prop) == 'list' {
-        @each $p in $prop {
-          padding#{$p}: helpers-space($s);
+      }
+    } @else {
+      .p-#{$d}-#{$s} {
+        @if meta.type-of($prop) == 'list' {
+          @each $p in $prop {
+            padding#{$p}: helpers-space($s);
+          }
+        } @else {
+          padding#{$prop}: helpers-space($s);
         }
-      } @else {
-        padding#{$prop}: helpers-space($s);
       }
     }
+
   }
 }