Reorganize mixins and G R U N T

less/mixins.less

@@ -1,11 +1,11 @@
 //
 // Mixins
 // --------------------------------------------------
+
+
+// Table of Contents
 //
-// TABLE OF CONTENTS
-//
-// UTILITIES
-// -------------------------
+// Utilities
 // - Clearfix
 // - WebKit-style focus
 // - Center-align a block level element
@@ -15,8 +15,7 @@
 // - Requires inline-block or block for proper styling
 // - CSS image replacement
 //
-// CSS3 PROPERTIES
-// --------------------------------------------------
+// CSS3 properties
 // - Single side border-radius
 // - Drop shadows
 // - Transitions
@@ -32,14 +31,12 @@
 // - Optional hyphenation
 // - Opacity
 //
-// GRADIENTS
-// --------------------------------------------------
+// Gradients
 // - Reset filters for IE
 // - Retina images
 // - Responsive image
 //
-// COMPONENT MIXINS
-// --------------------------------------------------
+// Component mixins
 // - Horizontal dividers
 // - Dividers (basically an hr) within dropdowns and nav lists
 // - Panels
@@ -56,23 +53,28 @@
 // - Vertically center elements in the navbar
 // - Progress bars
 //
-// RESPONSIVE UTILITIES
-// -------------------------
-// Grid System
-// -----------
+// Responsive utilities
+//
+// Forms
+// - Form control focus state
+// - Form control sizing
+//
+// Grid system
 // - Centered container element
 // - Generate the extra small columns
 // - Generate the small columns
 // - Generate the medium columns
 // - Generate the large columns
-// - Framework grid generation
+//
+// Framework grid generation
 // - Loop to generate grid all grid classes
 // - Form validation states
 // - Form control focus state
 
 
+
 // Utilities
-// -------------------------
+// --------------------------------------------------
 
 // Clearfix
 // Source: http://nicolasgallagher.com/micro-clearfix-hack/
@@ -159,7 +161,7 @@
 
 
 
-// CSS3 PROPERTIES
+// CSS3 properties
 // --------------------------------------------------
 
 // Single side border-radius
@@ -446,7 +448,7 @@
 
 
 
-// GRADIENTS
+// Gradients
 // --------------------------------------------------
 
 #gradient {
@@ -518,10 +520,10 @@
 
 
 // Retina images
-//
+// --------------------------------------------------
+
 // Short retina mixin for setting background-image and -size. Note that the
 // spelling of `min--moz-device-pixel-ratio` is intentional.
-
 .img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
   background-image: url("@{file-1x}");
 
@@ -538,10 +540,11 @@
 }
 
 
-// Responsive image
-//
-// Keep images from scaling beyond the width of their parents.
 
+// Responsive image
+// --------------------------------------------------
+
+// Keep images from scaling beyond the width of their parents.
 .img-responsive(@display: block) {
   display: @display;
   max-width: 100%; // Part 1: Set a maximum relative to the parent
@@ -549,11 +552,12 @@
 }
 
 
-// COMPONENT MIXINS
+
+// Component mixins
 // --------------------------------------------------
 
 // Horizontal dividers
-// -------------------------
+//
 // Dividers (basically an hr) within dropdowns and nav lists
 .nav-divider(@color: #e5e5e5) {
   height: 1px;
@@ -563,7 +567,6 @@
 }
 
 // Panels
-// -------------------------
 .panel-variant(@border; @heading-text-color; @heading-bg-color; @heading-border) {
   border-color: @border;
 
@@ -584,7 +587,6 @@
 }
 
 // Alerts
-// -------------------------
 .alert-variant(@background; @border; @text-color) {
   background-color: @background;
   border-color: @border;
@@ -599,7 +601,6 @@
 }
 
 // Tables
-// -------------------------
 .table-row-variant(@state; @background) {
   // Exact selectors below required to override `.table-striped` and prevent
   // inheritance to nested tables.
@@ -627,7 +628,6 @@
 }
 
 // List Groups
-// -------------------------
 .list-group-item-variant(@state; @background; @color) {
   .list-group-item-@{state} {
     color: @color;
@@ -655,7 +655,7 @@
 }
 
 // Button variants
-// -------------------------
+//
 // Easily pump out default styles, as well as :hover, :focus, :active,
 // and disabled options for all buttons
 .button-variant(@color; @background; @border) {
@@ -697,7 +697,6 @@
 }
 
 // Button sizes
-// -------------------------
 .button-size(@padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
   padding: @padding-vertical @padding-horizontal;
   font-size: @font-size;
@@ -706,7 +705,6 @@
 }
 
 // Pagination
-// -------------------------
 .pagination-size(@padding-vertical; @padding-horizontal; @font-size; @border-radius) {
   > li {
     > a,
@@ -730,7 +728,6 @@
 }
 
 // Labels
-// -------------------------
 .label-variant(@color) {
   background-color: @color;
   &[href] {
@@ -742,7 +739,6 @@
 }
 
 // Contextual backgrounds
-// -------------------------
 .bg-variant(@color) {
   background-color: @color;
   a&:hover {
@@ -751,7 +747,6 @@
 }
 
 // Typography
-// -------------------------
 .text-emphasis-variant(@color) {
   color: @color;
   a&:hover {
@@ -760,7 +755,7 @@
 }
 
 // Navbar vertical align
-// -------------------------
+//
 // Vertically center elements in the navbar.
 // Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);` to calculate the appropriate top margin.
 .navbar-vertical-align(@element-height) {
@@ -769,7 +764,6 @@
 }
 
 // Progress bars
-// -------------------------
 .progress-bar-variant(@color) {
   background-color: @color;
   .progress-striped & {
@@ -778,7 +772,7 @@
 }
 
 // Responsive utilities
-// -------------------------
+//
 // More easily include all the states for responsive-utilities.less.
 .responsive-visibility() {
   display: block !important;
@@ -793,8 +787,97 @@
 }
 
 
-// Grid System
-// -----------
+
+// Form validation states
+//
+// Used in forms.less to generate the form validation CSS for warnings, errors,
+// and successes.
+
+.form-control-validation(@text-color: #555; @border-color: #ccc; @background-color: #f5f5f5) {
+  // Color the label and help text
+  .help-block,
+  .control-label,
+  .radio,
+  .checkbox,
+  .radio-inline,
+  .checkbox-inline  {
+    color: @text-color;
+  }
+  // Set the border and box shadow on specific inputs to match
+  .form-control {
+    border-color: @border-color;
+    .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
+    &:focus {
+      border-color: darken(@border-color, 10%);
+      @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@border-color, 20%);
+      .box-shadow(@shadow);
+    }
+  }
+  // Set validation states also for addons
+  .input-group-addon {
+    color: @text-color;
+    border-color: @border-color;
+    background-color: @background-color;
+  }
+  // Optional feedback icon
+  .form-control-feedback {
+    color: @text-color;
+  }
+}
+
+
+
+// Forms
+// --------------------------------------------------
+
+// Form control focus state
+//
+// Generate a customized focus state and for any input with the specified color,
+// which defaults to the `@input-focus-border` variable.
+//
+// We highly encourage you to not customize the default value, but instead use
+// this to tweak colors on an as-needed basis. This aesthetic change is based on
+// WebKit's default styles, but applicable to a wider range of browsers. Its
+// usability and accessibility should be taken into account with any change.
+//
+// Example usage: change the default blue border and shadow to white for better
+// contrast against a dark gray background.
+.form-control-focus(@color: @input-border-focus) {
+  @color-rgba: rgba(red(@color), green(@color), blue(@color), .6);
+  &:focus {
+    border-color: @color;
+    outline: 0;
+    .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}");
+  }
+}
+
+// Form control sizing
+//
+// Relative text size, padding, and border-radii changes for form controls. For
+// horizontal sizing, wrap controls in the predefined grid classes. `<select>`
+// element gets special love because it's special, and that's a fact!
+.input-size(@input-height; @padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
+  height: @input-height;
+  padding: @padding-vertical @padding-horizontal;
+  font-size: @font-size;
+  line-height: @line-height;
+  border-radius: @border-radius;
+
+  select& {
+    height: @input-height;
+    line-height: @input-height;
+  }
+
+  textarea&,
+  select[multiple]& {
+    height: auto;
+  }
+}
+
+
+
+// Grid system
+// --------------------------------------------------
 
 // Centered container element
 .container-fixed() {
@@ -831,7 +914,6 @@
   right: percentage((@columns / @grid-columns));
 }
 
-
 // Generate the small columns
 .make-sm-column(@columns; @gutter: @grid-gutter-width) {
   position: relative;
@@ -860,7 +942,6 @@
   }
 }
 
-
 // Generate the medium columns
 .make-md-column(@columns; @gutter: @grid-gutter-width) {
   position: relative;
@@ -889,7 +970,6 @@
   }
 }
 
-
 // Generate the large columns
 .make-lg-column(@columns; @gutter: @grid-gutter-width) {
   position: relative;
@@ -919,11 +999,12 @@
 }
 
 
+
 // Framework grid generation
-//
+// --------------------------------------------------
+
 // Used only by Bootstrap to generate the correct number of grid classes given
 // any value of `@grid-columns`.
-
 .make-grid-columns() {
   // Common styles for all sizes of grid columns, widths 1-12
   .col(@index) when (@index = 1) { // initial
@@ -1010,87 +1091,3 @@
   .loop-grid-columns(@grid-columns, @class, push);
   .loop-grid-columns(@grid-columns, @class, offset);
 }
-
-// Form validation states
-//
-// Used in forms.less to generate the form validation CSS for warnings, errors,
-// and successes.
-
-.form-control-validation(@text-color: #555; @border-color: #ccc; @background-color: #f5f5f5) {
-  // Color the label and help text
-  .help-block,
-  .control-label,
-  .radio,
-  .checkbox,
-  .radio-inline,
-  .checkbox-inline  {
-    color: @text-color;
-  }
-  // Set the border and box shadow on specific inputs to match
-  .form-control {
-    border-color: @border-color;
-    .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
-    &:focus {
-      border-color: darken(@border-color, 10%);
-      @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@border-color, 20%);
-      .box-shadow(@shadow);
-    }
-  }
-  // Set validation states also for addons
-  .input-group-addon {
-    color: @text-color;
-    border-color: @border-color;
-    background-color: @background-color;
-  }
-  // Optional feedback icon
-  .form-control-feedback {
-    color: @text-color;
-  }
-}
-
-// Form control focus state
-//
-// Generate a customized focus state and for any input with the specified color,
-// which defaults to the `@input-focus-border` variable.
-//
-// We highly encourage you to not customize the default value, but instead use
-// this to tweak colors on an as-needed basis. This aesthetic change is based on
-// WebKit's default styles, but applicable to a wider range of browsers. Its
-// usability and accessibility should be taken into account with any change.
-//
-// Example usage: change the default blue border and shadow to white for better
-// contrast against a dark gray background.
-
-.form-control-focus(@color: @input-border-focus) {
-  @color-rgba: rgba(red(@color), green(@color), blue(@color), .6);
-  &:focus {
-    border-color: @color;
-    outline: 0;
-    .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}");
-  }
-}
-
-// Form control sizing
-//
-// Relative text size, padding, and border-radii changes for form controls. For
-// horizontal sizing, wrap controls in the predefined grid classes. `<select>`
-// element gets special love because it's special, and that's a fact!
-
-.input-size(@input-height; @padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
-  height: @input-height;
-  padding: @padding-vertical @padding-horizontal;
-  font-size: @font-size;
-  line-height: @line-height;
-  border-radius: @border-radius;
-
-  select& {
-    height: @input-height;
-    line-height: @input-height;
-  }
-
-  textarea&,
-  select[multiple]& {
-    height: auto;
-  }
-}
-