fix(container): respect fluid container on mobile screen

A fluid container is supposed to always have 100% width without any margin. This is so far working until the screen gets < 768px, then a margin appears. This PR makes sure a fluid is always respected. While we are at it, this PR also removed the !important from the container settings and used class-specificity levels instead where necessary. Closes #900
fomantic · Jul 26, 2019 · e3a6bc3 · e3a6bc3
1 parent d772e55
commit e3a6bc3
Showing 1 changed file with 39 additions and 39 deletions.
diff --git a/src/definitions/elements/container.less b/src/definitions/elements/container.less
@@ -24,78 +24,78 @@
 /* All Sizes */
 .ui.container {
   display: block;
-  max-width: @maxWidth !important;
+  max-width: @maxWidth;
 }
 
 /* Mobile */
 @media only screen and (max-width: @largestMobileScreen) {
-  .ui.container {
-    width: @mobileWidth !important;
-    margin-left: @mobileGutter !important;
-    margin-right: @mobileGutter !important;
+  .ui.ui.ui.container:not(.fluid) {
+    width: @mobileWidth;
+    margin-left: @mobileGutter;
+    margin-right: @mobileGutter;
   }
-  .ui.grid.container {
-    width: @mobileGridWidth !important;
+  .ui.ui.grid.container {
+    width: @mobileGridWidth;
   }
-  .ui.relaxed.grid.container {
-    width: @mobileRelaxedGridWidth !important;
+  .ui.ui.relaxed.grid.container {
+    width: @mobileRelaxedGridWidth;
   }
-  .ui.very.relaxed.grid.container {
-    width: @mobileVeryRelaxedGridWidth !important;
+  .ui.ui.very.relaxed.grid.container {
+    width: @mobileVeryRelaxedGridWidth;
   }
 }
 
 /* Tablet */
 @media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
-  .ui.container {
+  .ui.ui.ui.container:not(.fluid) {
     width: @tabletWidth;
-    margin-left: @tabletGutter !important;
-    margin-right: @tabletGutter !important;
+    margin-left: @tabletGutter;
+    margin-right: @tabletGutter;
   }
-  .ui.grid.container {
-    width: @tabletGridWidth !important;
+  .ui.ui.grid.container {
+    width: @tabletGridWidth;
   }
-  .ui.relaxed.grid.container {
-    width: @tabletRelaxedGridWidth !important;
+  .ui.ui.relaxed.grid.container {
+    width: @tabletRelaxedGridWidth;
   }
-  .ui.very.relaxed.grid.container {
-    width: @tabletVeryRelaxedGridWidth !important;
+  .ui.ui.very.relaxed.grid.container {
+    width: @tabletVeryRelaxedGridWidth;
   }
 }
 
 /* Small Monitor */
 @media only screen and (min-width: @computerBreakpoint) and (max-width: @largestSmallMonitor) {
-  .ui.container {
+  .ui.ui.ui.container:not(.fluid) {
     width: @computerWidth;
-    margin-left: @computerGutter !important;
-    margin-right: @computerGutter !important;
+    margin-left: @computerGutter;
+    margin-right: @computerGutter;
   }
-  .ui.grid.container {
-    width: @computerGridWidth !important;
+  .ui.ui.grid.container {
+    width: @computerGridWidth;
   }
-  .ui.relaxed.grid.container {
-    width: @computerRelaxedGridWidth !important;
+  .ui.ui.relaxed.grid.container {
+    width: @computerRelaxedGridWidth;
   }
-  .ui.very.relaxed.grid.container {
-    width: @computerVeryRelaxedGridWidth !important;
+  .ui.ui.very.relaxed.grid.container {
+    width: @computerVeryRelaxedGridWidth;
   }
 }
 
 /* Large Monitor */
 @media only screen and (min-width: @largeMonitorBreakpoint) {
-  .ui.container {
+  .ui.ui.ui.container:not(.fluid) {
     width: @largeMonitorWidth;
-    margin-left: @largeMonitorGutter !important;
-    margin-right: @largeMonitorGutter !important;
+    margin-left: @largeMonitorGutter;
+    margin-right: @largeMonitorGutter;
   }
-  .ui.grid.container {
-    width: @largeMonitorGridWidth !important;
+  .ui.ui.grid.container {
+    width: @largeMonitorGridWidth;
   }
-  .ui.relaxed.grid.container {
-    width: @largeMonitorRelaxedGridWidth !important;
+  .ui.ui.relaxed.grid.container {
+    width: @largeMonitorRelaxedGridWidth;
   }
-  .ui.very.relaxed.grid.container {
-    width: @largeMonitorVeryRelaxedGridWidth !important;
+  .ui.ui.very.relaxed.grid.container {
+    width: @largeMonitorVeryRelaxedGridWidth;
   }
 }
 
@@ -107,7 +107,7 @@
 /* Text Container */
 .ui.text.container {
   font-family: @textFontFamily;
-  max-width: @textWidth !important;
+  max-width: @textWidth;
   line-height: @textLineHeight;
   font-size: @textSize;
 }