@nuvoui/core 1.2.1 → 1.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuvoui/core",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "NuvoUI is a human-friendly SCSS framework designed for simplicity, and modern responsive designs.",
   "author": {
     "name": "AALA IT Solutions",

package/src/styles/abstracts/_config.scss

@@ -116,42 +116,24 @@ $font-sizes: (
 
 // Updated spacing map
 $spacings: (
-  // 0rem
   0: 0,
-  // 0.25rem
-  1: rem(4),
-  // 0.5rem
-  2: rem(8),
-  // 0.75rem
-  3: rem(12),
-  // 1rem
-  4: rem(16),
-  // 1.25rem
-  5: rem(20),
-  // 1.5rem
-  6: rem(24),
-  // 2rem
-  8: rem(32),
-  // 2.5rem
-  10: rem(40),
-  // 3rem
-  12: rem(48),
-  // 4rem
-  16: rem(64),
-  // 5rem
-  20: rem(80),
-  // 6rem
-  24: rem(96),
-  // 8rem
-  32: rem(128),
-  // 10rem
-  40: rem(160),
-  // 12rem
-  48: rem(192),
-  // 14rem
-  56: rem(224),
-  // 16rem
-  64: rem(256)
-);
+  1: 0.25rem,    // 4px
+  2: 0.5rem,     // 8px
+  3: 0.75rem,    // 12px
+  4: 1rem,       // 16px
+  5: 1.25rem,    // 20px
+  6: 1.5rem,     // 24px
+  8: 2rem,       // 32px
+  10: 2.5rem,    // 40px
+  12: 3rem,      // 48px
+  16: 4rem,      // 64px
+  20: 5rem,      // 80px
+  24: 6rem,      // 96px
+  32: 8rem,      // 128px
+  40: 10rem, 
+  48: 12rem, 
+  56: 14rem, 
+  64: 16rem, 
+)  !default;
 
 $percentages: (0, 5, 10, 20, 25, 30, 40, 50, 60, 70, 75, 80, 90, 100) !default;

package/src/styles/layouts/_flex.scss

@@ -51,90 +51,92 @@
 /**
  * @description Establishes a flex container.
  */
-@mixin flex {display: flex;}
+@mixin flex {& { display: flex;}}
 
 /**
  * @description Establishes a flex-inline container.
  */
-@mixin flex-inline {display: inline-flex;}
+@mixin flex-inline {& { display: inline-flex;}}
 
 /**
  * @description Sets flex-direction to row.
  * @dependencies flex | flex-inline
  */
-@mixin row {flex-direction: row;}
+@mixin row {& { flex-direction: row;}}
 
 /**
  * @description Sets flex-direction to row-reverse.
  * @dependencies flex | flex-inline
  */
-@mixin row-reverse {flex-direction: row-reverse;}
+@mixin row-reverse {& { flex-direction: row-reverse;}}
 
 /**
  * @description Sets flex-direction to column.
  * @dependencies flex | flex-inline
  */
-@mixin col {flex-direction: column;}
+@mixin col {
+  flex-direction: column;
+}
 
 /**
  * @description Sets flex-direction to column-reverse.
  * @dependencies flex | flex-inline
  */
-@mixin col-reverse {flex-direction: column-reverse;}
+@mixin col-reverse {& { flex-direction: column-reverse;}}
 
 /**
  * @description Sets flex-wrap to wrap.
  * @dependencies flex | flex-inline
  */
-@mixin wrap {flex-wrap: wrap;}
+@mixin wrap {& { flex-wrap: wrap;}}
 
 /**
  * @description Sets flex-wrap to nowrap.
  * @dependencies flex | flex-inline
  */
-@mixin nowrap {flex-wrap: nowrap;}
+@mixin nowrap {& { flex-wrap: nowrap;}}
 
 /**
  * @description Sets flex-wrap to wrap-reverse
  * @dependencies flex | flex-inline
  */
-@mixin wrap-reverse {flex-wrap: wrap-reverse;}
+@mixin wrap-reverse {& { flex-wrap: wrap-reverse;}}
 
 /**
  * @description Sets justify-content to flex-start
  * @dependencies flex | flex-inline
  */
-@mixin start {justify-content: flex-start;}
+@mixin start {& { justify-content: flex-start;}}
 
 /**
  * @description Sets justify-content to flex-end
  * @dependencies flex | flex-inline
  */
-@mixin end {justify-content: flex-end;}
+@mixin end {& { justify-content: flex-end;}}
 
 /**
  * @description Sets justify-content to center
  * @dependencies flex | flex-inline
  */
-@mixin center {justify-content: center;}
+@mixin center {& { justify-content: center;}}
 
 /**
  * @description Sets justify-content to space-between
  * @dependencies flex | flex-inline
  */
-@mixin between {justify-content: space-between;}
+@mixin between {& { justify-content: space-between;}}
 
 /**
  * @description Sets justify-content to space-around
  * @dependencies flex | flex-inline
  */
-@mixin around {justify-content: space-around;}
+@mixin around {& { justify-content: space-around;}}
 
 /**
  * @description Sets justify-content to space-evenly
  * @dependencies flex | flex-inline
  */
-@mixin evenly {justify-content: space-evenly;}
+@mixin evenly {& { justify-content: space-evenly;}}
 
 // Cross Axis Alignment Mixins
 
@@ -142,31 +144,31 @@
  * @description Sets align-items to flex-start - aligns items to the start of the cross axis.
  * @dependencies flex | flex-inline
  */
-@mixin x-start {align-items: flex-start;}
+@mixin x-start {& { align-items: flex-start;}}
 
 /**
  * @description Sets align-items to flex-end - aligns items to the end of the cross axis.
  * @dependencies flex | flex-inline
  */
-@mixin x-end {align-items: flex-end;}
+@mixin x-end {& { align-items: flex-end;}}
 
 /**
  * @description Sets align-items to center - aligns items to the center of the cross axis.
  * @dependencies flex | flex-inline
  */
-@mixin x-center {align-items: center;}
+@mixin x-center {& { align-items: center;}}
 
 /**
  * @description Sets align-items to stretch - aligns items to the stretch of the cross axis.
  * @dependencies flex | flex-inline
  */
-@mixin x-stretch {align-items: stretch;}
+@mixin x-stretch {& { align-items: stretch;}}
 
 /**
  * @description Sets align-items to baseline - aligns items to the baseline of the cross axis.
  * @dependencies flex | flex-inline
  */
-@mixin x-baseline {align-items: baseline;}
+@mixin x-baseline {& { align-items: baseline;}}
 
 // Cross Axis Content Mixins
 
@@ -174,43 +176,43 @@
  * @description Sets align-content to flex-start - aligns content to the start of the cross axis.
  * @dependencies flex | flex-inline
  */
-@mixin x-content-start { align-content: flex-start; }
+@mixin x-content-start { & { align-content: flex-start; }}
 
 /**
  * @description Sets align-content to flex-end - aligns content to the end of the cross axis.
  * @dependencies flex | flex-inline
  */
-@mixin x-content-end { align-content: flex-end; }
+@mixin x-content-end { & { align-content: flex-end; }}
 
 /**
  * @description Sets align-content to center - aligns content to the center of the cross axis.
  * @dependencies flex | flex-inline
  */
-@mixin x-content-center { align-content: center; }
+@mixin x-content-center { & { align-content: center; }}
 
 /**
  * @description Sets align-content to space-between - aligns content to the space between the cross axis.
  * @dependencies flex | flex-inline
  */
-@mixin x-content-between { align-content: space-between; }
+@mixin x-content-between { & { align-content: space-between; }}
 
 /**
  * @description Sets align-content to space-around - aligns content to the space around the cross axis.
  * @dependencies flex | flex-inline
  */
-@mixin x-content-around { align-content: space-around; }
+@mixin x-content-around { & { align-content: space-around; }}
 
 /**
  * @description Sets align-content to space-evenly - aligns content to the space evenly between the cross axis.
  * @dependencies flex | flex-inline
  */
-@mixin x-content-evenly { align-content: space-evenly; }
+@mixin x-content-evenly { & { align-content: space-evenly; }}
 
 /**
  * @description Sets align-content to stretch - aligns content to the stretch of the cross axis.
  * @dependencies flex | flex-inline
  */
-@mixin x-content-stretch { align-content: stretch; }
+@mixin x-content-stretch { & { align-content: stretch; }}
 
 // Self Alignment Mixins
 
@@ -218,55 +220,55 @@
  * @description Sets align-self to auto
  * @dependencies flex | flex-inline
  */
-@mixin self-auto {align-self: auto;}
+@mixin self-auto {& { align-self: auto;}}
 
 /**
  * @description Sets align-self to flex-start
  * @dependencies flex | flex-inline
  */
-@mixin self-start {align-self: flex-start;}
+@mixin self-start {& { align-self: flex-start;}}
 
 /**
  * @description Sets align-self to flex-end
  * @dependencies flex | flex-inline
  */
-@mixin self-end {align-self: flex-end;}
+@mixin self-end {& { align-self: flex-end;}}
 
 /**
  * @description Sets align-self to center
  * @dependencies flex | flex-inline
  */
-@mixin self-center {align-self: center;}
+@mixin self-center {& { align-self: center;}}
 
 /**
  * @description Sets align-self to stretch
  * @dependencies flex | flex-inline
  */
-@mixin self-stretch {align-self: stretch;}
+@mixin self-stretch {& { align-self: stretch;}}
 
 /**
  * @description Sets align-self to baseline
  * @dependencies flex | flex-inline
  */
-@mixin self-baseline {align-self: baseline;}
+@mixin self-baseline {& { align-self: baseline;}}
 
 /**
  * @description Sets flex-shrink to 1 - allows the item to shrink.
  * @dependencies flex | flex-inline
  */
-@mixin shrink {flex-shrink: 1;}
+@mixin shrink {& { flex-shrink: 1;}}
 
 /**
  * @description Sets flex-shrink to 0 - prevents the item from shrinking.
  * @dependencies flex | flex-inline
  */
-@mixin shrink-0 {flex-shrink: 0;}
+@mixin shrink-0 {& { flex-shrink: 0;}}
 
 /**
  * @description Sets flex-shrink to 2 - allows the item to shrink twice as much as the other items.
  * @dependencies flex | flex-inline
  */
-@mixin shrink-2 {flex-shrink: 2;}
+@mixin shrink-2 {& { flex-shrink: 2;}}
 
 
 // Flex Child Mixins
@@ -274,29 +276,29 @@
 /**
  * @description Sets flex to 0 0 100%
  */
-@mixin f-w-full {flex: 0 0 100%;}
+@mixin fill-full {& { flex: 0 0 100%;}}
 
 /**
  * @description Sets flex to 1 1 auto - allows the item to grow and shrink.
  */
-@mixin f-w-auto {flex: 1 1 auto;}
+@mixin fill-auto {& { flex: 1 1 auto;}}
 
 /**
  * @description Sets flex to 1 1 0% - allows the item to grow but not shrink.
  */
-@mixin grow { flex: 1 1 0%; }
+@mixin grow { & { flex: 1 1 0%; }}
 
 /**
  * @description Sets flex to none - prevents the item from growing.
  */
-@mixin no-grow { flex: none; }
+@mixin no-grow { & { flex: none; }}
 
 /**
  * @description Sets how many columns this would take using percentage of VAR.$column-count.
  * @param {Number} $size - The number of columns to span.
  */
-@mixin w-col($size) {
-  flex: 0 0 math.percentage(math.div($size, VAR.$column-count));
+@mixin fill($size) {
+  & { flex: 0 0 math.percentage(math.div($size, VAR.$column-count));}
 }
 
 @if VAR.$generate-utility-classes {
@@ -338,9 +340,9 @@
     &.x-content-evenly { align-content: space-evenly; }
     &.x-content-stretch { align-content: stretch; }
 
-    // Child flex items (using column count)
-    > .w-auto { @include f-w-auto; }
-    > .w-full { @include f-w-full; }
+    // Child flex items (using column count) 
+    > .fill-auto { @include fill-auto; }
+    > .fill-full { @include fill-full; }
     > .grow { @include grow; }
     > .no-grow { @include no-grow; }
 
@@ -351,8 +353,16 @@
     > .shrink { @include shrink; }
     > .shrink-0 { @include shrink-0; }
     > .shrink-2 { @include shrink-2; }
+
+    > .self-end { @include self-end; }
+    > .self-start { @include self-start; }
+    > .self-center { @include self-center; }
+    > .self-stretch { @include self-stretch; }
+    > .self-baseline { @include self-baseline; }
+    > .self-auto { @include self-auto; }
+    
     @for $i from 1 through VAR.$column-count {
-      > .w-#{$i} { @include w-col($i); }
+      > .fill-#{$i} { @include fill($i); }
       > .order-#{$i} { order: $i; }
     }
   }
@@ -398,8 +408,8 @@
         &.x-content-stretch\@#{$breakpoint} { align-content: stretch; }
         
         // Width (using column count)
-        & > .w-auto\@#{$breakpoint} { @include f-w-auto; }
-        & > .w-full\@#{$breakpoint} { @include f-w-full; }
+        & > .fill-auto\@#{$breakpoint} { @include fill-auto; }
+        & > .fill-full\@#{$breakpoint} { @include fill-full; }
         & > .grow\@#{$breakpoint} { @include grow; }
         & > .no-grow\@#{$breakpoint} { @include no-grow; }
         & > .order-first\@#{$breakpoint} { order: -1; }
@@ -408,10 +418,14 @@
         & > .shrink\@#{$breakpoint} { @include shrink; }
         & > .shrink-0\@#{$breakpoint} { @include shrink-0; }
         & > .shrink-2\@#{$breakpoint} { @include shrink-2; }
-
+        & > .self-end\@#{$breakpoint} { @include self-end; }
+        & > .self-start\@#{$breakpoint} { @include self-start; }
+        & > .self-center\@#{$breakpoint} { @include self-center; }
+        & > .self-stretch\@#{$breakpoint} { @include self-stretch; }
+        & > .self-baseline\@#{$breakpoint} { @include self-baseline; }
+        & > .self-auto\@#{$breakpoint} { @include self-auto; }
         @for $i from 1 through VAR.$column-count {
-          & > .w-#{$i}\@#{$breakpoint} { @include w-col($i); }
-          & > .col-#{$i}\@#{$breakpoint} { @include w-col($i); }
+          & > .fill-#{$i}\@#{$breakpoint} { @include fill($i); }
           & > .order-#{$i}\@#{$breakpoint} { order: $i; }
         }
       }

package/src/styles/layouts/_grid.scss

@@ -78,8 +78,8 @@ $alignments: (
 @mixin place-items($value) {place-items: $value;}
 
 // Grid Item Placement Mixins
-@mixin span-col($span) {grid-column: span $span / span $span;}
-@mixin span-row($span) {grid-row: span $span / span $span;}
+@mixin col-span($span) {grid-column: span $span / span $span;}
+@mixin row-span($span) {grid-row: span $span / span $span;}
 @mixin col-start($start) {grid-column-start: $start;}
 @mixin col-end($end) {grid-column-end: $end;}
 @mixin row-start($start) {grid-row-start: $start;}
@@ -121,22 +121,22 @@ $alignments: (
 
   // Generate Column Span Classes with Responsive Variants
   @for $i from 1 through VAR.$column-count {
-    .span-col-#{$i} {
-      @include span-col($i);
+    .col-span-#{$i} {
+      @include col-span($i);
     }
 
-    .span-row-#{$i} {
-      @include span-row($i);
+    .row-span-#{$i} {
+      @include row-span($i);
     }
 
     @each $breakpoint, $width in VAR.$breakpoints {
       @media (min-width: #{$width}) {
-        .span-col-#{$i}\@#{$breakpoint} {
-          @include span-col($i);
+        .col-span-#{$i}\@#{$breakpoint} {
+          @include col-span($i);
         }
 
-        .span-row-#{$i}\@#{$breakpoint} {
-          @include span-row($i);
+        .row-span-#{$i}\@#{$breakpoint} {
+          @include row-span($i);
         }
       }
     }

package/src/styles/mixins-map.scss

@@ -1 +1 @@
-@use 'abstracts/config' as *; @use 'abstracts/functions' as *; @use 'abstracts/index' as *; @use 'base/base' as *; @use 'base/index' as *; @use 'base/reset' as *; @use 'layouts/container' as *; @use 'layouts/flex' as *; @use 'layouts/grid' as *; @use 'layouts/index' as *; @use 'themes/index' as *; @use 'themes/theme' as *; @use 'utilities/alignment' as *; @use 'utilities/animations' as *; @use 'utilities/borders' as *; @use 'utilities/colors' as *; @use 'utilities/container-queries' as *; @use 'utilities/display' as *; @use 'utilities/helpers' as *; @use 'utilities/index' as *; @use 'utilities/media-queries' as *; @use 'utilities/opacity' as *; @use 'utilities/position' as *; @use 'utilities/shadows' as *; @use 'utilities/sizing' as *; @use 'utilities/spacing' as *; @use 'utilities/tooltips' as *; @use 'utilities/transitions' as *; @use 'utilities/typography' as *; @use 'sass:string' as str; @use 'sass:map'; @use 'sass:list'; @function st($s) { @while str.length($s) > 0 and str.slice($s, 1, 1) == " " { $s: str.slice($s, 2); } @while str.length($s) > 0 and str.slice($s, -1) == " " { $s: str.slice($s, 1, str.length($s) - 1); } @return $s; } @function split($s, $d) { $r: (); $i: str.index($s, $d); @while $i != null { $it: str.slice($s, 1, $i - 1); $r: list.append($r, st($it)); $s: str.slice($s, $i + str.length($d)); $i: str.index($s, $d); } @return list.append($r, st($s)); } @mixin apply($mixins...) { @each $mixin in $mixins { $ms: #{$mixin}; @if str.index($ms, '(') { $opening: str.index($ms, '('); $closing: null; $depth: 1; $break: 0; @for $i from $opening + 1 through str.length($ms) { @if $break == 0 { $char: str.slice($ms, $i, $i); @if $char == '(' { $depth: $depth + 1; } @else if $char == ')' { $depth: $depth - 1; @if $depth == 0 { $closing: $i; $break: 1; } } } } @if $closing { $mixin-name: str.slice($ms, 1, $opening - 1); $mixin-params: split(str.slice($ms, $opening + 1, $closing - 1), ','); $full-mixin-call: str.slice($ms, 1, $closing); $modifiers_text: ""; @if str.length($ms) > $closing { $modifiers_text: str.slice($ms, $closing + 1); @while str.slice($modifiers_text, 1, 1) == ' ' { $modifiers_text: str.slice($modifiers_text, 2); } } $breakpoint: null; $state: null; @if $modifiers_text != "" { $modifier-list: str.split($modifiers_text, ' '); @each $mod in $modifier-list { @if map.has-key($breakpoints, $mod) { $breakpoint: $mod; } @else { $state: $mod; } } } @if $state and $breakpoint { @include media-up($breakpoint) { &:#{$state} { @include apply-mixin($full-mixin-call, $mixin-params); } } } @else if $state { &:#{$state} { @include apply-mixin($full-mixin-call, $mixin-params); } } @else if $breakpoint { @include media-up($breakpoint) { @include apply-mixin($full-mixin-call, $mixin-params); } } @else { @include apply-mixin($full-mixin-call, $mixin-params); } } } @else { $parts: str.split($ms, ' '); $base-mixin: list.nth($parts, 1); $breakpoint: null; $state: null; @if list.length($parts) > 1 { @for $i from 2 through list.length($parts) { $mod: list.nth($parts, $i); @if map.has-key($breakpoints, $mod) { $breakpoint: $mod; } @else { $state: $mod; } } } @if $state and $breakpoint { @include media-up($breakpoint) { &:#{$state} { @include apply-mixin($base-mixin); } } } @else if $state { &:#{$state} { @include apply-mixin($base-mixin); } } @else if $breakpoint { @include media-up($breakpoint) { @include apply-mixin($base-mixin); } } @else { @include apply-mixin($base-mixin); } } } } @mixin apply-mixin($ms, $params: null) { @if $ms == 'container-base' { @include container-base; } @else if str.index($ms, 'container-padding(') == 1 { $param1: list.nth($params, 1); @include container-padding($param1); } @else if str.index($ms, 'container(') == 1 { $param1: list.nth($params, 1); @include container($param1); } @else if $ms == 'flex' { @include flex; } @else if $ms == 'flex-inline' { @include flex-inline; } @else if $ms == 'row' { @include row; } @else if $ms == 'row-reverse' { @include row-reverse; } @else if $ms == 'col' { @include col; } @else if $ms == 'col-reverse' { @include col-reverse; } @else if $ms == 'wrap' { @include wrap; } @else if $ms == 'nowrap' { @include nowrap; } @else if $ms == 'wrap-reverse' { @include wrap-reverse; } @else if $ms == 'start' { @include start; } @else if $ms == 'end' { @include end; } @else if $ms == 'center' { @include center; } @else if $ms == 'between' { @include between; } @else if $ms == 'around' { @include around; } @else if $ms == 'evenly' { @include evenly; } @else if $ms == 'x-start' { @include x-start; } @else if $ms == 'x-end' { @include x-end; } @else if $ms == 'x-center' { @include x-center; } @else if $ms == 'x-stretch' { @include x-stretch; } @else if $ms == 'x-baseline' { @include x-baseline; } @else if $ms == 'x-content-start' { @include x-content-start; } @else if $ms == 'x-content-end' { @include x-content-end; } @else if $ms == 'x-content-center' { @include x-content-center; } @else if $ms == 'x-content-between' { @include x-content-between; } @else if $ms == 'x-content-around' { @include x-content-around; } @else if $ms == 'x-content-evenly' { @include x-content-evenly; } @else if $ms == 'x-content-stretch' { @include x-content-stretch; } @else if $ms == 'self-auto' { @include self-auto; } @else if $ms == 'self-start' { @include self-start; } @else if $ms == 'self-end' { @include self-end; } @else if $ms == 'self-center' { @include self-center; } @else if $ms == 'self-stretch' { @include self-stretch; } @else if $ms == 'self-baseline' { @include self-baseline; } @else if $ms == 'shrink' { @include shrink; } @else if $ms == 'shrink-0' { @include shrink-0; } @else if $ms == 'shrink-2' { @include shrink-2; } @else if $ms == 'f-w-full' { @include f-w-full; } @else if $ms == 'f-w-auto' { @include f-w-auto; } @else if $ms == 'grow' { @include grow; } @else if $ms == 'no-grow' { @include no-grow; } @else if str.index($ms, 'w-col(') == 1 { $param1: list.nth($params, 1); @include w-col($param1); } @else if $ms == 'grid' { @include grid; } @else if $ms == 'grid-inline' { @include grid-inline; } @else if str.index($ms, 'cols(') == 1 { $param1: list.nth($params, 1); @include cols($param1); } @else if str.index($ms, 'rows(') == 1 { $param1: list.nth($params, 1); @include rows($param1); } @else if str.index($ms, 'cols-custom(') == 1 { $param1: list.nth($params, 1); @include cols-custom($param1); } @else if str.index($ms, 'auto-fit(') == 1 { $param1: list.nth($params, 1); @include auto-fit($param1); } @else if str.index($ms, 'auto-fill(') == 1 { $param1: list.nth($params, 1); @include auto-fill($param1); } @else if $ms == 'flow-in-row' { @include flow-in-row; } @else if $ms == 'flow-in-col' { @include flow-in-col; } @else if $ms == 'flow-dense-items' { @include flow-dense-items; } @else if str.index($ms, 'justify-items(') == 1 { $param1: list.nth($params, 1); @include justify-items($param1); } @else if str.index($ms, 'align-items(') == 1 { $param1: list.nth($params, 1); @include align-items($param1); } @else if str.index($ms, 'place-items(') == 1 { $param1: list.nth($params, 1); @include place-items($param1); } @else if str.index($ms, 'span-col(') == 1 { $param1: list.nth($params, 1); @include span-col($param1); } @else if str.index($ms, 'span-row(') == 1 { $param1: list.nth($params, 1); @include span-row($param1); } @else if str.index($ms, 'col-start(') == 1 { $param1: list.nth($params, 1); @include col-start($param1); } @else if str.index($ms, 'col-end(') == 1 { $param1: list.nth($params, 1); @include col-end($param1); } @else if str.index($ms, 'row-start(') == 1 { $param1: list.nth($params, 1); @include row-start($param1); } @else if str.index($ms, 'row-end(') == 1 { $param1: list.nth($params, 1); @include row-end($param1); } @else if str.index($ms, 'grid-position(') == 1 { @if (list.length($params) == 1) { $param1: list.nth($params, 1); @include grid-position($param1); } @else if (list.length($params) == 2) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); @include grid-position($param1, $param2); } } @else if str.index($ms, 'position-col(') == 1 { $param1: list.nth($params, 1); @include position-col($param1); } @else if str.index($ms, 'position-row(') == 1 { $param1: list.nth($params, 1); @include position-row($param1); } @else if $ms == 'align-baseline' { @include align-baseline; } @else if $ms == 'align-top' { @include align-top; } @else if $ms == 'align-middle' { @include align-middle; } @else if $ms == 'align-bottom' { @include align-bottom; } @else if str.index($ms, 'generate-bounce-keyframes(') == 1 { @if (list.length($params) == 1) { $param1: list.nth($params, 1); @include generate-bounce-keyframes($param1); } @else if (list.length($params) == 2) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); @include generate-bounce-keyframes($param1, $param2); } @else if (list.length($params) == 3) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); $param3: list.nth($params, 3); @include generate-bounce-keyframes($param1, $param2, $param3); } } @else if str.index($ms, 'animate-bounce(') == 1 { $param1: list.nth($params, 1); @include animate-bounce($param1); } @else if $ms == 'hover-ready' { @include hover-ready; } @else if str.index($ms, 'border(') == 1 { $param1: list.nth($params, 1); @include border($param1); } @else if str.index($ms, 'border-top(') == 1 { $param1: list.nth($params, 1); @include border-top($param1); } @else if str.index($ms, 'border-right(') == 1 { $param1: list.nth($params, 1); @include border-right($param1); } @else if str.index($ms, 'border-bottom(') == 1 { $param1: list.nth($params, 1); @include border-bottom($param1); } @else if str.index($ms, 'border-left(') == 1 { $param1: list.nth($params, 1); @include border-left($param1); } @else if str.index($ms, 'rounded-t(') == 1 { $param1: list.nth($params, 1); @include rounded-t($param1); } @else if str.index($ms, 'rounded-r(') == 1 { $param1: list.nth($params, 1); @include rounded-r($param1); } @else if str.index($ms, 'rounded-b(') == 1 { $param1: list.nth($params, 1); @include rounded-b($param1); } @else if str.index($ms, 'rounded-l(') == 1 { $param1: list.nth($params, 1); @include rounded-l($param1); } @else if str.index($ms, 'rounded-tl(') == 1 { $param1: list.nth($params, 1); @include rounded-tl($param1); } @else if str.index($ms, 'rounded-tr(') == 1 { $param1: list.nth($params, 1); @include rounded-tr($param1); } @else if str.index($ms, 'rounded-br(') == 1 { $param1: list.nth($params, 1); @include rounded-br($param1); } @else if str.index($ms, 'rounded-bl(') == 1 { $param1: list.nth($params, 1); @include rounded-bl($param1); } @else if str.index($ms, 'border-style(') == 1 { $param1: list.nth($params, 1); @include border-style($param1); } @else if str.index($ms, 'border-color(') == 1 { $param1: list.nth($params, 1); @include border-color($param1); } @else if str.index($ms, 'border-all(') == 1 { @if (list.length($params) == 1) { $param1: list.nth($params, 1); @include border-all($param1); } @else if (list.length($params) == 2) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); @include border-all($param1, $param2); } @else if (list.length($params) == 3) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); $param3: list.nth($params, 3); @include border-all($param1, $param2, $param3); } } @else if str.index($ms, 'adaptive-contrast(') == 1 { $param1: list.nth($params, 1); @include adaptive-contrast($param1); } @else if str.index($ms, 'bg(') == 1 { $param1: list.nth($params, 1); @include bg($param1); } @else if str.index($ms, 'color(') == 1 { $param1: list.nth($params, 1); @include color($param1); } @else if str.index($ms, 'gradient(') == 1 { @if (list.length($params) == 1) { $param1: list.nth($params, 1); @include gradient($param1); } @else if (list.length($params) == 2) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); @include gradient($param1, $param2); } } @else if str.index($ms, 'backdrop-filter(') == 1 { $param1: list.nth($params, 1); @include backdrop-filter($param1); } @else if str.index($ms, 'filter(') == 1 { $param1: list.nth($params, 1); @include filter($param1); } @else if str.index($ms, 'container-up(') == 1 { @if (list.length($params) == 1) { $param1: list.nth($params, 1); @include container-up($param1); } @else if (list.length($params) == 2) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); @include container-up($param1, $param2); } } @else if str.index($ms, 'container-down(') == 1 { @if (list.length($params) == 1) { $param1: list.nth($params, 1); @include container-down($param1); } @else if (list.length($params) == 2) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); @include container-down($param1, $param2); } } @else if str.index($ms, 'container-between(') == 1 { @if (list.length($params) == 1) { $param1: list.nth($params, 1); @include container-between($param1); } @else if (list.length($params) == 2) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); @include container-between($param1, $param2); } @else if (list.length($params) == 3) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); $param3: list.nth($params, 3); @include container-between($param1, $param2, $param3); } } @else if str.index($ms, 'container-only(') == 1 { @if (list.length($params) == 1) { $param1: list.nth($params, 1); @include container-only($param1); } @else if (list.length($params) == 2) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); @include container-only($param1, $param2); } } @else if str.index($ms, 'container-query(') == 1 { @if (list.length($params) == 1) { $param1: list.nth($params, 1); @include container-query($param1); } @else if (list.length($params) == 2) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); @include container-query($param1, $param2); } } @else if str.index($ms, 'container-type(') == 1 { $param1: list.nth($params, 1); @include container-type($param1); } @else if str.index($ms, 'container-name(') == 1 { $param1: list.nth($params, 1); @include container-name($param1); } @else if $ms == 'hide' { @include hide; } @else if $ms == 'block' { @include block; } @else if $ms == 'inline' { @include inline; } @else if $ms == 'inline-block' { @include inline-block; } @else if $ms == 'show' { @include show; } @else if $ms == 'd-tbl' { @include d-tbl; } @else if $ms == 'd-tbl-row' { @include d-tbl-row; } @else if $ms == 'd-tbl-cell' { @include d-tbl-cell; } @else if $ms == 'visible' { @include visible; } @else if $ms == 'invisible' { @include invisible; } @else if $ms == 'collapse' { @include collapse; } @else if $ms == 'contents' { @include contents; } @else if $ms == 'overflow-hidden' { @include overflow-hidden; } @else if $ms == 'overflow-visible' { @include overflow-visible; } @else if $ms == 'overflow-scroll' { @include overflow-scroll; } @else if $ms == 'overflow-auto' { @include overflow-auto; } @else if $ms == 'overflow-x-hidden' { @include overflow-x-hidden; } @else if $ms == 'overflow-y-hidden' { @include overflow-y-hidden; } @else if $ms == 'overflow-x-scroll' { @include overflow-x-scroll; } @else if $ms == 'overflow-y-scroll' { @include overflow-y-scroll; } @else if $ms == 'overflow-x-auto' { @include overflow-x-auto; } @else if $ms == 'overflow-y-auto' { @include overflow-y-auto; } @else if str.index($ms, 'media-up(') == 1 { $param1: list.nth($params, 1); @include media-up($param1); } @else if str.index($ms, 'media-down(') == 1 { $param1: list.nth($params, 1); @include media-down($param1); } @else if str.index($ms, 'media-between(') == 1 { @if (list.length($params) == 1) { $param1: list.nth($params, 1); @include media-between($param1); } @else if (list.length($params) == 2) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); @include media-between($param1, $param2); } } @else if str.index($ms, 'media-only(') == 1 { $param1: list.nth($params, 1); @include media-only($param1); } @else if $ms == 'touch' { @include touch; } @else if $ms == 'print' { @include print; } @else if str.index($ms, 'supports(') == 1 { $param1: list.nth($params, 1); @include supports($param1); } @else if $ms == 'prefers-dark' { @include prefers-dark; } @else if $ms == 'dark-mode' { @include dark-mode; } @else if $ms == 'landscape' { @include landscape; } @else if $ms == 'portrait' { @include portrait; } @else if str.index($ms, 'aspect-ratio(') == 1 { $param1: list.nth($params, 1); @include aspect-ratio($param1); } @else if $ms == 'dvh' { @include dvh; } @else if str.index($ms, 'safe-area-inset(') == 1 { @if (list.length($params) == 1) { $param1: list.nth($params, 1); @include safe-area-inset($param1); } @else if (list.length($params) == 2) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); @include safe-area-inset($param1, $param2); } } @else if $ms == 'reduced-motion' { @include reduced-motion; } @else if $ms == 'save-data' { @include save-data; } @else if $ms == 'fine-pointer' { @include fine-pointer; } @else if str.index($ms, 'display-mode(') == 1 { $param1: list.nth($params, 1); @include display-mode($param1); } @else if $ms == 'high-contrast' { @include high-contrast; } @else if str.index($ms, 'opacity(') == 1 { $param1: list.nth($params, 1); @include opacity($param1); } @else if $ms == 'static' { @include static; } @else if $ms == 'relative' { @include relative; } @else if $ms == 'absolute' { @include absolute; } @else if $ms == 'fixed' { @include fixed; } @else if $ms == 'sticky' { @include sticky; } @else if str.index($ms, 'top(') == 1 { $param1: list.nth($params, 1); @include top($param1); } @else if str.index($ms, 'right(') == 1 { $param1: list.nth($params, 1); @include right($param1); } @else if str.index($ms, 'bottom(') == 1 { $param1: list.nth($params, 1); @include bottom($param1); } @else if str.index($ms, 'left(') == 1 { $param1: list.nth($params, 1); @include left($param1); } @else if str.index($ms, 'shadow-base(') == 1 { @if (list.length($params) == 1) { $param1: list.nth($params, 1); @include shadow-base($param1); } @else if (list.length($params) == 2) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); @include shadow-base($param1, $param2); } @else if (list.length($params) == 3) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); $param3: list.nth($params, 3); @include shadow-base($param1, $param2, $param3); } @else if (list.length($params) == 4) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); $param3: list.nth($params, 3); $param4: list.nth($params, 4); @include shadow-base($param1, $param2, $param3, $param4); } @else if (list.length($params) == 5) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); $param3: list.nth($params, 3); $param4: list.nth($params, 4); $param5: list.nth($params, 5); @include shadow-base($param1, $param2, $param3, $param4, $param5); } } @else if str.index($ms, 'shadow(') == 1 { @if (list.length($params) == 1) { $param1: list.nth($params, 1); @include shadow($param1); } @else if (list.length($params) == 2) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); @include shadow($param1, $param2); } } @else if str.index($ms, 'shadow-inset(') == 1 { @if (list.length($params) == 1) { $param1: list.nth($params, 1); @include shadow-inset($param1); } @else if (list.length($params) == 2) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); @include shadow-inset($param1, $param2); } } @else if str.index($ms, 'elevation(') == 1 { $param1: list.nth($params, 1); @include elevation($param1); } @else if str.index($ms, 'width(') == 1 { $param1: list.nth($params, 1); @include width($param1); } @else if str.index($ms, 'height(') == 1 { $param1: list.nth($params, 1); @include height($param1); } @else if str.index($ms, 'min-width(') == 1 { $param1: list.nth($params, 1); @include min-width($param1); } @else if str.index($ms, 'min-height(') == 1 { $param1: list.nth($params, 1); @include min-height($param1); } @else if str.index($ms, 'max-width(') == 1 { $param1: list.nth($params, 1); @include max-width($param1); } @else if str.index($ms, 'max-height(') == 1 { $param1: list.nth($params, 1); @include max-height($param1); } @else if str.index($ms, 'width-percent(') == 1 { $param1: list.nth($params, 1); @include width-percent($param1); } @else if str.index($ms, 'height-percent(') == 1 { $param1: list.nth($params, 1); @include height-percent($param1); } @else if str.index($ms, 'min-width-percent(') == 1 { $param1: list.nth($params, 1); @include min-width-percent($param1); } @else if str.index($ms, 'min-height-percent(') == 1 { $param1: list.nth($params, 1); @include min-height-percent($param1); } @else if str.index($ms, 'max-width-percent(') == 1 { $param1: list.nth($params, 1); @include max-width-percent($param1); } @else if str.index($ms, 'max-height-percent(') == 1 { $param1: list.nth($params, 1); @include max-height-percent($param1); } @else if $ms == 'w-auto' { @include w-auto; } @else if $ms == 'w-full' { @include w-full; } @else if $ms == 'h-auto' { @include h-auto; } @else if $ms == 'h-full' { @include h-full; } @else if $ms == 'min-w-full' { @include min-w-full; } @else if $ms == 'max-w-full' { @include max-w-full; } @else if $ms == 'min-h-full' { @include min-h-full; } @else if $ms == 'max-h-full' { @include max-h-full; } @else if $ms == 'w-screen' { @include w-screen; } @else if $ms == 'h-screen' { @include h-screen; } @else if str.index($ms, 'p(') == 1 { $param1: list.nth($params, 1); @include p($param1); } @else if str.index($ms, 'px(') == 1 { $param1: list.nth($params, 1); @include px($param1); } @else if str.index($ms, 'py(') == 1 { $param1: list.nth($params, 1); @include py($param1); } @else if str.index($ms, 'pt(') == 1 { $param1: list.nth($params, 1); @include pt($param1); } @else if str.index($ms, 'pr(') == 1 { $param1: list.nth($params, 1); @include pr($param1); } @else if str.index($ms, 'pb(') == 1 { $param1: list.nth($params, 1); @include pb($param1); } @else if str.index($ms, 'pl(') == 1 { $param1: list.nth($params, 1); @include pl($param1); } @else if str.index($ms, 'm(') == 1 { $param1: list.nth($params, 1); @include m($param1); } @else if str.index($ms, 'mx(') == 1 { $param1: list.nth($params, 1); @include mx($param1); } @else if str.index($ms, 'my(') == 1 { $param1: list.nth($params, 1); @include my($param1); } @else if str.index($ms, 'mt(') == 1 { $param1: list.nth($params, 1); @include mt($param1); } @else if str.index($ms, 'mr(') == 1 { $param1: list.nth($params, 1); @include mr($param1); } @else if str.index($ms, 'mb(') == 1 { $param1: list.nth($params, 1); @include mb($param1); } @else if str.index($ms, 'ml(') == 1 { $param1: list.nth($params, 1); @include ml($param1); } @else if $ms == 'ml-auto' { @include ml-auto; } @else if $ms == 'mr-auto' { @include mr-auto; } @else if $ms == 'mx-auto' { @include mx-auto; } @else if str.index($ms, 'space-y(') == 1 { $param1: list.nth($params, 1); @include space-y($param1); } @else if str.index($ms, 'space-x(') == 1 { $param1: list.nth($params, 1); @include space-x($param1); } @else if str.index($ms, 'gap(') == 1 { $param1: list.nth($params, 1); @include gap($param1); } @else if str.index($ms, 'gap-x(') == 1 { $param1: list.nth($params, 1); @include gap-x($param1); } @else if str.index($ms, 'gap-y(') == 1 { $param1: list.nth($params, 1); @include gap-y($param1); } @else if $ms == 'transition' { @include transition; } @else if $ms == 'transition-none' { @include transition-none; } @else if $ms == 'transition-all' { @include transition-all; } @else if $ms == 'transition-colors' { @include transition-colors; } @else if $ms == 'transition-opacity' { @include transition-opacity; } @else if $ms == 'transition-shadow' { @include transition-shadow; } @else if $ms == 'transition-transform' { @include transition-transform; } @else if str.index($ms, 'duration(') == 1 { $param1: list.nth($params, 1); @include duration($param1); } @else if $ms == 'ease-linear' { @include ease-linear; } @else if $ms == 'ease-in' { @include ease-in; } @else if $ms == 'ease-out' { @include ease-out; } @else if $ms == 'ease-in-out' { @include ease-in-out; } @else if str.index($ms, 'delay(') == 1 { $param1: list.nth($params, 1); @include delay($param1); } @else if str.index($ms, 'text-size(') == 1 { $param1: list.nth($params, 1); @include text-size($param1); } @else if $ms == 'font-thin' { @include font-thin; } @else if $ms == 'font-extralight' { @include font-extralight; } @else if $ms == 'font-light' { @include font-light; } @else if $ms == 'font-normal' { @include font-normal; } @else if $ms == 'font-medium' { @include font-medium; } @else if $ms == 'font-semibold' { @include font-semibold; } @else if $ms == 'font-bold' { @include font-bold; } @else if $ms == 'font-extrabold' { @include font-extrabold; } @else if $ms == 'font-black' { @include font-black; } @else if $ms == 'leading-none' { @include leading-none; } @else if $ms == 'leading-tight' { @include leading-tight; } @else if $ms == 'leading-snug' { @include leading-snug; } @else if $ms == 'leading-normal' { @include leading-normal; } @else if $ms == 'leading-relaxed' { @include leading-relaxed; } @else if $ms == 'leading-loose' { @include leading-loose; } @else if $ms == 'text-left' { @include text-left; } @else if $ms == 'text-center' { @include text-center; } @else if $ms == 'text-right' { @include text-right; } @else if $ms == 'text-justify' { @include text-justify; } @else if $ms == 'uppercase' { @include uppercase; } @else if $ms == 'lowercase' { @include lowercase; } @else if $ms == 'capitalize' { @include capitalize; } @else if $ms == 'normal-case' { @include normal-case; } @else if $ms == 'italic' { @include italic; } @else if $ms == 'not-italic' { @include not-italic; } @else if $ms == 'underline' { @include underline; } @else if $ms == 'line-through' { @include line-through; } @else if $ms == 'no-underline' { @include no-underline; } @else if $ms == 'truncate' { @include truncate; } @else if str.index($ms, 'truncate-lines(') == 1 { $param1: list.nth($params, 1); @include truncate-lines($param1); } @else if $ms == 'break-normal' { @include break-normal; } @else if $ms == 'break-words' { @include break-words; } @else if $ms == 'break-all' { @include break-all; } @else if $ms == 'whitespace-normal' { @include whitespace-normal; } @else if $ms == 'whitespace-nowrap' { @include whitespace-nowrap; } @else if $ms == 'whitespace-pre' { @include whitespace-pre; } @else if $ms == 'whitespace-pre-line' { @include whitespace-pre-line; } @else if $ms == 'whitespace-pre-wrap' { @include whitespace-pre-wrap; } @else if str.index($ms, 'responsive-typography(') == 1 { $param1: list.nth($params, 1); @include responsive-typography($param1); } }
+@use 'abstracts/config' as *; @use 'abstracts/functions' as *; @use 'abstracts/index' as *; @use 'base/base' as *; @use 'base/index' as *; @use 'base/reset' as *; @use 'layouts/container' as *; @use 'layouts/flex' as *; @use 'layouts/grid' as *; @use 'layouts/index' as *; @use 'themes/index' as *; @use 'themes/theme' as *; @use 'utilities/alignment' as *; @use 'utilities/animations' as *; @use 'utilities/borders' as *; @use 'utilities/colors' as *; @use 'utilities/container-queries' as *; @use 'utilities/display' as *; @use 'utilities/helpers' as *; @use 'utilities/index' as *; @use 'utilities/media-queries' as *; @use 'utilities/opacity' as *; @use 'utilities/position' as *; @use 'utilities/shadows' as *; @use 'utilities/sizing' as *; @use 'utilities/spacing' as *; @use 'utilities/tooltips' as *; @use 'utilities/transforms' as *; @use 'utilities/transitions' as *; @use 'utilities/typography' as *; @use 'sass:string' as str; @use 'sass:map'; @use 'sass:list'; @function st($s) { @while str.length($s) > 0 and str.slice($s, 1, 1) == " " { $s: str.slice($s, 2); } @while str.length($s) > 0 and str.slice($s, -1) == " " { $s: str.slice($s, 1, str.length($s) - 1); } @return $s; } @function split($s, $d) { $r: (); $i: str.index($s, $d); @while $i != null { $it: str.slice($s, 1, $i - 1); $r: list.append($r, st($it)); $s: str.slice($s, $i + str.length($d)); $i: str.index($s, $d); } @return list.append($r, st($s)); } @mixin apply($mixins...) { @each $mixin in $mixins { $ms: #{$mixin}; @if str.index($ms, '(') { $opening: str.index($ms, '('); $closing: null; $depth: 1; $break: 0; @for $i from $opening + 1 through str.length($ms) { @if $break == 0 { $char: str.slice($ms, $i, $i); @if $char == '(' { $depth: $depth + 1; } @else if $char == ')' { $depth: $depth - 1; @if $depth == 0 { $closing: $i; $break: 1; } } } } @if $closing { $mixin-name: str.slice($ms, 1, $opening - 1); $mixin-params: split(str.slice($ms, $opening + 1, $closing - 1), ','); $full-mixin-call: str.slice($ms, 1, $closing); $modifiers_text: ""; @if str.length($ms) > $closing { $modifiers_text: str.slice($ms, $closing + 1); @while str.slice($modifiers_text, 1, 1) == ' ' { $modifiers_text: str.slice($modifiers_text, 2); } } $breakpoint: null; $state: null; @if $modifiers_text != "" { $modifier-list: str.split($modifiers_text, ' '); @each $mod in $modifier-list { @if map.has-key($breakpoints, $mod) { $breakpoint: $mod; } @else { $state: $mod; } } } @if $state and $breakpoint { @include media-up($breakpoint) { &:#{$state} { @include apply-mixin($full-mixin-call, $mixin-params); } } } @else if $state { &:#{$state} { @include apply-mixin($full-mixin-call, $mixin-params); } } @else if $breakpoint { @include media-up($breakpoint) { @include apply-mixin($full-mixin-call, $mixin-params); } } @else { @include apply-mixin($full-mixin-call, $mixin-params); } } } @else { $parts: str.split($ms, ' '); $base-mixin: list.nth($parts, 1); $breakpoint: null; $state: null; @if list.length($parts) > 1 { @for $i from 2 through list.length($parts) { $mod: list.nth($parts, $i); @if map.has-key($breakpoints, $mod) { $breakpoint: $mod; } @else { $state: $mod; } } } @if $state and $breakpoint { @include media-up($breakpoint) { &:#{$state} { @include apply-mixin($base-mixin); } } } @else if $state { &:#{$state} { @include apply-mixin($base-mixin); } } @else if $breakpoint { @include media-up($breakpoint) { @include apply-mixin($base-mixin); } } @else { @include apply-mixin($base-mixin); } } } } @mixin apply-mixin($ms, $params: null) { @if $ms == 'container-base' { @include container-base; } @else if str.index($ms, 'container-padding(') == 1 { $param1: list.nth($params, 1); @include container-padding($param1); } @else if str.index($ms, 'container(') == 1 { $param1: list.nth($params, 1); @include container($param1); } @else if $ms == 'flex' { @include flex; } @else if $ms == 'flex-inline' { @include flex-inline; } @else if $ms == 'row' { @include row; } @else if $ms == 'row-reverse' { @include row-reverse; } @else if $ms == 'col' { @include col; } @else if $ms == 'col-reverse' { @include col-reverse; } @else if $ms == 'wrap' { @include wrap; } @else if $ms == 'nowrap' { @include nowrap; } @else if $ms == 'wrap-reverse' { @include wrap-reverse; } @else if $ms == 'start' { @include start; } @else if $ms == 'end' { @include end; } @else if $ms == 'center' { @include center; } @else if $ms == 'between' { @include between; } @else if $ms == 'around' { @include around; } @else if $ms == 'evenly' { @include evenly; } @else if $ms == 'x-start' { @include x-start; } @else if $ms == 'x-end' { @include x-end; } @else if $ms == 'x-center' { @include x-center; } @else if $ms == 'x-stretch' { @include x-stretch; } @else if $ms == 'x-baseline' { @include x-baseline; } @else if $ms == 'x-content-start' { @include x-content-start; } @else if $ms == 'x-content-end' { @include x-content-end; } @else if $ms == 'x-content-center' { @include x-content-center; } @else if $ms == 'x-content-between' { @include x-content-between; } @else if $ms == 'x-content-around' { @include x-content-around; } @else if $ms == 'x-content-evenly' { @include x-content-evenly; } @else if $ms == 'x-content-stretch' { @include x-content-stretch; } @else if $ms == 'self-auto' { @include self-auto; } @else if $ms == 'self-start' { @include self-start; } @else if $ms == 'self-end' { @include self-end; } @else if $ms == 'self-center' { @include self-center; } @else if $ms == 'self-stretch' { @include self-stretch; } @else if $ms == 'self-baseline' { @include self-baseline; } @else if $ms == 'shrink' { @include shrink; } @else if $ms == 'shrink-0' { @include shrink-0; } @else if $ms == 'shrink-2' { @include shrink-2; } @else if $ms == 'fill-full' { @include fill-full; } @else if $ms == 'fill-auto' { @include fill-auto; } @else if $ms == 'grow' { @include grow; } @else if $ms == 'no-grow' { @include no-grow; } @else if str.index($ms, 'fill(') == 1 { $param1: list.nth($params, 1); @include fill($param1); } @else if $ms == 'grid' { @include grid; } @else if $ms == 'grid-inline' { @include grid-inline; } @else if str.index($ms, 'cols(') == 1 { $param1: list.nth($params, 1); @include cols($param1); } @else if str.index($ms, 'rows(') == 1 { $param1: list.nth($params, 1); @include rows($param1); } @else if str.index($ms, 'cols-custom(') == 1 { $param1: list.nth($params, 1); @include cols-custom($param1); } @else if str.index($ms, 'auto-fit(') == 1 { $param1: list.nth($params, 1); @include auto-fit($param1); } @else if str.index($ms, 'auto-fill(') == 1 { $param1: list.nth($params, 1); @include auto-fill($param1); } @else if $ms == 'flow-in-row' { @include flow-in-row; } @else if $ms == 'flow-in-col' { @include flow-in-col; } @else if $ms == 'flow-dense-items' { @include flow-dense-items; } @else if str.index($ms, 'justify-items(') == 1 { $param1: list.nth($params, 1); @include justify-items($param1); } @else if str.index($ms, 'align-items(') == 1 { $param1: list.nth($params, 1); @include align-items($param1); } @else if str.index($ms, 'place-items(') == 1 { $param1: list.nth($params, 1); @include place-items($param1); } @else if str.index($ms, 'col-span(') == 1 { $param1: list.nth($params, 1); @include col-span($param1); } @else if str.index($ms, 'row-span(') == 1 { $param1: list.nth($params, 1); @include row-span($param1); } @else if str.index($ms, 'col-start(') == 1 { $param1: list.nth($params, 1); @include col-start($param1); } @else if str.index($ms, 'col-end(') == 1 { $param1: list.nth($params, 1); @include col-end($param1); } @else if str.index($ms, 'row-start(') == 1 { $param1: list.nth($params, 1); @include row-start($param1); } @else if str.index($ms, 'row-end(') == 1 { $param1: list.nth($params, 1); @include row-end($param1); } @else if str.index($ms, 'grid-position(') == 1 { @if (list.length($params) == 1) { $param1: list.nth($params, 1); @include grid-position($param1); } @else if (list.length($params) == 2) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); @include grid-position($param1, $param2); } } @else if str.index($ms, 'position-col(') == 1 { $param1: list.nth($params, 1); @include position-col($param1); } @else if str.index($ms, 'position-row(') == 1 { $param1: list.nth($params, 1); @include position-row($param1); } @else if $ms == 'align-baseline' { @include align-baseline; } @else if $ms == 'align-top' { @include align-top; } @else if $ms == 'align-middle' { @include align-middle; } @else if $ms == 'align-bottom' { @include align-bottom; } @else if str.index($ms, 'generate-bounce-keyframes(') == 1 { @if (list.length($params) == 1) { $param1: list.nth($params, 1); @include generate-bounce-keyframes($param1); } @else if (list.length($params) == 2) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); @include generate-bounce-keyframes($param1, $param2); } @else if (list.length($params) == 3) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); $param3: list.nth($params, 3); @include generate-bounce-keyframes($param1, $param2, $param3); } } @else if str.index($ms, 'animate-bounce(') == 1 { $param1: list.nth($params, 1); @include animate-bounce($param1); } @else if $ms == 'hover-ready' { @include hover-ready; } @else if str.index($ms, 'border-top(') == 1 { $param1: list.nth($params, 1); @include border-top($param1); } @else if str.index($ms, 'border-right(') == 1 { $param1: list.nth($params, 1); @include border-right($param1); } @else if str.index($ms, 'border-bottom(') == 1 { $param1: list.nth($params, 1); @include border-bottom($param1); } @else if str.index($ms, 'border-left(') == 1 { $param1: list.nth($params, 1); @include border-left($param1); } @else if str.index($ms, 'rounded-t(') == 1 { $param1: list.nth($params, 1); @include rounded-t($param1); } @else if str.index($ms, 'rounded-r(') == 1 { $param1: list.nth($params, 1); @include rounded-r($param1); } @else if str.index($ms, 'rounded-b(') == 1 { $param1: list.nth($params, 1); @include rounded-b($param1); } @else if str.index($ms, 'rounded-l(') == 1 { $param1: list.nth($params, 1); @include rounded-l($param1); } @else if str.index($ms, 'rounded-tl(') == 1 { $param1: list.nth($params, 1); @include rounded-tl($param1); } @else if str.index($ms, 'rounded-tr(') == 1 { $param1: list.nth($params, 1); @include rounded-tr($param1); } @else if str.index($ms, 'rounded-br(') == 1 { $param1: list.nth($params, 1); @include rounded-br($param1); } @else if str.index($ms, 'rounded-bl(') == 1 { $param1: list.nth($params, 1); @include rounded-bl($param1); } @else if str.index($ms, 'border-style(') == 1 { $param1: list.nth($params, 1); @include border-style($param1); } @else if str.index($ms, 'border-color(') == 1 { $param1: list.nth($params, 1); @include border-color($param1); } @else if str.index($ms, 'border-all(') == 1 { @if (list.length($params) == 1) { $param1: list.nth($params, 1); @include border-all($param1); } @else if (list.length($params) == 2) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); @include border-all($param1, $param2); } @else if (list.length($params) == 3) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); $param3: list.nth($params, 3); @include border-all($param1, $param2, $param3); } } @else if str.index($ms, 'adaptive-contrast(') == 1 { $param1: list.nth($params, 1); @include adaptive-contrast($param1); } @else if str.index($ms, 'bg(') == 1 { $param1: list.nth($params, 1); @include bg($param1); } @else if str.index($ms, 'color(') == 1 { $param1: list.nth($params, 1); @include color($param1); } @else if str.index($ms, 'gradient(') == 1 { @if (list.length($params) == 1) { $param1: list.nth($params, 1); @include gradient($param1); } @else if (list.length($params) == 2) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); @include gradient($param1, $param2); } } @else if str.index($ms, 'backdrop-filter(') == 1 { $param1: list.nth($params, 1); @include backdrop-filter($param1); } @else if str.index($ms, 'filter(') == 1 { $param1: list.nth($params, 1); @include filter($param1); } @else if str.index($ms, 'container-up(') == 1 { @if (list.length($params) == 1) { $param1: list.nth($params, 1); @include container-up($param1); } @else if (list.length($params) == 2) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); @include container-up($param1, $param2); } } @else if str.index($ms, 'container-down(') == 1 { @if (list.length($params) == 1) { $param1: list.nth($params, 1); @include container-down($param1); } @else if (list.length($params) == 2) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); @include container-down($param1, $param2); } } @else if str.index($ms, 'container-between(') == 1 { @if (list.length($params) == 1) { $param1: list.nth($params, 1); @include container-between($param1); } @else if (list.length($params) == 2) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); @include container-between($param1, $param2); } @else if (list.length($params) == 3) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); $param3: list.nth($params, 3); @include container-between($param1, $param2, $param3); } } @else if str.index($ms, 'container-only(') == 1 { @if (list.length($params) == 1) { $param1: list.nth($params, 1); @include container-only($param1); } @else if (list.length($params) == 2) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); @include container-only($param1, $param2); } } @else if str.index($ms, 'container-query(') == 1 { @if (list.length($params) == 1) { $param1: list.nth($params, 1); @include container-query($param1); } @else if (list.length($params) == 2) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); @include container-query($param1, $param2); } } @else if str.index($ms, 'container-type(') == 1 { $param1: list.nth($params, 1); @include container-type($param1); } @else if str.index($ms, 'container-name(') == 1 { $param1: list.nth($params, 1); @include container-name($param1); } @else if $ms == 'hide' { @include hide; } @else if $ms == 'block' { @include block; } @else if $ms == 'inline' { @include inline; } @else if $ms == 'inline-block' { @include inline-block; } @else if $ms == 'show' { @include show; } @else if $ms == 'd-tbl' { @include d-tbl; } @else if $ms == 'd-tbl-row' { @include d-tbl-row; } @else if $ms == 'd-tbl-cell' { @include d-tbl-cell; } @else if $ms == 'visible' { @include visible; } @else if $ms == 'invisible' { @include invisible; } @else if $ms == 'collapse' { @include collapse; } @else if $ms == 'contents' { @include contents; } @else if $ms == 'overflow-hidden' { @include overflow-hidden; } @else if $ms == 'overflow-visible' { @include overflow-visible; } @else if $ms == 'overflow-scroll' { @include overflow-scroll; } @else if $ms == 'overflow-auto' { @include overflow-auto; } @else if $ms == 'overflow-x-hidden' { @include overflow-x-hidden; } @else if $ms == 'overflow-y-hidden' { @include overflow-y-hidden; } @else if $ms == 'overflow-x-scroll' { @include overflow-x-scroll; } @else if $ms == 'overflow-y-scroll' { @include overflow-y-scroll; } @else if $ms == 'overflow-x-auto' { @include overflow-x-auto; } @else if $ms == 'overflow-y-auto' { @include overflow-y-auto; } @else if str.index($ms, 'media-up(') == 1 { $param1: list.nth($params, 1); @include media-up($param1); } @else if str.index($ms, 'media-down(') == 1 { $param1: list.nth($params, 1); @include media-down($param1); } @else if str.index($ms, 'media-between(') == 1 { @if (list.length($params) == 1) { $param1: list.nth($params, 1); @include media-between($param1); } @else if (list.length($params) == 2) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); @include media-between($param1, $param2); } } @else if str.index($ms, 'media-only(') == 1 { $param1: list.nth($params, 1); @include media-only($param1); } @else if $ms == 'touch' { @include touch; } @else if $ms == 'print' { @include print; } @else if str.index($ms, 'supports(') == 1 { $param1: list.nth($params, 1); @include supports($param1); } @else if $ms == 'prefers-dark' { @include prefers-dark; } @else if $ms == 'dark-mode' { @include dark-mode; } @else if $ms == 'landscape' { @include landscape; } @else if $ms == 'portrait' { @include portrait; } @else if str.index($ms, 'aspect-ratio(') == 1 { $param1: list.nth($params, 1); @include aspect-ratio($param1); } @else if $ms == 'dvh' { @include dvh; } @else if str.index($ms, 'safe-area-inset(') == 1 { @if (list.length($params) == 1) { $param1: list.nth($params, 1); @include safe-area-inset($param1); } @else if (list.length($params) == 2) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); @include safe-area-inset($param1, $param2); } } @else if $ms == 'reduced-motion' { @include reduced-motion; } @else if $ms == 'save-data' { @include save-data; } @else if $ms == 'fine-pointer' { @include fine-pointer; } @else if str.index($ms, 'display-mode(') == 1 { $param1: list.nth($params, 1); @include display-mode($param1); } @else if $ms == 'high-contrast' { @include high-contrast; } @else if str.index($ms, 'opacity(') == 1 { $param1: list.nth($params, 1); @include opacity($param1); } @else if $ms == 'static' { @include static; } @else if $ms == 'relative' { @include relative; } @else if $ms == 'absolute' { @include absolute; } @else if $ms == 'fixed' { @include fixed; } @else if $ms == 'sticky' { @include sticky; } @else if str.index($ms, 'top(') == 1 { $param1: list.nth($params, 1); @include top($param1); } @else if str.index($ms, 'right(') == 1 { $param1: list.nth($params, 1); @include right($param1); } @else if str.index($ms, 'bottom(') == 1 { $param1: list.nth($params, 1); @include bottom($param1); } @else if str.index($ms, 'left(') == 1 { $param1: list.nth($params, 1); @include left($param1); } @else if $ms == 'absolute-center' { @include absolute-center; } @else if str.index($ms, 'shadow-base(') == 1 { @if (list.length($params) == 1) { $param1: list.nth($params, 1); @include shadow-base($param1); } @else if (list.length($params) == 2) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); @include shadow-base($param1, $param2); } @else if (list.length($params) == 3) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); $param3: list.nth($params, 3); @include shadow-base($param1, $param2, $param3); } @else if (list.length($params) == 4) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); $param3: list.nth($params, 3); $param4: list.nth($params, 4); @include shadow-base($param1, $param2, $param3, $param4); } @else if (list.length($params) == 5) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); $param3: list.nth($params, 3); $param4: list.nth($params, 4); $param5: list.nth($params, 5); @include shadow-base($param1, $param2, $param3, $param4, $param5); } } @else if str.index($ms, 'shadow(') == 1 { @if (list.length($params) == 1) { $param1: list.nth($params, 1); @include shadow($param1); } @else if (list.length($params) == 2) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); @include shadow($param1, $param2); } } @else if str.index($ms, 'shadow-inset(') == 1 { @if (list.length($params) == 1) { $param1: list.nth($params, 1); @include shadow-inset($param1); } @else if (list.length($params) == 2) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); @include shadow-inset($param1, $param2); } } @else if str.index($ms, 'elevation(') == 1 { $param1: list.nth($params, 1); @include elevation($param1); } @else if str.index($ms, 'width(') == 1 { $param1: list.nth($params, 1); @include width($param1); } @else if str.index($ms, 'height(') == 1 { $param1: list.nth($params, 1); @include height($param1); } @else if str.index($ms, 'min-width(') == 1 { $param1: list.nth($params, 1); @include min-width($param1); } @else if str.index($ms, 'min-height(') == 1 { $param1: list.nth($params, 1); @include min-height($param1); } @else if str.index($ms, 'max-width(') == 1 { $param1: list.nth($params, 1); @include max-width($param1); } @else if str.index($ms, 'max-height(') == 1 { $param1: list.nth($params, 1); @include max-height($param1); } @else if str.index($ms, 'width-percent(') == 1 { $param1: list.nth($params, 1); @include width-percent($param1); } @else if str.index($ms, 'height-percent(') == 1 { $param1: list.nth($params, 1); @include height-percent($param1); } @else if str.index($ms, 'min-width-percent(') == 1 { $param1: list.nth($params, 1); @include min-width-percent($param1); } @else if str.index($ms, 'min-height-percent(') == 1 { $param1: list.nth($params, 1); @include min-height-percent($param1); } @else if str.index($ms, 'max-width-percent(') == 1 { $param1: list.nth($params, 1); @include max-width-percent($param1); } @else if str.index($ms, 'max-height-percent(') == 1 { $param1: list.nth($params, 1); @include max-height-percent($param1); } @else if $ms == 'w-auto' { @include w-auto; } @else if $ms == 'w-full' { @include w-full; } @else if $ms == 'h-auto' { @include h-auto; } @else if $ms == 'h-full' { @include h-full; } @else if $ms == 'min-w-full' { @include min-w-full; } @else if $ms == 'max-w-full' { @include max-w-full; } @else if $ms == 'min-h-full' { @include min-h-full; } @else if $ms == 'max-h-full' { @include max-h-full; } @else if $ms == 'w-screen' { @include w-screen; } @else if $ms == 'h-screen' { @include h-screen; } @else if str.index($ms, 'p(') == 1 { $param1: list.nth($params, 1); @include p($param1); } @else if str.index($ms, 'px(') == 1 { $param1: list.nth($params, 1); @include px($param1); } @else if str.index($ms, 'py(') == 1 { $param1: list.nth($params, 1); @include py($param1); } @else if str.index($ms, 'pt(') == 1 { $param1: list.nth($params, 1); @include pt($param1); } @else if str.index($ms, 'pr(') == 1 { $param1: list.nth($params, 1); @include pr($param1); } @else if str.index($ms, 'pb(') == 1 { $param1: list.nth($params, 1); @include pb($param1); } @else if str.index($ms, 'pl(') == 1 { $param1: list.nth($params, 1); @include pl($param1); } @else if str.index($ms, 'm(') == 1 { $param1: list.nth($params, 1); @include m($param1); } @else if str.index($ms, 'mx(') == 1 { $param1: list.nth($params, 1); @include mx($param1); } @else if str.index($ms, 'my(') == 1 { $param1: list.nth($params, 1); @include my($param1); } @else if str.index($ms, 'mt(') == 1 { $param1: list.nth($params, 1); @include mt($param1); } @else if str.index($ms, 'mr(') == 1 { $param1: list.nth($params, 1); @include mr($param1); } @else if str.index($ms, 'mb(') == 1 { $param1: list.nth($params, 1); @include mb($param1); } @else if str.index($ms, 'ml(') == 1 { $param1: list.nth($params, 1); @include ml($param1); } @else if $ms == 'ml-auto' { @include ml-auto; } @else if $ms == 'mr-auto' { @include mr-auto; } @else if $ms == 'mx-auto' { @include mx-auto; } @else if str.index($ms, 'space-y(') == 1 { $param1: list.nth($params, 1); @include space-y($param1); } @else if str.index($ms, 'space-x(') == 1 { $param1: list.nth($params, 1); @include space-x($param1); } @else if str.index($ms, 'gap(') == 1 { $param1: list.nth($params, 1); @include gap($param1); } @else if str.index($ms, 'gap-x(') == 1 { $param1: list.nth($params, 1); @include gap-x($param1); } @else if str.index($ms, 'gap-y(') == 1 { $param1: list.nth($params, 1); @include gap-y($param1); } @else if str.index($ms, 'translate-x(') == 1 { $param1: list.nth($params, 1); @include translate-x($param1); } @else if str.index($ms, 'translate-y(') == 1 { $param1: list.nth($params, 1); @include translate-y($param1); } @else if str.index($ms, 'translate-z(') == 1 { $param1: list.nth($params, 1); @include translate-z($param1); } @else if str.index($ms, 'translate(') == 1 { @if (list.length($params) == 1) { $param1: list.nth($params, 1); @include translate($param1); } @else if (list.length($params) == 2) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); @include translate($param1, $param2); } } @else if str.index($ms, 'scale-x(') == 1 { $param1: list.nth($params, 1); @include scale-x($param1); } @else if str.index($ms, 'scale-y(') == 1 { $param1: list.nth($params, 1); @include scale-y($param1); } @else if str.index($ms, 'scale(') == 1 { $param1: list.nth($params, 1); @include scale($param1); } @else if str.index($ms, 'rotate(') == 1 { $param1: list.nth($params, 1); @include rotate($param1); } @else if str.index($ms, 'skew-x(') == 1 { $param1: list.nth($params, 1); @include skew-x($param1); } @else if str.index($ms, 'skew-y(') == 1 { $param1: list.nth($params, 1); @include skew-y($param1); } @else if str.index($ms, 'origin(') == 1 { $param1: list.nth($params, 1); @include origin($param1); } @else if $ms == 'transition' { @include transition; } @else if $ms == 'transition-none' { @include transition-none; } @else if $ms == 'transition-all' { @include transition-all; } @else if $ms == 'transition-colors' { @include transition-colors; } @else if $ms == 'transition-opacity' { @include transition-opacity; } @else if $ms == 'transition-shadow' { @include transition-shadow; } @else if $ms == 'transition-transform' { @include transition-transform; } @else if str.index($ms, 'duration(') == 1 { $param1: list.nth($params, 1); @include duration($param1); } @else if $ms == 'ease-linear' { @include ease-linear; } @else if $ms == 'ease-in' { @include ease-in; } @else if $ms == 'ease-out' { @include ease-out; } @else if $ms == 'ease-in-out' { @include ease-in-out; } @else if str.index($ms, 'delay(') == 1 { $param1: list.nth($params, 1); @include delay($param1); } @else if str.index($ms, 'text-size(') == 1 { $param1: list.nth($params, 1); @include text-size($param1); } @else if $ms == 'font-thin' { @include font-thin; } @else if $ms == 'font-extralight' { @include font-extralight; } @else if $ms == 'font-light' { @include font-light; } @else if $ms == 'font-normal' { @include font-normal; } @else if $ms == 'font-medium' { @include font-medium; } @else if $ms == 'font-semibold' { @include font-semibold; } @else if $ms == 'font-bold' { @include font-bold; } @else if $ms == 'font-extrabold' { @include font-extrabold; } @else if $ms == 'font-black' { @include font-black; } @else if str.index($ms, 'leading(') == 1 { $param1: list.nth($params, 1); @include leading($param1); } @else if $ms == 'leading-none' { @include leading-none; } @else if $ms == 'leading-tight' { @include leading-tight; } @else if $ms == 'leading-snug' { @include leading-snug; } @else if $ms == 'leading-normal' { @include leading-normal; } @else if $ms == 'leading-relaxed' { @include leading-relaxed; } @else if $ms == 'leading-loose' { @include leading-loose; } @else if $ms == 'text-left' { @include text-left; } @else if $ms == 'text-center' { @include text-center; } @else if $ms == 'text-right' { @include text-right; } @else if $ms == 'text-justify' { @include text-justify; } @else if $ms == 'uppercase' { @include uppercase; } @else if $ms == 'lowercase' { @include lowercase; } @else if $ms == 'capitalize' { @include capitalize; } @else if $ms == 'normal-case' { @include normal-case; } @else if $ms == 'italic' { @include italic; } @else if $ms == 'not-italic' { @include not-italic; } @else if $ms == 'underline' { @include underline; } @else if $ms == 'line-through' { @include line-through; } @else if $ms == 'no-underline' { @include no-underline; } @else if $ms == 'truncate' { @include truncate; } @else if str.index($ms, 'truncate-lines(') == 1 { $param1: list.nth($params, 1); @include truncate-lines($param1); } @else if $ms == 'break-normal' { @include break-normal; } @else if $ms == 'break-words' { @include break-words; } @else if $ms == 'break-all' { @include break-all; } @else if $ms == 'whitespace-normal' { @include whitespace-normal; } @else if $ms == 'whitespace-nowrap' { @include whitespace-nowrap; } @else if $ms == 'whitespace-pre' { @include whitespace-pre; } @else if $ms == 'whitespace-pre-line' { @include whitespace-pre-line; } @else if $ms == 'whitespace-pre-wrap' { @include whitespace-pre-wrap; } @else if str.index($ms, 'tracking(') == 1 { $param1: list.nth($params, 1); @include tracking($param1); } @else if $ms == 'tracking-tighter' { @include tracking-tighter; } @else if $ms == 'tracking-tight' { @include tracking-tight; } @else if $ms == 'tracking-normal' { @include tracking-normal; } @else if $ms == 'tracking-wide' { @include tracking-wide; } @else if $ms == 'tracking-wider' { @include tracking-wider; } @else if $ms == 'tracking-widest' { @include tracking-widest; } @else if str.index($ms, 'responsive-typography(') == 1 { $param1: list.nth($params, 1); @include responsive-typography($param1); } }

package/src/styles/themes/_theme.scss

@@ -219,13 +219,13 @@
 .glass-effect {
   @include COL.backdrop-filter(blur(8px));
 
-  background-color: rgb(255 255 255 / 10%);
-  border: 1px solid rgb(255 255 255 / 20%);
+  background-color: rgb(255 255 255 / 10%); 
+  border: 1px solid rgb(255 255 255 / 20%); 
 }
 
 .frosted-glass {
   @include COL.backdrop-filter(blur(15px));
-  
-  background-color: rgb(255 255 255 / 70%);
-  border: 1px solid rgb(255 255 255 / 80%);
+
+  background-color: rgb(255 255 255 / 70%); 
+  border: 1px solid rgb(255 255 255 / 80%); 
 }

package/src/styles/utilities/_alignment.scss

@@ -1,9 +1,9 @@
 @use '../abstracts'  as VAR;
 
-@mixin align-baseline { vertical-align: baseline; }
-@mixin align-top { vertical-align: top; }
-@mixin align-middle { vertical-align: middle; }
-@mixin align-bottom { vertical-align: bottom; }
+@mixin align-baseline { & { vertical-align: baseline; } }
+@mixin align-top { & { vertical-align: top; } }
+@mixin align-middle { & { vertical-align: middle; } }
+@mixin align-bottom { & { vertical-align: bottom; } }
 
 @if VAR.$generate-utility-classes {
 .align-baseline { @include align-baseline; }