Fix u-sizeFit overriding responsive versions

Fixes #39
suitcss · Nov 7, 2017 · 5a9b506 · 5a9b506
1 parent d501662
commit 5a9b506
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 0 deletions.
diff --git a/lib/size-lg.css b/lib/size-lg.css
@@ -160,6 +160,7 @@
 
   .u-lg-sizeFit {
     flex-basis: auto !important;
+    width: auto !important;
   }
 
   /**

diff --git a/lib/size-md.css b/lib/size-md.css
@@ -162,6 +162,7 @@
 
   .u-md-sizeFit {
     flex-basis: auto !important;
+    width: auto !important;
   }
 
   /**

diff --git a/lib/size-sm.css b/lib/size-sm.css
@@ -160,6 +160,7 @@
 
   .u-sm-sizeFit {
     flex-basis: auto !important;
+    width: auto !important;
   }
 
   /**

diff --git a/test/index.html b/test/index.html
@@ -49,6 +49,30 @@ <h3 class="Test-it">shrink-wraps (on left) / fills remaining space</h3>
     </div>
   </div>
 
+  <h2 class="Test-describe">.u-[size]-sizeFit</h2>
+  <h3 class="Test-it">overrides u-sizeFit correctly</h3>
+  <div class="Test-run">
+    <div class="u-flex">
+      <div class="u-size1of2 u-sm-sizeFit u-highlight">
+        should sizeFit at sm-viewport
+      </div>
+    </div>
+  </div>
+  <div class="Test-run">
+    <div class="u-flex">
+      <div class="u-size1of2 u-md-sizeFit u-highlight">
+        should sizeFit at md-viewport
+      </div>
+    </div>
+  </div>
+  <div class="Test-run">
+    <div class="u-flex">
+      <div class="u-size1of2 u-lg-sizeFit u-highlight">
+        should sizeFit at lg-viewport
+      </div>
+    </div>
+  </div>
+
   <h2 class="Test-describe">.u-sizeFill</h2>
   <h3 class="Test-it">distributes space evenly</h3>
   <div class="Test-run" style="margin-bottom: 15px">
-Original file line number
+Diff line change
@@ Expand Up / @@ -160,6 +160,7 @@ @@
       .u-lg-sizeFit {
         flex-basis: auto !important;
+        width: auto !important;
       }
       /**
@@ Expand Down @@