MDL-44074 theme_bootstrapbase: No 768px-979px & 1200px+ empty blk span calcs.

theme/bootstrapbase/less/moodle/bootstrapoverride.less

@@ -25,8 +25,11 @@ h4 small { font-size: round(@baseFontSize * 0.85); } // ~12px
   }
 }
 
-// YUI's calculation of blocks within a fluid grid. Copied from there grid code.
+// Bootstrap's calculation of blocks within a fluid grid. Copied from their grid code.
 .fluid-span (@columns) {
-    width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
-    *width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%);
+    .fluid-span-full(@columns, @fluidGridColumnWidth, @fluidGridGutterWidth);
+}
+.fluid-span-full (@columns, @columnWidth, @gutterWidth) {
+    width: (@columnWidth * @columns) + (@gutterWidth * (@columns - 1));
+    *width: (@columnWidth * @columns) + (@gutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%);
 }

theme/bootstrapbase/less/moodle/core.less

@@ -29,6 +29,7 @@
     width:100%;
 }
 
+// grid.less implied.
 .empty-region-side-post.used-region-side-pre #region-main.span8 {
     /** increase the span size by 1 **/
     .fluid-span(9);

theme/bootstrapbase/less/moodle/responsive.less

@@ -101,8 +101,8 @@
 
 }
 
-// login page
 @media (min-width: 1200px) {
+    // Login page.
     .loginbox.twocolumns .loginpanel {
         margin-left: 0;
     }
@@ -158,6 +158,20 @@
         }
     }
 
+    // Core empty block regions.
+    .fluid-span (@columns) {
+        .fluid-span-full(@columns, @fluidGridColumnWidth1200, @fluidGridGutterWidth1200);
+    }
+    .empty-region-side-post.used-region-side-pre { // Post region is empty and pre region is in use.
+        #region-main.span8 {
+            /** increase the span size by 1 **/
+            .fluid-span(9);
+        }
+        #block-region-side-pre.span4 {
+            /** decrease the span size by 1 **/
+            .fluid-span(3);
+        }
+    }
 }
 
 @media (min-width: 980px) {
@@ -172,6 +186,7 @@
 }
 
 @media (min-width: 768px) and (max-width: 979px) {
+    // Login page.
     .loginbox.twocolumns .loginpanel {
           margin-left: 0;
     }
@@ -180,6 +195,20 @@
         width: 48.61878453038674%;
         *width: 48.56559304102504%;
     }
+    // Core empty block regions.
+    .fluid-span (@columns) {
+        .fluid-span-full(@columns, @fluidGridColumnWidth768, @fluidGridGutterWidth768);
+    }
+    .empty-region-side-post.used-region-side-pre { // Post region is empty and pre region is in use.
+        #region-main.span8 {
+            /** increase the span size by 1 **/
+            .fluid-span(9);
+        }
+        #block-region-side-pre.span4 {
+            /** decrease the span size by 1 **/
+            .fluid-span(3);
+        }
+    }
 }
 
 @media (max-width: 767px) {
@@ -382,7 +411,7 @@
     }
 }
 
-@media (max-width: 768px) {
+@media (max-width: 767px) {
 // Resize, reflow file-picker on small devices
    #filesskin .yui3-panel,
    #filesskin .file-picker.fp-generallayout {
@@ -434,16 +463,16 @@
     .box-sizing(border-box);
   }
 
-  // We need to specify a more specific selector to reset the width for
-  // cases when we have content in the side-pre blockregion but not in the
-  // side-post blockregion as there are more specific selectors in
-  // core.less which take precedence which break responsiveness.
-  .empty-region-side-post.used-region-side-pre {
-      #block-region-side-pre.span4,
-      #region-main.span8.span8 {
-        .fluid-span(12);
-      }
-  }
+    // We need to specify a more specific selector to reset the width for
+    // cases when we have content in the side-pre blockregion but not in the
+    // side-post blockregion as there are more specific selectors in
+    // core.less which take precedence which break responsiveness.
+    .empty-region-side-post.used-region-side-pre { // Post region is empty and pre region is in use.
+        #block-region-side-pre.span4,
+        #region-main.span8 {
+            .fluid-span(12);
+        }
+    }
 
   .row-fluid .span12 {
     width: 100%;
@@ -479,6 +508,9 @@
 
 // All widths between 1200px and 1600px
 @media (min-width: 1200px) and (max-width: 1600px) {
+    .fluid-span (@columns) {
+        .fluid-span-full(@columns, @fluidGridColumnWidth1200, @fluidGridGutterWidth1200);
+    }
     // CSS for the course management pages.
     #course-category-listings.columns-3 {
         background-color:transparent;
@@ -487,8 +519,8 @@
         #category-listing,
         #course-listing {
             .fluid-span(6);
-            margin-left: @fluidGridGutterWidth;
-            *margin-left: @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%);
+            margin-left: @fluidGridGutterWidth1200;
+            *margin-left: @fluidGridGutterWidth1200 - (.5 / @gridRowWidth * 100 * 1%);
             &:first-child {
                 margin-left: 0;
             }
@@ -498,7 +530,6 @@
             margin: 1em 0 0;
         }
     }
-
 }
 
 // All widths up to 1199px.