✨ feat(_config.scss): Add 25p, 75p, and negative versions of absolute…

… classes
Spiderpig86 · Oct 10, 2022 · 4fc644d · 4fc644d
1 parent 06cb0ee
commit 4fc644d
Show file tree

Hide file tree

Showing 9 changed files with 640 additions and 122 deletions.
diff --git a/dist/cirrus-all.css b/dist/cirrus-all.css
diff --git a/dist/cirrus-all.min.css b/dist/cirrus-all.min.css
diff --git a/dist/cirrus-core.css b/dist/cirrus-core.css
@@ -12374,18 +12374,34 @@ ul .divider::after {
   top: 0 !important;
 }
 
-.u-top-50p {
-  top: 50% !important;
+.u-top-25p {
+  top: 25% !important;
 }
 
-.u-top-100p {
-  top: 100% !important;
+.u-top-n25p {
+  top: -25% !important;
+}
+
+.u-top-50p {
+  top: 50% !important;
 }
 
 .u-top-n50p {
   top: -50% !important;
 }
 
+.u-top-75p {
+  top: 75% !important;
+}
+
+.u-top-n75p {
+  top: -75% !important;
+}
+
+.u-top-100p {
+  top: 100% !important;
+}
+
 .u-top-n100p {
   top: -100% !important;
 }
@@ -12398,18 +12414,34 @@ ul .divider::after {
   left: 0 !important;
 }
 
-.u-left-50p {
-  left: 50% !important;
+.u-left-25p {
+  left: 25% !important;
 }
 
-.u-left-100p {
-  left: 100% !important;
+.u-left-n25p {
+  left: -25% !important;
+}
+
+.u-left-50p {
+  left: 50% !important;
 }
 
 .u-left-n50p {
   left: -50% !important;
 }
 
+.u-left-75p {
+  left: 75% !important;
+}
+
+.u-left-n75p {
+  left: -75% !important;
+}
+
+.u-left-100p {
+  left: 100% !important;
+}
+
 .u-left-n100p {
   left: -100% !important;
 }
@@ -12422,18 +12454,34 @@ ul .divider::after {
   right: 0 !important;
 }
 
-.u-right-50p {
-  right: 50% !important;
+.u-right-25p {
+  right: 25% !important;
 }
 
-.u-right-100p {
-  right: 100% !important;
+.u-right-n25p {
+  right: -25% !important;
+}
+
+.u-right-50p {
+  right: 50% !important;
 }
 
 .u-right-n50p {
   right: -50% !important;
 }
 
+.u-right-75p {
+  right: 75% !important;
+}
+
+.u-right-n75p {
+  right: -75% !important;
+}
+
+.u-right-100p {
+  right: 100% !important;
+}
+
 .u-right-n100p {
   right: -100% !important;
 }
@@ -12446,18 +12494,34 @@ ul .divider::after {
   bottom: 0 !important;
 }
 
-.u-bottom-50p {
-  bottom: 50% !important;
+.u-bottom-25p {
+  bottom: 25% !important;
 }
 
-.u-bottom-100p {
-  bottom: 100% !important;
+.u-bottom-n25p {
+  bottom: -25% !important;
+}
+
+.u-bottom-50p {
+  bottom: 50% !important;
 }
 
 .u-bottom-n50p {
   bottom: -50% !important;
 }
 
+.u-bottom-75p {
+  bottom: 75% !important;
+}
+
+.u-bottom-n75p {
+  bottom: -75% !important;
+}
+
+.u-bottom-100p {
+  bottom: 100% !important;
+}
+
 .u-bottom-n100p {
   bottom: -100% !important;
 }

diff --git a/dist/cirrus-core.min.css b/dist/cirrus-core.min.css
diff --git a/dist/cirrus.css b/dist/cirrus.css
@@ -12375,18 +12375,34 @@ ul .divider::after {
   top: 0 !important;
 }
 
-.u-top-50p {
-  top: 50% !important;
+.u-top-25p {
+  top: 25% !important;
 }
 
-.u-top-100p {
-  top: 100% !important;
+.u-top-n25p {
+  top: -25% !important;
+}
+
+.u-top-50p {
+  top: 50% !important;
 }
 
 .u-top-n50p {
   top: -50% !important;
 }
 
+.u-top-75p {
+  top: 75% !important;
+}
+
+.u-top-n75p {
+  top: -75% !important;
+}
+
+.u-top-100p {
+  top: 100% !important;
+}
+
 .u-top-n100p {
   top: -100% !important;
 }
@@ -12399,18 +12415,34 @@ ul .divider::after {
   left: 0 !important;
 }
 
-.u-left-50p {
-  left: 50% !important;
+.u-left-25p {
+  left: 25% !important;
 }
 
-.u-left-100p {
-  left: 100% !important;
+.u-left-n25p {
+  left: -25% !important;
+}
+
+.u-left-50p {
+  left: 50% !important;
 }
 
 .u-left-n50p {
   left: -50% !important;
 }
 
+.u-left-75p {
+  left: 75% !important;
+}
+
+.u-left-n75p {
+  left: -75% !important;
+}
+
+.u-left-100p {
+  left: 100% !important;
+}
+
 .u-left-n100p {
   left: -100% !important;
 }
@@ -12423,18 +12455,34 @@ ul .divider::after {
   right: 0 !important;
 }
 
-.u-right-50p {
-  right: 50% !important;
+.u-right-25p {
+  right: 25% !important;
 }
 
-.u-right-100p {
-  right: 100% !important;
+.u-right-n25p {
+  right: -25% !important;
+}
+
+.u-right-50p {
+  right: 50% !important;
 }
 
 .u-right-n50p {
   right: -50% !important;
 }
 
+.u-right-75p {
+  right: 75% !important;
+}
+
+.u-right-n75p {
+  right: -75% !important;
+}
+
+.u-right-100p {
+  right: 100% !important;
+}
+
 .u-right-n100p {
   right: -100% !important;
 }
@@ -12447,18 +12495,34 @@ ul .divider::after {
   bottom: 0 !important;
 }
 
-.u-bottom-50p {
-  bottom: 50% !important;
+.u-bottom-25p {
+  bottom: 25% !important;
 }
 
-.u-bottom-100p {
-  bottom: 100% !important;
+.u-bottom-n25p {
+  bottom: -25% !important;
+}
+
+.u-bottom-50p {
+  bottom: 50% !important;
 }
 
 .u-bottom-n50p {
   bottom: -50% !important;
 }
 
+.u-bottom-75p {
+  bottom: 75% !important;
+}
+
+.u-bottom-n75p {
+  bottom: -75% !important;
+}
+
+.u-bottom-100p {
+  bottom: 100% !important;
+}
+
 .u-bottom-n100p {
   bottom: -100% !important;
 }

diff --git a/dist/cirrus.min.css b/dist/cirrus.min.css
diff --git a/src/internal/_config.scss b/src/internal/_config.scss
@@ -611,14 +611,12 @@ $default-config: (
         ),
     // UTILITIES //
     absolute:
-        (
+        map.merge((
             auto: auto,
             0: 0,
-            50p: 50%,
-            100p: 100%,
-            n50p: -50%,
-            n100p: -100%,
-        ),
+        ), (
+            functions.get-negative-value-map(defaults.$default-quartile-percentages)
+        )),
     blurs: (
         'none': (
             --cirrus-blur: blur(0),

diff --git a/src/internal/_defaults.scss b/src/internal/_defaults.scss
@@ -27,3 +27,10 @@ $default-breakpoints: (
     constants.$lg: 1280px,
     constants.$xl: 1536px,
 );
+
+$default-quartile-percentages: (
+    25p: 25%,
+    50p: 50%,
+    75p: 75%,
+    100p: 100%,
+);
diff --git a/src/internal/_functions.scss b/src/internal/_functions.scss
@@ -1,6 +1,7 @@
 @use 'sass:string';
 @use 'sass:list';
 @use 'sass:map';
+@use 'sass:math';
 @use 'sass-true/sass/config/throw';
 @use 'sass-true/sass/true' as *;
 
@@ -141,7 +142,7 @@ $DELIMETER: '-';
 /// @return {Number} - Unitless number
 @function strip-unit($number) {
     @if type-of($number) == 'number' and not unitless($number) {
-      @return $number / ($number * 0 + 1);
+      @return math.div($number, ($number * 0 + 1));
     }
 
     @return $number;