sass-rails-bootstrap 2.0.2 → 2.0.3a

data/vendor/assets/stylesheets/twitter/bootstrap/_labels-badges.sass

@@ -0,0 +1,77 @@
+// LABELS & BADGES
+// ---------------
+
+// Base classes
+.label,
+.badge
+  font-size: $baseFontSize * 0.846
+  font-weight: bold
+  line-height: 14px  // ensure proper line-height if floated
+  color: $white
+  vertical-align: baseline
+  white-space: nowrap
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25)
+  background-color: $grayLight
+  
+  
+// Set unique padding and border-radii
+.label
+  padding: 1px 4px 2px
+  +border-radius(3px)
+  
+.badge
+  padding: 1px 9px 2px
+  +border-radius(9px)
+
+
+// Hover state, but only for links
+a
+  &.label:hover,
+  &.badge:hover
+    color: $white
+    text-decoration: none
+    cursor: pointer
+
+
+// Colors
+// Only give background-color difference to links (and to simplify, we don't qualifty with `a` but [href] attribute)
+
+// Important (red)
+.label-important,
+.badge-important
+  background-color: $errorText
+.label-important[href],
+.badge-important[href]
+  background-color: darken($errorText, 10%)
+  
+// Warnings (orange)
+.label-warning,
+.badge-warning
+  background-color: $orange
+.label-warning[href],
+.badge-warning[href]
+  background-color: darken($orange, 10%)
+  
+// Success (green)
+.label-success,
+.badge-success
+  background-color: $successText
+.label-success[href],
+.badge-success[href]
+  background-color: darken($successText, 10%)
+  
+// Info (turquoise)
+.label-info,
+.badge-info
+  background-color: $infoText
+.label-info[href],
+.badge-info[href]
+  background-color: darken($infoText, 10%)
+  
+// Inverse (black)
+.label-inverse,
+.badge-inverse
+  background-color: $grayDark
+.label-inverse[href],
+.badge-inverse[href]
+  background-color: darken($grayDark, 10%)

data/vendor/assets/stylesheets/twitter/bootstrap/_layouts.sass

@@ -8,6 +8,6 @@
 
 // Fluid layouts (left aligned, with sidebar, min- & max-width content)
 .container-fluid
-  padding-left: $gridGutterWidth
   padding-right: $gridGutterWidth
+  padding-left: $gridGutterWidth
   +clearfix

data/vendor/assets/stylesheets/twitter/bootstrap/_mixins.sass

@@ -56,10 +56,11 @@
 
 // Sizing shortcuts
 // -------------------------
-=size($height: 5px, $width: 5px)
+=size($height, $width)
   width: $width
   height: $height
-=square($size: 5px)
+  
+=square($size)
   +size($size, $size)
 
 // Placeholder text
@@ -78,23 +79,25 @@
   text-overflow: ellipsis
   white-space: nowrap
 
-// New image replacement
+// CSS image replacement
 // -------------------------
-// Source: http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/
+// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
 =hide-text
-  overflow: hidden
-  text-indent: 100%
-  white-space: nowrap
+  font: 0/0 a
+  color: transparent
+  text-shadow: none
+  background-color: transparent
+  border: 0
 
 // FONTS
 // --------------------------------------------------
 
 =font-family-serif
-  font-family: Georgia, "Times New Roman", Times, serif
+  font-family: $serifFontFamily
 =font-family-sans-serif
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
+  font-family: $sansFontFamily
 =font-family-monospace
-  font-family: Menlo, Monaco, "Courier New", monospace
+  font-family: $monoFontFamily
   
 =font-shorthand($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight)
   font-size: $size
@@ -123,8 +126,7 @@
   display: block
   width: 100%
   min-height: 28px  // Make inputs at least the height of their button counterpart
-  // Makes inputs behave like true block-level elements
-  +box-sizing(border-box)
+  +box-sizing(border-box)  // Makes inputs behave like true block-level elements
 
 // Mixin for form field states
 =form-field-state($textColor: #555, $borderColor: #ccc, $backgroundColor: #f5f5f5)
@@ -155,13 +157,13 @@
 // --------------------------------------------------
 
 // Border Radius
-=border-radius($radius: 5px)
+=border-radius($radius)
   -webkit-border-radius: $radius
   -moz-border-radius: $radius
   border-radius: $radius
 
 // Drop shadows
-=box-shadow($shadow: 0 1px 3px rgba(0,0,0,.25))
+=box-shadow($shadow)
   -webkit-box-shadow: $shadow
   -moz-box-shadow: $shadow
   box-shadow: $shadow
@@ -189,28 +191,36 @@
   -o-transform: scale($ratio)
   transform: scale($ratio)
           
-=translate($x: 0, $y: 0)
+=translate($x, $y)
   -webkit-transform: translate($x, $y)
   -moz-transform: translate($x, $y)
   -ms-transform: translate($x, $y)
   -o-transform: translate($x, $y)
   transform: translate($x, $y)
   
-=skew($x: 0, $y: 0)
+=skew($x, $y)
   -webkit-transform: skew($x, $y)
   -moz-transform: skew($x, $y)
   -ms-transform: skew($x, $y)
   -o-transform: skew($x, $y)
   transform: skew($x, $y)
   
-=translate3d($x: 0, $y: 0, $z: 0)
+=translate3d($x, $y, $z)
   -webkit-transform: translate($x, $y, $z)
   -moz-transform: translate($x, $y, $z)
   -ms-transform: translate($x, $y, $z)
   -o-transform: translate($x, $y, $z)
   transform: translate($x, $y, $z)
 
-
+// Backface visibility
+// Prevent browsers from flickering when using CSS 3D transforms.
+// Default value is `visible`, but can be changed to `hidden`.
+// See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples.
+=backface-visibility($visibility)
+  -webkit-backface-visibility: $visibility
+  -moz-backface-visibility: $visibility
+  -ms-backface-visibility: $visibility
+  backface-visibility: $visibility
 
 // Background clipping
 // Heads up: FF 3.6 and under need "padding" instead of "padding-box"
@@ -239,16 +249,17 @@
 =user-select($select)
   -webkit-user-select: $select
   -moz-user-select: $select
+  -ms-user-select: $select
   -o-user-select: $select
   user-select: $select
 
 // Resize anything
-=resizable($direction: both)
+=resizable($direction)
   resize: $direction  // Options: horizontal, vertical, both
   overflow: auto  // Safari fix
 
 // CSS3 Content Columns
-=content-columns($columnCount, $columnGap: $gridColumnGutter)
+=content-columns($columnCount, $columnGap: $gridGutterWidth)
   -webkit-column-count: $columnCount
   -moz-column-count: $columnCount
   column-count: $columnCount
@@ -257,7 +268,7 @@
   column-gap: $columnGap
 
 // Opacity
-=opacity($opacity: 100)
+=opacity($opacity)
   opacity: $opacity / 100
   filter: alpha(opacity=#{$opacity})
 
@@ -353,29 +364,30 @@
 // -------------------------
 // Dividers (basically an hr) within dropdowns and nav lists
 =nav-divider
-  height: 1px
-  margin: 5px 1px
-  overflow: hidden
-  background-color: #e5e5e5
-  border-bottom: 1px solid $white
-  
   // IE7 needs a set width since we gave a height. Restricting just
   // to IE7 to keep the 1px left/right space in other browsers.
   // It is unclear where IE is getting the extra space that we need
   // to negative-margin away, but so it goes.
   *width: 100%
+  height: 1px
+  margin: 5px 1px
   *margin: -5px 0 5px
+  overflow: hidden
+  background-color: #e5e5e5
+  border-bottom: 1px solid $white
 
 // Button backgrounds
 // ---------------------------------------
 =button-background($startColor, $endColor)
   // gradient-bar will set the background to a pleasing blend of these, to support IE<=9
   +gradient-bar($startColor, $endColor)
+  *background-color: $endColor  /* Darken IE7 buttons by default so they stand out more given they won't have borders */
   +reset-filter
 
   // In these cases the gradient won't cover the background, so we override
   &:hover, &:active, &.active, &.disabled, &[disabled]
     background-color: $endColor
+    *background-color: darken($endColor, 5%)
 
   // IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves
   &:active,
@@ -427,8 +439,8 @@
 
 // Centered container element
 =container-fixed
-  margin-left: auto
   margin-right: auto
+  margin-left: auto
   +clearfix
   
       
@@ -445,9 +457,9 @@
   margin-left: $gridGutterWidth * -1
   +clearfix
   
-=make-column($columns: 1)
+=make-column($columns: 1, $offset: 0)
   float: left
-  margin-left: $gridGutterWidth
+  margin-left: $gridGutterWidth * $offset + $gridGutterWidth * ($offset - 1) + $gridGutterWidth * 2
   width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1))
   
 
@@ -456,7 +468,7 @@
   width: $gridColumnWidth * $columns + $gridGutterWidth * ($columns - 1)
   
 =core-grid-offset($columns, $gridColumnWidth, $gridGutterWidth)
-  margin-left: $gridColumnWidth * $columns + $gridGutterWidth * ($columns - 1) + $gridGutterWidth * 2
+  margin-left: $gridColumnWidth * $columns + $gridGutterWidth * ($columns + 1)
   
 =core-grid-generate($gridColumnWidth, $gridGutterWidth)
   .row
@@ -484,21 +496,24 @@
   
 =fluid-grid-span($columns, $fluidGridColumnWidth, $fluidGridGutterWidth)
   width: $fluidGridColumnWidth * $columns + $fluidGridGutterWidth * ($columns - 1)
+  *width: $fluidGridColumnWidth * $columns + $fluidGridGutterWidth * ($columns - 1) - 0.5px / $gridRowWidth * 100 * 1%
   
 =fluid-grid-generate($fluidGridColumnWidth, $fluidGridGutterWidth)
   .row-fluid
     width: 100%
     +clearfix
     
-    > [class*="span"]
+    [class*="span"]
+      +input-block-level
       float: left
       margin-left: $fluidGridGutterWidth
+      *margin-left: $fluidGridGutterWidth - 0.5px / $gridRowWidth * 100 * 1%
       
-    > [class*="span"]:first-child
+    [class*="span"]:first-child
       margin-left: 0
       
     @for $i from 1 through $gridColumns
-      > .span#{$i}
+      .span#{$i}
         +fluid-grid-span($i, $fluidGridColumnWidth, $fluidGridGutterWidth)
 
   

data/vendor/assets/stylesheets/twitter/bootstrap/_navbar.sass

@@ -15,6 +15,7 @@
 
 // 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)
@@ -27,59 +28,49 @@
 .navbar .container
   width: auto
 
-// Navbar button for toggling navbar items in responsive layouts
-.btn-navbar
-  display: none
-  float: right
-  padding: 7px 10px
-  margin-left: 5px
-  margin-right: 5px
-  +button-background($navbarBackgroundHighlight, $navbarBackground)
-  $shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.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,.25))
-  
-.btn-navbar .icon-bar + .icon-bar
-  margin-top: 3px
-
 // Override the default collapsed state
 .nav-collapse.collapse
   height: auto
 
-
 // Brand, links, text, and buttons
 .navbar
   color: $navbarText
+  
   // Hover and active states
   .brand:hover
     text-decoration: none
+    
   // Website or project name
   .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: $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
     +navbar-vertical-align(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
@@ -105,6 +96,7 @@
     input
       margin-top: 0  // remove the margin on top since it's on the parent
 
+
 // Navbar search
 .navbar-search
   position: relative
@@ -117,7 +109,7 @@
     color: $white
     background-color: $navbarSearchBackground
     border: 1px solid $navbarSearchBorder
-    $shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.15)
+    $shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15)
     +box-shadow($shadow)
     +transition(none)
 
@@ -190,12 +182,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
@@ -224,6 +233,26 @@
   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
+  +button-background($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)
+.navbar .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
 
 
 // Dropdown menus
@@ -268,27 +297,27 @@
     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
+.navbar .nav li.dropdown.active .caret
   +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
 // TODO: rejigger this at some point to simplify the selectors
-.navbar .nav.pull-right .dropdown-menu,
-.navbar .nav .dropdown-menu.pull-right
+.navbar .pull-right .dropdown-menu,
+.navbar .dropdown-menu.pull-right
   left: auto
   right: 0
   &:before

data/vendor/assets/stylesheets/twitter/bootstrap/_navs.sass

@@ -19,6 +19,10 @@
   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
@@ -211,14 +215,14 @@
 // -------------------------
 .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
   border-bottom-color: $white
   +opacity(100)
@@ -241,13 +245,12 @@
   +clearfix
   
 .tab-content
-  display: table  // prevent content from running below tabs
-  width: 100%
+  overflow: auto
 
 // 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
@@ -264,69 +267,69 @@
 // 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
+.tabs-below > .nav-tabs > li > a
   +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
 // ------------
 
 // 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)
 
-.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
   +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