merge in master, resolve conflicts

docs/assets/css/docs.css

@@ -195,6 +195,9 @@ div.topbar-wrapper {
 div.topbar-wrapper div.topbar {
   position: absolute;
   margin: 0 -20px;
+}
+
+div.topbar-wrapper div.topbar .fill {
   padding-left: 20px;
   padding-right: 20px;
   -webkit-border-radius: 4px;

docs/assets/js/application.js

@@ -42,25 +42,12 @@ $(document).ready(function(){
   // Dropdown example for topbar nav
   // ===============================
 
-  $("body").bind("click", function(e) {
-    $("ul.menu-dropdown").hide();
-    $('a.menu').parent("li").removeClass("open").children("ul.menu-dropdown").hide();
+  $("body").bind("click", function (e) {
+    $('a.menu').parent("li").removeClass("open");
   });
 
-  $("a.menu").click(function(e) {
-    var $target = $(this);
-    var $parent = $target.parent("li");
-    var $siblings = $target.siblings("ul.menu-dropdown");
-    var $parentSiblings = $parent.siblings("li");
-    if ($parent.hasClass("open")) {
-      $parent.removeClass("open");
-      $siblings.hide();
-    } else {
-      $parent.addClass("open");
-      $siblings.show();
-    }
-    $parentSiblings.children("ul.menu-dropdown").hide();
-    $parentSiblings.removeClass("open");
+  $("a.menu").click(function (e) {
+    var $li = $(this).parent("li").toggleClass('open');
     return false;
   });
 

lib/forms.less

@@ -23,7 +23,7 @@ form {
   }
 
   // Parent element that clears floats and wraps labels and fields together
-  div.clearfix {
+  .clearfix {
     margin-bottom: @baseline;
   }
 
@@ -112,7 +112,7 @@ form {
   }
 
   // Error styles
-  div.error {
+  .error {
     background: lighten(@red, 57%);
     padding: 10px 0;
     margin: -10px 0 10px;
@@ -133,8 +133,8 @@ form {
         .box-shadow(0 0 6px rgba(171,41,32,.5));
       }
     }
-    div.input-prepend,
-    div.input-append {
+    .input-prepend,
+    .input-append {
       span.add-on {
         background: lighten(@red, 50%);
         border-color: @error-text;
@@ -177,14 +177,14 @@ form {
 }
 
 // Actions (the buttons)
-div.actions {
+.actions {
   background: #f5f5f5;
   margin-top: @baseline;
   margin-bottom: @baseline;
   padding: (@baseline - 1) 20px @baseline 150px;
   border-top: 1px solid #ddd;
   .border-radius(0 0 3px 3px);
-  div.secondary-action {
+  .secondary-action {
     float: right;
     a {
       line-height: 30px;
@@ -213,7 +213,7 @@ div.actions {
 }
 
 // Inline Fields (input fields that appear as inline objects
-div.inline-inputs {
+.inline-inputs {
   color: @gray;
   span, input[type=text] {
     display: inline-block;
@@ -230,8 +230,8 @@ div.inline-inputs {
 }
 
 // Allow us to put symbols and text within the input field for a cleaner look
-div.input-prepend,
-div.input-append {
+.input-prepend,
+.input-append {
   input[type=text] {
     .border-radius(0 3px 3px 0);
   }
@@ -257,7 +257,7 @@ div.input-append {
     border-color: @green;
   }
 }
-div.input-append {
+.input-append {
   input[type=text] {
     float: left;
     .border-radius(3px 0 0 3px);
@@ -270,7 +270,7 @@ div.input-append {
 }
 
 // Stacked options for forms (radio buttons or checkboxes)
-ul.inputs-list {
+.inputs-list {
   margin: 0 0 5px;
   width: 100%;
   li {
@@ -326,13 +326,13 @@ form.form-stacked {
     line-height: 20px;
     padding-top: 0;
   }
-  div.clearfix {
+  .clearfix {
     margin-bottom: @baseline / 2;
     div.input {
       margin-left: 0;
     }
   }
-  ul.inputs-list {
+  .inputs-list {
     margin-bottom: 0;
     li {
       padding-top: 0;
@@ -349,7 +349,7 @@ form.form-stacked {
     margin-top: 0;
     margin-left: -10px;
   }
-  div.actions {
+  .actions {
     margin-left: -20px;
     padding-left: 20px;
   }

lib/patterns.less

@@ -7,7 +7,7 @@
 // ------
 
 // Topbar for Branding and Nav
-div.topbar {
+.topbar {
   #gradient > .vertical(#333, #222);
   height: 40px;
   position: fixed;
@@ -16,8 +16,14 @@ div.topbar {
   right: 0;
   z-index: 10000;
   overflow: visible;
-  @shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
-  .box-shadow(@shadow);
+
+  // gradient is applied to it's own element because overflow visible is not honored by ie when filter is present
+  .fill {
+    background:#222;
+    #gradient > .vertical(#333, #222);
+    @shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
+    .box-shadow(@shadow);
+  }
 
   // Links get text shadow
   a {
@@ -35,15 +41,18 @@ div.topbar {
   }
 
   // Website name
-  h3 a {
-    float: left;
-    display: block;
-    padding: 8px 20px 12px;
-    margin-left: -20px; // negative indent to left-align the text down the page
-    color: @white;
-    font-size: 20px;
-    font-weight: 200;
-    line-height: 1;
+  h3 {
+    position:relative;
+    a {
+      float: left;
+      display: block;
+      padding: 8px 20px 12px;
+      margin-left: -20px; // negative indent to left-align the text down the page
+      color: @white;
+      font-size: 20px;
+      font-weight: 200;
+      line-height: 1;
+    }
   }
 
   // Search Form
@@ -53,7 +62,7 @@ div.topbar {
     position: relative;
     .opacity(100);
     input {
-      background-color: @grayLight;
+      background-color: #444;
       background-color: rgba(255,255,255,.3);
       #font > .sans-serif(13px, normal, 1);
       width: 220px;
@@ -73,11 +82,13 @@ div.topbar {
       &::-webkit-input-placeholder {
         color: @grayLighter;
       }
+      // Hover states
       &:hover {
-        background-color: #444;
+        background-color: @grayLight;
         background-color: rgba(255,255,255,.5);
         color: #fff;
       }
+      // Focus states (we use .focused since IE8 and down doesn't support :focus)
       &:focus,
       &.focused {
         outline: none;
@@ -151,7 +162,7 @@ div.topbar {
       &.open {
         a.menu,
         a:hover {
-          background-color: lighten(#00a0d1,5);
+          background-color: #444;
           background-color: rgba(255,255,255,.1);
           color: #fff;
         }
@@ -215,6 +226,7 @@ div.topbar {
         &.divider {
           height: 1px;
           overflow: hidden;
+          background: #222;
           background: rgba(0,0,0,.2);
           border-bottom: 1px solid rgba(255,255,255,.1);
           margin: 5px 0;
@@ -261,7 +273,7 @@ div.topbar {
 // PAGE HEADERS
 // ------------
 
-div.page-header {
+.page-header {
   margin-bottom: @baseline - 1;
   border-bottom: 1px solid #ddd;
   .box-shadow(0 1px 0 rgba(255,255,255,.5));
@@ -275,14 +287,17 @@ div.page-header {
 // ------------
 
 // One-liner alert bars
-div.alert-message {
+.alert-message {
+  // TODO: Ask cloudhead how to do this fancy filter elegantly. Less eval is returning strings with quotes ;_;
   #gradient > .vertical(transparent, rgba(0,0,0,0.15));
+  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#15000000')";
+  filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#15000000')";
   background-color: @grayLighter;
   margin-bottom: @baseline;
   padding: 8px 15px;
   color: #fff;
-  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
-  border-bottom: 1px solid rgba(0,0,0,.25);
+  text-shadow: 0 -1px 0 rgba(0,0,0,.3);
+  border-bottom: 1px solid rgba(0,0,0,.3);
   .border-radius(4px);
   p {
     color: #fff;
@@ -292,44 +307,49 @@ div.alert-message {
     }
   }
   &.error {
-    background-color: lighten(@red, 25%);
+    #gradient > .vertical(lighten(@red, 30%), lighten(@red, 15%));
+    border-bottom-color: lighten(@red, 5%);
   }
   &.warning {
-    background-color: lighten(@yellow, 15%);
+    #gradient > .vertical(lighten(@yellow, 25%), lighten(@yellow, 10%));
+    border-bottom-color: @yellow;
   }
   &.success {
-    background-color: lighten(@green, 15%);
+    #gradient > .vertical(lighten(@green, 25%), lighten(@green, 10%));
+    border-bottom-color: @green;
   }
   &.info {
-    background-color: lighten(@blue, 15%);
+    #gradient > .vertical(lighten(@blue, 25%), lighten(@blue, 5%));
+    border-bottom-color: @blue;
   }
-  a.close {
+  .close {
     float: right;
     margin-top: -2px;
-    color: #fff;
+    color: #000;
     font-size: 20px;
     font-weight: bold;
-    text-shadow: 0 1px 0 rgba(0,0,0,.5);
-    .opacity(50);
-    .border-radius(3px);
+    text-shadow: 0 1px 0 rgba(255,255,255,1);
+    .opacity(20);
     &:hover {
       text-decoration: none;
-      .opacity(50);
+      .opacity(40);
     }
   }
 }
 
 // Block-level Alerts
-div.block-message {
+.block-message {
   margin-bottom: @baseline;
   padding: 14px;
   color: @grayDark;
   color: rgba(0,0,0,.8);
+  *color: @grayDark; /* IE 6-7 */
   text-shadow: 0 1px 0 rgba(255,255,255,.25);
   .border-radius(6px);
   p {
     color: @grayDark;
     color: rgba(0,0,0,.8);
+    *color: @grayDark; /* IE 6-7 */
     margin-right: 30px;
     margin-bottom: 0;
   }
@@ -339,12 +359,6 @@ div.block-message {
   strong {
     display: block;
   }
-  a.close {
-    display: block;
-    color: @grayDark;
-    color: rgba(0,0,0,.5);
-    text-shadow: 0 1px 1px rgba(255,255,255,.75);
-  }
   &.error {
     background: lighten(@red, 55%);
     border: 1px solid lighten(@red, 50%);
@@ -368,8 +382,8 @@ div.block-message {
 // ----------
 
 // Common tab and pill styles
-ul.tabs,
-ul.pills {
+.tabs,
+.pills {
   margin: 0 0 20px;
   padding: 0;
   .clearfix();
@@ -383,7 +397,7 @@ ul.pills {
 }
 
 // Basic Tabs
-ul.tabs {
+.tabs {
   width: 100%;
   border-bottom: 1px solid @grayLight;
   li {
@@ -409,7 +423,7 @@ ul.tabs {
 }
 
 // Basic pill nav
-ul.pills {
+.pills {
   li {
     a {
       margin: 5px 3px 5px 0;
@@ -436,22 +450,26 @@ ul.pills {
 // PAGINATION
 // ----------
 
-div.pagination {
+.pagination {
   height: @baseline * 2;
   margin: @baseline 0;
   ul {
     float: left;
     margin: 0;
+    border: 1px solid #ddd;
     border: 1px solid rgba(0,0,0,.15);
+    border-right: 0\9; /* IE8 and below don't support last child. TODO: clean this up;  */
     .border-radius(3px);
-    .box-shadow(0 1px 2px rgba(0,0,0,.075));
+    .box-shadow(0 1px 2px rgba(0,0,0,.05);
     li {
       display: inline;
       a {
         float: left;
         padding: 0 14px;
         line-height: (@baseline * 2) - 2;
-        border-right: 1px solid rgba(0,0,0,.15);
+        border-right: 1px solid;
+        border-right-color: #ddd;
+        border-right-color: rgba(0,0,0,.15);
         text-decoration: none;
       }
       a:hover,
@@ -490,7 +508,7 @@ div.pagination {
 // MODALS
 // ------
 
-div.modal-backdrop {
+.modal-backdrop {
   background-color: rgba(0,0,0,.5);
   position: fixed;
   top: 0;
@@ -499,7 +517,7 @@ div.modal-backdrop {
   bottom: 0;
   z-index: 1000;
 }
-div.modal {
+.modal {
   position: fixed;
   top: 50%;
   left: 50%;
@@ -507,6 +525,7 @@ div.modal {
   width: 560px;
   margin: -280px 0 0 -250px;
   background-color: @white;
+  border: 1px solid #999;
   border: 1px solid rgba(0,0,0,.3);
   .border-radius(6px);
   .box-shadow(0 3px 7px rgba(0,0,0,0.3));
@@ -582,7 +601,7 @@ div.modal {
 // TWIPSY
 // ------
 
-div.twipsy {
+.twipsy {
   display: block;
   position: absolute;
   visibility: visible;
@@ -631,7 +650,8 @@ div.twipsy {
     height: 0;
   }
   .inner {
-    background: rgba(0,0,0,.8);
+    background-color: #333;
+    background-color: rgba(0,0,0,.8);
     padding: 3px;
     overflow: hidden;
     width: 280px;
@@ -639,7 +659,7 @@ div.twipsy {
     .box-shadow(0 3px 7px rgba(0,0,0,0.3));
   }
   .title {
-    background: #f5f5f5;
+    background-color: #f5f5f5;
     padding: 9px 15px;
     line-height: 1;
     .border-radius(3px 3px 0 0);

lib/preboot.less

@@ -20,6 +20,7 @@
 
 // Accent Colors
 @blue:              #049CDB;
+@blueDark:          #0064CD;
 @green:             #46a546;
 @red:               #9d261d;
 @yellow:            #ffc40d;
@@ -188,8 +189,9 @@
   color: @textColor;
   font-size: @fontSize;
   line-height: @baseline;
-  border: 1px solid darken(@color, 10%);
-  border-bottom-color: fadein(@borderColor, 15%);
+  border: 1px solid;
+  border-color: #ccc #ccc #bbb;
+  border-color: borderColor borderColor fadein(@borderColor, 15%);
   .border-radius(@borderRadius);
   @shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
   .box-shadow(@shadow);
@@ -222,8 +224,6 @@
     background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+
     background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
     background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
-    -ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor); // IE8+
-    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor)); // IE6 & IE7
     background-image: linear-gradient(left, @startColor, @endColor); // Le standard
   }
   .vertical (@startColor: #555, @endColor: #333) {
@@ -235,8 +235,6 @@
     background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+
     background-image: -webkit-linear-gradient(@startColor, @endColor); // Safari 5.1+, Chrome 10+
     background-image: -o-linear-gradient(@startColor, @endColor); // Opera 11.10
-    -ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor); // IE8+
-    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE6 & IE7
     background-image: linear-gradient(@startColor, @endColor); // The standard
   }
   .directional (@startColor: #555, @endColor: #333, @deg: 45deg) {

lib/scaffolding.less

@@ -132,6 +132,8 @@ a {
     //#gradient > .vertical(@blue, @blueDark);
     color: #fff;
     text-shadow: 0 -1px 0 rgba(0,0,0,.25);
+    border-color: @blueDark @blueDark darken(@blueDark, 15%);
+    border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
     &:hover {
       color: #fff;
     }
@@ -146,12 +148,18 @@ a {
     padding-left: 9px;
     font-size: 11px;
   }
-  &:disabled,
   &.disabled {
     background-image: none;
     .opacity(65);
     cursor: default;
   }
+
+  // this can't be included with the .disabled def because IE8 and below will drop it ;_;
+  &:disabled {
+    background-image: none;
+    .opacity(65);
+    cursor: default;
+  }
   &:active {
     @shadow: inset 0 3px 7px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.05);
     .box-shadow(@shadow);

lib/tables.less

@@ -11,12 +11,12 @@ table {
   width: 100%;
   margin-bottom: @baseline;
   padding: 0;
-  text-align: left;
   border-collapse: separate;
   font-size: 13px;
   th, td {
     padding: 10px 10px 9px;
     line-height: @baseline * .75;
+    text-align: left;
     vertical-align: middle;
     border-bottom: 1px solid #ddd;
   }
@@ -32,7 +32,7 @@ table {
 // --------------
 
 // Default zebra-stripe styles (alternating gray and transparent backgrounds)
-table.zebra-striped {
+.zebra-striped {
   tbody {
     tr:nth-child(odd) td {
       background-color: #f9f9f9;
@@ -43,7 +43,7 @@ table.zebra-striped {
   }
 
   // Tablesorting styles w/ jQuery plugin
-  th.header {
+  .header {
     cursor: pointer;
     &:after {
       content: "";
@@ -55,36 +55,29 @@ table.zebra-striped {
       visibility: hidden;
     }
   }
-
   // Style the sorted column headers (THs)
-  th.headerSortUp,
-  th.headerSortDown {
+  .headerSortUp,
+  .headerSortDown {
     background-color: rgba(141,192,219,.25);
     text-shadow: 0 1px 1px rgba(255,255,255,.75);
     .border-radius(3px 3px 0 0);
   }
-
   // Style the ascending (reverse alphabetical) column header
-  th.header:hover {
+  .header:hover {
     &:after {
       visibility:visible;
     }
   }
-  th.actions:hover {
-    background-image: none;
-  }
-
   // Style the descending (alphabetical) column header
-  th.headerSortDown,
-  th.headerSortDown:hover {
+  .headerSortDown,
+  .headerSortDown:hover {
     &:after {
       visibility:visible;
       .opacity(60);
     }
   }
-
   // Style the ascending (reverse alphabetical) column header
-  th.headerSortUp {
+  .headerSortUp {
     &:after {
       border-bottom: none;
       border-left: 4px solid transparent;
@@ -95,58 +88,61 @@ table.zebra-striped {
       .opacity(60);
     }
   }
+}
 
+table {
   // Blue Table Headings
-  th.blue {
+  .blue {
     color: @blue;
     border-bottom-color: @blue;
   }
-  th.headerSortUp.blue, th.headerSortDown.blue {
+  .headerSortUp.blue,
+  .headerSortDown.blue {
     background-color: lighten(@blue, 40%);
   }
-
   // Green Table Headings
-  th.green {
+  .green {
     color: @green;
     border-bottom-color: @green;
   }
-  th.headerSortUp.green, th.headerSortDown.green { // backround color is 20% of border color
+  .headerSortUp.green,
+  .headerSortDown.green {
     background-color: lighten(@green, 40%);
   }
-
   // Red Table Headings
-  th.red {
+  .red {
     color: @red;
     border-bottom-color: @red;
   }
-  th.headerSortUp.red, th.headerSortDown.red {
+  .headerSortUp.red,
+  .headerSortDown.red {
     background-color: lighten(@red, 50%);
   }
-
   // Yellow Table Headings
-  th.yellow {
+  .yellow {
     color: @yellow;
     border-bottom-color: @yellow;
   }
-  th.headerSortUp.yellow, th.headerSortDown.yellow {
+  .headerSortUp.yellow,
+  .headerSortDown.yellow {
     background-color: lighten(@yellow, 40%);
   }
-
   // Orange Table Headings
-  th.orange {
+  .orange {
     color: @orange;
     border-bottom-color: @orange;
   }
-  th.headerSortUp.orange, th.headerSortDown.orange {
+  .headerSortUp.orange,
+  .headerSortDown.orange {
     background-color: lighten(@orange, 40%);
   }
-
   // Purple Table Headings
-  th.purple {
+  .purple {
     color: @purple;
     border-bottom-color: @purple;
   }
-  th.headerSortUp.purple, th.headerSortDown.purple {
+  .headerSortUp.purple,
+  .headerSortDown.purple {
     background-color: lighten(@purple, 40%);
   }
-}
+}
\ No newline at end of file