yummacss 1.2.0 → 2.1.0

package/src/utilities/_borders.scss

@@ -0,0 +1,214 @@
+@use "sass:math";
+
+$yma-border-utils: (
+  "border-collapse": (
+    "prefix": "bc",
+    "values": (
+      "c": collapse,
+      "s": separate,
+    ),
+  ),
+
+  "border-radius": (
+    "prefix": "rad",
+    "values": (
+      "0": $yma-border-radius * 0,
+      "1": $yma-border-radius,
+      "2": $yma-border-radius * 2,
+      "3": $yma-border-radius * 3,
+      "4": $yma-border-radius * 4,
+      "5": $yma-border-radius * 5,
+      "6": $yma-border-radius * 6,
+      "7": $yma-border-radius * 7,
+      "8": $yma-border-radius * 8,
+      "full": 100%,
+      "half": 50%,
+    ),
+  ),
+
+  "border-bottom-left-radius": (
+    "prefix": "rad-bl",
+    "values": (
+      "0": $yma-border-radius * 0,
+      "1": $yma-border-radius,
+      "2": $yma-border-radius * 2,
+      "3": $yma-border-radius * 3,
+      "4": $yma-border-radius * 4,
+      "5": $yma-border-radius * 5,
+      "6": $yma-border-radius * 6,
+      "7": $yma-border-radius * 7,
+      "8": $yma-border-radius * 8,
+    ),
+  ),
+
+  "border-bottom-right-radius": (
+    "prefix": "rad-br",
+    "values": (
+      "0": $yma-border-radius * 0,
+      "1": $yma-border-radius,
+      "2": $yma-border-radius * 2,
+      "3": $yma-border-radius * 3,
+      "4": $yma-border-radius * 4,
+      "5": $yma-border-radius * 5,
+      "6": $yma-border-radius * 6,
+      "7": $yma-border-radius * 7,
+      "8": $yma-border-radius * 8,
+    ),
+  ),
+
+  "border-top-left-radius": (
+    "prefix": "rad-tl",
+    "values": (
+      "0": $yma-border-radius * 0,
+      "1": $yma-border-radius,
+      "2": $yma-border-radius * 2,
+      "3": $yma-border-radius * 3,
+      "4": $yma-border-radius * 4,
+      "5": $yma-border-radius * 5,
+      "6": $yma-border-radius * 6,
+      "7": $yma-border-radius * 7,
+      "8": $yma-border-radius * 8,
+    ),
+  ),
+
+  "border-top-right-radius": (
+    "prefix": "rad-tr",
+    "values": (
+      "0": $yma-border-radius * 0,
+      "1": $yma-border-radius,
+      "2": $yma-border-radius * 2,
+      "3": $yma-border-radius * 3,
+      "4": $yma-border-radius * 4,
+      "5": $yma-border-radius * 5,
+      "6": $yma-border-radius * 6,
+      "7": $yma-border-radius * 7,
+      "8": $yma-border-radius * 8,
+    ),
+  ),
+
+  "border-style": (
+    "prefix": "b",
+    "values": (
+      "none": none,
+      "d": dashed,
+      "s": solid,
+    ),
+  ),
+
+  "border-width": (
+    "prefix": "b",
+    "values": (
+      "0": $yma-border * 0,
+      "1": $yma-border,
+      "2": $yma-border * 2,
+      "3": $yma-border * 3,
+      "4": $yma-border * 4,
+      "5": $yma-border * 5,
+      "6": $yma-border * 6,
+      "7": $yma-border * 7,
+      "8": $yma-border * 8,
+    ),
+  ),
+
+  "border-bottom-width": (
+    "prefix": "bb",
+    "values": (
+      "0": $yma-border * 0,
+      "1": $yma-border,
+      "2": $yma-border * 2,
+      "3": $yma-border * 3,
+      "4": $yma-border * 4,
+      "5": $yma-border * 5,
+      "6": $yma-border * 6,
+      "7": $yma-border * 7,
+      "8": $yma-border * 8,
+    ),
+  ),
+
+  "border-left-width": (
+    "prefix": "bl",
+    "values": (
+      "0": $yma-border * 0,
+      "1": $yma-border,
+      "2": $yma-border * 2,
+      "3": $yma-border * 3,
+      "4": $yma-border * 4,
+      "5": $yma-border * 5,
+      "6": $yma-border * 6,
+      "7": $yma-border * 7,
+      "8": $yma-border * 8,
+    ),
+  ),
+
+  "border-right-width": (
+    "prefix": "br",
+    "values": (
+      "0": $yma-border * 0,
+      "1": $yma-border,
+      "2": $yma-border * 2,
+      "3": $yma-border * 3,
+      "4": $yma-border * 4,
+      "5": $yma-border * 5,
+      "6": $yma-border * 6,
+      "7": $yma-border * 7,
+      "8": $yma-border * 8,
+    ),
+  ),
+
+  "border-top-width": (
+    "prefix": "bt",
+    "values": (
+      "0": $yma-border * 0,
+      "1": $yma-border,
+      "2": $yma-border * 2,
+      "3": $yma-border * 3,
+      "4": $yma-border * 4,
+      "5": $yma-border * 5,
+      "6": $yma-border * 6,
+      "7": $yma-border * 7,
+      "8": $yma-border * 8,
+    ),
+  ),
+);
+
+// base variants
+@each $property, $map in $yma-border-utils {
+  $prefix: map-get($map, "prefix");
+  $values: map-get($map, "values");
+
+  @each $k, $v in $values {
+    @if ($k == "default") {
+      .#{$prefix} {
+        #{$property}: $v;
+      }
+    } @else {
+      .#{$prefix}-#{$k} {
+        #{$property}: $v;
+      }
+    }
+  }
+
+  // hover variants
+  @each $k, $v in $values {
+    @if ($k == "default") {
+      .h\:#{$prefix}:hover {
+        #{$property}: $v;
+      }
+    } @else {
+      .h\:#{$prefix}-#{$k}:hover {
+        #{$property}: $v;
+      }
+    }
+  }
+
+  // responsive variants
+  @each $bp, $bp-value in $yma-breakpoints {
+    @each $k, $v in $values {
+      .#{$bp}\:#{$prefix}-#{$k} {
+        @media (min-width: $bp-value) {
+          #{$property}: $v;
+        }
+      }
+    }
+  }
+}

package/src/utilities/_box-model.scss

@@ -0,0 +1,107 @@
+@use "sass:math";
+
+$yma-box-model-utils: (
+  "box-sizing": (
+    "prefix": "bs",
+    "values": (
+      "bb": border-box,
+      "cb": content-box,
+    ),
+  ),
+);
+
+// base variants
+@each $property, $map in $yma-box-model-utils {
+  $prefix: map-get($map, "prefix");
+  $values: map-get($map, "values");
+
+  @each $k, $v in $values {
+    @if ($k == "default") {
+      .#{$prefix} {
+        #{$property}: $v;
+      }
+    } @else {
+      .#{$prefix}-#{$k} {
+        #{$property}: $v;
+      }
+    }
+  }
+
+  // hover variants
+  @each $k, $v in $values {
+    @if ($k == "default") {
+      .h\:#{$prefix}:hover {
+        #{$property}: $v;
+      }
+    } @else {
+      .h\:#{$prefix}-#{$k}:hover {
+        #{$property}: $v;
+      }
+    }
+  }
+
+  // responsive variants
+  @each $bp, $bp-value in $yma-breakpoints {
+    @each $k, $v in $values {
+      .#{$bp}\:#{$prefix}-#{$k} {
+        @media (min-width: $bp-value) {
+          #{$property}: $v;
+        }
+      }
+    }
+  }
+}
+
+// variants
+@include dimension-variants("dim", $yma-height, $yma-width);
+@include dimension-variants("max-dim", $yma-height, $yma-width);
+@include dimension-variants("min-dim", $yma-height, $yma-width);
+@include spacing-x("s-x", $yma-spacing);
+@include spacing-y("s-y", $yma-spacing);
+@include variants("height", "h", $yma-height);
+@include variants("margin-bottom", "mb", $yma-margin);
+@include variants("margin-left", "ml", $yma-margin);
+@include variants("margin-right", "mr", $yma-margin);
+@include variants("margin-top", "mt", $yma-margin);
+@include variants("margin", "m", $yma-margin);
+@include variants("max-height", "max-h", $yma-height);
+@include variants("max-width", "max-w", $yma-width);
+@include variants("min-height", "min-h", $yma-height);
+@include variants("min-width", "min-w", $yma-width);
+@include variants("padding-bottom", "pb", $yma-padding);
+@include variants("padding-left", "pl", $yma-padding);
+@include variants("padding-right", "pr", $yma-padding);
+@include variants("padding-top", "pt", $yma-padding);
+@include variants("padding", "p", $yma-padding);
+@include variants("width", "w", $yma-width);
+@include x-axis-variants("margin", "mx", $yma-margin);
+@include x-axis-variants("padding", "px", $yma-padding);
+@include y-axis-variants("margin", "my", $yma-margin);
+@include y-axis-variants("padding", "py", $yma-padding);
+
+// extensions
+@include extensions(
+  $yma-extension,
+  (
+    "h": height,
+    "max-h": max-height,
+    "max-w": max-width,
+    "min-h": min-height,
+    "min-w": min-width,
+    "w": width,
+  )
+);
+
+@include dimension-extensions($yma-extension);
+@include height-extensions($yma-height-extension);
+@include box-model-extensions($yma-extension, ("m"), "margin");
+@include box-model-extensions($yma-extension, ("mb"), "margin-bottom");
+@include box-model-extensions($yma-extension, ("ml"), "margin-left");
+@include box-model-extensions($yma-extension, ("mr"), "margin-right");
+@include box-model-extensions($yma-extension, ("mt"), "margin-top");
+@include box-model-extensions($yma-extension, ("p"), "padding");
+@include box-model-extensions($yma-extension, ("pb"), "padding-bottom");
+@include box-model-extensions($yma-extension, ("pl"), "padding-left");
+@include box-model-extensions($yma-extension, ("pr"), "padding-right");
+@include box-model-extensions($yma-extension, ("pt"), "padding-top");
+@include width-extensions($yma-width-extension);

package/src/utilities/_effects.scss

@@ -0,0 +1,74 @@
+@use "sass:math";
+
+$yma-effect-utils: (
+  "box-shadow": (
+    "prefix": "bs",
+    "values": (
+      "none": none,
+      "xs": 1px 3px 5px -3px rgb(0, 0, 0, 0.1),
+      "sm": 1px 3px 5px -2px rgb(0, 0, 0, 0.1),
+      "md": 1px 3px 5px -1px rgb(0, 0, 0, 0.1),
+      "lg": 1px 3px 5px 1px rgb(0, 0, 0, 0.1),
+      "xl": 1px 3px 5px 2px rgb(0, 0, 0, 0.1),
+    ),
+  ),
+
+  "opacity": (
+    "prefix": "o",
+    "values": (
+      "0": 0,
+      "10": 0.1,
+      "20": 0.2,
+      "30": 0.3,
+      "40": 0.4,
+      "50": 0.5,
+      "60": 0.6,
+      "70": 0.7,
+      "80": 0.8,
+      "90": 0.9,
+      "100": 1,
+    ),
+  ),
+);
+
+// base variants
+@each $property, $map in $yma-effect-utils {
+  $prefix: map-get($map, "prefix");
+  $values: map-get($map, "values");
+
+  @each $k, $v in $values {
+    @if ($k == "default") {
+      .#{$prefix} {
+        #{$property}: $v;
+      }
+    } @else {
+      .#{$prefix}-#{$k} {
+        #{$property}: $v;
+      }
+    }
+  }
+
+  // hover variants
+  @each $k, $v in $values {
+    @if ($k == "default") {
+      .h\:#{$prefix}:hover {
+        #{$property}: $v;
+      }
+    } @else {
+      .h\:#{$prefix}-#{$k}:hover {
+        #{$property}: $v;
+      }
+    }
+  }
+
+  // responsive variants
+  @each $bp, $bp-value in $yma-breakpoints {
+    @each $k, $v in $values {
+      .#{$bp}\:#{$prefix}-#{$k} {
+        @media (min-width: $bp-value) {
+          #{$property}: $v;
+        }
+      }
+    }
+  }
+}

package/src/utilities/_filters.scss

@@ -0,0 +1,57 @@
+@use "sass:math";
+
+$yma-filter-utils: (
+  "backdrop-filter": (
+    "prefix": "bf-b",
+    "values": (
+      "none": blur($yma-backdrop-blur * 0),
+      "xs": blur($yma-backdrop-blur),
+      "sm": blur($yma-backdrop-blur * 2),
+      "md": blur($yma-backdrop-blur * 4),
+      "lg": blur($yma-backdrop-blur * 8),
+      "xl": blur($yma-backdrop-blur * 16),
+    ),
+  ),
+);
+
+// base variants
+@each $property, $map in $yma-filter-utils {
+  $prefix: map-get($map, "prefix");
+  $values: map-get($map, "values");
+
+  @each $k, $v in $values {
+    @if ($k == "default") {
+      .#{$prefix} {
+        #{$property}: $v;
+      }
+    } @else {
+      .#{$prefix}-#{$k} {
+        #{$property}: $v;
+      }
+    }
+  }
+
+  // hover variants
+  @each $k, $v in $values {
+    @if ($k == "default") {
+      .h\:#{$prefix}:hover {
+        #{$property}: $v;
+      }
+    } @else {
+      .h\:#{$prefix}-#{$k}:hover {
+        #{$property}: $v;
+      }
+    }
+  }
+
+  // responsive variants
+  @each $bp, $bp-value in $yma-breakpoints {
+    @each $k, $v in $values {
+      .#{$bp}\:#{$prefix}-#{$k} {
+        @media (min-width: $bp-value) {
+          #{$property}: $v;
+        }
+      }
+    }
+  }
+}

package/src/utilities/_flexbox.scss

@@ -0,0 +1,192 @@
+@use "sass:math";
+
+$yma-flexbox-utils: (
+  "align-content": (
+    "prefix": "ac",
+    "values": (
+      "b": baseline,
+      "c": center,
+      "fe": flex-end,
+      "fs": flex-start,
+      "n": normal,
+      "s": stretch,
+      "sa": space-around,
+      "sb": space-between,
+      "se": space-evenly,
+    ),
+  ),
+
+  "align-items": (
+    "prefix": "ai",
+    "values": (
+      "b": baseline,
+      "c": center,
+      "fe": flex-end,
+      "fs": flex-start,
+      "s": stretch,
+    ),
+  ),
+
+  "align-self": (
+    "prefix": "as",
+    "values": (
+      "auto": auto,
+      "b": baseline,
+      "c": center,
+      "fe": flex-end,
+      "fs": flex-start,
+      "s": stretch,
+    ),
+  ),
+
+  "flex-direction": (
+    "prefix": "fd",
+    "values": (
+      "c": column,
+      "cr": column-reverse,
+      "r": row,
+      "rr": row-reverse,
+    ),
+  ),
+
+  "flex-grow": (
+    "prefix": "fg",
+    "values": (
+      "0": 0,
+      "1": 1,
+      "2": 2,
+      "3": 3,
+      "4": 4,
+      "5": 5,
+      "6": 6,
+      "7": 7,
+      "8": 8,
+    ),
+  ),
+
+  "flex-shrink": (
+    "prefix": "fs",
+    "values": (
+      "0": 0,
+      "1": 1,
+      "2": 2,
+      "3": 3,
+      "4": 4,
+      "5": 5,
+      "6": 6,
+      "7": 7,
+      "8": 8,
+    ),
+  ),
+
+  "flex-wrap": (
+    "prefix": "fw",
+    "values": (
+      "nw": nowrap,
+      "w": wrap,
+      "wr": wrap-reverse,
+    ),
+  ),
+
+  "flex": (
+    "prefix": "f",
+    "values": (
+      "1": 1 1 0%,
+      "2": 2 2 0%,
+      "3": 3 3 0%,
+      "4": 4 4 0%,
+      "5": 5 5 0%,
+      "6": 6 6 0%,
+      "auto": 1 1 auto,
+      "none": none,
+    ),
+  ),
+
+  "justify-content": (
+    "prefix": "jc",
+    "values": (
+      "c": center,
+      "fe": flex-end,
+      "fs": flex-start,
+      "n": normal,
+      "s": stretch,
+      "sa": space-around,
+      "sb": space-between,
+      "se": space-evenly,
+    ),
+  ),
+
+  "justify-items": (
+    "prefix": "ji",
+    "values": (
+      "c": center,
+      "e": end,
+      "s": start,
+      "st": stretch
+    ),
+  ),
+
+  "justify-self": (
+    "prefix": "js",
+    "values": (
+      "auto": auto,
+      "c": center,
+      "e": end,
+      "s": start,
+      "st": stretch
+    ),
+  ),
+);
+
+// base variants
+@each $property, $map in $yma-flexbox-utils {
+  $prefix: map-get($map, "prefix");
+  $values: map-get($map, "values");
+
+  @each $k, $v in $values {
+    @if ($k == "default") {
+      .#{$prefix} {
+        #{$property}: $v;
+      }
+    } @else {
+      .#{$prefix}-#{$k} {
+        #{$property}: $v;
+      }
+    }
+  }
+
+  // hover variants
+  @each $k, $v in $values {
+    @if ($k == "default") {
+      .h\:#{$prefix}:hover {
+        #{$property}: $v;
+      }
+    } @else {
+      .h\:#{$prefix}-#{$k}:hover {
+        #{$property}: $v;
+      }
+    }
+  }
+
+  // responsive variants
+  @each $bp, $bp-value in $yma-breakpoints {
+    @each $k, $v in $values {
+      .#{$bp}\:#{$prefix}-#{$k} {
+        @media (min-width: $bp-value) {
+          #{$property}: $v;
+        }
+      }
+    }
+  }
+}
+
+// variants
+@include variants("flex-basis", "fb", $yma-flex-basis);
+
+// extensions
+@include extensions(
+  $yma-extension,
+  (
+    "fb": flex-basis,
+  )
+);