@guebbit/css-toolkit 1.2.0 → 1.2.2

package/src/functions/_helpers.scss

@@ -1,42 +1,44 @@
-/**
- * Giving a list of variables and values,
- * from start to end, try all the values until a non-null is found
- */
-@function no-null-var($list: ()){
-  @each $value in $list {
-    // stylelint-disable-next-line scss/at-if-no-null
-    @if $value != null and $value != undefined {
-      @return $value;
-    }
-  }
-  @return null;
-}
-
-/**
- * If the color is the checked one, return inherit
- */
-@function no-target-var($check: transparent, $color: transparent){
-  @if $color == $check {
-    @return inherit;
-  }
-  @return $color;
-}
-
-
-/**
- * This function is to be used to return nested key values within a nested map
- * @parameter {Variable} $map [null] - pass in map to be evaluated
- * @parameter {Variable} $keys [null] - pass in keys to be evaluated
- */
-//   $map: (
-//     'size': (
-//       'sml': 10px
-//     )
-//   );
-//   $var: map-deep-get($map, 'size', 'sml'); // => 10px
-@function map-deep-get($map, $keys...) {
-  @each $key in $keys {
-    $map: map-get($map, $key);
-  }
-  @return $map;
-}
+@use "sass:map" as map;
+
+/**
+ * Giving a list of variables and values,
+ * from start to end, try all the values until a non-null is found
+ */
+@function no-null-var($list: ()){
+  @each $value in $list {
+    // stylelint-disable-next-line scss/at-if-no-null
+    @if $value != null and $value != undefined {
+      @return $value;
+    }
+  }
+  @return null;
+}
+
+/**
+ * If the color is the checked one, return inherit
+ */
+@function no-target-var($check: transparent, $color: transparent){
+  @if $color == $check {
+    @return inherit;
+  }
+  @return $color;
+}
+
+
+/**
+ * This function is to be used to return nested key values within a nested map
+ * @parameter {Variable} $map [null] - pass in map to be evaluated
+ * @parameter {Variable} $keys [null] - pass in keys to be evaluated
+ */
+//   $map: (
+//     'size': (
+//       'sml': 10px
+//     )
+//   );
+//   $var: map-deep-get($map, 'size', 'sml'); // => 10px
+@function map-deep-get($map, $keys...) {
+  @each $key in $keys {
+    $map: map.get($map, $key);
+  }
+  @return $map;
+}

package/src/functions/_strings.scss

@@ -1,31 +1,31 @@
-/**
-  Split string into lists
- */
-@function string-split($string, $separator: "-") {
-  // empty array/list
-  $split-arr: ();
-  // first index of separator in string
-  $index : str-index($string, $separator);
-  // loop through string
-  @while $index != null {
-    // get the substring from the first character to the separator
-    $item: str-slice($string, 1, $index - 1);
-    // push item to array
-    $split-arr: append($split-arr, $item);
-    // remove item and separator from string
-    $string: str-slice($string, $index + 1);
-    // find new index of separator
-    $index : str-index($string, $separator);
-  }
-  // add the remaining string to list (the last item)
-  $split-arr: append($split-arr, $string);
-
-  @return $split-arr;
-}
-
-/**
-  Check if $string ends with $find
- */
-@function string-ends-with($string, $find) {
-  @return (str-length($string) >= str-length($find)) and (str-slice($string, (str-length($string) - str-length($find) + 1)) == $find);
+/**
+  Split string into lists
+ */
+@function string-split($string, $separator: "-") {
+  // empty array/list
+  $split-arr: ();
+  // first index of separator in string
+  $index : str-index($string, $separator);
+  // loop through string
+  @while $index != null {
+    // get the substring from the first character to the separator
+    $item: str-slice($string, 1, $index - 1);
+    // push item to array
+    $split-arr: append($split-arr, $item);
+    // remove item and separator from string
+    $string: str-slice($string, $index + 1);
+    // find new index of separator
+    $index : str-index($string, $separator);
+  }
+  // add the remaining string to list (the last item)
+  $split-arr: append($split-arr, $string);
+
+  @return $split-arr;
+}
+
+/**
+  Check if $string ends with $find
+ */
+@function string-ends-with($string, $find) {
+  @return (str-length($string) >= str-length($find)) and (str-slice($string, (str-length($string) - str-length($find) + 1)) == $find);
 }

package/src/index.scss

@@ -1,13 +1,13 @@
-@forward "./colors";
-
-@forward "./functions/colors";
-@forward "./functions/helpers";
-@forward "./functions/strings";
-
-@forward "./mixins/build-aspect-ratio";
-@forward "./mixins/build-compatibility";
-@forward "./mixins/build-scrollbar";
-@forward "./mixins/create-colors";
-@forward "./mixins/create-instructions";
-@forward "./mixins/create-helper-margin";
+@forward "./colors";
+
+@forward "./functions/colors";
+@forward "./functions/helpers";
+@forward "./functions/strings";
+
+@forward "./mixins/build-aspect-ratio";
+@forward "./mixins/build-compatibility";
+@forward "./mixins/build-scrollbar";
+@forward "./mixins/create-colors";
+@forward "./mixins/create-instructions";
+@forward "./mixins/create-helper-margin";
 @forward "./mixins/create-helper-padding";

package/src/mixins/_build-aspect-ratio.scss

@@ -1,37 +1,37 @@
-@use "../functions/strings" as guebbit;
-
-/**
- * Use in the parent\container, to be coupled with {build-aspect-ratio-anchor}
- */
-@mixin build-aspect-ratio-container($ratio: 100%){
-  position: relative;
-  // aspect-ratio: #{$height} / #{$width};
-
-  &::before{
-    content: "";
-    display: block;
-    padding-top: #{$ratio};
-  }
-}
-
-/**
- * Use in the child that "gives" form to the parent that has the respective {build-aspect-ratio-container}
- */
-@mixin build-aspect-ratio-anchor{
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-
-/**
- *  aspect ratio shortcut
- */
-@mixin build-aspect-ratio($ratio: 100%){
-  @include build-aspect-ratio-container($ratio);
-
-  & > * {
-    @include build-aspect-ratio-anchor;
-  }
+@use "../functions/strings" as guebbit;
+
+/**
+ * Use in the parent\container, to be coupled with {build-aspect-ratio-anchor}
+ */
+@mixin build-aspect-ratio-container($ratio: 100%){
+  position: relative;
+  // aspect-ratio: #{$height} / #{$width};
+
+  &::before{
+    content: "";
+    display: block;
+    padding-top: #{$ratio};
+  }
+}
+
+/**
+ * Use in the child that "gives" form to the parent that has the respective {build-aspect-ratio-container}
+ */
+@mixin build-aspect-ratio-anchor{
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+/**
+ *  aspect ratio shortcut
+ */
+@mixin build-aspect-ratio($ratio: 100%){
+  @include build-aspect-ratio-container($ratio);
+
+  & > * {
+    @include build-aspect-ratio-anchor;
+  }
 }

package/src/mixins/_build-compatibility.scss

@@ -1,28 +1,28 @@
-/**
-*	Compatibility mode for browsers
-*	@param string $browser: target browser
-*	@content
-**/
-@mixin build-compatibility($browser) {
-  // INTERNET EXPLORER
-  @if $browser == "ie" {
-    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
-      @content;
-    }
-  }
-  // MICROSOFT EDGE
-  @if $browser == "edge" {
-    @supports (-ms-ime-align:auto) {
-      @content;
-    }
-  }
-  // FIREFOX
-  @if $browser == "firefox" {
-    @supports (-moz-appearance:none) {
-      @content;
-    }
-  }
-
-  // OPERA TODO
-  // SAFARI TODO
+/**
+*	Compatibility mode for browsers
+*	@param string $browser: target browser
+*	@content
+**/
+@mixin build-compatibility($browser) {
+  // INTERNET EXPLORER
+  @if $browser == "ie" {
+    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+      @content;
+    }
+  }
+  // MICROSOFT EDGE
+  @if $browser == "edge" {
+    @supports (-ms-ime-align:auto) {
+      @content;
+    }
+  }
+  // FIREFOX
+  @if $browser == "firefox" {
+    @supports (-moz-appearance:none) {
+      @content;
+    }
+  }
+
+  // OPERA TODO
+  // SAFARI TODO
 }

package/src/mixins/_build-scrollbar.scss

@@ -1,32 +1,32 @@
-/**
- *	Builder - scrollbars of element
- *	@param string $color
- *	@param pixels $size
- *	@param $background: if false, has default lighten 40%
- */
-@mixin build-scrollbar($size: "4px", $color: "#fff", $bg: "auto", $radius: "10px") {
-  $fallback-color: #fff;
-  $fallback-bg: transparent;
-
-  @if $bg == "auto" {
-    $bg: $fallback-bg;
-  }
-
-  &::-webkit-scrollbar {
-    width: $size;
-    height: $size;
-    background-color: $fallback-bg;
-    background-color: $bg;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    border-radius: $radius;
-    background-color: $fallback-color;
-    background-color: $color;
-  }
-
-  &::-webkit-scrollbar-corner {
-    background-color: $fallback-bg;
-    background-color: $bg;
-  }
+/**
+ *	Builder - scrollbars of element
+ *	@param string $color
+ *	@param pixels $size
+ *	@param $background: if false, has default lighten 40%
+ */
+@mixin build-scrollbar($size: "4px", $color: "#fff", $bg: "auto", $radius: "10px") {
+  $fallback-color: #fff;
+  $fallback-bg: transparent;
+
+  @if $bg == "auto" {
+    $bg: $fallback-bg;
+  }
+
+  &::-webkit-scrollbar {
+    width: $size;
+    height: $size;
+    background-color: $fallback-bg;
+    background-color: $bg;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: $radius;
+    background-color: $fallback-color;
+    background-color: $color;
+  }
+
+  &::-webkit-scrollbar-corner {
+    background-color: $fallback-bg;
+    background-color: $bg;
+  }
 }

package/src/mixins/_create-colors.scss

@@ -1,119 +1,119 @@
-@use "sass:list";
-@use "sass:string";
-@use "../functions/colors" as color-functions;
-
-/**
- *  Create all the needed classes for the requested colors
- *  $color-list     - list of colors (like $colors-collection: ("branch": ( "leaf: $color" )))
- *  $branch-list:   - when filled: becomes a whitelist (aka: include only listed brands)
- *  $feature-list:  - when filled: becomes a whitelist. May become cumbersome and many are not needed. Use with care.
- *    - root
- *    - on-root (color's "best contrast" partner color)
- *    - color
- *    - background
- *    - border
- *    - pseudo (bg only, color very rarely used)
- *    - hover
- *    $prefix: prefix that applies to classes
- */
-@mixin create-colors($color-list: (), $branch-list: (), $feature-list: (), $prefix: "") {
-  // for every branch
-  @each $branch-name, $branch in $color-list {
-    // check that there is no $branch-list or, if present, it's correctly whitelisted
-    @if list.length($branch-list) < 1 or list.index($branch-list, $branch-name) {
-
-      // for every leaf
-      @each $sname, $scolor in $branch {
-
-        @if not list.index($branch-name, "advanced"){
-          @if list.length($feature-list) < 1 or list.index($feature-list, "color") {
-            .#{$prefix}#{$branch-name}-#{$sname}-text {
-              color: $scolor !important;
-            }
-          }
-          @if list.length($feature-list) < 1 or list.index($feature-list, "border") {
-            .#{$prefix}#{$branch-name}-#{$sname}-border {
-              border-color: $scolor !important;
-            }
-          }
-        }
-
-        @if list.length($feature-list) < 1 or list.index($feature-list, "background") {
-          .#{$prefix}#{$branch-name}-#{$sname}-bg {
-            background: $scolor !important;
-          }
-        }
-
-        @if list.length($feature-list) < 1 or list.index($feature-list, "pseudo") {
-          .#{$prefix}#{$branch-name}-#{$sname}-pseudo-bg {
-            &::after,
-            &::before {
-              background: $scolor !important;
-            }
-          }
-        }
-
-        @if list.length($feature-list) < 1 or list.index($feature-list, "hover"){
-
-          @if not list.index($branch-name, "advanced"){
-            @if list.length($feature-list) < 1 or list.index($feature-list, "color"){
-              .#{$prefix}#{$branch-name}-#{$sname}-hover-text {
-                &:hover {
-                  color: $scolor !important;
-                }
-              }
-            }
-            @if list.length($feature-list) < 1 or list.index($feature-list, "border"){
-              .#{$prefix}#{$branch-name}-#{$sname}-hover-border {
-                &:hover {
-                  border-color: $scolor !important;
-                }
-              }
-            }
-          }
-
-          @if list.length($feature-list) < 1 or list.index($feature-list, "background") {
-            .#{$prefix}#{$branch-name}-#{$sname}-hover-bg {
-              &:hover {
-                background: $scolor !important;
-              }
-            }
-          }
-
-          @if list.length($feature-list) < 1 or list.index($feature-list, "pseudo") {
-            .#{$prefix}#{$branch-name}-#{$sname}-hover-pseudo-bg {
-              &:hover{
-                &::after,
-                &::before {
-                  background: $scolor !important;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-
-  /**
-   * CSS VARS on root (they will be translated in "RGB" instead of "HEX"
-   */
-  :root{
-    @if list.length($feature-list) < 1 or list.index($feature-list, "root"){
-      @each $branch-name, $branch in $color-list {
-        @each $sname, $scolor in $branch {
-          --#{$prefix}#{$branch-name}-#{$sname}: #{color-functions.extract-colors($scolor)};
-        }
-      }
-    }
-    @if list.length($feature-list) < 1 or list.index($feature-list, "on-root"){
-      @each $branch-name, $branch in $color-list {
-        @each $sname, $scolor in $branch {
-          // @if type-of($scolor) == color {
-          --#{$prefix}on-#{$branch-name}-#{$sname}: #{color-functions.extract-colors(color-functions.color-contrast($scolor))};
-          // _}
-        }
-      }
-    }
-  }
+@use "sass:list";
+@use "sass:string";
+@use "../functions/colors" as color-functions;
+
+/**
+ *  Create all the needed classes for the requested colors
+ *  $color-list     - list of colors (like $colors-collection: ("branch": ( "leaf: $color" )))
+ *  $branch-list:   - when filled: becomes a whitelist (aka: include only listed brands)
+ *  $feature-list:  - when filled: becomes a whitelist. May become cumbersome and many are not needed. Use with care.
+ *    - root
+ *    - on-root (color's "best contrast" partner color)
+ *    - color
+ *    - background
+ *    - border
+ *    - pseudo (bg only, color very rarely used)
+ *    - hover
+ *    $prefix: prefix that applies to classes
+ */
+@mixin create-colors($color-list: (), $branch-list: (), $feature-list: (), $prefix: "") {
+  // for every branch
+  @each $branch-name, $branch in $color-list {
+    // check that there is no $branch-list or, if present, it's correctly whitelisted
+    @if list.length($branch-list) < 1 or list.index($branch-list, $branch-name) {
+
+      // for every leaf
+      @each $sname, $scolor in $branch {
+
+        @if not list.index($branch-name, "advanced"){
+          @if list.length($feature-list) < 1 or list.index($feature-list, "color") {
+            .#{$prefix}#{$branch-name}-#{$sname}-text {
+              color: $scolor !important;
+            }
+          }
+          @if list.length($feature-list) < 1 or list.index($feature-list, "border") {
+            .#{$prefix}#{$branch-name}-#{$sname}-border {
+              border-color: $scolor !important;
+            }
+          }
+        }
+
+        @if list.length($feature-list) < 1 or list.index($feature-list, "background") {
+          .#{$prefix}#{$branch-name}-#{$sname}-bg {
+            background: $scolor !important;
+          }
+        }
+
+        @if list.length($feature-list) < 1 or list.index($feature-list, "pseudo") {
+          .#{$prefix}#{$branch-name}-#{$sname}-pseudo-bg {
+            &::after,
+            &::before {
+              background: $scolor !important;
+            }
+          }
+        }
+
+        @if list.length($feature-list) < 1 or list.index($feature-list, "hover"){
+
+          @if not list.index($branch-name, "advanced"){
+            @if list.length($feature-list) < 1 or list.index($feature-list, "color"){
+              .#{$prefix}#{$branch-name}-#{$sname}-hover-text {
+                &:hover {
+                  color: $scolor !important;
+                }
+              }
+            }
+            @if list.length($feature-list) < 1 or list.index($feature-list, "border"){
+              .#{$prefix}#{$branch-name}-#{$sname}-hover-border {
+                &:hover {
+                  border-color: $scolor !important;
+                }
+              }
+            }
+          }
+
+          @if list.length($feature-list) < 1 or list.index($feature-list, "background") {
+            .#{$prefix}#{$branch-name}-#{$sname}-hover-bg {
+              &:hover {
+                background: $scolor !important;
+              }
+            }
+          }
+
+          @if list.length($feature-list) < 1 or list.index($feature-list, "pseudo") {
+            .#{$prefix}#{$branch-name}-#{$sname}-hover-pseudo-bg {
+              &:hover{
+                &::after,
+                &::before {
+                  background: $scolor !important;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  /**
+   * CSS VARS on root (they will be translated in "RGB" instead of "HEX"
+   */
+  :root{
+    @if list.length($feature-list) < 1 or list.index($feature-list, "root"){
+      @each $branch-name, $branch in $color-list {
+        @each $sname, $scolor in $branch {
+          --#{$prefix}#{$branch-name}-#{$sname}: #{color-functions.extract-colors($scolor)};
+        }
+      }
+    }
+    @if list.length($feature-list) < 1 or list.index($feature-list, "on-root"){
+      @each $branch-name, $branch in $color-list {
+        @each $sname, $scolor in $branch {
+          // @if meta.type-of($scolor) == color {
+          --#{$prefix}on-#{$branch-name}-#{$sname}: #{color-functions.extract-colors(color-functions.color-contrast($scolor))};
+          // _}
+        }
+      }
+    }
+  }
 }