compass_twitter_bootstrap 2.0.3 → 2.2.2

data/stylesheets_sass/compass_twitter_bootstrap/_modals.sass

@@ -1,16 +1,6 @@
-// MODALS
-// ------
-
-// Recalculate z-index where appropriate
-.modal-open
-  .dropdown-menu
-    z-index: $zindexDropdown + $zindexModal
-  .dropdown.open
-    *z-index: $zindexDropdown + $zindexModal
-  .popover
-    z-index: $zindexPopover + $zindexModal
-  .tooltip
-    z-index: $zindexTooltip + $zindexModal
+//
+// Modals
+// --------------------------------------------------
 
 // Background
 .modal-backdrop
@@ -27,30 +17,31 @@
 
 .modal-backdrop,
 .modal-backdrop.fade.in
-  +bootstrap-opacity(80)
+  +ctb-opacity(80)
 
 // Base modal
 .modal
   position: fixed
-  top: 50%
+  top: 10%
   left: 50%
   z-index: $zindexModal
-  overflow: auto
   width: 560px
-  margin: -250px 0 0 -280px
+  margin-left: -280px
   background-color: $white
   border: 1px solid #999
   border: 1px solid rgba(0, 0, 0, 0.3)
   *border: 1px solid #999
   /* IE6-7
-  +bootstrap-border-radius(6px)
-  +bootstrap-box-shadow(0 3px 7px rgba(0, 0, 0, 0.3))
-  +bootstrap-background-clip(padding-box)
+  +ctb-border-radius(6px)
+  +ctb-box-shadow(0 3px 7px rgba(0, 0, 0, 0.3))
+  +ctb-background-clip(padding-box)
+  // Remove focus outline from opened modal
+  outline: none
   &.fade
-    +bootstrap-transition("opacity .3s linear, top .3s ease-out")
+    +ctb-transition("opacity .3s linear, top .3s ease-out")
     top: -25%
   &.fade.in
-    top: 50%
+    top: 10%
 
 .modal-header
   padding: 9px 15px
@@ -58,9 +49,14 @@
   // Close icon
   .close
     margin-top: 2px
+  // Heading
+  h3
+    margin: 0
+    line-height: 30px
 
-// Body (where all modal content resises)
+// Body (where all modal content resides)
 .modal-body
+  position: relative
   overflow-y: auto
   max-height: 400px
   padding: 15px
@@ -77,9 +73,9 @@
   // right align buttons
   background-color: #f5f5f5
   border-top: 1px solid #ddd
-  +bootstrap-border-radius(0 0 6px 6px)
-  +bootstrap-box-shadow(inset 0 1px 0 $white)
-  +bootstrap-clearfix
+  +ctb-border-radius(0 0 6px 6px)
+  +ctb-box-shadow(inset 0 1px 0 $white)
+  +ctb-clearfix
   // clear it in case folks use .pull-* classes on buttons
   // Properly space out buttons
   .btn + .btn
@@ -89,3 +85,6 @@
   // but override that for button groups
   .btn-group .btn + .btn
     margin-left: -1px
+  // and override it for block buttons as well
+  .btn-block + .btn-block
+    margin-left: 0

data/stylesheets_sass/compass_twitter_bootstrap/_navbar.sass

@@ -1,24 +1,30 @@
-// NAVBAR (FIXED AND STATIC)
-// -------------------------
+//
+// Navbars (Redux)
+// --------------------------------------------------
 
 // COMMON STYLES
 // -------------
 
+// Base class and wrapper
 .navbar
+  overflow: visible
+  margin-bottom: $baseLineHeight
   // 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
+// Inner for background effects
+// Gradient is applied to its 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
-  +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)")
+  +ctb-gradient-vertical($navbarBackgroundHighlight, $navbarBackground)
+  border: 1px solid $navbarBorder
+  +ctb-border-radius($baseBorderRadius)
+  +ctb-box-shadow(0 1px 4px rgba(0, 0, 0, 0.065))
+  // Prevent floats from breaking the navbar
+  +ctb-clearfix
 
 // Set width to auto for default container
 // We then reset it for fixed navbars in the #gridSystem mixin
@@ -28,57 +34,75 @@
 // Override the default collapsed state
 .nav-collapse.collapse
   height: auto
+  overflow: visible
 
-// Brand, links, text, and buttons
-.navbar
-  color: $navbarText
-  // Hover and active states
-  .brand:hover
+// Brand: website or project name
+// -------------------------
+.navbar .brand
+  float: left
+  display: block
+  // Vertically center the text given $navbarHeight
+  padding: ($navbarHeight - $baseLineHeight) / 2 20px ($navbarHeight - $baseLineHeight) / 2
+  margin-left: -20px
+  // negative indent to left-align the text down the page
+  font-size: 20px
+  font-weight: 200
+  color: $navbarBrandColor
+  text-shadow: 0 1px 0 $navbarBackgroundHighlight
+  &:hover
     text-decoration: none
-  // Website or project name
-  .brand
-    float: left
-    display: block
-    // 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: $navbarBrandColor
-  // Plain text in topbar
-  .navbar-text
-    margin-bottom: 0
-    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
-    +bootstrap-navbarVerticalAlign(30px)
-    // Vertically center in navbar
-  .btn-group .btn
-    margin: 0
-    // then undo the margin here so we don't accidentally double it
+
+// Plain text in topbar
+// -------------------------
+.navbar-text
+  margin-bottom: 0
+  line-height: $navbarHeight
+  color: $navbarText
+
+// Janky solution for now to account for links outside the .nav
+// -------------------------
+.navbar-link
+  color: $navbarLinkColor
+  &:hover
+    color: $navbarLinkColorHover
+
+// Dividers in navbar
+// -------------------------
+.navbar .divider-vertical
+  height: $navbarHeight
+  margin: 0 9px
+  border-left: 1px solid $navbarBackground
+  border-right: 1px solid $navbarBackgroundHighlight
+
+// Buttons in navbar
+// -------------------------
+
+.navbar .btn,
+.navbar .btn-group
+  +ctb-navbarVerticalAlign(30px)
+  // Vertically center in navbar
+
+.navbar .btn-group .btn,
+.navbar .input-prepend .btn,
+.navbar .input-append .btn
+  margin-top: 0
+  // then undo the margin here so we don't accidentally double it
 
 // Navbar forms
+// -------------------------
 .navbar-form
   margin-bottom: 0
   // remove default bottom margin
-  +bootstrap-clearfix
+  +ctb-clearfix
   input,
   select,
   .radio,
   .checkbox
-    +bootstrap-navbarVerticalAlign(30px)
+    +ctb-navbarVerticalAlign(30px)
     // Vertically center in navbar
   input,
-  select
+  select,
+  .btn
     display: inline-block
     margin-bottom: 0
   input[type="image"],
@@ -87,7 +111,7 @@
     margin-top: 3px
   .input-append,
   .input-prepend
-    margin-top: 6px
+    margin-top: 5px
     white-space: nowrap
     // preven two  items from separating within a .navbar-form that has .pull-left
     input
@@ -95,38 +119,32 @@
       // remove the margin on top since it's on the parent
 
 // Navbar search
+// -------------------------
 .navbar-search
   position: relative
   float: left
-  +bootstrap-navbarVerticalAlign(28px)
+  +ctb-navbarVerticalAlign(30px)
   // Vertically center in navbar
   margin-bottom: 0
   .search-query
-    padding: 4px 9px
-    +bootstrap-font-sans-serif(13px, normal, 1)
-    color: $white
-    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: $navbarSearchBackgroundFocus
-      border: 0
-      +bootstrap-box-shadow(0 0 3px rgba(0, 0, 0, 0.15))
-      outline: 0
-
-// FIXED NAVBAR
-// ------------
+    margin-bottom: 0
+    padding: 4px 14px
+    +ctb-font-sans-serif(13px, normal, 1)
+    +ctb-border-radius(15px)
+    // redeclare because of specificity of the type attribute
+
+// Static navbar
+// -------------------------
+
+.navbar-static-top
+  position: static
+  margin-bottom: 0
+  // remove 18px margin for default navbar
+  .navbar-inner
+    +ctb-border-radius(0)
+
+// Fixed navbar
+// -------------------------
 
 // Shared (top/bottom) styles
 
@@ -137,25 +155,43 @@
   left: 0
   z-index: $zindexFixedNavbar
   margin-bottom: 0
-  // remove 18px margin for static navbar
+  // remove 18px margin for default navbar
+
+.navbar-fixed-top .navbar-inner,
+.navbar-static-top .navbar-inner
+  border-width: 0 0 1px
+
+.navbar-fixed-bottom .navbar-inner
+  border-width: 1px 0 0
 
 .navbar-fixed-top .navbar-inner,
 .navbar-fixed-bottom .navbar-inner
   padding-left: 0
   padding-right: 0
-  +bootstrap-border-radius(0)
+  +ctb-border-radius(0)
 
+// Reset container width
+// Required here as we reset the width earlier on and the grid mixins don't override early enough
+
+.navbar-static-top .container,
 .navbar-fixed-top .container,
 .navbar-fixed-bottom .container
-  +bootstrap-grid-core-span($gridColumns, $gridColumnWidth, $gridGutterWidth)
+  +ctb-core-span($gridColumns)
 
 // Fixed to top
 .navbar-fixed-top
   top: 0
 
+.navbar-fixed-top,
+.navbar-static-top
+  .navbar-inner
+    +ctb-box-shadow(#{0 1px 10px rgba(0, 0, 0, 0.1)})
+
 // Fixed to bottom
 .navbar-fixed-bottom
   bottom: 0
+  .navbar-inner
+    +ctb-box-shadow(#{0 -1px 10px rgba(0, 0, 0, 0.1)})
 
 // NAVIGATION
 // ----------
@@ -170,38 +206,27 @@
 .navbar .nav.pull-right
   float: right
   // redeclare due to specificity
+  margin-right: 0
+  // remove margin on float right nav
 
 .navbar .nav > li
-  display: block
   float: left
 
 // Links
 .navbar .nav > li > a
   float: none
-  // Vertically center the text given @navbarHeight
-  $elementHeight: 20px
-  padding: ($navbarHeight - $elementHeight) / 2 - 1 10px ($navbarHeight - $elementHeight) / 2 + 1
-  line-height: 19px
+  // Vertically center the text given $navbarHeight
+  padding: ($navbarHeight - $baseLineHeight) / 2 15px ($navbarHeight - $baseLineHeight) / 2
   color: $navbarLinkColor
   text-decoration: none
-  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25)
+  text-shadow: 0 1px 0 $navbarBackgroundHighlight
 
-// 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
+.navbar .nav .dropdown-toggle .caret
+  margin-top: 8px
 
 // Hover
+
+.navbar .nav > li > a:focus,
 .navbar .nav > li > a:hover
   background-color: $navbarLinkBackgroundHover
   // "transparent" is default to differentiate :hover from .active
@@ -210,25 +235,13 @@
 
 // Active nav items
 
-.navbar .nav .active > a,
-.navbar .nav .active > a:hover
+.navbar .nav > .active > a,
+.navbar .nav > .active > a:hover,
+.navbar .nav > .active > a:focus
   color: $navbarLinkColorActive
   text-decoration: none
   background-color: $navbarLinkBackgroundActive
-
-// Dividers (basically a vertical hr)
-.navbar .divider-vertical
-  height: $navbarHeight
-  width: 1px
-  margin: 0 9px
-  overflow: hidden
-  background-color: $navbarBackground
-  border-right: 1px solid $navbarBackgroundHighlight
-
-// Secondary (floated right) nav in topbar
-.navbar .nav.pull-right
-  margin-left: 10px
-  margin-right: 0
+  +ctb-box-shadow(inset 0 3px 8px rgba(0, 0, 0, 0.125))
 
 // Navbar button for toggling navbar items in responsive layouts
 // These definitions need to come after '.navbar .btn'
@@ -238,16 +251,16 @@
   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)")
+  +ctb-buttonBackground(darken($navbarBackgroundHighlight, 5%), darken($navbarBackground, 5%))
+  +ctb-box-shadow(#{inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.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))
+  +ctb-border-radius(1px)
+  +ctb-box-shadow(0 1px 0 rgba(0, 0, 0, 0.25))
 
 .btn-navbar .icon-bar + .icon-bar
   margin-top: 3px
@@ -256,7 +269,7 @@
 // --------------
 
 // Menu position and menu carets
-.navbar .dropdown-menu
+.navbar .nav > li > .dropdown-menu
   &:before
     content: ''
     display: inline-block
@@ -278,7 +291,7 @@
     left: 10px
 
 // Menu position and menu caret support for dropups via extra dropup class
-.navbar-fixed-bottom .dropdown-menu
+.navbar-fixed-bottom .nav > li > .dropdown-menu
   &:before
     border-top: 7px solid #ccc
     border-top-color: $dropdownBorder
@@ -291,32 +304,33 @@
     bottom: -6px
     top: auto
 
-// Dropdown toggle caret
-
-.navbar .nav li.dropdown .dropdown-toggle .caret,
-.navbar .nav li.dropdown.open .caret
-  border-top-color: $white
-  border-bottom-color: $white
-
-.navbar .nav li.dropdown.active .caret
-  +bootstrap-opacity(100)
+// Caret should match text color on hover
+.navbar .nav li.dropdown > a:hover .caret
+  border-top-color: $navbarLinkColorActive
+  border-bottom-color: $navbarLinkColorActive
 
 // Remove background color from open dropdown
 
 .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
+  background-color: $navbarLinkBackgroundActive
+  color: $navbarLinkColorActive
 
-// Dropdown link on hover
-.navbar .nav li.dropdown.active > .dropdown-toggle:hover
-  color: $white
+.navbar .nav li.dropdown > .dropdown-toggle .caret
+  border-top-color: $navbarLinkColor
+  border-bottom-color: $navbarLinkColor
+
+.navbar .nav li.dropdown.open > .dropdown-toggle .caret,
+.navbar .nav li.dropdown.active > .dropdown-toggle .caret,
+.navbar .nav li.dropdown.open.active > .dropdown-toggle .caret
+  border-top-color: $navbarLinkColorActive
+  border-bottom-color: $navbarLinkColorActive
 
 // Right aligned menus need alt position
-// TODO: rejigger this at some point to simplify the selectors
 
-.navbar .pull-right .dropdown-menu,
-.navbar .dropdown-menu.pull-right
+.navbar .pull-right > li > .dropdown-menu,
+.navbar .nav > li > .dropdown-menu.pull-right
   left: auto
   right: 0
   &:before
@@ -325,3 +339,84 @@
   &:after
     left: auto
     right: 13px
+  .dropdown-menu
+    left: auto
+    right: 100%
+    margin-left: 0
+    margin-right: -1px
+    +ctb-border-radius(6px 0 6px 6px)
+
+// Inverted navbar
+// -------------------------
+
+.navbar-inverse
+  .navbar-inner
+    +ctb-gradient-vertical($navbarInverseBackgroundHighlight, $navbarInverseBackground)
+    border-color: $navbarInverseBorder
+  .brand,
+  .nav > li > a
+    color: $navbarInverseLinkColor
+    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25)
+    &:hover
+      color: $navbarInverseLinkColorHover
+  .brand
+    color: $navbarInverseBrandColor
+  .navbar-text
+    color: $navbarInverseText
+  .nav > li > a:focus,
+  .nav > li > a:hover
+    background-color: $navbarInverseLinkBackgroundHover
+    color: $navbarInverseLinkColorHover
+  .nav .active > a,
+  .nav .active > a:hover,
+  .nav .active > a:focus
+    color: $navbarInverseLinkColorActive
+    background-color: $navbarInverseLinkBackgroundActive
+  // Inline text links
+  .navbar-link
+    color: $navbarInverseLinkColor
+    &:hover
+      color: $navbarInverseLinkColorHover
+  // Dividers in navbar
+  .divider-vertical
+    border-left-color: $navbarInverseBackground
+    border-right-color: $navbarInverseBackgroundHighlight
+  // Dropdowns
+  .nav li.dropdown.open > .dropdown-toggle,
+  .nav li.dropdown.active > .dropdown-toggle,
+  .nav li.dropdown.open.active > .dropdown-toggle
+    background-color: $navbarInverseLinkBackgroundActive
+    color: $navbarInverseLinkColorActive
+  .nav li.dropdown > a:hover .caret
+    border-top-color: $navbarInverseLinkColorActive
+    border-bottom-color: $navbarInverseLinkColorActive
+  .nav li.dropdown > .dropdown-toggle .caret
+    border-top-color: $navbarInverseLinkColor
+    border-bottom-color: $navbarInverseLinkColor
+  .nav li.dropdown.open > .dropdown-toggle .caret,
+  .nav li.dropdown.active > .dropdown-toggle .caret,
+  .nav li.dropdown.open.active > .dropdown-toggle .caret
+    border-top-color: $navbarInverseLinkColorActive
+    border-bottom-color: $navbarInverseLinkColorActive
+  // Navbar search
+  .navbar-search
+    .search-query
+      color: $white
+      background-color: $navbarInverseSearchBackground
+      border-color: $navbarInverseSearchBorder
+      +ctb-box-shadow(#{inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.15)})
+      +ctb-transition(none)
+      +ctb-placeholder($navbarInverseSearchPlaceholderColor)
+      // Focus states (we use .focused since IE7-8 and down doesn't support :focus)
+      &:focus,
+      &.focused
+        padding: 5px 15px
+        color: $grayDark
+        text-shadow: 0 1px 0 $white
+        background-color: $navbarInverseSearchBackgroundFocus
+        border: 0
+        +ctb-box-shadow(0 0 3px rgba(0, 0, 0, 0.15))
+        outline: 0
+  // Navbar collapse button
+  .btn-navbar
+    +ctb-buttonBackground(darken($navbarInverseBackgroundHighlight, 5%), darken($navbarInverseBackground, 5%))