compass_twitter_bootstrap 2.0.1.2 → 2.0.3

data/stylesheets/compass_twitter_bootstrap/_navs.scss

@@ -21,6 +21,26 @@
   background-color: $grayLighter;
 }
 
+// Redeclare pull classes because of specifity
+.nav > .pull-right {
+  float: right;
+}
+
+// Nav headers (for dropdowns and lists)
+.nav .nav-header {
+  display: block;
+  padding: 3px 15px;
+  font-size: 11px;
+  font-weight: bold;
+  line-height: $baseLineHeight;
+  color: $grayLight;
+  text-shadow: 0 1px 0 rgba(255,255,255,.5);
+  text-transform: uppercase;
+}
+// Space them out when they follow another list item (link)
+.nav li + .nav-header {
+  margin-top: 9px;
+}
 // Nav headers (for dropdowns and lists)
 .nav .nav-header {
   display: block;
@@ -42,8 +62,8 @@
 // --------
 
 .nav-list {
-  padding-left: 14px;
-  padding-right: 14px;
+  padding-left: 15px;
+  padding-right: 15px;
   margin-bottom: 0;
 }
 .nav-list > li > a,
@@ -55,8 +75,8 @@
 .nav-list > li > a {
   padding: 3px 15px;
 }
-.nav-list .active > a,
-.nav-list .active > a:hover {
+.nav-list > .active > a,
+.nav-list > .active > a:hover {
   color: $white;
   text-shadow: 0 -1px 0 rgba(0,0,0,.2);
   background-color: $linkColor;
@@ -64,6 +84,10 @@
 .nav-list [class^="icon-"] {
   margin-right: 2px;
 }
+// Dividers (basically an hr) within the dropdown
+.nav-list .divider {
+  @include bootstrap-nav-divider();
+}
 
 
 
@@ -73,7 +97,7 @@
 // Common styles
 .nav-tabs,
 .nav-pills {
-  @include clearfix();
+  @include bootstrap-clearfix();
 }
 .nav-tabs > li,
 .nav-pills > li {
@@ -94,18 +118,17 @@
 .nav-tabs {
   border-bottom: 1px solid #ddd;
 }
-
 // Make the list-items overlay the bottom border
 .nav-tabs > li {
   margin-bottom: -1px;
 }
-
 // Actual tabs (as links)
 .nav-tabs > li > a {
   padding-top: 9px;
   padding-bottom: 9px;
+  line-height: $baseLineHeight;
   border: 1px solid transparent;
-  @include border-radius(4px 4px 0 0);
+  @include bootstrap-border-radius(4px 4px 0 0);
   &:hover {
     border-color: $grayLighter $grayLighter #ddd;
   }
@@ -120,6 +143,7 @@
   cursor: default;
 }
 
+
 // PILLS
 // -----
 
@@ -129,12 +153,12 @@
   padding-bottom: 8px;
   margin-top: 2px;
   margin-bottom: 2px;
-  @include border-radius(5px);
+  @include bootstrap-border-radius(5px);
 }
 
 // Active state
-.nav-pills .active > a,
-.nav-pills .active > a:hover {
+.nav-pills > .active > a,
+.nav-pills > .active > a:hover {
   color: $white;
   background-color: $linkColor;
 }
@@ -158,13 +182,13 @@
 }
 .nav-tabs.nav-stacked > li > a {
   border: 1px solid #ddd;
-  @include border-radius(0);
+  @include bootstrap-border-radius(0);
 }
 .nav-tabs.nav-stacked > li:first-child > a {
-  @include border-radius(4px 4px 0 0);
+  @include bootstrap-border-radius(4px 4px 0 0);
 }
 .nav-tabs.nav-stacked > li:last-child > a {
-  @include border-radius(0 0 4px 4px);
+  @include bootstrap-border-radius(0 0 4px 4px);
 }
 .nav-tabs.nav-stacked > li > a:hover {
   border-color: #ddd;
@@ -184,14 +208,11 @@
 // DROPDOWNS
 // ---------
 
-// Position the menu
-.nav-tabs .dropdown-menu,
-.nav-pills .dropdown-menu {
-  margin-top: 1px;
-  border-width: 1px;
+.nav-tabs .dropdown-menu {
+  @include bootstrap-border-radius(0 0 5px 5px); // remove the top rounded corners here since there is a hard edge above the menu
 }
 .nav-pills .dropdown-menu {
-  @include border-radius(4px);
+  @include bootstrap-border-radius(4px); // make rounded corners match the pills
 }
 
 // Default dropdown links
@@ -200,11 +221,13 @@
 .nav-tabs .dropdown-toggle .caret,
 .nav-pills .dropdown-toggle .caret {
   border-top-color: $linkColor;
+  border-bottom-color: $linkColor;
   margin-top: 6px;
 }
 .nav-tabs .dropdown-toggle:hover .caret,
 .nav-pills .dropdown-toggle:hover .caret {
   border-top-color: $linkColorHover;
+  border-bottom-color: $linkColorHover;
 }
 
 // Active dropdown links
@@ -212,6 +235,7 @@
 .nav-tabs .active .dropdown-toggle .caret,
 .nav-pills .active .dropdown-toggle .caret {
   border-top-color: $grayDark;
+  border-bottom-color: $grayDark;
 }
 
 // Active:hover dropdown links
@@ -225,16 +249,17 @@
 // -------------------------
 .nav-tabs .open .dropdown-toggle,
 .nav-pills .open .dropdown-toggle,
-.nav > .open.active > a:hover {
+.nav > li.dropdown.open.active > a:hover {
   color: $white;
   background-color: $grayLight;
   border-color: $grayLight;
 }
-.nav .open .caret,
-.nav .open.active .caret,
-.nav .open a:hover .caret {
+.nav li.dropdown.open .caret,
+.nav li.dropdown.open.active .caret,
+.nav li.dropdown.open a:hover .caret {
   border-top-color: $white;
-  @include opacity(1.0);
+  border-bottom-color: $white;
+  @include bootstrap-opacity(100);
 }
 
 // Dropdowns in stacked tabs
@@ -253,16 +278,16 @@
 
 // Clear any floats
 .tabbable {
-  @include clearfix();
+  @include bootstrap-clearfix();
 }
 .tab-content {
-  overflow: hidden; // prevent content from running below tabs
+  overflow: auto; // prevent content from running below tabs
 }
 
 // Remove border on bottom, left, right
-.tabs-below .nav-tabs,
-.tabs-right .nav-tabs,
-.tabs-left .nav-tabs {
+.tabs-below > .nav-tabs,
+.tabs-right > .nav-tabs,
+.tabs-left > .nav-tabs {
   border-bottom: 0;
 }
 
@@ -280,22 +305,22 @@
 // BOTTOM
 // ------
 
-.tabs-below .nav-tabs {
+.tabs-below > .nav-tabs {
   border-top: 1px solid #ddd;
 }
-.tabs-below .nav-tabs > li {
+.tabs-below > .nav-tabs > li {
   margin-top: -1px;
   margin-bottom: 0;
 }
-.tabs-below .nav-tabs > li > a {
-  @include border-radius(0 0 4px 4px);
+.tabs-below > .nav-tabs > li > a {
+  @include bootstrap-border-radius(0 0 4px 4px);
   &:hover {
     border-bottom-color: transparent;
     border-top-color: #ddd;
   }
 }
-.tabs-below .nav-tabs .active > a,
-.tabs-below .nav-tabs .active > a:hover {
+.tabs-below > .nav-tabs > .active > a,
+.tabs-below > .nav-tabs > .active > a:hover {
   border-color: transparent #ddd #ddd #ddd;
 }
 
@@ -303,51 +328,51 @@
 // ------------
 
 // Common styles
-.tabs-left .nav-tabs > li,
-.tabs-right .nav-tabs > li {
+.tabs-left > .nav-tabs > li,
+.tabs-right > .nav-tabs > li {
   float: none;
 }
-.tabs-left .nav-tabs > li > a,
-.tabs-right .nav-tabs > li > a {
+.tabs-left > .nav-tabs > li > a,
+.tabs-right > .nav-tabs > li > a {
   min-width: 74px;
   margin-right: 0;
   margin-bottom: 3px;
 }
 
 // Tabs on the left
-.tabs-left .nav-tabs {
+.tabs-left > .nav-tabs {
   float: left;
   margin-right: 19px;
   border-right: 1px solid #ddd;
 }
-.tabs-left .nav-tabs > li > a {
+.tabs-left > .nav-tabs > li > a {
   margin-right: -1px;
-  @include border-radius(4px 0 0 4px);
+  @include bootstrap-border-radius(4px 0 0 4px);
 }
-.tabs-left .nav-tabs > li > a:hover {
+.tabs-left > .nav-tabs > li > a:hover {
   border-color: $grayLighter #ddd $grayLighter $grayLighter;
 }
-.tabs-left .nav-tabs .active > a,
-.tabs-left .nav-tabs .active > a:hover {
+.tabs-left > .nav-tabs .active > a,
+.tabs-left > .nav-tabs .active > a:hover {
   border-color: #ddd transparent #ddd #ddd;
   *border-right-color: $white;
 }
 
 // Tabs on the right
-.tabs-right .nav-tabs {
+.tabs-right > .nav-tabs {
   float: right;
   margin-left: 19px;
   border-left: 1px solid #ddd;
 }
-.tabs-right .nav-tabs > li > a {
+.tabs-right > .nav-tabs > li > a {
   margin-left: -1px;
-  @include border-radius(0 4px 4px 0);
+  @include bootstrap-border-radius(0 4px 4px 0);
 }
-.tabs-right .nav-tabs > li > a:hover {
+.tabs-right > .nav-tabs > li > a:hover {
   border-color: $grayLighter $grayLighter $grayLighter #ddd;
 }
-.tabs-right .nav-tabs .active > a,
-.tabs-right .nav-tabs .active > a:hover {
+.tabs-right > .nav-tabs .active > a,
+.tabs-right > .nav-tabs .active > a:hover {
   border-color: #ddd #ddd #ddd transparent;
   *border-left-color: $white;
 }

data/stylesheets/compass_twitter_bootstrap/_pager.scss

@@ -6,7 +6,7 @@
   margin-bottom: $baseLineHeight;
   list-style: none;
   text-align: center;
-  @include clearfix();
+  @include bootstrap-clearfix();
 }
 .pager li {
   display: inline;
@@ -16,7 +16,7 @@
   padding: 5px 14px;
   background-color: #fff;
   border: 1px solid #ddd;
-  @include border-radius(15px);
+  @include bootstrap-border-radius(15px);
 }
 .pager a:hover {
   text-decoration: none;
@@ -28,3 +28,9 @@
 .pager .previous a {
   float: left;
 }
+.pager .disabled a,
+.pager .disabled a:hover {
+  color: $grayLight;
+  background-color: #fff;
+  cursor: default;
+}

data/stylesheets/compass_twitter_bootstrap/_pagination.scss

@@ -7,11 +7,11 @@
  }
 .pagination ul {
   display: inline-block;
-  @include ie7-inline-block();
+  @include bootstrap-ie7-inline-block();
   margin-left: 0;
   margin-bottom: 0;
-  @include border-radius(3px);
-  @include box-shadow(0 1px 2px rgba(0,0,0,.05));
+  @include bootstrap-border-radius(3px);
+  @include bootstrap-box-shadow(0 1px 2px rgba(0,0,0,.05));
 }
 .pagination li {
     display: inline;
@@ -32,6 +32,7 @@
   color: $grayLight;
   cursor: default;
 }
+.pagination .disabled span,
 .pagination .disabled a,
 .pagination .disabled a:hover {
   color: $grayLight;
@@ -40,10 +41,10 @@
 }
 .pagination li:first-child a {
   border-left-width: 1px;
-  @include border-radius(3px 0 0 3px);
+  @include bootstrap-border-radius(3px 0 0 3px);
 }
 .pagination li:last-child a {
-  @include border-radius(0 3px 3px 0);
+  @include bootstrap-border-radius(0 3px 3px 0);
 }
 
 // Centered

data/stylesheets/compass_twitter_bootstrap/_popovers.scss

@@ -12,10 +12,10 @@
   &.right  { margin-left:  5px; }
   &.bottom { margin-top:   5px; }
   &.left   { margin-left: -5px; }
-  &.top .arrow    { @include popoverArrow-top(); }
-  &.right .arrow  { @include popoverArrow-right(); }
-  &.bottom .arrow { @include popoverArrow-bottom(); }
-  &.left .arrow   { @include popoverArrow-left();  }
+  &.top .arrow    { @include bootstrap-popoverArrow-top(); }
+  &.right .arrow  { @include bootstrap-popoverArrow-right(); }
+  &.bottom .arrow { @include bootstrap-popoverArrow-bottom(); }
+  &.left .arrow   { @include bootstrap-popoverArrow-left();  }
   .arrow {
     position: absolute;
     width: 0;
@@ -28,21 +28,21 @@
   overflow: hidden;
   background: $black; // has to be full background declaration for IE fallback
   background: rgba(0,0,0,.8);
-  @include border-radius(6px);
-  @include box-shadow(0 3px 7px rgba(0,0,0,0.3));
+  @include bootstrap-border-radius(6px);
+  @include bootstrap-box-shadow(0 3px 7px rgba(0,0,0,0.3));
 }
 .popover-title {
   padding: 9px 15px;
   line-height: 1;
   background-color: #f5f5f5;
   border-bottom:1px solid #eee;
-  @include border-radius(3px 3px 0 0);
+  @include bootstrap-border-radius(3px 3px 0 0);
 }
 .popover-content {
   padding: 14px;
   background-color: $white;
-  @include border-radius(0 0 3px 3px);
-  @include background-clip(padding-box);
+  @include bootstrap-border-radius(0 0 3px 3px);
+  @include bootstrap-background-clip(padding-box);
   p, ul, ol {
     margin-bottom: 0;
   }

data/stylesheets/compass_twitter_bootstrap/_progress-bars.scss

@@ -7,20 +7,32 @@
 
 // Webkit
 @-webkit-keyframes progress-bar-stripes {
-  from  { background-position: 0 0; }
-  to    { background-position: 40px 0; }
+  from  { background-position: 40px 0; }
+  to    { background-position: 0 0; }
 }
 
 // Firefox
 @-moz-keyframes progress-bar-stripes {
+  from  { background-position: 40px 0; }
+  to    { background-position: 0 0; }
+}
+
+// IE9
+@-ms-keyframes progress-bar-stripes {
+  from  { background-position: 40px 0; }
+  to    { background-position: 0 0; }
+}
+
+// Opera
+@-o-keyframes progress-bar-stripes {
   from  { background-position: 0 0; }
   to    { background-position: 40px 0; }
 }
 
 // Spec
 @keyframes progress-bar-stripes {
-  from  { background-position: 0 0; }
-  to    { background-position: 40px 0; }
+  from  { background-position: 40px 0; }
+  to    { background-position: 0 0; }
 }
 
 
@@ -33,9 +45,9 @@
   overflow: hidden;
   height: 18px;
   margin-bottom: 18px;
-  @include gradient-vertical(#f5f5f5, #f9f9f9);
-  @include box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
-  @include border-radius(4px);
+  @include bootstrap-gradient-vertical(#f5f5f5, #f9f9f9);
+  @include bootstrap-box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
+  @include bootstrap-border-radius(4px);
 }
 
 // Bar of progress
@@ -46,22 +58,24 @@
   font-size: 12px;
   text-align: center;
   text-shadow: 0 -1px 0 rgba(0,0,0,.25);
-  @include gradient-vertical(#149bdf, #0480be);
-  @include box-shadow(inset 0 -1px 0 rgba(0,0,0,.15));
-  @include box-sizing(border-box);
-  @include transition(width .6s ease);
+  @include bootstrap-gradient-vertical(#149bdf, #0480be);
+  @include bootstrap-box-shadow(inset 0 -1px 0 rgba(0,0,0,.15));
+  @include bootstrap-box-sizing(border-box);
+  @include bootstrap-transition(width .6s ease);
 }
 
 // Striped bars
 .progress-striped .bar {
-  @include gradient-striped(#62c462);
-  @include background-size(40px 40px);
+  @include bootstrap-gradient-striped(#149bdf);
+  @include bootstrap-background-size(40px 40px);
 }
 
 // Call animation for the active one
 .progress.active .bar {
   -webkit-animation: progress-bar-stripes 2s linear infinite;
      -moz-animation: progress-bar-stripes 2s linear infinite;
+      -ms-animation: progress-bar-stripes 2s linear infinite;
+       -o-animation: progress-bar-stripes 2s linear infinite;
           animation: progress-bar-stripes 2s linear infinite;
 }
 
@@ -72,24 +86,32 @@
 
 // Danger (red)
 .progress-danger .bar {
-  @include gradient-vertical(#ee5f5b, #c43c35);
+  @include bootstrap-gradient-vertical(#ee5f5b, #c43c35);
 }
 .progress-danger.progress-striped .bar {
-  @include gradient-striped(#ee5f5b);
+  @include bootstrap-gradient-striped(#ee5f5b);
 }
 
 // Success (green)
 .progress-success .bar {
-  @include gradient-vertical(#62c462, #57a957);
+  @include bootstrap-gradient-vertical(#62c462, #57a957);
 }
 .progress-success.progress-striped .bar {
-  @include gradient-striped(#62c462);
+  @include bootstrap-gradient-striped(#62c462);
 }
 
 // Info (teal)
 .progress-info .bar {
-  @include gradient-vertical(#5bc0de, #339bb9);
+  @include bootstrap-gradient-vertical(#5bc0de, #339bb9);
 }
 .progress-info.progress-striped .bar {
-  @include gradient-striped(#5bc0de);
+  @include bootstrap-gradient-striped(#5bc0de);
+}
+
+// Warning (orange)
+.progress-warning .bar {
+  @include bootstrap-gradient-vertical(lighten($orange, 15%), $orange);
+}
+.progress-warning.progress-striped .bar {
+  @include bootstrap-gradient-striped(lighten($orange, 15%));
 }