Merge branch 'misc_css_fixes' of github.com:twitter/bootstrap into misc_css_fixes

Conflicts:
	lib/forms.less

4 files changed, 85 insertions, 91 deletions

diff --git a/lib/forms.less b/lib/forms.less
index 6e440feae..590326034 100644
--- a/lib/forms.less
+++ b/lib/forms.less
@@ -25,7 +25,7 @@ form {
   }
 
   // Parent element that clears floats and wraps labels and fields together
-  div.clearfix {
+  .clearfix {
     margin-bottom: @baseline;
   }
 
@@ -114,7 +114,7 @@ form {
   }
 
   // Error styles
-  div.error {
+  .error {
     background: lighten(@red, 57%);
     padding: 10px 0;
     margin: -10px 0 10px;
@@ -135,8 +135,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;
@@ -179,14 +179,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;
@@ -217,7 +217,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;
@@ -234,8 +234,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);
   }
@@ -262,13 +262,13 @@ div.input-append {
   }
 }
 
-div.input-prepend {
+.input-prepend {
   .add-on {
     *margin-top: 1px; /* IE6-7 */
   }
 }
 
-div.input-append {
+.input-append {
   input[type=text] {
     float: left;
     .border-radius(3px 0 0 3px);
@@ -281,7 +281,7 @@ div.input-append {
 }
 
 // Stacked options for forms (radio buttons or checkboxes)
-ul.inputs-list {
+.inputs-list {
   margin: 0 0 5px;
   width: 100%;
   li {
@@ -337,13 +337,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;
@@ -353,7 +353,7 @@ form.form-stacked {
       }
     }
   }
-  div.actions {
+  .actions {
     margin-left: -20px;
     padding-left: 20px;
   }
diff --git a/lib/patterns.less b/lib/patterns.less
index 02aeaf559..ef22e71b8 100644
--- a/lib/patterns.less
+++ b/lib/patterns.less
@@ -7,7 +7,8 @@
 // ------
 
 // Topbar for Branding and Nav
-div.topbar {
+.topbar {
+  #gradient > .vertical(#333, #222);
   height: 40px;
   position: fixed;
   top: 0;
@@ -81,11 +82,13 @@ div.topbar {
       &::-webkit-input-placeholder {
         color: @grayLighter;
       }
+      // Hover states
       &:hover {
         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;
@@ -270,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));
@@ -284,8 +287,7 @@ 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')";
@@ -294,8 +296,8 @@ div.alert-message {
   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;
@@ -305,35 +307,38 @@ 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;
@@ -354,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%);
@@ -383,8 +382,8 @@ div.block-message {
 // ----------
 
 // Common tab and pill styles
-ul.tabs,
-ul.pills {
+.tabs,
+.pills {
   margin: 0 0 20px;
   padding: 0;
   .clearfix();
@@ -398,7 +397,7 @@ ul.pills {
 }
 
 // Basic Tabs
-ul.tabs {
+.tabs {
   width: 100%;
   border-bottom: 1px solid @grayLight;
   li {
@@ -424,7 +423,7 @@ ul.tabs {
 }
 
 // Basic pill nav
-ul.pills {
+.pills {
   li {
     a {
       margin: 5px 3px 5px 0;
@@ -451,16 +450,17 @@ ul.pills {
 // PAGINATION
 // ----------
 
-div.pagination {
+.pagination {
   height: @baseline * 2;
   margin: @baseline 0;
   ul {
     float: left;
     margin: 0;
     border: 1px solid #ddd;
-    border-right: 0\9; /* IE8 and below don't support last child */
+    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 {
@@ -508,7 +508,7 @@ div.pagination {
 // MODALS
 // ------
 
-div.modal-backdrop {
+.modal-backdrop {
   background-color: rgba(0,0,0,.5);
   position: fixed;
   top: 0;
@@ -517,7 +517,7 @@ div.modal-backdrop {
   bottom: 0;
   z-index: 1000;
 }
-div.modal {
+.modal {
   position: fixed;
   top: 50%;
   left: 50%;
@@ -525,10 +525,11 @@ div.modal {
   width: 560px;
   margin: -280px 0 0 -250px;
   background-color: @white;
-  border: 1px solid #555;
+  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));
-  .background-clip(padding);
+  .background-clip(padding-box);
   .modal-header {
     border-bottom: 1px solid #eee;
     padding: 5px 20px;
@@ -600,7 +601,7 @@ div.modal {
 // TWIPSY
 // ------
 
-div.twipsy {
+.twipsy {
   display: block;
   position: absolute;
   visibility: visible;
@@ -649,7 +650,8 @@ div.twipsy {
     height: 0;
   }
   .inner {
-    background: #333;
+    background-color: #333;
+    background-color: rgba(0,0,0,.8);
     padding: 3px;
     overflow: hidden;
     width: 280px;
@@ -657,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);
@@ -667,7 +669,7 @@ div.twipsy {
     background-color: @white;
     padding: 14px;
     .border-radius(0 0 3px 3px);
-    .background-clip(padding);
+    .background-clip(padding-box);
     p, ul, ol {
       margin-bottom: 0;
     }
diff --git a/lib/preboot.less b/lib/preboot.less
index 20ded0547..129acf6f7 100644
--- a/lib/preboot.less
+++ b/lib/preboot.less
@@ -224,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) {
@@ -237,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) {
diff --git a/lib/tables.less b/lib/tables.less
index 4c65141a3..d1af37de8 100644
--- a/lib/tables.less
+++ b/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