compass_twitter_bootstrap 2.0.1.2 → 2.0.3

data/stylesheets/compass_twitter_bootstrap/_modals.scss

@@ -24,7 +24,7 @@
 
 .modal-backdrop,
 .modal-backdrop.fade.in {
-  @include opacity(0.8);
+  @include bootstrap-opacity(80);
 }
 
 // Base modal
@@ -33,7 +33,6 @@
   top: 50%;
   left: 50%;
   z-index: $zindexModal;
-  max-height: 500px;
   overflow: auto;
   width: 560px;
   margin: -250px 0 0 -280px;
@@ -41,11 +40,11 @@
   border: 1px solid #999;
   border: 1px solid rgba(0,0,0,.3);
   *border: 1px solid #999; /* IE6-7 */
-  @include border-radius(6px);
-  @include box-shadow(0 3px 7px rgba(0,0,0,0.3));
-  @include background-clip(padding-box);
+  @include bootstrap-border-radius(6px);
+  @include bootstrap-box-shadow(0 3px 7px rgba(0,0,0,0.3));
+  @include bootstrap-background-clip(padding-box);
   &.fade {
-    @include transition(e('opacity .3s linear, top .3s ease-out'));
+    @include bootstrap-transition('opacity .3s linear, top .3s ease-out');
     top: -25%;
   }
   &.fade.in { top: 50%; }
@@ -59,10 +58,12 @@
 
 // Body (where all modal content resises)
 .modal-body {
+  overflow-y: auto;
+  max-height: 400px;
   padding: 15px;
 }
 // Remove bottom margin if need be
-.modal-body .modal-form {
+.modal-form {
   margin-bottom: 0;
 }
 
@@ -70,14 +71,20 @@
 .modal-footer {
   padding: 14px 15px 15px;
   margin-bottom: 0;
+  text-align: right; // right align buttons
   background-color: #f5f5f5;
   border-top: 1px solid #ddd;
-  @include border-radius(0 0 6px 6px);
-  @include box-shadow(inset 0 1px 0 $white);
-  @include clearfix();
-  .btn {
-    float: right;
+  @include bootstrap-border-radius(0 0 6px 6px);
+  @include bootstrap-box-shadow(inset 0 1px 0 $white);
+  @include bootstrap-clearfix(); // clear it in case folks use .pull-* classes on buttons
+
+  // Properly space out buttons
+  .btn + .btn {
     margin-left: 5px;
     margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs
   }
+  // but override that for button groups
+  .btn-group .btn + .btn {
+    margin-left: -1px;
+  }
 }

data/stylesheets/compass_twitter_bootstrap/_navbar.scss

@@ -6,42 +6,30 @@
 // -------------
 
 .navbar {
+  // Fix for IE7's bad z-indexing so dropdowns don't appear below content that follows the navbar
+  *position: relative;
+  *z-index: 2;
+
   overflow: visible;
   margin-bottom: $baseLineHeight;
 }
 
 // Gradient is applied to it's own element because overflow visible is not honored by IE when filter is present
 .navbar-inner {
+  min-height: $navbarHeight;
   padding-left:  20px;
   padding-right: 20px;
-  @include gradient-vertical($navbarBackgroundHighlight, $navbarBackground);
-  @include border-radius(4px);
-  $shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
-  @include box-shadow($shadow);
+  @include bootstrap-gradient-vertical($navbarBackgroundHighlight, $navbarBackground);
+  @include bootstrap-border-radius(4px);
+  @include bootstrap-box-shadow("0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1)");
 }
 
-// Navbar button for toggling navbar items in responsive layouts
-.btn-navbar {
-  display: none;
-  float: right;
-  padding: 7px 10px;
-  margin-left: 5px;
-  margin-right: 5px;
-  @include buttonBackground($navbarBackgroundHighlight, $navbarBackground);
-  $shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075);
-  @include box-shadow($shadow);
-}
-.btn-navbar .icon-bar {
-  display: block;
-  width: 18px;
-  height: 2px;
-  background-color: #f5f5f5;
-  @include border-radius(1px);
-  @include box-shadow(0 1px 0 rgba(0,0,0,.25));
-}
-.btn-navbar .icon-bar + .icon-bar {
-  margin-top: 3px;
+// Set width to auto for default container
+// We then reset it for fixed navbars in the #gridSystem mixin
+.navbar .container {
+  width: auto;
 }
+
 // Override the default collapsed state
 .nav-collapse.collapse {
   height: auto;
@@ -50,6 +38,7 @@
 
 // Brand, links, text, and buttons
 .navbar {
+  color: $navbarText;
   // Hover and active states
   .brand:hover {
     text-decoration: none;
@@ -58,47 +47,52 @@
   .brand {
     float: left;
     display: block;
-    padding: 8px 20px 12px;
+    // Vertically center the text given @navbarHeight
+    $elementHeight: 20px;
+    padding: (($navbarHeight - $elementHeight) / 2 - 2) 20px (($navbarHeight - $elementHeight) / 2 + 2);
     margin-left: -20px; // negative indent to left-align the text down the page
     font-size: 20px;
     font-weight: 200;
     line-height: 1;
-    color: $white;
+    color: $navbarBrandColor;
   }
   // Plain text in topbar
   .navbar-text {
     margin-bottom: 0;
-    line-height: 40px;
-    color: $navbarText;
-    a:hover {
-      color: $white;
-      background-color: transparent;
+    line-height: $navbarHeight;
+  }
+  // Janky solution for now to account for links outside the .nav
+  .navbar-link {
+    color: $navbarLinkColor;
+    &:hover {
+      color: $navbarLinkColorHover;
     }
   }
   // Buttons in navbar
   .btn,
   .btn-group {
-    margin-top: 5px; // make buttons vertically centered in navbar
+    @include bootstrap-navbarVerticalAlign(30px); // Vertically center in navbar
   }
   .btn-group .btn {
-    margin-top: 0; // then undo the margin here so we don't accidentally double it
+    margin: 0; // then undo the margin here so we don't accidentally double it
   }
 }
 
 // Navbar forms
 .navbar-form {
   margin-bottom: 0; // remove default bottom margin
-  @include clearfix();
+  @include bootstrap-clearfix();
+  input,
+  select,
+  .radio,
+  .checkbox {
+    @include bootstrap-navbarVerticalAlign(30px); // Vertically center in navbar
+  }
   input,
   select {
     display: inline-block;
-    margin-top: 5px;
     margin-bottom: 0;
   }
-  .radio,
-  .checkbox {
-    margin-top: 5px;
-  }
   input[type="image"],
   input[type="checkbox"],
   input[type="radio"] {
@@ -118,60 +112,76 @@
 .navbar-search {
   position: relative;
   float: left;
-  margin-top: 6px;
+  @include bootstrap-navbarVerticalAlign(28px); // Vertically center in navbar
   margin-bottom: 0;
   .search-query {
     padding: 4px 9px;
-    @include font-sans-serif(13px, normal, 1);
+    @include bootstrap-font-sans-serif(13px, normal, 1);
     color: $white;
-    color: rgba(255,255,255,.75);
-    background: #666;
-    background: 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);
-    @include box-shadow($shadow);
-    @include transition(none);
-
-    // Placeholder text gets special styles; can't be bundled together though for some reason
-    @include placeholder($grayLighter);
-
-    // Hover states
-    &:hover {
-      color: $white;
-      background-color: $grayLight;
-      background-color: rgba(255,255,255,.5);
+    background-color: $navbarSearchBackground;
+    border: 1px solid $navbarSearchBorder;
+    @include bootstrap-box-shadow("inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.15)");
+    @include bootstrap-transition(none);
+
+    // Placeholder text gets special styles; can't be a grouped selector
+    &:-moz-placeholder {
+      color: $navbarSearchPlaceholderColor;
     }
+    &::-webkit-input-placeholder {
+      color: $navbarSearchPlaceholderColor;
+    }
+
     // Focus states (we use .focused since IE7-8 and down doesn't support :focus)
     &:focus,
     &.focused {
       padding: 5px 10px;
       color: $grayDark;
       text-shadow: 0 1px 0 $white;
-      background-color: $white;
+      background-color: $navbarSearchBackgroundFocus;
       border: 0;
-      @include box-shadow(0 0 3px rgba(0,0,0,.15));
+      @include bootstrap-box-shadow(0 0 3px rgba(0,0,0,.15));
       outline: 0;
     }
   }
 }
 
 
+
 // FIXED NAVBAR
 // ------------
 
-.navbar-fixed-top {
+// Shared (top/bottom) styles
+.navbar-fixed-top,
+.navbar-fixed-bottom {
   position: fixed;
-  top: 0;
   right: 0;
   left: 0;
   z-index: $zindexFixedNavbar;
+  margin-bottom: 0; // remove 18px margin for static navbar
 }
-.navbar-fixed-top .navbar-inner {
+.navbar-fixed-top .navbar-inner,
+.navbar-fixed-bottom .navbar-inner {
   padding-left:  0;
   padding-right: 0;
-  @include border-radius(0);
+  @include bootstrap-border-radius(0);
 }
 
+.navbar-fixed-top .container,
+.navbar-fixed-bottom .container {
+  @include bootstrap-grid-core-span($gridColumns, $gridColumnWidth, $gridGutterWidth);
+}
+
+// Fixed to top
+.navbar-fixed-top {
+  top: 0;
+}
+
+// Fixed to bottom
+.navbar-fixed-bottom {
+  bottom: 0;
+}
+
+
 
 // NAVIGATION
 // ----------
@@ -194,12 +204,29 @@
 // Links
 .navbar .nav > li > a {
   float: none;
-  padding: 10px 10px 11px;
+  // Vertically center the text given @navbarHeight
+  $elementHeight: 20px;
+  padding: (($navbarHeight - $elementHeight) / 2 - 1) 10px (($navbarHeight - $elementHeight) / 2 + 1);
   line-height: 19px;
   color: $navbarLinkColor;
   text-decoration: none;
   text-shadow: 0 -1px 0 rgba(0,0,0,.25);
 }
+// Buttons
+.navbar .btn {
+  display: inline-block;
+  padding: 4px 10px 4px;
+  // Vertically center the button given @navbarHeight
+  $elementHeight: 28px;
+  margin: (($navbarHeight - $elementHeight) / 2 - 1) 5px (($navbarHeight - $elementHeight) / 2);
+  line-height: $baseLineHeight;
+}
+.navbar .btn-group {
+  margin: 0;
+  // Vertically center the button given @navbarHeight
+  $elementHeight: 28px;
+  padding: (($navbarHeight - $elementHeight) / 2 - 1) 5px (($navbarHeight - $elementHeight) / 2);
+}
 // Hover
 .navbar .nav > li > a:hover {
   background-color: $navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover from .active
@@ -210,9 +237,9 @@
 // Active nav items
 .navbar .nav .active > a,
 .navbar .nav .active > a:hover {
-  color: $navbarLinkColorHover;
+  color: $navbarLinkColorActive;
   text-decoration: none;
-  background-color: $navbarBackground;
+  background-color: $navbarLinkBackgroundActive;
 }
 
 // Dividers (basically a vertical hr)
@@ -231,6 +258,28 @@
   margin-right: 0;
 }
 
+// Navbar button for toggling navbar items in responsive layouts
+// These definitions need to come after '.navbar .btn'
+.navbar .btn-navbar {
+  display: none;
+  float: right;
+  padding: 7px 10px;
+  margin-left: 5px;
+  margin-right: 5px;
+  @include bootstrap-buttonBackground($navbarBackgroundHighlight, $navbarBackground);
+  @include bootstrap-box-shadow("inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075)");
+}
+.navbar .btn-navbar .icon-bar {
+  display: block;
+  width: 18px;
+  height: 2px;
+  background-color: #f5f5f5;
+  @include bootstrap-border-radius(1px);
+  @include bootstrap-box-shadow(0 1px 0 rgba(0,0,0,.25));
+}
+.btn-navbar .icon-bar + .icon-bar {
+  margin-top: 3px;
+}
 
 
 // Dropdown menus
@@ -238,15 +287,13 @@
 
 // Menu position and menu carets
 .navbar .dropdown-menu {
-  margin-top: 1px;
-  @include border-radius(4px);
   &:before {
     content: '';
     display: inline-block;
     border-left:   7px solid transparent;
     border-right:  7px solid transparent;
     border-bottom: 7px solid #ccc;
-    border-bottom-color: rgba(0,0,0,.2);
+    border-bottom-color: $dropdownBorder;
     position: absolute;
     top: -7px;
     left: 9px;
@@ -256,36 +303,54 @@
     display: inline-block;
     border-left:   6px solid transparent;
     border-right:  6px solid transparent;
-    border-bottom: 6px solid $white;
+    border-bottom: 6px solid $dropdownBackground;
     position: absolute;
     top: -6px;
     left: 10px;
   }
 }
-
+// Menu position and menu caret support for dropups via extra dropup class
+.navbar-fixed-bottom .dropdown-menu {
+  &:before {
+    border-top: 7px solid #ccc;
+    border-top-color: $dropdownBorder;
+    border-bottom: 0;
+    bottom: -7px;
+    top: auto;
+  }
+  &:after {
+    border-top: 6px solid $dropdownBackground;
+    border-bottom: 0;
+    bottom: -6px;
+    top: auto;
+  }
+}
 // Dropdown toggle caret
-.navbar .nav .dropdown-toggle .caret,
-.navbar .nav .open.dropdown .caret {
+.navbar .nav li.dropdown .dropdown-toggle .caret,
+.navbar .nav li.dropdown.open .caret {
   border-top-color: $white;
+  border-bottom-color: $white;
 }
-.navbar .nav .active .caret {
-  @include opacity(1.0);
+.navbar .nav li.dropdown.active .caret {
+  @include bootstrap-opacity(100);
 }
 
 // Remove background color from open dropdown
-.navbar .nav .open > .dropdown-toggle,
-.navbar .nav .active > .dropdown-toggle,
-.navbar .nav .open.active > .dropdown-toggle {
+.navbar .nav li.dropdown.open > .dropdown-toggle,
+.navbar .nav li.dropdown.active > .dropdown-toggle,
+.navbar .nav li.dropdown.open.active > .dropdown-toggle {
   background-color: transparent;
 }
 
 // Dropdown link on hover
-.navbar .nav .active > .dropdown-toggle:hover {
+.navbar .nav li.dropdown.active > .dropdown-toggle:hover {
   color: $white;
 }
 
 // Right aligned menus need alt position
-.navbar .nav.pull-right .dropdown-menu {
+// TODO: rejigger this at some point to simplify the selectors
+.navbar .pull-right .dropdown-menu,
+.navbar .dropdown-menu.pull-right {
   left: auto;
   right: 0;
   &:before {