✨ feat(misc.scss): Refactored more util classes to use generate-class…

…es-for-viewport, but with generation disabled - BREAKING: u-hide-overflow -> u-overflow-hidden
Spiderpig86 · May 30, 2021 · 5774e4b · 5774e4b
1 parent 1b6b997
commit 5774e4b
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 57 deletions.
diff --git a/dist/cirrus.css b/dist/cirrus.css
@@ -7895,13 +7895,44 @@ a.tag:hover {
   .u-items-baseline-xl {
     align-items: baseline !important; } }
 
+/*
+  Functions
+*/
+/*
+    Converts a given hex value to RGB.
+*/
+/* Spacing */
+/* Fonts */
+/* Grid Count */
+/* Grid Percents */
+/* Tab Sizes */
+/* Media Queries */
+/* Smaller than the defined pixels are the dimensions for that range */
 /* UTILS */
 /* Utility classes to help solve some very annoying issues */
 .u-pull-left {
-  float: left !important; }
+  float: "left" !important; }
 
 .u-pull-right {
-  float: right !important; }
+  float: "right" !important; }
+
+.u-text-justify {
+  text-align: "justify" !important; }
+
+.u-text-left {
+  text-align: "left" !important; }
+
+.u-text-right {
+  text-align: "right" !important; }
+
+.u-text-center {
+  text-align: "center" !important; }
+
+.u-overflow-auto {
+  overflow: "auto" !important; }
+
+.u-overflow-hidden {
+  overflow: "hidden" !important; }
 
 .u-text-ellipsis {
   text-overflow: ellipsis;
@@ -7913,18 +7944,6 @@ a.tag:hover {
   word-break: break-word;
   word-wrap: break-word; }
 
-.u-text-justify {
-  text-align: justify !important; }
-
-.u-text-center {
-  text-align: center !important; }
-
-.u-text-left {
-  text-align: left !important; }
-
-.u-text-right {
-  text-align: right !important; }
-
 /* Center element - best used for hero bodies or text */
 .u-center {
   display: -webkit-box;
@@ -7956,12 +7975,6 @@ a.tag:hover {
   top: 0;
   position: absolute; }
 
-.u-hide-overflow {
-  overflow: hidden !important; }
-
-.u-overflow-auto {
-  overflow: auto !important; }
-
 .u-disabled {
   cursor: not-allowed !important;
   pointer-events: none !important; }

diff --git a/dist/cirrus.min.css b/dist/cirrus.min.css
diff --git a/helpers/_functions.scss b/helpers/_functions.scss
@@ -8,3 +8,7 @@
 @function hex-to-rgb($hex) {
   @return red($hex), green($hex), blue($hex);
 }
+
+@function delimitize($name) {
+  @return '-' + $name + '-'; // Move '-' to constant
+}
diff --git a/helpers/_size.scss b/helpers/_size.scss
@@ -74,7 +74,7 @@ $breakpoint-pairs: (
 }
 
 // TODO: Once we move to dart-sass, look into using content with variables
-@mixin generate-classes-for-viewport($classes, $property, $prefix: '-') {
+@mixin generate-classes-for-viewport($classes, $property, $prefix: '-', $generate-viewports: true) {
     // We build in this order since we want larger viewports to have higher precedence
     // so we can write classes like u-none u-block-md u-none-lg
 
@@ -84,11 +84,13 @@ $breakpoint-pairs: (
         }
     }
 
-    @each $suffix, $limit in $breakpoint-pairs {
-        @each $class in $classes {
-            @include screen-above($limit) {
-                .u#{$prefix}#{$class}-#{$suffix} {
-                    #{$property}: $class !important;
+    @if $generate-viewports {
+        @each $suffix, $limit in $breakpoint-pairs {
+            @each $class in $classes {
+                @include screen-above($limit) {
+                    .u#{$prefix}#{$class}-#{$suffix} {
+                        #{$property}: $class !important;
+                    }
                 }
             }
         }

diff --git a/src/core/utils/misc.scss b/src/core/utils/misc.scss
@@ -1,13 +1,18 @@
+@import '../../../helpers/_functions';
+@import '../../../helpers/_size';
+
 /* UTILS */
 /* Utility classes to help solve some very annoying issues */
 
-.u-pull-left {
-    float: left !important;
-}
+$pull-directions: ('left', 'right');
+@include generate-classes-for-viewport($pull-directions, 'float', delimitize('pull'), false);
 
-.u-pull-right {
-    float: right !important;
-}
+$text-directions: ('justify', 'left', 'right', 'center');
+@include generate-classes-for-viewport($text-directions, 'text-align', delimitize('text'), false);
+
+$overflow: ('auto', 'hidden');
+@include generate-classes-for-viewport($overflow, 'overflow', delimitize('overflow'), false);
+// NOTE: We have now changed u-hide-overflow to u-overflow-hidden
 
 .u-text-ellipsis {
     text-overflow: ellipsis;
@@ -21,22 +26,6 @@
     word-wrap: break-word;
 }
 
-.u-text-justify {
-    text-align: justify !important;
-}
-
-.u-text-center {
-    text-align: center !important;
-}
-
-.u-text-left {
-    text-align: left !important;
-}
-
-.u-text-right {
-    text-align: right !important;
-}
-
 /* Center element - best used for hero bodies or text */
 .u-center {
     display: -webkit-box;
@@ -71,14 +60,6 @@
     position: absolute;
 }
 
-.u-hide-overflow {
-    overflow: hidden !important;
-}
-
-.u-overflow-auto {
-    overflow: auto !important;
-}
-
 .u-disabled {
     cursor: not-allowed !important;
     pointer-events: none !important;