✨ feat(flex.scss): Add flex-wrap classes

Spiderpig86 · Feb 8, 2022 · 7875c39 · 7875c39
1 parent 144f1b6
commit 7875c39
Show file tree

Hide file tree

Showing 6 changed files with 166 additions and 12 deletions.
diff --git a/dist/cirrus-core.css b/dist/cirrus-core.css
@@ -13026,6 +13026,78 @@ ul .divider::after {
     flex-shrink: 1 !important;
   }
 }
+.u-flex-wrap {
+  flex-wrap: wrap !important;
+}
+
+.u-flex-wrap-reverse {
+  flex-wrap: wrap-reverse !important;
+}
+
+.u-flex-nowrap {
+  flex-wrap: nowrap !important;
+}
+
+@media screen and (min-width: 640px) {
+  .u-flex-wrap-sm {
+    flex-wrap: wrap !important;
+  }
+}
+@media screen and (min-width: 640px) {
+  .u-flex-wrap-reverse-sm {
+    flex-wrap: wrap-reverse !important;
+  }
+}
+@media screen and (min-width: 640px) {
+  .u-flex-nowrap-sm {
+    flex-wrap: nowrap !important;
+  }
+}
+@media screen and (min-width: 768px) {
+  .u-flex-wrap-md {
+    flex-wrap: wrap !important;
+  }
+}
+@media screen and (min-width: 768px) {
+  .u-flex-wrap-reverse-md {
+    flex-wrap: wrap-reverse !important;
+  }
+}
+@media screen and (min-width: 768px) {
+  .u-flex-nowrap-md {
+    flex-wrap: nowrap !important;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .u-flex-wrap-lg {
+    flex-wrap: wrap !important;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .u-flex-wrap-reverse-lg {
+    flex-wrap: wrap-reverse !important;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .u-flex-nowrap-lg {
+    flex-wrap: nowrap !important;
+  }
+}
+@media screen and (min-width: 1280px) {
+  .u-flex-wrap-xl {
+    flex-wrap: wrap !important;
+  }
+}
+@media screen and (min-width: 1280px) {
+  .u-flex-wrap-reverse-xl {
+    flex-wrap: wrap-reverse !important;
+  }
+}
+@media screen and (min-width: 1280px) {
+  .u-flex-nowrap-xl {
+    flex-wrap: nowrap !important;
+  }
+}
 .u-gap-0 {
   gap: 0rem !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
@@ -13027,6 +13027,78 @@ ul .divider::after {
     flex-shrink: 1 !important;
   }
 }
+.u-flex-wrap {
+  flex-wrap: wrap !important;
+}
+
+.u-flex-wrap-reverse {
+  flex-wrap: wrap-reverse !important;
+}
+
+.u-flex-nowrap {
+  flex-wrap: nowrap !important;
+}
+
+@media screen and (min-width: 640px) {
+  .u-flex-wrap-sm {
+    flex-wrap: wrap !important;
+  }
+}
+@media screen and (min-width: 640px) {
+  .u-flex-wrap-reverse-sm {
+    flex-wrap: wrap-reverse !important;
+  }
+}
+@media screen and (min-width: 640px) {
+  .u-flex-nowrap-sm {
+    flex-wrap: nowrap !important;
+  }
+}
+@media screen and (min-width: 768px) {
+  .u-flex-wrap-md {
+    flex-wrap: wrap !important;
+  }
+}
+@media screen and (min-width: 768px) {
+  .u-flex-wrap-reverse-md {
+    flex-wrap: wrap-reverse !important;
+  }
+}
+@media screen and (min-width: 768px) {
+  .u-flex-nowrap-md {
+    flex-wrap: nowrap !important;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .u-flex-wrap-lg {
+    flex-wrap: wrap !important;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .u-flex-wrap-reverse-lg {
+    flex-wrap: wrap-reverse !important;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .u-flex-nowrap-lg {
+    flex-wrap: nowrap !important;
+  }
+}
+@media screen and (min-width: 1280px) {
+  .u-flex-wrap-xl {
+    flex-wrap: wrap !important;
+  }
+}
+@media screen and (min-width: 1280px) {
+  .u-flex-wrap-reverse-xl {
+    flex-wrap: wrap-reverse !important;
+  }
+}
+@media screen and (min-width: 1280px) {
+  .u-flex-nowrap-xl {
+    flex-wrap: nowrap !important;
+  }
+}
 .u-gap-0 {
   gap: 0rem !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
@@ -62,16 +62,17 @@ $default-config: (
         // Please define all colors using hex
         // Omitting some colors may break Cirrus builds
         colors: (
-            pink: (),
-            red: (),
-            orange: (),
-            yellow: (),
-            green: (),
-            teal: (),
-            blue: (),
-            indigo: (),
-            purple: (),
-            gray: (),
+            // Note: The quotes matter!
+            'pink': (),
+            'red': (),
+            'orange': (),
+            'yellow': (),
+            'green': (),
+            'teal': (),
+            'blue': (),
+            'indigo': (),
+            'purple': (),
+            'gray': (),
         ),
         fonts: (
             sizes: (

diff --git a/src/utils/flex.scss b/src/utils/flex.scss
@@ -7,6 +7,7 @@ $generate-utility: should-generate-classes($FLEX);
     $justify-content: flex-start, center, flex-end, space-between, space-around, space-evenly;
     $align-items: stretch, flex-start, center, flex-end, baseline;
     $flex-grow: 0, 1;
+    $flex-wrap: wrap, wrap-reverse, nowrap;
 
     @include generate-classes-for-viewport(
                     $flex-directions,
@@ -41,6 +42,14 @@ $generate-utility: should-generate-classes($FLEX);
                     'u#{delimitize('flex-shrink')}',
             $generate-viewports: #{get-viewport-flag($FLEX)}
     );
+
+    // Flex wrap
+    @include generate-classes-for-viewport(
+                    $flex-wrap,
+                    'flex-wrap',
+                    'u#{delimitize('flex')}',
+            $generate-viewports: #{get-viewport-flag($FLEX)}
+    );
 }