compass_twitter_bootstrap 2.0.3 → 2.2.2

data/stylesheets/compass_twitter_bootstrap/_navs.scss

@@ -1,6 +1,6 @@
-// NAVIGATIONS
-// -----------
-
+//
+// Navs
+// --------------------------------------------------
 
 
 // BASE CLASS
@@ -21,28 +21,19 @@
   background-color: $grayLighter;
 }
 
+// Prevent IE8 from misplacing imgs
+// See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989
+.nav > li > a > img {
+  max-width: none;
+}
+
 // 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 {
+.nav-header {
   display: block;
   padding: 3px 15px;
   font-size: 11px;
@@ -58,6 +49,7 @@
 }
 
 
+
 // NAV LIST
 // --------
 
@@ -81,12 +73,13 @@
   text-shadow: 0 -1px 0 rgba(0,0,0,.2);
   background-color: $linkColor;
 }
-.nav-list [class^="icon-"] {
+.nav-list [class^="icon-"],
+.nav-list [class*=" icon-"] {
   margin-right: 2px;
 }
 // Dividers (basically an hr) within the dropdown
 .nav-list .divider {
-  @include bootstrap-nav-divider();
+  @include ctb-nav-divider();
 }
 
 
@@ -97,7 +90,7 @@
 // Common styles
 .nav-tabs,
 .nav-pills {
-  @include bootstrap-clearfix();
+  @include ctb-clearfix();
 }
 .nav-tabs > li,
 .nav-pills > li {
@@ -124,11 +117,11 @@
 }
 // Actual tabs (as links)
 .nav-tabs > li > a {
-  padding-top: 9px;
-  padding-bottom: 9px;
+  padding-top: 8px;
+  padding-bottom: 8px;
   line-height: $baseLineHeight;
   border: 1px solid transparent;
-  @include bootstrap-border-radius(4px 4px 0 0);
+  @include ctb-border-radius(4px 4px 0 0);
   &:hover {
     border-color: $grayLighter $grayLighter #ddd;
   }
@@ -137,7 +130,7 @@
 .nav-tabs > .active > a,
 .nav-tabs > .active > a:hover {
   color: $gray;
-  background-color: $white;
+  background-color: $bodyBackground;
   border: 1px solid #ddd;
   border-bottom-color: transparent;
   cursor: default;
@@ -153,7 +146,7 @@
   padding-bottom: 8px;
   margin-top: 2px;
   margin-bottom: 2px;
-  @include bootstrap-border-radius(5px);
+  @include ctb-border-radius(5px);
 }
 
 // Active state
@@ -182,13 +175,13 @@
 }
 .nav-tabs.nav-stacked > li > a {
   border: 1px solid #ddd;
-  @include bootstrap-border-radius(0);
+  @include ctb-border-radius(0);
 }
 .nav-tabs.nav-stacked > li:first-child > a {
-  @include bootstrap-border-radius(4px 4px 0 0);
+  @include ctb-border-top-radius(4px);
 }
 .nav-tabs.nav-stacked > li:last-child > a {
-  @include bootstrap-border-radius(0 0 4px 4px);
+  @include ctb-border-bottom-radius(4px);
 }
 .nav-tabs.nav-stacked > li > a:hover {
   border-color: #ddd;
@@ -209,39 +202,43 @@
 // ---------
 
 .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
+  @include ctb-border-radius(0 0 6px 6px); // remove the top rounded corners here since there is a hard edge above the menu
 }
 .nav-pills .dropdown-menu {
-  @include bootstrap-border-radius(4px); // make rounded corners match the pills
+  @include ctb-border-radius(6px); // make rounded corners match the pills
 }
 
 // Default dropdown links
 // -------------------------
 // Make carets use linkColor to start
-.nav-tabs .dropdown-toggle .caret,
-.nav-pills .dropdown-toggle .caret {
+.nav .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 {
+.nav .dropdown-toggle:hover .caret {
   border-top-color: $linkColorHover;
   border-bottom-color: $linkColorHover;
 }
+/* move down carets for tabs */
+.nav-tabs .dropdown-toggle .caret {
+  margin-top: 8px;
+}
 
 // Active dropdown links
 // -------------------------
-.nav-tabs .active .dropdown-toggle .caret,
-.nav-pills .active .dropdown-toggle .caret {
-  border-top-color: $grayDark;
-  border-bottom-color: $grayDark;
+.nav .active .dropdown-toggle .caret {
+  border-top-color: #fff;
+  border-bottom-color: #fff;
+}
+.nav-tabs .active .dropdown-toggle .caret {
+  border-top-color: $gray;
+  border-bottom-color: $gray;
 }
 
 // Active:hover dropdown links
 // -------------------------
 .nav > .dropdown.active > a:hover {
-  color: $black;
   cursor: pointer;
 }
 
@@ -259,7 +256,7 @@
 .nav li.dropdown.open a:hover .caret {
   border-top-color: $white;
   border-bottom-color: $white;
-  @include bootstrap-opacity(100);
+  @include ctb-opacity(1);
 }
 
 // Dropdowns in stacked tabs
@@ -278,7 +275,7 @@
 
 // Clear any floats
 .tabbable {
-  @include bootstrap-clearfix();
+  @include ctb-clearfix();
 }
 .tab-content {
   overflow: auto; // prevent content from running below tabs
@@ -313,7 +310,7 @@
   margin-bottom: 0;
 }
 .tabs-below > .nav-tabs > li > a {
-  @include bootstrap-border-radius(0 0 4px 4px);
+  @include ctb-border-radius(0 0 4px 4px);
   &:hover {
     border-bottom-color: transparent;
     border-top-color: #ddd;
@@ -347,7 +344,7 @@
 }
 .tabs-left > .nav-tabs > li > a {
   margin-right: -1px;
-  @include bootstrap-border-radius(4px 0 0 4px);
+  @include ctb-border-radius(4px 0 0 4px);
 }
 .tabs-left > .nav-tabs > li > a:hover {
   border-color: $grayLighter #ddd $grayLighter $grayLighter;
@@ -366,7 +363,7 @@
 }
 .tabs-right > .nav-tabs > li > a {
   margin-left: -1px;
-  @include bootstrap-border-radius(0 4px 4px 0);
+  @include ctb-border-radius(0 4px 4px 0);
 }
 .tabs-right > .nav-tabs > li > a:hover {
   border-color: $grayLighter $grayLighter $grayLighter #ddd;
@@ -376,3 +373,19 @@
   border-color: #ddd #ddd #ddd transparent;
   *border-left-color: $white;
 }
+
+
+
+// DISABLED STATES
+// ---------------
+
+// Gray out text
+.nav > .disabled > a {
+  color: $grayLight;
+}
+// Nuke hover effects
+.nav > .disabled > a:hover {
+  text-decoration: none;
+  background-color: transparent;
+  cursor: default;
+}

data/stylesheets/compass_twitter_bootstrap/_pager.scss

@@ -1,35 +1,40 @@
-// PAGER
-// -----
+//
+// Pager pagination
+// --------------------------------------------------
+
 
 .pager {
-  margin-left: 0;
-  margin-bottom: $baseLineHeight;
+  margin: $baseLineHeight 0;
   list-style: none;
   text-align: center;
-  @include bootstrap-clearfix();
+  @include ctb-clearfix();
 }
 .pager li {
   display: inline;
 }
-.pager a {
+.pager li > a,
+.pager li > span {
   display: inline-block;
   padding: 5px 14px;
   background-color: #fff;
   border: 1px solid #ddd;
-  @include bootstrap-border-radius(15px);
+  @include ctb-border-radius(15px);
 }
-.pager a:hover {
+.pager li > a:hover {
   text-decoration: none;
   background-color: #f5f5f5;
 }
-.pager .next a {
+.pager .next > a,
+.pager .next > span {
   float: right;
 }
-.pager .previous a {
+.pager .previous > a,
+.pager .previous > span {
   float: left;
 }
-.pager .disabled a,
-.pager .disabled a:hover {
+.pager .disabled > a,
+.pager .disabled > a:hover,
+.pager .disabled > span {
   color: $grayLight;
   background-color: #fff;
   cursor: default;

data/stylesheets/compass_twitter_bootstrap/_pagination.scss

@@ -1,56 +1,121 @@
-// PAGINATION
-// ----------
+//
+// Pagination (multiple pages)
+// --------------------------------------------------
 
+// Space out pagination from surrounding content
 .pagination {
-  height: $baseLineHeight * 2;
   margin: $baseLineHeight 0;
- }
+}
+
 .pagination ul {
+  // Allow for text-based alignment
   display: inline-block;
-  @include bootstrap-ie7-inline-block();
+  @include ctb-ie7-inline-block();
+  // Reset default ul styles
   margin-left: 0;
   margin-bottom: 0;
-  @include bootstrap-border-radius(3px);
-  @include bootstrap-box-shadow(0 1px 2px rgba(0,0,0,.05));
+  // Visuals
+  @include ctb-border-radius($baseBorderRadius);
+  @include ctb-box-shadow(0 1px 2px rgba(0,0,0,.05));
 }
-.pagination li {
-    display: inline;
-  }
-.pagination a {
-  float: left;
-  padding: 0 14px;
-  line-height: ($baseLineHeight * 2) - 2;
+.pagination ul > li {
+  display: inline; // Remove list-style and block-level defaults
+}
+.pagination ul > li > a,
+.pagination ul > li > span {
+  float: left; // Collapse white-space
+  padding: 4px 12px;
+  line-height: $baseLineHeight;
   text-decoration: none;
-  border: 1px solid #ddd;
+  background-color: $paginationBackground;
+  border: 1px solid $paginationBorder;
   border-left-width: 0;
 }
-.pagination a:hover,
-.pagination .active a {
-  background-color: #f5f5f5;
+.pagination ul > li > a:hover,
+.pagination ul > .active > a,
+.pagination ul > .active > span {
+  background-color: $paginationActiveBackground;
 }
-.pagination .active a {
+.pagination ul > .active > a,
+.pagination ul > .active > span {
   color: $grayLight;
   cursor: default;
 }
-.pagination .disabled span,
-.pagination .disabled a,
-.pagination .disabled a:hover {
+.pagination ul > .disabled > span,
+.pagination ul > .disabled > a,
+.pagination ul > .disabled > a:hover {
   color: $grayLight;
   background-color: transparent;
   cursor: default;
 }
-.pagination li:first-child a {
+.pagination ul > li:first-child > a,
+.pagination ul > li:first-child > span {
   border-left-width: 1px;
-  @include bootstrap-border-radius(3px 0 0 3px);
+  @include ctb-border-left-radius($baseBorderRadius);
 }
-.pagination li:last-child a {
-  @include bootstrap-border-radius(0 3px 3px 0);
+.pagination ul > li:last-child > a,
+.pagination ul > li:last-child > span {
+  @include ctb-border-right-radius($baseBorderRadius);
 }
 
-// Centered
+
+// Alignment
+// --------------------------------------------------
+
 .pagination-centered {
   text-align: center;
 }
 .pagination-right {
   text-align: right;
 }
+
+
+// Sizing
+// --------------------------------------------------
+
+// Large
+.pagination-large {
+  ul > li > a,
+  ul > li > span {
+    padding: $paddingLarge;
+    font-size: $fontSizeLarge;
+  }
+  ul > li:first-child > a,
+  ul > li:first-child > span {
+    @include ctb-border-left-radius($borderRadiusLarge);
+  }
+  ul > li:last-child > a,
+  ul > li:last-child > span {
+    @include ctb-border-right-radius($borderRadiusLarge);
+  }
+}
+
+// Small and mini
+.pagination-mini,
+.pagination-small {
+  ul > li:first-child > a,
+  ul > li:first-child > span {
+    @include ctb-border-left-radius($borderRadiusSmall);
+  }
+  ul > li:last-child > a,
+  ul > li:last-child > span {
+    @include ctb-border-right-radius($borderRadiusSmall);
+  }
+}
+
+// Small
+.pagination-small {
+  ul > li > a,
+  ul > li > span {
+    padding: $paddingSmall;
+    font-size: $fontSizeSmall;
+  }
+}
+// Mini
+.pagination-mini {
+  ul > li > a,
+  ul > li > span {
+    padding: $paddingMini;
+    font-size: $fontSizeMini;
+  }
+}

data/stylesheets/compass_twitter_bootstrap/_popovers.scss

@@ -1,5 +1,7 @@
-// POPOVERS
-// --------
+//
+// Popovers
+// --------------------------------------------------
+
 
 .popover {
   position: absolute;
@@ -7,43 +9,121 @@
   left: 0;
   z-index: $zindexPopover;
   display: none;
-  padding: 5px;
-  &.top    { margin-top:  -5px; }
-  &.right  { margin-left:  5px; }
-  &.bottom { margin-top:   5px; }
-  &.left   { margin-left: -5px; }
-  &.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;
-    height: 0;
-  }
-}
-.popover-inner {
-  padding: 3px;
-  width: 280px;
-  overflow: hidden;
-  background: $black; // has to be full background declaration for IE fallback
-  background: rgba(0,0,0,.8);
-  @include bootstrap-border-radius(6px);
-  @include bootstrap-box-shadow(0 3px 7px rgba(0,0,0,0.3));
+  width: 236px;
+  padding: 1px;
+  text-align: left; // Reset given new insertion method
+  background-color: $popoverBackground;
+  -webkit-background-clip: padding-box;
+     -moz-background-clip: padding;
+          background-clip: padding-box;
+  border: 1px solid #ccc;
+  border: 1px solid rgba(0,0,0,.2);
+  @include ctb-border-radius(6px);
+  @include ctb-box-shadow(0 5px 10px rgba(0,0,0,.2));
+
+  // Overrides for proper insertion
+  white-space: normal;
+
+  // Offset the popover to account for the popover arrow
+  &.top     { margin-top: -10px; }
+  &.right   { margin-left: 10px; }
+  &.bottom  { margin-top: 10px; }
+  &.left    { margin-left: -10px; }
 }
+
 .popover-title {
-  padding: 9px 15px;
-  line-height: 1;
-  background-color: #f5f5f5;
-  border-bottom:1px solid #eee;
-  @include bootstrap-border-radius(3px 3px 0 0);
+  margin: 0; // reset heading margin
+  padding: 8px 14px;
+  font-size: 14px;
+  font-weight: normal;
+  line-height: 18px;
+  background-color: $popoverTitleBackground;
+  border-bottom: 1px solid darken($popoverTitleBackground, 5%);
+  @include ctb-border-radius(5px 5px 0 0);
 }
+
 .popover-content {
-  padding: 14px;
-  background-color: $white;
-  @include bootstrap-border-radius(0 0 3px 3px);
-  @include bootstrap-background-clip(padding-box);
-  p, ul, ol {
-    margin-bottom: 0;
+  padding: 9px 14px;
+}
+
+// Arrows
+//
+// .arrow is outer, .arrow:after is inner
+
+.popover .arrow,
+.popover .arrow:after {
+  position: absolute;
+  display: block;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
+}
+.popover .arrow {
+  border-width: $popoverArrowOuterWidth;
+}
+.popover .arrow:after {
+  border-width: $popoverArrowWidth;
+  content: "";
+}
+
+.popover {
+  &.top .arrow {
+    left: 50%;
+    margin-left: -$popoverArrowOuterWidth;
+    border-bottom-width: 0;
+    border-top-color: #999; // IE8 fallback
+    border-top-color: $popoverArrowOuterColor;
+    bottom: -$popoverArrowOuterWidth;
+    &:after {
+      bottom: 1px;
+      margin-left: -$popoverArrowWidth;
+      border-bottom-width: 0;
+      border-top-color: $popoverArrowColor;
+    }
   }
+  &.right .arrow {
+    top: 50%;
+    left: -$popoverArrowOuterWidth;
+    margin-top: -$popoverArrowOuterWidth;
+    border-left-width: 0;
+    border-right-color: #999; // IE8 fallback
+    border-right-color: $popoverArrowOuterColor;
+    &:after {
+      left: 1px;
+      bottom: -$popoverArrowWidth;
+      border-left-width: 0;
+      border-right-color: $popoverArrowColor;
+    }
+  }
+  &.bottom .arrow {
+    left: 50%;
+    margin-left: -$popoverArrowOuterWidth;
+    border-top-width: 0;
+    border-bottom-color: #999; // IE8 fallback
+    border-bottom-color: $popoverArrowOuterColor;
+    top: -$popoverArrowOuterWidth;
+    &:after {
+      top: 1px;
+      margin-left: -$popoverArrowWidth;
+      border-top-width: 0;
+      border-bottom-color: $popoverArrowColor;
+    }
+  }
+
+  &.left .arrow {
+    top: 50%;
+    right: -$popoverArrowOuterWidth;
+    margin-top: -$popoverArrowOuterWidth;
+    border-right-width: 0;
+    border-left-color: #999; // IE8 fallback
+    border-left-color: $popoverArrowOuterColor;
+    &:after {
+      right: 1px;
+      border-right-width: 0;
+      border-left-color: $popoverArrowColor;
+      bottom: -$popoverArrowWidth;
+    }
+  }
+
 }