compass_twitter_bootstrap 2.0.1.2 → 2.0.3

data/stylesheets_sass/compass_twitter_bootstrap/_modals.sass

@@ -27,7 +27,7 @@
 
 .modal-backdrop,
 .modal-backdrop.fade.in
-  +opacity(0.8)
+  +bootstrap-opacity(80)
 
 // Base modal
 .modal
@@ -35,7 +35,6 @@
   top: 50%
   left: 50%
   z-index: $zindexModal
-  max-height: 500px
   overflow: auto
   width: 560px
   margin: -250px 0 0 -280px
@@ -44,11 +43,11 @@
   border: 1px solid rgba(0, 0, 0, 0.3)
   *border: 1px solid #999
   /* IE6-7
-  +border-radius(6px)
-  +box-shadow(0 3px 7px rgba(0, 0, 0, 0.3))
-  +background-clip(padding-box)
+  +bootstrap-border-radius(6px)
+  +bootstrap-box-shadow(0 3px 7px rgba(0, 0, 0, 0.3))
+  +bootstrap-background-clip(padding-box)
   &.fade
-    +transition(e("opacity .3s linear, top .3s ease-out"))
+    +bootstrap-transition("opacity .3s linear, top .3s ease-out")
     top: -25%
   &.fade.in
     top: 50%
@@ -62,23 +61,31 @@
 
 // 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
 
 // Footer (for actions)
 .modal-footer
   padding: 14px 15px 15px
   margin-bottom: 0
+  text-align: right
+  // right align buttons
   background-color: #f5f5f5
   border-top: 1px solid #ddd
-  +border-radius(0 0 6px 6px)
-  +box-shadow(inset 0 1px 0 $white)
-  +clearfix
-  .btn
-    float: right
+  +bootstrap-border-radius(0 0 6px 6px)
+  +bootstrap-box-shadow(inset 0 1px 0 $white)
+  +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_sass/compass_twitter_bootstrap/_navbar.sass

@@ -5,39 +5,25 @@
 // -------------
 
 .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
-  +gradient-vertical($navbarBackgroundHighlight, $navbarBackground)
-  +border-radius(4px)
-  $shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1)
-  +box-shadow($shadow)
+  +bootstrap-gradient-vertical($navbarBackgroundHighlight, $navbarBackground)
+  +bootstrap-border-radius(4px)
+  +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
-  +buttonBackground($navbarBackgroundHighlight, $navbarBackground)
-  $shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075)
-  +box-shadow($shadow)
-
-.btn-navbar .icon-bar
-  display: block
-  width: 18px
-  height: 2px
-  background-color: #f5f5f5
-  +border-radius(1px)
-  +box-shadow(0 1px 0 rgba(0, 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
@@ -45,6 +31,7 @@
 
 // Brand, links, text, and buttons
 .navbar
+  color: $navbarText
   // Hover and active states
   .brand:hover
     text-decoration: none
@@ -52,43 +39,48 @@
   .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
+    +bootstrap-navbarVerticalAlign(30px)
+    // Vertically center in navbar
   .btn-group .btn
-    margin-top: 0
+    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
-  +clearfix
+  +bootstrap-clearfix
+  input,
+  select,
+  .radio,
+  .checkbox
+    +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"]
@@ -106,51 +98,64 @@
 .navbar-search
   position: relative
   float: left
-  margin-top: 6px
+  +bootstrap-navbarVerticalAlign(28px)
+  // Vertically center in navbar
   margin-bottom: 0
   .search-query
     padding: 4px 9px
-    +font-sans-serif(13px, normal, 1)
+    +bootstrap-font-sans-serif(13px, normal, 1)
     color: $white
-    color: rgba(255, 255, 255, 0.75)
-    background: #666
-    background: rgba(255, 255, 255, 0.3)
-    border: 1px solid #111
-    $shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.15)
-    +box-shadow($shadow)
-    +transition(none)
-    // Placeholder text gets special styles; can't be bundled together though for some reason
-    +placeholder($grayLighter)
-    // Hover states
-    &:hover
-      color: $white
-      background-color: $grayLight
-      background-color: rgba(255, 255, 255, 0.5)
+    background-color: $navbarSearchBackground
+    border: 1px solid $navbarSearchBorder
+    +bootstrap-box-shadow("inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.15)")
+    +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
-      +box-shadow(0 0 3px rgba(0, 0, 0, 0.15))
+      +bootstrap-box-shadow(0 0 3px rgba(0, 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
-  +border-radius(0)
+  +bootstrap-border-radius(0)
+
+.navbar-fixed-top .container,
+.navbar-fixed-bottom .container
+  +bootstrap-grid-core-span($gridColumns, $gridColumnWidth, $gridGutterWidth)
+
+// Fixed to top
+.navbar-fixed-top
+  top: 0
+
+// Fixed to bottom
+.navbar-fixed-bottom
+  bottom: 0
 
 // NAVIGATION
 // ----------
@@ -173,12 +178,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, 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
@@ -190,9 +212,9 @@
 
 .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)
 .navbar .divider-vertical
@@ -208,20 +230,40 @@
   margin-left: 10px
   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
+  +bootstrap-buttonBackground($navbarBackgroundHighlight, $navbarBackground)
+  +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
+  +bootstrap-border-radius(1px)
+  +bootstrap-box-shadow(0 1px 0 rgba(0, 0, 0, 0.25))
+
+.btn-navbar .icon-bar + .icon-bar
+  margin-top: 3px
+
 // Dropdown menus
 // --------------
 
 // Menu position and menu carets
 .navbar .dropdown-menu
-  margin-top: 1px
-  +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, 0.2)
+    border-bottom-color: $dropdownBorder
     position: absolute
     top: -7px
     left: 9px
@@ -230,33 +272,51 @@
     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
-  +opacity(1)
+.navbar .nav li.dropdown.active .caret
+  +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

data/stylesheets_sass/compass_twitter_bootstrap/_navs.sass

@@ -17,6 +17,25 @@
   text-decoration: none
   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, 0.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
@@ -36,8 +55,8 @@
 // --------
 
 .nav-list
-  padding-left: 14px
-  padding-right: 14px
+  padding-left: 15px
+  padding-right: 15px
   margin-bottom: 0
 
 .nav-list > li > a,
@@ -49,8 +68,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, 0.2)
   background-color: $linkColor
@@ -58,6 +77,10 @@
 .nav-list [class^="icon-"]
   margin-right: 2px
 
+// Dividers (basically an hr) within the dropdown
+.nav-list .divider
+  +bootstrap-nav-divider
+
 // TABS AND PILLS
 // -------------
 
@@ -65,7 +88,7 @@
 
 .nav-tabs,
 .nav-pills
-  +clearfix
+  +bootstrap-clearfix
 
 .nav-tabs > li,
 .nav-pills > li
@@ -94,8 +117,9 @@
 .nav-tabs > li > a
   padding-top: 9px
   padding-bottom: 9px
+  line-height: $baseLineHeight
   border: 1px solid transparent
-  +border-radius(4px 4px 0 0)
+  +bootstrap-border-radius(4px 4px 0 0)
   &:hover
     border-color: $grayLighter $grayLighter #dddddd
 
@@ -118,12 +142,12 @@
   padding-bottom: 8px
   margin-top: 2px
   margin-bottom: 2px
-  +border-radius(5px)
+  +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
 
@@ -144,13 +168,13 @@
 
 .nav-tabs.nav-stacked > li > a
   border: 1px solid #ddd
-  +border-radius(0)
+  +bootstrap-border-radius(0)
 
 .nav-tabs.nav-stacked > li:first-child > a
-  +border-radius(4px 4px 0 0)
+  +bootstrap-border-radius(4px 4px 0 0)
 
 .nav-tabs.nav-stacked > li:last-child > a
-  +border-radius(0 0 4px 4px)
+  +bootstrap-border-radius(0 0 4px 4px)
 
 .nav-tabs.nav-stacked > li > a:hover
   border-color: #ddd
@@ -167,15 +191,13 @@
 // DROPDOWNS
 // ---------
 
-// Position the menu
-
-.nav-tabs .dropdown-menu,
-.nav-pills .dropdown-menu
-  margin-top: 1px
-  border-width: 1px
+.nav-tabs .dropdown-menu
+  +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
-  +border-radius(4px)
+  +bootstrap-border-radius(4px)
+  // make rounded corners match the pills
 
 // Default dropdown links
 // -------------------------
@@ -184,11 +206,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
 // -------------------------
@@ -196,6 +220,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
 // -------------------------
@@ -208,16 +233,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
-  +opacity(1)
+  border-bottom-color: $white
+  +bootstrap-opacity(100)
 
 // Dropdowns in stacked tabs
 .tabs-stacked .open > a:hover
@@ -231,17 +257,17 @@
 
 // Clear any floats
 .tabbable
-  +clearfix
+  +bootstrap-clearfix
 
 .tab-content
-  overflow: hidden
+  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
 
 // Show/hide tabbable areas
@@ -257,21 +283,21 @@
 // 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
-  +border-radius(0 0 4px 4px)
+.tabs-below > .nav-tabs > li > a
+  +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
 
 // LEFT & RIGHT
@@ -279,48 +305,48 @@
 
 // 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
-  +border-radius(4px 0 0 4px)
+  +bootstrap-border-radius(4px 0 0 4px)
 
-.tabs-left .nav-tabs > li > a:hover
+.tabs-left > .nav-tabs > li > a:hover
   border-color: $grayLighter #dddddd $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
-  +border-radius(0 4px 4px 0)
+  +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 #dddddd
 
-.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