breaking out patterns.less even more, removing unnecessary div from checkbox...

breaking out patterns.less even more, removing unnecessary div from checkbox and radio lists--now just labels and inputs

docs/assets/css/docs.css

@@ -171,7 +171,7 @@ body > .navbar-fixed .brand:hover {
   font-weight: 300;
 }
 .marketing h2 {
-  margin-bottom: 9px;
+  font-size: 22px;
 }
 .marketing p {
   margin-right: 10px;

docs/base-css.html

@@ -973,7 +973,6 @@ Form states
         <fieldset class="control-group">
           <label class="control-label" for="optionsCheckboxes">Checkboxes</label>
           <div class="controls">
-            <div class="control-list">
             <label class="checkbox">
               <input type="checkbox" name="optionsCheckboxes" value="option1">
               Option one is this and that&mdash;be sure to include why it’s great
@@ -990,23 +989,20 @@ Form states
               <input type="checkbox" name="optionsCheckboxes" value="option4">
               Option four cannot be checked as it is disabled
             </label>
-            </div>
             <p class="help-text"><strong>Note:</strong> Labels surround all the options for much larger click areas and a more usable form.</p>
           </div>
         </fieldset>
         <fieldset class="control-group">
           <label class="control-label" for="optionsRadios">Radio buttons</label>
           <div class="controls">
-            <div class="control-list">
-              <label>
+            <label class="radio">
               <input type="radio" checked name="optionsRadios" value="option1">
-                <span>Option one is this and that&mdash;be sure to include why it’s great</span>
+              Option one is this and that&mdash;be sure to include why it’s great
             </label>
-              <label>
+            <label class="radio">
               <input type="radio" name="optionsRadios" value="option2">
-                <span>Option two can is something else and selecting it will deselect options 1</span>
+              Option two can is something else and selecting it will deselect options 1
             </label>
-            </div>
             <p class="help-text"><strong>Note:</strong> Labels surround all the options for much larger click areas and a more usable form.</p>
           </div>
         </fieldset>
@@ -1040,7 +1036,6 @@ Form states
         <fieldset class="control-group">
           <label class="control-label" for="input02">Label</label>
           <div class="controls">
-            <div class="control-list">
             <label class="checkbox">
               <input type="checkbox"> Something something something something something
             </label>
@@ -1051,7 +1046,6 @@ Form states
               <input type="checkbox"> Something something something
             </label>
           </div>
-          </div>
         </fieldset>
         <fieldset class="form-actions">
           <button type="submit" class="btn primary">Save changes</button>

docs/components.html

@@ -230,6 +230,8 @@
     <h1>Side nav <small></small></h1>
   </div>
 
+  <div class="row">
+    <div class="span3">
       <div class="well side-nav">
         <h6 class="nav-label">Your account</h6>
         <ul class="nav-group">
@@ -240,7 +242,8 @@
           <li><a class="nav-item" href="#">Help</a></li>
         </ul>
       </div>
-
+    </div>
+    <div class="span3">
       <div class="well side-nav">
         <h6 class="nav-label">Your account</h6>
         <ul class="nav-group">
@@ -251,6 +254,9 @@
           <li><a class="nav-item" href="#"><i class="time"></i> Help</a></li>
         </ul>
       </div>
+    </div>
+  </div>
+  
 </section>
 
 

lib/alerts.less

+// ALERT STYLES
+// ------------
+
+// Base alert styles
+.alert-message {
+  position: relative;
+  padding: 7px 15px;
+  margin-bottom: @baseLineHeight;
+  color: @grayDark;
+  text-shadow: 0 1px 0 rgba(255,255,255,.5);
+  .gradientBar(#fceec1, #eedc94); // warning by default
+  border-width: 1px;
+  border-style: solid;
+  .border-radius(4px);
+  .box-shadow(inset 0 1px 0 rgba(255,255,255,.25));
+
+  // Adjust close icon
+  .close {
+    *margin-top: 3px; /* IE7 spacing */
+  }
+
+  // Remove extra margin from content
+  h5 {
+    line-height: @baseLineHeight;
+  }
+  p {
+    margin-bottom: 0;
+  }
+  div {
+    margin-top: 5px;
+    margin-bottom: 2px;
+    line-height: 28px;
+  }
+  .btn {
+    // Provide actions with buttons
+    .box-shadow(0 1px 0 rgba(255,255,255,.25));
+  }
+
+  &.error,
+  &.success,
+  &.info {
+    text-shadow: 0 -1px 0 rgba(0,0,0,.25);
+  }
+
+  &.block-message {
+    padding: 14px;
+    background-image: none;
+    background-color: lighten(#fceec1, 5%);
+    .reset-filter(); // undo gradient for IE9
+    border-color: #fceec1;
+    .box-shadow(none);
+    ul, p {
+      margin-right: 30px;
+    }
+    ul {
+      margin-bottom: 0;
+    }
+    li {
+      color: @grayDark;
+    }
+    .alert-actions {
+      margin-top: 5px;
+    }
+    &.error,
+    &.success,
+    &.info {
+      color: @grayDark;
+      text-shadow: 0 1px 0 rgba(255,255,255,.5);
+    }
+    &.error {
+      background-color: lighten(#f56a66, 25%);
+      border-color: lighten(#f56a66, 20%);
+    }
+    &.success {
+      background-color: lighten(#62c462, 30%);
+      border-color: lighten(#62c462, 25%);
+    }
+    &.info {
+      background-color: lighten(#6bd0ee, 25%);
+      border-color: lighten(#6bd0ee, 20%);
+    }
+  }
+}

lib/bootstrap.less

@@ -19,24 +19,38 @@
 // Grid system and page structure
 @import "scaffolding.less";
 
-// Styled patterns and elements
+// Base CSS
 @import "type.less";
 @import "forms.less";
 @import "tables.less";
 
-// Temp catchall for what's missing thus far
-@import "patterns.less";
-
+// Components: common
 @import "sprites.less";
 @import "dropdowns.less";
+@import "wells.less";
+@import "component-animations.less";
+@import "close.less";
+
+// Components: Nav
+@import "navbar.less";
 @import "tabs-pills.less";
+@import "sidenav.less";
 @import "breadcrumbs.less";
 @import "pagination.less";
+
+// Components: Popovers
 @import "modals.less";
 @import "twipsy.less";
 @import "popovers.less";
-@import "sidenav.less";
+
+// Components: Buttons & Alerts
+@import "buttons.less";
+@import "button-groups.less";
+@import "alerts.less"; // Note: alerts share common CSS with buttons and thus have styles in buttons.less
+
+// Components: Misc
 @import "thumbnails.less";
+@import "labels.less";
 
 // Responsive
 @import "responsive.less";
\ No newline at end of file

lib/button-groups.less

+// BUTTON GROUPS
+// -------------
+
+// Group multiple button groups together for a toolbar
+.btn-toolbar {
+  .clearfix();
+  .btn-group {
+    float: left;
+    margin-right: 10px;
+  }
+}
+
+// Clear the float
+.btn-group {
+  .clearfix();
+}
+// Float them, remove border radius, then re-add to first and last elements
+.btn-group .btn {
+  position: relative;
+  float: left;
+  margin-left: -1px;
+  .border-radius(0);
+  // Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
+  &:first-child {
+    margin-left: 0;
+       -webkit-border-top-left-radius: 4px;
+           -moz-border-radius-topleft: 4px;
+               border-top-left-radius: 4px;
+    -webkit-border-bottom-left-radius: 4px;
+        -moz-border-radius-bottomleft: 4px;
+            border-bottom-left-radius: 4px;
+  }
+  &:last-child {
+       -webkit-border-top-right-radius: 4px;
+           -moz-border-radius-topright: 4px;
+               border-top-right-radius: 4px;
+    -webkit-border-bottom-right-radius: 4px;
+        -moz-border-radius-bottomright: 4px;
+            border-bottom-right-radius: 4px;
+  }
+  // Reset corners for large buttons
+  &.large:first-child {
+    margin-left: 0;
+       -webkit-border-top-left-radius: 6px;
+           -moz-border-radius-topleft: 6px;
+               border-top-left-radius: 6px;
+    -webkit-border-bottom-left-radius: 6px;
+        -moz-border-radius-bottomleft: 6px;
+            border-bottom-left-radius: 6px;
+  }
+  &.large:last-child {
+       -webkit-border-top-right-radius: 6px;
+           -moz-border-radius-topright: 6px;
+               border-top-right-radius: 6px;
+    -webkit-border-bottom-right-radius: 6px;
+        -moz-border-radius-bottomright: 6px;
+            border-bottom-right-radius: 6px;
+  }
+}
+// On hover/focus/active, bring the proper btn to front
+.btn-group .btn:hover,
+.btn-group .btn:focus,
+.btn-group .btn:active {
+  z-index: 2;
+}

lib/buttons.less

+// BUTTON STYLES
+// -------------
+
+// Shared colors for buttons and alerts
+.btn,
+.alert-message {
+  // Set text color
+  &.danger,
+  &.danger:hover,
+  &.error,
+  &.error:hover,
+  &.success,
+  &.success:hover,
+  &.info,
+  &.info:hover {
+    color: @white
+  }
+  // Danger and error appear as red
+  &.danger,
+  &.error {
+    .gradientBar(#ee5f5b, #c43c35);
+  }
+  // Success appears as green
+  &.success {
+    .gradientBar(#62c462, #57a957);
+  }
+  // Info appears as a neutral blue
+  &.info {
+    .gradientBar(#5bc0de, #339bb9);
+  }
+}
+
+// Base .btn styles
+.btn {
+  // Button Base
+  display: inline-block;
+  padding: 5px 14px 6px;
+  font-size: @baseFontSize;
+  line-height: normal;
+  color: #333;
+  text-shadow: 0 1px 1px rgba(255,255,255,.75);
+  #gradient > .vertical-three-colors(#ffffff, #ffffff, 25%, darken(#ffffff, 10%)); // Don't use .gradientbar() here since it does a three-color gradient
+  border: 1px solid #ccc;
+  border-bottom-color: #bbb;
+  .border-radius(4px);
+  @shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
+  .box-shadow(@shadow);
+  cursor: pointer;
+
+  &:hover {
+    color: @grayDark;
+    text-decoration: none;
+    background-position: 0 -15px;
+  }
+
+  // Focus state for keyboard and accessibility
+  &:focus {
+    outline: 1px dotted #666;
+  }
+
+  // Primary Button Type
+  &.primary {
+    color: @white;
+    text-shadow: 0 -1px 0 rgba(0,0,0,.25);
+    .gradientBar(@blue, @blueDark)
+  }
+
+   // Transitions
+  .transition(.1s linear all);
+
+  // Active and Disabled states
+  &.active,
+  &:active {
+    @shadow: inset 0 2px 4px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.05);
+    .box-shadow(@shadow);
+  }
+  &.disabled {
+    cursor: default;
+    background-image: none;
+    .reset-filter();
+    .opacity(65);
+    .box-shadow(none);
+  }
+  &[disabled] {
+    // disabled pseudo can't be included with .disabled
+    // def because IE8 and below will drop it ;_;
+    cursor: default;
+    background-image: none;
+    .reset-filter();
+    .opacity(65);
+    .box-shadow(none);
+  }
+
+  // Button Sizes
+  &.large {
+    padding: 9px 14px 9px;
+    font-size: @baseFontSize + 2px;
+    line-height: normal;
+    .border-radius(6px);
+  }
+  &.small {
+    padding: 7px 9px 7px;
+    font-size: @baseFontSize - 2px;
+  }
+}
+// Super jank hack for removing border-radius from IE9 so we can keep filter gradients on alerts and buttons
+:root .alert-message,
+:root .btn {
+  border-radius: 0 \0;
+}
+
+// Help Firefox not be a jerk about adding extra padding to buttons
+button.btn,
+input[type=submit].btn {
+  &::-moz-focus-inner {
+  	padding: 0;
+  	border: 0;
+  }
+}
\ No newline at end of file

lib/close.less

+// CLOSE ICONS
+// -----------
+
+.close {
+  float: right;
+  font-size: 20px;
+  font-weight: bold;
+  line-height: @baseLineHeight * .75;
+  color: @black;
+  text-shadow: 0 1px 0 rgba(255,255,255,1);
+  .opacity(20);
+  &:hover {
+    color: @black;
+    text-decoration: none;
+    .opacity(40);
+  }
+}

lib/component-animations.less

+// COMPONENT ANIMATIONS
+// --------------------
+
+.fade {
+  .transition(opacity .15s linear);
+  opacity: 0;
+  &.in {
+    opacity: 1;
+  }
+}
+
+.collapse {
+  .transition(height .35s ease);
+  position:relative;
+  overflow:hidden;
+  height: 0;
+  &.in { height: auto; }
+}

lib/forms.less

@@ -391,7 +391,8 @@ textarea[readonly] {
     margin-left: 150px;
   }
   // Move the options list down to align with labels
-  .control-list {
+  .controls > .radio:first-child,
+  .controls > .checkbox:first-child {
     padding-top: 6px; // has to be padding because margin collaspes
   }
   // Move over buttons in .form-actions to align with .controls

lib/labels.less

+// LABELS
+// ------
+
+.label {
+  padding: 1px 3px 2px;
+  font-size: @baseFontSize * .75;
+  font-weight: bold;
+  color: @white;
+  text-transform: uppercase;
+  background-color: @grayLight;
+  .border-radius(3px);
+  &.important { background-color: #c43c35; }
+  &.warning   { background-color: @orange; }
+  &.success   { background-color: @green; }
+  &.notice    { background-color: lighten(@blue, 25%); }
+}

lib/navbar.less

+// NAVBAR (FIXED AND STATIC)
+// -------------------------
+
+// Navbar variables
+@navBarHeight: 40px;
+@navBarBgStart: #333;
+@navBarBgEnd: #222;
+
+// Common styles
+.navbar {
+  overflow: visible;
+}
+// gradient is applied to it's own element because overflow visible is not honored by ie when filter is present
+.navbar-inner {
+  background-color: @navBarBgEnd;
+  #gradient > .vertical(@navBarBgStart, @navBarBgEnd);
+  @shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
+  .box-shadow(@shadow);
+}
+// Text and links
+.navbar {
+  // Hover and active states
+  .brand a:hover,
+  ul .active > a {
+    color: @white;
+    text-decoration: none;
+    background-color: @navBarBgStart;
+    background-color: rgba(255,255,255,.05);
+  }
+  // Website or project name
+  .brand {
+    float: left;
+    display: block;
+    padding: 8px 20px 12px;
+    margin-left: -20px; // negative indent to left-align the text down the page
+    font-size: 20px;
+    font-weight: 200;
+    line-height: 1;
+    color: @white;
+  }
+  // Plain text in topbar
+  p {
+    margin: 0;
+    line-height: 40px;
+    a:hover {
+      color: @white;
+      background-color: transparent;
+    }
+  }
+  // Buttons in navbar
+  .btn {
+    margin-top: 5px; // make buttons vertically centered in navbar
+  }
+}
+
+// Navbar search
+.navbar-search {
+  position: relative;
+  float: left;
+  margin-top: 6px;
+  margin-bottom: 0;
+  .search-query {
+    padding: 4px 9px;
+    #font > .sans-serif(13px, normal, 1);
+    color: @white;
+    color: rgba(255,255,255,.75);
+    background-color: #444;
+    background-color: rgba(255,255,255,.3);
+    border: 1px solid #111;
+    @shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.15);
+    .box-shadow(@shadow);
+    .transition(none);
+
+    // Placeholder text gets special styles; can't be bundled together though for some reason
+    &:-moz-placeholder {
+      color: @grayLighter;
+    }
+    &::-webkit-input-placeholder {
+      color: @grayLighter;
+    }
+    // Hover states
+    &:hover {
+      color: @white;
+      background-color: @grayLight;
+      background-color: rgba(255,255,255,.5);
+    }
+    // Focus states (we use .focused since IE8 and down doesn't support :focus)
+    &:focus,
+    &.focused {
+      padding: 5px 10px;
+      color: @grayDark;
+      text-shadow: 0 1px 0 @white;
+      background-color: @white;
+      border: 0;
+      .box-shadow(0 0 3px rgba(0,0,0,.15));
+      outline: 0;
+    }
+  }
+}
+
+
+// Static navbar
+.navbar-static {
+  margin-bottom: @baseLineHeight;
+}
+.navbar-static .navbar-inner {
+  padding-left:  20px;
+  padding-right: 20px;
+  .border-radius(4px);
+}
+
+// Fixed navbar
+.navbar-fixed {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: 10000;
+}
+
+
+
+// NAVIGATION
+// ----------
+
+// Nav for navbar and topbar
+// ul.nav for all topbar based navigation to avoid inheritance issues and over-specificity
+.nav {
+  position: relative;
+  left: 0;
+  display: block;
+  float: left;
+  margin: 0 10px 0 0;
+  > li {
+    display: block;
+    float: left;
+  }
+  a {
+    display: block;
+    float: none;
+    padding: 10px 10px 11px;
+    line-height: 19px;
+    color: @grayLight;
+    text-decoration: none;
+    text-shadow: 0 -1px 0 rgba(0,0,0,.25);
+    &:hover {
+      color: @white;
+      text-decoration: none;
+    }
+  }
+  .active > a {
+    background-color: #222;
+    background-color: rgba(0,0,0,.5);
+  }
+  // Dividers (basically a vertical hr)
+  .divider {
+    height: 40px;
+    width: 1px;
+    margin: 0 5px;
+    overflow: hidden;
+    background-color: #222;
+    border-right: 1px solid #444;
+  }
+
+  // Secondary (floated right) nav in topbar
+  &.secondary-nav {
+    float: right;
+    margin-left: 10px;
+    margin-right: 0;
+    .dropdown-menu {
+      right: 0;
+      border: 0;
+    }
+  }
+  // Dropdowns within the .nav
+  .dropdown-toggle:hover,
+  .dropdown.open .dropdown-toggle {
+    background: #444;
+    background: rgba(255,255,255,.05);
+  }
+  .dropdown-menu {
+    background-color: #333;
+    .dropdown-toggle {
+      color: @white;
+      &.open {
+        background: #444;
+        background: rgba(255,255,255,.05);
+      }
+    }
+    li a {
+      color: #999;
+      text-shadow: 0 1px 0 rgba(0,0,0,.5);
+      &:hover {
+        #gradient > .vertical(#292929,#191919);
+        color: @white;
+      }
+    }
+    .active a {
+      color: @white;
+    }
+    .divider {
+      background-color: #222;
+      border-color: #444;
+    }
+  }
+}

lib/scaffolding.less

@@ -12,7 +12,7 @@ body {
   font-family: @baseFontFamily;
   font-size: @baseFontSize;
   line-height: @baseLineHeight;
-  color: @grayDark;
+  color: @gray;
   background-color: @white;
 }
 

lib/variables.less

@@ -6,7 +6,7 @@
 // LINK COLORS
 // -----------
 
-@linkColor:         #0069d6;
+@linkColor:         #08c;
 @linkColorHover:    darken(@linkColor, 15);
 
 
@@ -14,10 +14,10 @@
 // -----
 
 @black:             #000;
-@grayDark:          lighten(@black, 25%);
-@gray:              lighten(@black, 50%);
-@grayLight:         lighten(@black, 75%);
-@grayLighter:       lighten(@black, 90%);
+@grayDark:          #333;
+@gray:              #555;
+@grayLight:         #999;
+@grayLighter:       #eee;
 @white:             #fff;
 
 

lib/wells.less

+// WELLS
+// -----
+
+.well {
+  min-height: 20px;
+  padding: 19px;
+  margin-bottom: 20px;
+  background-color: #f5f5f5;
+  border: 1px solid #eee;
+  border: 1px solid rgba(0,0,0,.05);
+  .border-radius(4px);
+  .box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
+  blockquote {
+    border-color: #ddd;
+    border-color: rgba(0,0,0,.15);
+  }
+}