anjlab-bootstrap-rails 2.0.1.1 → 2.0.2.0

data/vendor/assets/stylesheets/labels.scss

@@ -3,10 +3,13 @@
 
 // Base
 .label {
-  padding: 2px 4px 3px;
-  font-size: $baseFontSize * .85;
+  padding: 1px 4px 2px;
+  font-size: $baseFontSize * .846;
   font-weight: bold;
+  line-height: 13px; // ensure proper line-height if floated
   color: $white;
+  vertical-align: middle;
+  white-space: nowrap;
   text-shadow: 0 -1px 0 rgba(0,0,0,.25);
   background-color: $grayLight;
   @include border-radius(3px);
@@ -30,3 +33,6 @@
 
 .label-info             { background-color: $infoText; }
 .label-info:hover       { background-color: darken($infoText, 10%); }
+
+.label-inverse             { background-color: $grayDark; }
+.label-inverse:hover       { background-color: darken($grayDark, 10%); }

data/vendor/assets/stylesheets/mixins.scss

@@ -98,6 +98,14 @@
   white-space: nowrap;
 }
 
+// New image replacement
+// -------------------------
+// Source: http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/
+.hide-text {
+  overflow: hidden;
+  text-indent: 100%;
+  white-space: nowrap;
+}
 
 
 // FONTS
@@ -137,125 +145,27 @@
 }
 
 
-
-
-// GRID SYSTEM
+// FORMS
 // --------------------------------------------------
 
-// Site container
-// -------------------------
-@mixin container-fixed() {
-  width: $gridRowWidth;
-  margin-left: auto;
-  margin-right: auto;
-  @include clearfix();
-}
-
-// Le grid system
-// -------------------------
-
-// Setup the mixins to be used
-@mixin grid-system-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, $columns) {
-  width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
-}
-
-@mixin grid-system-offset($gridColumnWidth, $gridGutterWidth, $columns) {
-  margin-left: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1)) + ($gridGutterWidth * 2);
-}
-
-@mixin grid-system-grid-column($gridGutterWidth) {
-  float: left;
-  margin-left: $gridGutterWidth;
-}
-
-// Take these values and mixins, and make 'em do their thang
-@mixin grid-system-generate($gridColumns, $gridColumnWidth, $gridGutterWidth) {
-  // Row surrounds the columns
-  .row {
-    margin-left: $gridGutterWidth * -1;
-    @include clearfix();
-  }
-  // Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7, thanks @dhg)
-  [class*="span"] {
-    @include grid-system-grid-column($gridGutterWidth);
-  }
-  // Default columns
-  @for $i from 1 through 12 {
-    .span#{$i} { @include grid-system-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, $i); }
-  }
-  .container { @include grid-system-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 12); }
-  // Offset column options
-  @for $i from 1 through 11 {
-    .offset#{$i} { @include grid-system-offset($gridColumnWidth, $gridGutterWidth, $i); }
-  }
-}
-
-// Fluid grid system
-// -------------------------
-
-// Setup the mixins to be used
-@mixin fluid-grid-system-columns($fluidGridGutterWidth, $fluidGridColumnWidth, $columns) {
-  //TODO: check floid
-  width: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1));
-}
-@mixin fluid-grid-system-grid-column($fluidGridGutterWidth) {
-  float: left;
-  margin-left: $fluidGridGutterWidth;
-}
-// Take these values and mixins, and make 'em do their thang
-@mixin fluid-grid-system-generate($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
-  // Row surrounds the columns
-  .row-fluid {
-    width: 100%;
-    @include clearfix();
-
-    // Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7, thanks @dhg)
-    > [class*="span"] {
-      @include fluid-grid-system-grid-column($fluidGridGutterWidth);
-    }
-    > [class*="span"]:first-child {
-      margin-left: 0;
-    }
-    // Default columns
-    @for $i from 1 through 12 {
-      .span#{$i} { @include fluid-grid-system-columns($fluidGridGutterWidth, $fluidGridColumnWidth, $i); }
-    }
-  }
+// Box sizing
+@mixin box-sizing($boxmodel) {
+  -webkit-box-sizing: $boxmodel;
+     -moz-box-sizing: $boxmodel;
+      -ms-box-sizing: $boxmodel;
+          box-sizing: $boxmodel;
 }
 
-// Input grid system
-// -------------------------
-@mixin input-grid-system-input-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, $columns) {
-  width: (($gridColumnWidth) * $columns) + ($gridGutterWidth * ($columns - 1)) - 10;
-}
-@mixin input-grid-system-generate($gridColumns, $gridColumnWidth, $gridGutterWidth) {
-  input,
-  textarea,
-  .uneditable-input {
-    @for $i from 1 through 12 {
-      &.span#{$i} { @include input-grid-system-input-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, $i); }
-    }
-  }
-}
 
-// Make a Grid
-// -------------------------
-// Use .make-row and .make-column to assign semantic layouts grid system behavior
-@mixin make-row() {
-  margin-left: $gridGutterWidth * -1;
-  @include clearfix();
-}
-@mixin make-column($columns: 1) {
-  float: left;
-  margin-left: $gridGutterWidth;
-  width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
+// Block level inputs
+@mixin input-block-level {
+  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 */
+  @include box-sizing(border-box);
 }
 
-
-
-// Form field states (used in forms.less)
-// --------------------------------------------------
-
 // Mixin for form field states
 @mixin form-field-state($textColor: #555, $borderColor: #ccc, $backgroundColor: #f5f5f5) {
   // Set the text color
@@ -365,14 +275,6 @@
           background-size: $size;
 }
 
-
-// Box sizing
-@mixin box-sizing($boxmodel) {
-  -webkit-box-sizing: $boxmodel;
-     -moz-box-sizing: $boxmodel;
-          box-sizing: $boxmodel;
-}
-
 // User select
 // For selecting text on the page
 @mixin user-select($select) {
@@ -473,8 +375,8 @@
   background-image: -webkit-radial-gradient(circle, $innerColor, $outerColor);
   background-image: -moz-radial-gradient(circle, $innerColor, $outerColor);
   background-image: -ms-radial-gradient(circle, $innerColor, $outerColor);
+  background-image: -o-radial-gradient(circle, $innerColor, $outerColor);
   background-repeat: no-repeat;
-  // Opera cannot do radial gradients yet
 }
 @mixin gradient-striped($color, $angle: -45deg) {
   background-color: $color;
@@ -500,8 +402,30 @@
 }
 
 
-// Mixin for generating button backgrounds
-// ---------------------------------------
+
+// COMPONENT MIXINS
+// --------------------------------------------------
+
+// Horizontal dividers
+// -------------------------
+// Dividers (basically an hr) within dropdowns and nav lists
+@mixin nav-divider() {
+  height: 1px;
+  margin: (($baseLineHeight / 2) - 1) 1px; // 8px 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%;
+  *margin: -5px 0 5px;
+}
+
+// Button backgrounds
+// ------------------
 @mixin button-background($startColor, $endColor) {
   // gradientBar will set the background to a pleasing blend of these, to support IE<=9
   @include gradient-bar($startColor, $endColor);
@@ -519,42 +443,157 @@
   }
 }
 
+// Navbar vertical align
+// -------------------------
+// Vertically center elements in the navbar.
+// Example: an element has a height of 30px, so write out `@include navbar-vertical-align(30px);` to calculate the appropriate top margin.
+@mixin navbar-vertical-align($elementHeight) {
+  margin-top: ($navbarHeight - $elementHeight) / 2;
+}
 
-// COMPONENT MIXINS
-// --------------------------------------------------
-
-// POPOVER ARROWS
+// Popover arrows
 // -------------------------
 // For tipsies and popovers
-@mixin popover-arrow-top($arrowWidth: 5px) {
+@mixin popover-arrow-top($arrowWidth: 5px, $color: $black) {
   bottom: 0;
   left: 50%;
   margin-left: -$arrowWidth;
   border-left: $arrowWidth solid transparent;
   border-right: $arrowWidth solid transparent;
-  border-top: $arrowWidth solid $black;
+  border-top: $arrowWidth solid $color;
 }
-@mixin popover-arrow-left($arrowWidth: 5px) {
+@mixin popover-arrow-left($arrowWidth: 5px, $color: $black) {
   top: 50%;
   right: 0;
   margin-top: -$arrowWidth;
   border-top: $arrowWidth solid transparent;
   border-bottom: $arrowWidth solid transparent;
-  border-left: $arrowWidth solid $black;
+  border-left: $arrowWidth solid $color;
 }
-@mixin popover-arrow-bottom($arrowWidth: 5px) {
+@mixin popover-arrow-bottom($arrowWidth: 5px, $color: $black) {
   top: 0;
   left: 50%;
   margin-left: -$arrowWidth;
   border-left: $arrowWidth solid transparent;
   border-right: $arrowWidth solid transparent;
-  border-bottom: $arrowWidth solid $black;
+  border-bottom: $arrowWidth solid $color;
 }
-@mixin popover-arrow-right($arrowWidth: 5px) {
+@mixin popover-arrow-right($arrowWidth: 5px, $color: $black) {
   top: 50%;
   left: 0;
   margin-top: -$arrowWidth;
   border-top: $arrowWidth solid transparent;
   border-bottom: $arrowWidth solid transparent;
-  border-right: $arrowWidth solid $black;
+  border-right: $arrowWidth solid $color;
+}
+
+// Grid System
+// -----------
+
+// Centered container element
+@mixin container-fixed() {
+  margin-left: auto;
+  margin-right: auto;
+  @include clearfix();
+}
+
+// Table columns
+@mixin table-columns($columnSpan: 1) {
+  float: none; // undo default grid column styles
+  width: (($gridColumnWidth) * $columnSpan) + ($gridGutterWidth * ($columnSpan - 1)) - 16; // 16 is total padding on left and right of table cells
+  margin-left: 0; // undo default grid column styles
+}
+
+// Make a Grid
+// Use @include make-row and @include make-column to assign semantic layouts grid system behavior
+@mixin make-row() {
+  margin-left: $gridGutterWidth * -1;
+  @include clearfix();
+}
+@mixin make-column($columns: 1) {
+  float: left;
+  margin-left: $gridGutterWidth;
+  width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
+}
+
+// The Grid
+
+@mixin grid-core-span ($columns, $gridColumnWidth, $gridGutterWidth) {
+  width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
+}
+@mixin grid-core-offset ($columns, $gridColumnWidth, $gridGutterWidth) {
+  margin-left: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1)) + ($gridGutterWidth * 2);
+}
+@mixin grid-core-span-x($columns, $gridColumnWidth, $gridGutterWidth) {
+  @for $i from 1 through $columns {
+    .span#{$i} { @include grid-core-span($i, $gridColumnWidth, $gridGutterWidth) }
+  }
+}
+@mixin grid-core-offset-x($columns, $gridColumnWidth, $gridGutterWidth) {
+  @for $i from 1 through $columns {
+    .offset#{$i} { @include grid-core-offset($i, $gridColumnWidth, $gridGutterWidth) }
+  } 
+}
+@mixin grid-core($gridColumnWidth, $gridGutterWidth) {
+  .row {
+    margin-left: $gridGutterWidth * -1;
+    @include clearfix();
+  }
+
+  [class*="span"] {
+    float: left;
+    margin-left: $gridGutterWidth;
+  }
+
+  // Set the container width, and override it for fixed navbars in media queries
+  .container,
+  .navbar-fixed-top .container,
+  .navbar-fixed-bottom .container { @include grid-core-span($gridColumns, $gridColumnWidth, $gridGutterWidth); }
+
+  // generate .spanX and .offsetX
+  @include grid-core-span-x($gridColumns, $gridColumnWidth, $gridGutterWidth);
+  @include grid-core-offset-x($gridColumns, $gridColumnWidth, $gridGutterWidth);
+}
+
+@mixin grid-fluid-span($columns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
+  width: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1));
+}
+@mixin grid-fluid-span-x($columns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
+  @for $i from 1 through $columns {
+    > .span#{$i} { @include grid-fluid-span($i, $fluidGridColumnWidth, $fluidGridGutterWidth) }
+  } 
+}
+@mixin grid-fluid($fluidGridColumnWidth, $fluidGridGutterWidth) {
+  .row-fluid {
+    width: 100%;
+    @include clearfix();
+    > [class*="span"] {
+      float: left;
+      margin-left: $fluidGridGutterWidth;
+    }
+    > [class*="span"]:first-child {
+      margin-left: 0;
+    }
+
+    // generate .spanX
+    @include grid-fluid-span-x($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth);
+  }
+}
+@mixin grid-input-span($columns, $gridColumnWidth, $gridGutterWidth) {
+  width: (($gridColumnWidth) * $columns) + ($gridGutterWidth * ($columns - 1)) - 10;
+}
+@mixin grid-input-span-x($columns, $gridColumnWidth, $gridGutterWidth) {
+  @for $i from 1 through $columns {
+    input.span#{$i}, textarea.span#{$i}, .uneditable-input.span#{$i} { @include grid-input-span($i, $gridColumnWidth, $gridGutterWidth) }
+  }
+}
+@mixin grid-input($gridColumnWidth, $gridGutterWidth) {
+  input,
+  textarea,
+  .uneditable-input {
+    margin-left: 0; // override margin-left from core grid system
+  }
+
+  // generate .spanX
+  @include grid-input-span-x($gridColumns, $gridColumnWidth, $gridGutterWidth);
 }

data/vendor/assets/stylesheets/modals.scss

@@ -33,7 +33,6 @@
   top: 50%;
   left: 50%;
   z-index: $zindexModal;
-  max-height: 500px;
   overflow: auto;
   width: 560px;
   margin: -250px 0 0 -280px;
@@ -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 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/vendor/assets/stylesheets/navbar.scss

@@ -6,6 +6,10 @@
 // -------------
 
 .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;
 }
@@ -20,6 +24,12 @@
   @include box-shadow($shadow);
 }
 
+// Set width to auto for default container
+// We then reset it for fixed navbars in the #gridSystem mixin
+.navbar .container {
+  width: auto;
+}
+
 // Navbar button for toggling navbar items in responsive layouts
 .btn-navbar {
   display: none;
@@ -50,6 +60,7 @@
 
 // Brand, links, text, and buttons
 .navbar {
+  color: $navbarText;
   // Hover and active states
   .brand:hover {
     text-decoration: none;
@@ -68,17 +79,12 @@
   // Plain text in topbar
   .navbar-text {
     margin-bottom: 0;
-    line-height: 40px;
-    color: $navbarText;
-    a:hover {
-      color: $white;
-      background-color: transparent;
-    }
+    line-height: $navbarHeight;
   }
   // Buttons in navbar
   .btn,
   .btn-group {
-    margin-top: 5px; // make buttons vertically centered in navbar
+    @include 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
@@ -90,15 +96,16 @@
   margin-bottom: 0; // remove default bottom margin
   @include clearfix();
   input,
+  select,
+  .radio,
+  .checkbox {
+    @include navbar-vertical-align(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,36 +125,33 @@
 .navbar-search {
   position: relative;
   float: left;
-  margin-top: 6px;
+  @include navbar-vertical-align(28px); // Vertically center in navbar
   margin-bottom: 0;
   .search-query {
     padding: 4px 9px;
     @include 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;
+    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);
     @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);
+    // 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));
       outline: 0;
@@ -156,22 +160,42 @@
 }
 
 
+
 // 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);
 }
 
+.navbar-fixed-top .container,
+.navbar-fixed-bottom .container {
+  @include grid-core-span($gridColumns);
+}
+
+// Fixed to top
+.navbar-fixed-top {
+  top: 0;
+}
+
+// Fixed to bottom
+.navbar-fixed-bottom {
+  bottom: 0;
+}
+
+
 
 // NAVIGATION
 // ----------
@@ -210,9 +234,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)
@@ -246,7 +270,7 @@
     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,17 +280,33 @@
     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 {
   border-top-color: $white;
+  border-bottom-color: $white;
 }
 .navbar .nav .active .caret {
   @include opacity(100);
@@ -285,7 +325,9 @@
 }
 
 // Right aligned menus need alt position
-.navbar .nav.pull-right .dropdown-menu {
+// TODO: rejigger this at some point to simplify the selectors
+.navbar .nav.pull-right .dropdown-menu,
+.navbar .nav .dropdown-menu.pull-right {
   left: auto;
   right: 0;
   &:before {