Tweak on container for when structure-container-width-max is not set [#…

…113]
ucla-oarc-web · Oct 16, 2012 · 7fdf7b2 · 7fdf7b2
1 parent 968fec5
commit 7fdf7b2
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 8 deletions.
diff --git a/src/adapter/bootstrap/base/structure/_container.scss b/src/adapter/bootstrap/base/structure/_container.scss
@@ -15,6 +15,14 @@
                 padding-right: $structure-container-gutter;
             }
             max-width: $structure-container-width-max;
+        } @else {
+            @media screen 
+                and (min-width: 768px) /* body applies its own padding in bootstrap */
+            {                                       
+                width: 100% - ($structure-container-gutter*2);
+                padding-left: $structure-container-gutter;
+                padding-right: $structure-container-gutter;
+            }
         }
     }
 }
diff --git a/src/core/adapter/base/_variables.scss b/src/core/adapter/base/_variables.scss
@@ -9,8 +9,8 @@ $breakpoint-medium:    978px !default;     /* width-based */
  * Structure
  */
 
-$structure-container-gutter:    2%;           /* minimum spacing on either side of container */
-$structure-container-width-max: 1024px !default; /* pixel-based to limit max size (or false) */
+$structure-container-gutter:    2%;               /* minimum spacing (*percantage*) on either side of container */
+$structure-container-width-max: 1024px !default;  /* pixel-based to limit max size (or false) */
 $structure-panels:              12 !default;
 $structure-panel-gutter:        2.5641% !default;
 $structure-panel-width:         (100% - ($structure-panels - 1) * $structure-panel-gutter)

diff --git a/src/core/adapter/base/structure/_container.scss b/src/core/adapter/base/structure/_container.scss
@@ -7,17 +7,25 @@
             and (max-width: $structure-container-width-max 
                                 + $structure-container-width-max 
                                     * (($structure-container-gutter*2)/100%) )
-            and (min-width: $breakpoint-small) /* body applies its own padding in bootstrap */
+            and (min-width: $breakpoint-small)
         {                                       
             width: 100% - ($structure-container-gutter*2);
             padding-left: $structure-container-gutter;
             padding-right: $structure-container-gutter;
         }
-        @media screen and (max-width: $breakpoint-small - 1) {
-            width: auto;
-            padding-left: ($structure-container-gutter/100%) * $breakpoint-small; 
-            padding-right: ($structure-container-gutter/100%) * $breakpoint-small; 
-        }
         max-width: $structure-container-width-max;
+    } @else {
+        @media screen 
+            and (min-width: $breakpoint-small)
+        {                                       
+            width: 100% - ($structure-container-gutter*2);
+            padding-left: $structure-container-gutter;
+            padding-right: $structure-container-gutter;
+        }
+    }
+    @media screen and (max-width: $breakpoint-small - 1) {
+        width: auto;
+        padding-left: ($structure-container-gutter/100%) * $breakpoint-small; 
+        padding-right: ($structure-container-gutter/100%) * $breakpoint-small; 
     }
 }