]> git.ipfire.org Git - thirdparty/bootstrap.git/commitdiff
grid vars updated
authorMark Otto <otto@github.com>
Fri, 30 Nov 2012 23:43:07 +0000 (15:43 -0800)
committerMark Otto <otto@github.com>
Fri, 30 Nov 2012 23:43:07 +0000 (15:43 -0800)
docs/customize.html
docs/templates/pages/customize.mustache
less/forms.less
less/grid.less
less/layouts.less
less/mixins.less
less/navbar.less
less/responsive-1200px-min.less
less/responsive-768px-979px.less
less/variables.less

index bf564c863df2465bf58dc3b9ee0feca20c304363..d2a10d1d236516b69bc9188be333d2b8edd8b43c 100644 (file)
                 <input type="text" class="span3" placeholder="darken(@link-color, 15%)">
 
                 <h3>Grid system</h3>
-                <label>@gridColumns</label>
+                <label>@grid-columns</label>
                 <input type="text" class="span3" placeholder="12">
-                <label>@gridColumnWidth</label>
+                <label>@grid-column-width</label>
                 <input type="text" class="span3" placeholder="60px">
-                <label>@gridGutterWidth</label>
+                <label>@grid-gutter-width</label>
                 <input type="text" class="span3" placeholder="20px">
-                <label>@gridColumnWidth1200</label>
+                <label>@grid-column-width-1200</label>
                 <input type="text" class="span3" placeholder="70px">
-                <label>@gridGutterWidth1200</label>
+                <label>@grid-gutter-width-1200</label>
                 <input type="text" class="span3" placeholder="30px">
-                <label>@gridColumnWidth768</label>
+                <label>@grid-column-width-768</label>
                 <input type="text" class="span3" placeholder="42px">
-                <label>@gridGutterWidth768</label>
+                <label>@grid-gutter-width-768</label>
                 <input type="text" class="span3" placeholder="20px">
 
               </div><!-- /span -->
index e3d993153db38cbc02366af4f6d1e26baabbad18..b0aaf2a550dcce58534381fead526fa4182f4bac 100644 (file)
                 <input type="text" class="span3" placeholder="darken(@link-color, 15%)">
 
                 <h3>{{_i}}Grid system{{/i}}</h3>
-                <label>@gridColumns</label>
+                <label>@grid-columns</label>
                 <input type="text" class="span3" placeholder="12">
-                <label>@gridColumnWidth</label>
+                <label>@grid-column-width</label>
                 <input type="text" class="span3" placeholder="60px">
-                <label>@gridGutterWidth</label>
+                <label>@grid-gutter-width</label>
                 <input type="text" class="span3" placeholder="20px">
-                <label>@gridColumnWidth1200</label>
+                <label>@grid-column-width-1200</label>
                 <input type="text" class="span3" placeholder="70px">
-                <label>@gridGutterWidth1200</label>
+                <label>@grid-gutter-width-1200</label>
                 <input type="text" class="span3" placeholder="30px">
-                <label>@gridColumnWidth768</label>
+                <label>@grid-column-width-768</label>
                 <input type="text" class="span3" placeholder="42px">
-                <label>@gridGutterWidth768</label>
+                <label>@grid-gutter-width-768</label>
                 <input type="text" class="span3" placeholder="20px">
 
               </div><!-- /span -->
index 2d3f018928c4e4778b1ec334d93df8484840ff56..fe1bb9d408c6549e42019a8d7d8e0ac78d7454ee 100644 (file)
@@ -291,7 +291,7 @@ textarea[class*="span"],
 }
 
 .controls-row {
-  #grid > .input(@gridColumnWidth, @gridGutterWidth, @gridRowWidth);
+  #grid > .input(@grid-column-width, @grid-gutter-width, @grid-row-width);
 }
 
 // Ensure input-prepend/append never wraps
index 817ead2ee8e802bc1b0bc6128f84547321bb2b7f..b401d4b6dd09352d7397dba00b618531192d3a2a 100644 (file)
@@ -9,7 +9,7 @@
 }
 
 // Fixed (940px)
-#grid > .core(@gridColumnWidth, @gridGutterWidth, @gridRowWidth);
+#grid > .core(@grid-column-width, @grid-gutter-width, @grid-row-width);
 
 // Reset utility classes due to specificity
 [class*="span"].hide {
index 24a2062117c38052780d8023db2a3e6fc0684200..7a65d65d6be4e48b9a6dbb3cd1166027e46f3732 100644 (file)
@@ -10,7 +10,7 @@
 
 // Fluid layouts (left aligned, with sidebar, min- & max-width content)
 .container-fluid {
-  padding-right: @gridGutterWidth;
-  padding-left: @gridGutterWidth;
+  padding-right: @grid-gutter-width;
+  padding-left: @grid-gutter-width;
   .clearfix();
 }
\ No newline at end of file
index d4ba71cfe43593882b41e3e0eaf7c11c1836887b..41a9a2782455d7a92ad8c68200c7bb7cc1b999bc 100644 (file)
 }
 
 // CSS3 Content Columns
-.content-columns(@columnCount, @columnGap: @gridGutterWidth) {
+.content-columns(@columnCount, @columnGap: @grid-gutter-width) {
   -webkit-column-count: @columnCount;
      -moz-column-count: @columnCount;
           column-count: @columnCount;
 // Make a Grid
 // Use .makeRow and .makeColumn to assign semantic layouts grid system behavior
 .makeRow() {
-  margin-left: @gridGutterWidth * -1;
+  margin-left: @grid-gutter-width * -1;
   .clearfix();
 }
 .makeColumn(@columns: 1, @offset: 0) {
   float: left;
-  margin-left: (@gridColumnWidth * @offset) + (@gridGutterWidth * (@offset - 1)) + (@gridGutterWidth * 2);
-  width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
+  margin-left: (@grid-column-width * @offset) + (@grid-gutter-width * (@offset - 1)) + (@grid-gutter-width * 2);
+  width: (@grid-column-width * @columns) + (@grid-gutter-width * (@columns - 1));
 }
 
 // The Grid
 #grid {
 
-  .core(@gridColumnWidth, @gridGutterWidth, @gridRowWidth) {
+  .core(@grid-column-width, @grid-gutter-width, @grid-row-width) {
 
     .spanX(@index) when (@index > 0) {
       (~".span@{index}") { .span(@index); }
 
     // Base styles
     .offset(@columns) {
-      margin-left: percentage(@columns / @gridColumns);
+      margin-left: percentage(@columns / @grid-columns);
     }
     .span(@columns) {
-      width: percentage(@columns / @gridColumns);
+      width: percentage(@columns / @grid-columns);
     }
 
     .row {
       // Negative indent the columns so text lines up
-      margin-left: @gridGutterWidth / -2;
-      margin-right: @gridGutterWidth / -2;
+      margin-left: @grid-gutter-width / -2;
+      margin-right: @grid-gutter-width / -2;
       // Clear the floated columns
       .clearfix();
     }
     [class*="span"] {
       float: left; // Collapse whitespace
       min-height: 1px; // Prevent empty columns from collapsing
-      padding-left: @gridGutterWidth / 2;
-      padding-right: @gridGutterWidth / 2;
+      padding-left: @grid-gutter-width / 2;
+      padding-right: @grid-gutter-width / 2;
       // Proper box-model (padding doesnt' add to width)
       -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
     }
 
     // Generate .spanX and .offsetX
-    .spanX(@gridColumns);
-    .offsetX(@gridColumns);
+    .spanX(@grid-columns);
+    .offsetX(@grid-columns);
 
   }
 
 
-  .input(@gridColumnWidth, @gridGutterWidth, @gridRowWidth) {
+  .input(@grid-column-width, @grid-gutter-width, @grid-row-width) {
 
     .spanX(@index) when (@index > 0) {
       (~"input.span@{index}, textarea.span@{index}, select.span@{index}, .uneditable-input.span@{index}") { .span(@index); }
     .span(@columns) {
       // TODO: Figure out how to add this back behind a class
       // Part 1: Since inputs require padding *and* margin, we subtract the grid gutter width, as a percent of the row, from the default column width.
-      //width: percentage(@columns / @gridColumns) - percentage(@gridGutterWidth / @gridRowWidth);
+      //width: percentage(@columns / @grid-columns) - percentage(@grid-gutter-width / @grid-row-width);
       // Part 2: That subtracted width then gets split in half and added to the left and right margins.
-      // margin-left: percentage((@gridGutterWidth / 2) / @gridRowWidth);
-      // margin-right: percentage((@gridGutterWidth / 2) / @gridRowWidth);
+      // margin-left: percentage((@grid-gutter-width / 2) / @grid-row-width);
+      // margin-right: percentage((@grid-gutter-width / 2) / @grid-row-width);
     }
 
     .offset(@columns) {
       // Take the normal offset margin and add an extra gutter's worth.
-      margin-left: percentage(@columns / @gridColumns) + percentage((@gridGutterWidth / 2) / @gridRowWidth);
+      margin-left: percentage(@columns / @grid-columns) + percentage((@grid-gutter-width / 2) / @grid-row-width);
     }
 
     // Generate .spanX and .offsetX
-    .spanX(@gridColumns);
-    .offsetX(@gridColumns);
+    .spanX(@grid-columns);
+    .offsetX(@grid-columns);
 
   }
 
index a167746ee30ca6a167f5f8c99fa96b2e873c4e5b..d63c5a8e9f291df4f9a67cd78b97c1188b0b89f6 100644 (file)
 .navbar-static-top .container,
 .navbar-fixed-top .container,
 .navbar-fixed-bottom .container {
-  #grid > .core > .span(@gridColumns);
+  #grid > .core > .span(@grid-columns);
 }
 
 // Fixed to top
index 130c65d0d266d8579c315cf9c4f3b9a3f41617fd..32da5cb89e784a1af8817b40a0bf5c9592f71cb8 100644 (file)
@@ -11,7 +11,7 @@
   }
 
   // Fixed grid
-  #grid > .core(@gridColumnWidth1200, @gridGutterWidth1200, @gridRowWidth1200);
-  // #grid > .input(@gridColumnWidth1200, @gridGutterWidth1200, @gridRowWidth1200);
+  #grid > .core(@grid-column-width-1200, @grid-gutter-width-1200, @grid-row-width-1200);
+  // #grid > .input(@grid-column-width-1200, @grid-gutter-width-1200, @grid-row-width-1200);
 
 }
index 09636ccdb053bd6e5f73acbdd7a3d8875c6ee3bf..27af806ebc719298e967a507bd12e9b785f0287d 100644 (file)
@@ -6,6 +6,6 @@
 @media (min-width: 768px) and (max-width: 979px) {
 
   // Fixed grid
-  #grid > .core(@gridColumnWidth768, @gridGutterWidth768, @gridRowWidth768);
+  #grid > .core(@grid-column-width-768, @grid-gutter-width-768, @grid-row-width-768);
 
 }
index e0bb27f49fde6ba0841e9720beeea3d6057c888a..0d9b2c6632b6015a027326a80ca70b3a9b7fafb5 100644 (file)
 // --------------------------------------------------
 
 // Default 940px grid
-@gridColumns:             12;
-@gridColumnWidth:         60px;
-@gridGutterWidth:         20px;
-@gridRowWidth:            (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
+@grid-columns:             12;
+@grid-column-width:         60px;
+@grid-gutter-width:         20px;
+@grid-row-width:            (@grid-columns * @grid-column-width) + (@grid-gutter-width * (@grid-columns - 1));
 
 // 1200px min
-@gridColumnWidth1200:     70px;
-@gridGutterWidth1200:     30px;
-@gridRowWidth1200:        (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1));
+@grid-column-width-1200:     70px;
+@grid-gutter-width-1200:     30px;
+@grid-row-width-1200:        (@grid-columns * @grid-column-width-1200) + (@grid-gutter-width-1200 * (@grid-columns - 1));
 
 // 768px-979px
-@gridColumnWidth768:      42px;
-@gridGutterWidth768:      20px;
-@gridRowWidth768:         (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns - 1));
+@grid-column-width-768:      42px;
+@grid-gutter-width-768:      20px;
+@grid-row-width-768:         (@grid-columns * @grid-column-width-768) + (@grid-gutter-width-768 * (@grid-columns - 1));