@guebbit/css-toolkit 1.3.2 → 1.4.1

package/src/mixins/_build-compatibility.scss

@@ -1,39 +1,83 @@
-/**
-*	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
-  @if $browser == "opera" {
-    @supports (-o-object-fit: fill) {
-      @content;
-    }
-  }
-
-  // SAFARI
-  @if $browser == "safari" {
-    @supports (background: -webkit-named-image(i)) and (not (-webkit-touch-callout: none)) {
-      @content;
-    }
-  }
-}
+/**
+*	Compatibility mode for browsers
+*	@param string $browser: target browser
+*	@content
+**/
+@mixin build-compatibility($browser) {
+  // normalize aliases
+  $target: $browser;
+  @if $browser == "internet-explorer" or $browser == "msie" {
+    $target: "ie";
+  }
+  @if $browser == "ms-edge" {
+    $target: "edge";
+  }
+  @if $browser == "ff" {
+    $target: "firefox";
+  }
+
+  // MODERN BROWSER GROUP (supports feature queries)
+  @if $target == "modern" {
+    @supports (display: grid) and (selector(:is(*))) {
+      @content;
+    }
+  }
+
+  // WEBKIT GROUP
+  @if $target == "webkit" {
+    @supports (-webkit-touch-callout: none) {
+      @content;
+    }
+  }
+
+  // LEGACY GROUP
+  @if $target == "legacy" {
+    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+      @content;
+    }
+    @supports (-ms-ime-align: auto) {
+      @content;
+    }
+  }
+
+  // INTERNET EXPLORER
+  @if $target == "ie" {
+    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+      @content;
+    }
+  }
+  // MICROSOFT EDGE
+  @if $target == "edge" {
+    @supports (-ms-ime-align: auto) {
+      @content;
+    }
+  }
+  // FIREFOX
+  @if $target == "firefox" {
+    @supports (-moz-appearance: none) {
+      @content;
+    }
+  }
+
+  // OPERA
+  @if $target == "opera" {
+    @supports (-o-object-fit: fill) {
+      @content;
+    }
+  }
+
+  // SAFARI
+  @if $target == "safari" {
+    @supports (background: -webkit-named-image(i)) and
+      (not (-webkit-touch-callout: none)) {
+      @content;
+    }
+  }
+
+  // CHROME (best-effort via webkit + not safari condition)
+  @if $target == "chrome" {
+    @supports (-webkit-appearance: none) and (font: -apple-system-body) {
+      @content;
+    }
+  }
+}

package/src/mixins/_build-scrollbar.scss

@@ -1,32 +1,37 @@
-/**
- *	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-class.scss

@@ -1,19 +1,29 @@
-@use "sass:list";
-
-/**
- * CSS single instructions class generator
- * @param measure-list - {Array<name,value>[]} postfix name and value OR just values[] (name and value will be the same)
- */
-@mixin create-class($instruction, $measure-list: (), $important: false, $prefix: "", $delimiter: "-") {
-  @each $values in $measure-list {
-    $name: $values;
-    $val: $values;
-    @if list.length($values) > 1 {
-      $name: list.nth($values, 1);
-      $val: list.nth($values, 2);
-    }
-    .#{$prefix}#{$instruction}#{$delimiter}#{$name} {
-      #{$instruction}: #{$val} #{if($important == true, "!important", "")}
-    }
-  }
-}
+@use "sass:list";
+
+/**
+ * CSS single instructions class generator
+ * @param measure-list - {Array<name,value>[]} postfix name and value OR just values[] (name and value will be the same)
+ */
+@mixin create-class(
+  $instruction,
+  $measure-list: (),
+  $important: false,
+  $prefix: "",
+  $delimiter: "-"
+) {
+  $important-suffix: "";
+  @if $important == true {
+    $important-suffix: " !important";
+  }
+  @each $values in $measure-list {
+    $name: $values;
+    $val: $values;
+    @if list.length($values) > 1 {
+      $name: list.nth($values, 1);
+      $val: list.nth($values, 2);
+    }
+    .#{$prefix}#{$instruction}#{$delimiter}#{$name} {
+      #{$instruction}: #{$val}#{$important-suffix};
+    }
+  }
+}

package/src/mixins/_create-colors-vars.scss

@@ -1,27 +1,31 @@
-@use "sass:list";
-@use "../functions/colors" as color-functions;
-
-/**
- *  Create the CSS VARS (like on root)
- *  WARNING: They will be translated in "RGB" instead of "HEX"
- *
- *  @param $color-list - list of colors (like $colors-collection: ("branch": ( "leaf: $color" )))
- *  @param $prefix
- */
-@mixin create-colors-vars($color-list: (), $prefix: "") {
-  // for every branch
-  @each $branch-name, $branch in $color-list {
-    // for every color
-    @each $color-name, $color-value in $branch {
-      // @if meta.type-of($scolor) == color {
-      --#{$prefix}#{$branch-name}-#{$color-name}: #{color-functions.extract-colors($color-value)};
-      // _}
-    }
-
-    @each $color-name, $color-value in $branch {
-      // @if meta.type-of($scolor) == color {
-      --#{$prefix}on-#{$branch-name}-#{$color-name}: #{color-functions.extract-colors(color-functions.color-contrast($color-value))};
-      // _}
-    }
-  }
-}
+@use "sass:list";
+@use "../functions/colors" as color-functions;
+
+/**
+ *  Create the CSS VARS (like on root)
+ *  WARNING: They will be translated in "RGB" instead of "HEX"
+ *
+ *  @param $color-list - list of colors (like $colors-collection: ("branch": ( "leaf: $color" )))
+ *  @param $prefix
+ */
+@mixin create-colors-vars($color-list: (), $prefix: "") {
+  // for every branch
+  @each $branch-name, $branch in $color-list {
+    // for every color
+    @each $color-name, $color-value in $branch {
+      // @if meta.type-of($scolor) == color {
+      --#{$prefix}#{$branch-name}-#{$color-name}: #{color-functions.extract-colors(
+          $color-value
+        )};
+      // _}
+    }
+
+    @each $color-name, $color-value in $branch {
+      // @if meta.type-of($scolor) == color {
+      --#{$prefix}on-#{$branch-name}-#{$color-name}: #{color-functions.extract-colors(
+          color-functions.color-contrast($color-value)
+        )};
+      // _}
+    }
+  }
+}

package/src/mixins/_create-colors.scss

@@ -1,155 +1,202 @@
-@use "sass:list";
-@use "sass:string";
-@use "../functions/colors" as color-functions;
-
-/**
- *  Create all the needed classes for the requested colors
- *  WARNING: $gradient-* are not meant to be used in color and border classes (because they have gradients)
- *
- *  @param $color-list     - list of colors (like $colors-collection: ("branch": ( "leaf: $color" )))
- *  @param $vars: if true, use css vars instead of rgb
- *  @param $prefix: prefix that applies to classes
- *  @param $prefixV: prefix that applies to vars (if true)
- *  @param $feature-list:  - when filled: becomes a whitelist. May become cumbersome and many are not needed. Use with care.
- *    - text
- *    - background
- *    - border
- *    - pseudo (bg only, text very rarely used)
- *    - hover
- */
-@mixin create-colors($color-list: (), $vars: false, $prefix: "", $prefixV: "", $feature-list: ()) {
-  // for every branch
-  @each $branch-name, $branch in $color-list {
-    // for every leaf
-    @each $color-name, $color-value in $branch {
-
-      @if not list.index($branch-name, "gradient") and (list.length($feature-list) < 1 or list.index($feature-list, "text")) {
-        .#{$prefix}#{$branch-name}-#{$color-name}-text {
-          @if $vars {
-            color: var(--#{$prefixV}#{$branch-name}-#{$color-name}) !important;
-          } @else {
-            color: $color-value !important;
-          }
-        }
-      }
-
-      @if not list.index($branch-name, "gradient") and (list.length($feature-list) < 1 or list.index($feature-list, "border")) {
-        @if $vars {
-          .#{$prefix}#{$branch-name}-#{$color-name}-border {
-            border-color: var(--#{$prefixV}#{$branch-name}-#{$color-name}) !important;
-          }
-        } @else {
-          .#{$prefix}#{$branch-name}-#{$color-name}-border {
-            border-color: $color-value !important;
-          }
-        }
-      }
-
-      @if list.length($feature-list) < 1 or list.index($feature-list, "background") {
-        @if $vars {
-          .#{$prefix}#{$branch-name}-#{$color-name}-bg {
-            background-color: var(--#{$prefixV}#{$branch-name}-#{$color-name}) !important;
-            color: var(--#{$prefixV}on-#{$branch-name}-#{$color-name}) !important;
-          }
-        } @else {
-          .#{$prefix}#{$branch-name}-#{$color-name}-bg {
-            background-color: $color-value !important;
-          }
-        }
-      }
-
-      @if list.length($feature-list) < 1 or list.index($feature-list, "pseudo") {
-        @if $vars {
-          .#{$prefix}#{$branch-name}-#{$color-name}-pseudo-bg {
-            &::after,
-            &::before {
-              background-color: var(--#{$prefixV}#{$branch-name}-#{$color-name}) !important;
-            }
-          }
-        } @else {
-          .#{$prefix}#{$branch-name}-#{$color-name}-pseudo-bg {
-            &::after,
-            &::before {
-              background-color: $color-value !important;
-            }
-          }
-        }
-      }
-
-      @if list.length($feature-list) < 1 or list.index($feature-list, "hover") {
-
-        @if not list.index($branch-name, "gradient") and (list.length($feature-list) < 1 or list.index($feature-list, "text")) {
-          @if $vars {
-            .#{$prefix}#{$branch-name}-#{$color-name}-hover-text {
-              &:hover {
-                color: var(--#{$prefixV}#{$branch-name}-#{$color-name}) !important;
-              }
-            }
-          } @else {
-            .#{$prefix}#{$branch-name}-#{$color-name}-hover-text {
-              &:hover {
-                color: $color-value !important;
-              }
-            }
-          }
-        }
-
-        @if not list.index($branch-name, "gradient") and (list.length($feature-list) < 1 or list.index($feature-list, "border")) {
-          @if $vars {
-            .#{$prefix}#{$branch-name}-#{$color-name}-hover-border {
-              &:hover {
-                border-color: var(--#{$prefixV}#{$branch-name}-#{$color-name}) !important;
-              }
-            }
-          } @else {
-            .#{$prefix}#{$branch-name}-#{$color-name}-hover-border {
-              &:hover {
-                border-color: $color-value !important;
-              }
-            }
-          }
-        }
-
-        @if list.length($feature-list) < 1 or list.index($feature-list, "background") {
-          @if $vars {
-            .#{$prefix}#{$branch-name}-#{$color-name}-hover-bg {
-              &:hover {
-                background-color: var(--#{$prefixV}#{$branch-name}-#{$color-name}) !important;
-                color: var(--#{$prefixV}on-#{$branch-name}-#{$color-name}) !important;
-              }
-            }
-          } @else {
-            .#{$prefix}#{$branch-name}-#{$color-name}-hover-bg {
-              &:hover {
-                background-color: $color-value !important;
-              }
-            }
-          }
-        }
-
-        @if list.length($feature-list) < 1 or list.index($feature-list, "pseudo") {
-          @if $vars {
-            .#{$prefix}#{$branch-name}-#{$color-name}-hover-pseudo-bg {
-              &:hover {
-                &::after,
-                &::before {
-                  background-color: var(--#{$prefixV}#{$branch-name}-#{$color-name}) !important;
-                }
-              }
-            }
-          } @else {
-            .#{$prefix}#{$branch-name}-#{$color-name}-hover-pseudo-bg {
-              &:hover {
-                &::after,
-                &::before {
-                  background-color: $color-value !important;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
+@use "sass:list";
+@use "sass:string";
+@use "../functions/colors" as color-functions;
+
+/**
+ *  Create all the needed classes for the requested colors
+ *  WARNING: $gradient-* are not meant to be used in color and border classes (because they have gradients)
+ *
+ *  @param $color-list     - list of colors (like $colors-collection: ("branch": ( "leaf: $color" )))
+ *  @param $vars: if true, use css vars instead of rgb
+ *  @param $prefix: prefix that applies to classes
+ *  @param $prefixV: prefix that applies to vars (if true)
+ *  @param $feature-list:  - when filled: becomes a whitelist. May become cumbersome and many are not needed. Use with care.
+ *    - text
+ *    - background
+ *    - border
+ *    - pseudo (bg only, text very rarely used)
+ *    - hover
+ */
+@mixin create-colors(
+  $color-list: (),
+  $vars: false,
+  $prefix: "",
+  $prefixV: "",
+  $feature-list: ()
+) {
+  // for every branch
+  @each $branch-name, $branch in $color-list {
+    // for every leaf
+    @each $color-name, $color-value in $branch {
+      @if not
+        list.index($branch-name, "gradient") and
+        (list.length($feature-list) < 1 or list.index($feature-list, "text"))
+      {
+        .#{$prefix}#{$branch-name}-#{$color-name}-text {
+          @if $vars {
+            color: var(--#{$prefixV}#{$branch-name}-#{$color-name}) !important;
+          } @else {
+            color: $color-value !important;
+          }
+        }
+      }
+
+      @if not
+        list.index($branch-name, "gradient") and
+        (list.length($feature-list) < 1 or list.index($feature-list, "border"))
+      {
+        @if $vars {
+          .#{$prefix}#{$branch-name}-#{$color-name}-border {
+            border-color: var(
+              --#{$prefixV}#{$branch-name}-#{$color-name}
+            ) !important;
+          }
+        } @else {
+          .#{$prefix}#{$branch-name}-#{$color-name}-border {
+            border-color: $color-value !important;
+          }
+        }
+      }
+
+      @if list.length($feature-list) <
+        1 or
+        list.index($feature-list, "background")
+      {
+        @if $vars {
+          .#{$prefix}#{$branch-name}-#{$color-name}-bg {
+            background-color: var(
+              --#{$prefixV}#{$branch-name}-#{$color-name}
+            ) !important;
+            color: var(
+              --#{$prefixV}on-#{$branch-name}-#{$color-name}
+            ) !important;
+          }
+        } @else {
+          .#{$prefix}#{$branch-name}-#{$color-name}-bg {
+            background-color: $color-value !important;
+          }
+        }
+      }
+
+      @if list.length($feature-list) < 1 or list.index($feature-list, "pseudo")
+      {
+        @if $vars {
+          .#{$prefix}#{$branch-name}-#{$color-name}-pseudo-bg {
+            &::after,
+            &::before {
+              background-color: var(
+                --#{$prefixV}#{$branch-name}-#{$color-name}
+              ) !important;
+            }
+          }
+        } @else {
+          .#{$prefix}#{$branch-name}-#{$color-name}-pseudo-bg {
+            &::after,
+            &::before {
+              background-color: $color-value !important;
+            }
+          }
+        }
+      }
+
+      @if list.length($feature-list) < 1 or list.index($feature-list, "hover") {
+        @if not
+          list.index($branch-name, "gradient") and
+          (list.length($feature-list) < 1 or list.index($feature-list, "text"))
+        {
+          @if $vars {
+            .#{$prefix}#{$branch-name}-#{$color-name}-hover-text {
+              &:hover {
+                color: var(
+                  --#{$prefixV}#{$branch-name}-#{$color-name}
+                ) !important;
+              }
+            }
+          } @else {
+            .#{$prefix}#{$branch-name}-#{$color-name}-hover-text {
+              &:hover {
+                color: $color-value !important;
+              }
+            }
+          }
+        }
+
+        @if not
+          list.index($branch-name, "gradient") and
+          (
+            list.length($feature-list) <
+              1 or
+              list.index($feature-list, "border")
+          )
+        {
+          @if $vars {
+            .#{$prefix}#{$branch-name}-#{$color-name}-hover-border {
+              &:hover {
+                border-color: var(
+                  --#{$prefixV}#{$branch-name}-#{$color-name}
+                ) !important;
+              }
+            }
+          } @else {
+            .#{$prefix}#{$branch-name}-#{$color-name}-hover-border {
+              &:hover {
+                border-color: $color-value !important;
+              }
+            }
+          }
+        }
+
+        @if list.length($feature-list) <
+          1 or
+          list.index($feature-list, "background")
+        {
+          @if $vars {
+            .#{$prefix}#{$branch-name}-#{$color-name}-hover-bg {
+              &:hover {
+                background-color: var(
+                  --#{$prefixV}#{$branch-name}-#{$color-name}
+                ) !important;
+                color: var(
+                  --#{$prefixV}on-#{$branch-name}-#{$color-name}
+                ) !important;
+              }
+            }
+          } @else {
+            .#{$prefix}#{$branch-name}-#{$color-name}-hover-bg {
+              &:hover {
+                background-color: $color-value !important;
+              }
+            }
+          }
+        }
+
+        @if list.length($feature-list) <
+          1 or
+          list.index($feature-list, "pseudo")
+        {
+          @if $vars {
+            .#{$prefix}#{$branch-name}-#{$color-name}-hover-pseudo-bg {
+              &:hover {
+                &::after,
+                &::before {
+                  background-color: var(
+                    --#{$prefixV}#{$branch-name}-#{$color-name}
+                  ) !important;
+                }
+              }
+            }
+          } @else {
+            .#{$prefix}#{$branch-name}-#{$color-name}-hover-pseudo-bg {
+              &:hover {
+                &::after,
+                &::before {
+                  background-color: $color-value !important;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}