anjlab-bootstrap-rails 3.0.0.rc1 → 3.0.0.rc2

data/app/assets/stylesheets/twitter/bootstrap/_input-groups.scss

@@ -0,0 +1,127 @@
+//
+// Input groups
+// --------------------------------------------------
+
+// Base styles
+// -------------------------
+.input-group {
+  position: relative; // For dropdowns
+  display: table;
+  border-collapse: separate; // prevent input groups from inheriting border styles from table cells when placed within a table
+
+  // Undo padding and float of grid classes
+  &.col {
+    float: none;
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  .form-control {
+    width: 100%;
+    margin-bottom: 0;
+  }
+}
+
+// Sizing options
+//
+// Remix the default form control sizing classes into new ones for easier
+// manipulation.
+
+.input-group-lg > .form-control,
+.input-group-lg > .input-group-addon,
+.input-group-lg > .input-group-btn > .btn { @extend .input-lg; }
+.input-group-sm > .form-control,
+.input-group-sm > .input-group-addon,
+.input-group-lg > .input-group-btn > .btn { @extend .input-sm; }
+
+
+// Display as table-cell
+// -------------------------
+.input-group-addon,
+.input-group-btn,
+.input-group .form-control {
+  display: table-cell;
+
+  &:not(:first-child):not(:last-child) {
+    border-radius: 0;
+  }
+}
+// Addon and addon wrapper for buttons
+.input-group-addon,
+.input-group-btn {
+  width: 1%;
+  white-space: nowrap;
+  vertical-align: middle; // Match the inputs
+}
+
+// Text input groups
+// -------------------------
+.input-group-addon {
+  padding: $padding-base-vertical $padding-base-horizontal;
+  font-size: $font-size-base;
+  font-weight: normal;
+  line-height: 1;
+  text-align: center;
+  background-color: $input-group-addon-bg;
+  border: 1px solid $input-group-addon-border-color;
+  border-radius: $border-radius-base;
+
+  // Sizing
+  &.input-sm {
+    padding: $padding-small-vertical $padding-small-horizontal;
+    font-size: $font-size-small;
+    border-radius: $border-radius-small;
+  }
+  &.input-lg {
+    padding: $padding-large-vertical $padding-large-horizontal;
+    font-size: $font-size-large;
+    border-radius: $border-radius-large;
+  }
+
+  // Nuke default margins from checkboxes and radios to vertically center within.
+  input[type="radio"],
+  input[type="checkbox"] {
+    margin-top: 0;
+  }
+}
+
+// Reset rounded corners
+.input-group .form-control:first-child,
+.input-group-addon:first-child,
+.input-group-btn:first-child > .btn,
+.input-group-btn:first-child > .dropdown-toggle,
+.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) {
+  @include border-right-radius(0);
+}
+.input-group-addon:first-child {
+  border-right: 0;
+}
+.input-group .form-control:last-child,
+.input-group-addon:last-child,
+.input-group-btn:last-child > .btn,
+.input-group-btn:last-child > .dropdown-toggle,
+.input-group-btn:first-child > .btn:not(:first-child) {
+  @include border-left-radius(0);
+}
+.input-group-addon:last-child {
+  border-left: 0;
+}
+
+// Button input groups
+// -------------------------
+.input-group-btn {
+  position: relative;
+  white-space: nowrap;
+}
+.input-group-btn > .btn {
+  position: relative;
+  // Jankily prevent input button groups from wrapping
+  + .btn {
+    margin-left: -4px;
+  }
+  // Bring the "active" button to the front
+  &:hover,
+  &:active {
+    z-index: 2;
+  }
+}

data/app/assets/stylesheets/twitter/bootstrap/_labels.scss

@@ -6,13 +6,12 @@
   display: inline;
   padding: .25em .6em;
   font-size: 75%;
-  font-weight: 500;
+  font-weight: bold;
   line-height: 1;
   color: $label-color;
   text-align: center;
   white-space: nowrap;
-  vertical-align: middle;
-  background-color: $gray-light;
+  vertical-align: baseline;
   border-radius: .25em;
 
   // Add hover effects, but only for links
@@ -22,13 +21,22 @@
       color: $label-link-hover-color;
       text-decoration: none;
       cursor: pointer;
-      background-color: darken($gray-light, 10%);
     }
   }
+
+  // Empty labels collapse automatically (not available in IE8)
+  &:empty {
+    display: none;
+  }
 }
 
 // Colors
 // Contextual variations (linked labels get darker on :hover)
+
+.label-default {
+  @include label-variant($label-default-bg);
+}
+
 .label-danger {
   @include label-variant($label-danger-bg);
 }

data/app/assets/stylesheets/twitter/bootstrap/_list-group.scss

@@ -9,7 +9,6 @@
   // No need to set list-style: none; since .list-group-item is block level
   margin-bottom: 20px;
   padding-left: 0; // reset padding because ul and ol
-  background-color: $list-group-bg;
 }
 
 // Individual list items
@@ -18,51 +17,56 @@
 .list-group-item {
   position: relative;
   display: block;
-  padding: 10px 30px 10px 15px;
+  padding: 10px 15px;
   // Place the border on the list items and negative margin up for better styling
   margin-bottom: -1px;
+  background-color: $list-group-bg;
   border: 1px solid $list-group-border;
 
   // Round the first and last items
   &:first-child {
-    @include border-top-radius($border-radius-base);
+    @include border-top-radius($list-group-border-radius);
   }
   &:last-child {
     margin-bottom: 0;
-    @include border-bottom-radius($border-radius-base);
+    @include border-bottom-radius($list-group-border-radius);
   }
 
   // Align badges within list items
   > .badge {
     float: right;
-    margin-right: -15px;
   }
-}
+  > .badge + .badge {
+    margin-right: 5px;
+  }
 
-// Custom content options
-// -------------------------
 
-.list-group-item-heading {
-  margin-top: 0;
-  margin-bottom: 5px;
-}
-.list-group-item-text {
-  margin-bottom: 0;
-  line-height: 1.3;
+  // Active class on item itself, not parent
+  &.active,
+  &.active:hover,
+  &.active:focus {
+    z-index: 2; // Place active items above their siblings for proper border styling
+    color: $list-group-active-color;
+    background-color: $list-group-active-bg;
+    border-color: $list-group-active-border;
+
+    // Force color to inherit for custom content
+    .list-group-item-heading {
+      color: inherit;
+    }
+    .list-group-item-text {
+      color: lighten($list-group-active-bg, 40%);
+    }
+  }
 }
 
 // Linked list items
-// -------------------------
-
-// Custom content within linked items
 a.list-group-item {
-  // Colorize content accordingly
+  color: $list-group-link-color;
+
   .list-group-item-heading {
     color: $list-group-link-heading-color;
   }
-  .list-group-item-text {
-    color: $list-group-link-color;
-  }
 
   // Hover state
   &:hover,
@@ -70,20 +74,16 @@ a.list-group-item {
     text-decoration: none;
     background-color: $list-group-hover-bg;
   }
+}
 
-  // Active class on item itself, not parent
-  &.active {
-    z-index: 2; // Place active items above their siblings for proper border styling
-    color: $list-group-active-color;
-    background-color: $list-group-active-bg;
-    border-color: $list-group-active-border;
+// Custom content options
+// -------------------------
 
-    // Force color to inherit for custom content
-    .list-group-item-heading {
-      color: inherit;
-    }
-    .list-group-item-text {
-      color: lighten($list-group-active-bg, 40%);
-    }
-  }
+.list-group-item-heading {
+  margin-top: 0;
+  margin-bottom: 5px;
+}
+.list-group-item-text {
+  margin-bottom: 0;
+  line-height: 1.3;
 }

data/app/assets/stylesheets/twitter/bootstrap/_mixins.scss

@@ -129,22 +129,22 @@
 // Transformations
 @mixin rotate($degrees) {
   -webkit-transform: rotate($degrees);
-      -ms-transform: rotate($degrees);
+      -ms-transform: rotate($degrees); // IE9+
           transform: rotate($degrees);
 }
 @mixin scale($ratio) {
   -webkit-transform: scale($ratio);
-      -ms-transform: scale($ratio);
+      -ms-transform: scale($ratio); // IE9+
           transform: scale($ratio);
 }
 @mixin translate($x, $y) {
   -webkit-transform: translate($x, $y);
-      -ms-transform: translate($x, $y);
+      -ms-transform: translate($x, $y); // IE9+
           transform: translate($x, $y);
 }
 @mixin skew($x, $y) {
   -webkit-transform: skew($x, $y);
-      -ms-transform: skewX($x) skewY($y); // See https://github.com/twbs/bootstrap/issues/4885
+      -ms-transform: skewX($x) skewY($y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
           transform: skew($x, $y);
 }
 @mixin translate3d($x, $y, $z) {
@@ -157,19 +157,9 @@
 // Default value is `visible`, but can be changed to `hidden`
 // See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples
 @mixin backface-visibility($visibility){
-	-webkit-backface-visibility: $visibility;
-	   -moz-backface-visibility: $visibility;
-	        backface-visibility: $visibility;
-}
-
-// Background clipping
-@mixin background-clip($clip) {
-          background-clip: $clip;
-}
-
-// Background sizing
-@mixin background-size($size) {
-          background-size: $size;
+  -webkit-backface-visibility: $visibility;
+     -moz-backface-visibility: $visibility;
+          backface-visibility: $visibility;
 }
 
 // Box sizing
@@ -184,7 +174,7 @@
 @mixin user-select($select) {
   -webkit-user-select: $select;
      -moz-user-select: $select;
-      -ms-user-select: $select;
+      -ms-user-select: $select; // IE10+
        -o-user-select: $select;
           user-select: $select;
 }
@@ -210,7 +200,7 @@
   word-wrap: break-word;
   -webkit-hyphens: $mode;
      -moz-hyphens: $mode;
-      -ms-hyphens: $mode;
+      -ms-hyphens: $mode; // IE10+
        -o-hyphens: $mode;
           hyphens: $mode;
 }
@@ -232,8 +222,7 @@
 //
 // Creates two color stops, start and end, by specifying a color and position for each color stop.
 // Color stops are not available in IE9 and below.
-@mixin gradient-horizontal($start-color: #555, $start-percent: 0%, $end-color: #333, $end-percent: 100%) {
-  background-color: $end-color;
+@mixin gradient-horizontal($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
   background-image: -webkit-gradient(linear, $start-percent top, $end-percent top, from($start-color), to($end-color)); // Safari 4+, Chrome 2+
   background-image: -webkit-linear-gradient(left, color-stop($start-color $start-percent), color-stop($end-color $end-percent)); // Safari 5.1+, Chrome 10+
   background-image: -moz-linear-gradient(left, $start-color $start-percent, $end-color $end-percent); // FF 3.6+
@@ -246,8 +235,7 @@
 //
 // Creates two color stops, start and end, by specifying a color and position for each color stop.
 // Color stops are not available in IE9 and below.
-@mixin gradient-vertical($start-color: #555, $start-percent: 0%, $end-color: #333, $end-percent: 100%) {
-  background-color: $end-color;
+@mixin gradient-vertical($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
   background-image: -webkit-gradient(linear, left $start-percent, left $end-percent, from($start-color), to($end-color)); // Safari 4+, Chrome 2+
   background-image: -webkit-linear-gradient(top, $start-color, $start-percent, $end-color, $end-percent); // Safari 5.1+, Chrome 10+
   background-image:  -moz-linear-gradient(top, $start-color $start-percent, $end-color $end-percent); // FF 3.6+
@@ -257,7 +245,6 @@
 }
 
 @mixin gradient-directional($start-color: #555, $end-color: #333, $deg: 45deg) {
-  background-color: $end-color;
   background-repeat: repeat-x;
   background-image: -webkit-linear-gradient($deg, $start-color, $end-color); // Safari 5.1+, Chrome 10+
   background-image: -moz-linear-gradient($deg, $start-color, $end-color); // FF 3.6+
@@ -265,7 +252,6 @@
 }
 
 @mixin gradient-horizontal-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
-  background-color: mix($mid-color, $end-color, 80%);
   background-image: -webkit-gradient(left, linear, 0 0, 0 100%, from($start-color), color-stop($color-stop, $mid-color), to($end-color));
   background-image: -webkit-linear-gradient(left, $start-color, $mid-color $color-stop, $end-color);
   background-image: -moz-linear-gradient(left, $start-color, $mid-color $color-stop, $end-color);
@@ -275,7 +261,6 @@
 }
 
 @mixin gradient-vertical-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
-  background-color: mix($mid-color, $end-color, 80%);
   background-image: -webkit-gradient(linear, 0 0, 0 100%, from($start-color), color-stop($color-stop, $mid-color), to($end-color));
   background-image: -webkit-linear-gradient($start-color, $mid-color $color-stop, $end-color);
   background-image: -moz-linear-gradient(top, $start-color, $mid-color $color-stop, $end-color);
@@ -284,7 +269,6 @@
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0); // IE9 and down, gets no color-stop at all for proper fallback
 }
 @mixin gradient-radial($inner-color: #555, $outer-color: #333) {
-  background-color: $outer-color;
   background-image: -webkit-gradient(radial, center center, 0, center center, 460, from($inner-color), to($outer-color));
   background-image: -webkit-radial-gradient(circle, $inner-color, $outer-color);
   background-image: -moz-radial-gradient(circle, $inner-color, $outer-color);
@@ -292,7 +276,6 @@
   background-repeat: no-repeat;
 }
 @mixin gradient-striped($color: #555, $angle: 45deg) {
-  background-color: $color;
   background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent));
   background-image: -webkit-linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
   background-image: -moz-linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
@@ -342,6 +325,25 @@
   background-color: $color;
 }
 
+// Panels
+// -------------------------
+@mixin panel-variant($border, $heading-text-color, $heading-bg-color, $heading-border) {
+  border-color: $border;
+  .panel-heading {
+    color: $heading-text-color;
+    background-color: $heading-bg-color;
+    border-color: $heading-border;
+    + .panel-collapse .panel-body {
+      border-top-color: $border;
+    }
+  }
+  .panel-footer {
+    + .panel-collapse .panel-body {
+      border-bottom-color: $border;
+    }
+  }
+}
+
 // Alerts
 // -------------------------
 @mixin alert-variant($background, $border, $text-color) {
@@ -356,11 +358,11 @@
   }
 }
 
-// Button pseudo states
+// Button variants
 // -------------------------
 // Easily pump out default styles, as well as :hover, :focus, :active,
 // and disabled options for all buttons
-@mixin btn-pseudo-states($color, $background, $border) {
+@mixin button-variant($color, $background, $border) {
   color: $color;
   background-color: $background;
   border-color: $border;
@@ -369,8 +371,9 @@
   &:focus,
   &:active,
   &.active {
-    background-color: darken($background, 5%);
-        border-color: darken($border, 10%);
+    color: $color;
+    background-color: darken($background, 8%);
+        border-color: darken($border, 12%);
   }
 
   &.disabled,
@@ -387,6 +390,39 @@
   }
 }
 
+// Button sizes
+// -------------------------
+@mixin button-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {
+  padding: $padding-vertical $padding-horizontal;
+  font-size: $font-size;
+  line-height: $line-height;
+  border-radius: $border-radius;
+}
+
+// Pagination
+// -------------------------
+@mixin pagination-size($padding-vertical, $padding-horizontal, $font-size, $border-radius) {
+  > li {
+    > a,
+    > span {
+      padding: $padding-vertical $padding-horizontal;
+      font-size: $font-size;
+    }
+    &:first-child {
+      > a,
+      > span {
+        @include border-left-radius($border-radius);
+      }
+    }
+    &:last-child {
+      > a,
+      > span {
+        @include border-right-radius($border-radius);
+      }
+    }
+  }
+}
+
 // Labels
 // -------------------------
 @mixin label-variant($color) {
@@ -402,7 +438,7 @@
 // Navbar vertical align
 // -------------------------
 // Vertically center elements in the navbar.
-// Example: an element has a height of 30px, so write out `.navbarVerticalAlign(30px);` to calculate the appropriate top margin.
+// Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);` to calculate the appropriate top margin.
 @mixin navbar-vertical-align($element-height) {
   margin-top: (($navbar-height - $element-height) / 2);
   margin-bottom: (($navbar-height - $element-height) / 2);
@@ -450,51 +486,136 @@
 }
 
 // Creates a wrapper for a series of columns
-@mixin make-row() {
+@mixin make-row($gutter: $grid-gutter-width) {
   // Then clear the floated columns
   @include clearfix();
 
-  @media (min-width: $screen-small) {
-    margin-left:  ($grid-gutter-width / -2);
-    margin-right: ($grid-gutter-width / -2);
+  .container & {
+    @media (min-width: $screen-small) {
+      margin-left:  ($gutter / -2);
+      margin-right: ($gutter / -2);
+    }
   }
 
   // Negative margin nested rows out to align the content of columns
   .row {
-    margin-left:  ($grid-gutter-width / -2);
-    margin-right: ($grid-gutter-width / -2);
+    margin-left:  ($gutter / -2);
+    margin-right: ($gutter / -2);
   }
 }
 
-// Generate the columns
-@mixin make-column($columns) {
+// Generate the extra small columns
+@mixin make-xs-column($columns, $gutter: $grid-gutter-width) {
   position: relative;
+  float: left;
   // Prevent columns from collapsing when empty
   min-height: 1px;
   // Inner gutter via padding
-  padding-left:  ($grid-gutter-width / 2);
-  padding-right: ($grid-gutter-width / 2);
+  padding-left:  ($gutter / 2);
+  padding-right: ($gutter / 2);
+  $max-width: ($screen-small - 1);
 
   // Calculate width based on number of columns available
-  @media (min-width: $grid-float-breakpoint) {
+  @media (max-width: $max-width) {
+    width: percentage(($columns / $grid-columns));
+  }
+}
+
+// Generate the small columns
+@mixin make-sm-column($columns, $gutter: $grid-gutter-width) {
+  position: relative;
+  // Prevent columns from collapsing when empty
+  min-height: 1px;
+  // Inner gutter via padding
+  padding-left:  ($gutter / 2);
+  padding-right: ($gutter / 2);
+
+  // Calculate width based on number of columns available
+  @media (min-width: $screen-small) {
     float: left;
     width: percentage(($columns / $grid-columns));
   }
 }
 
-// Generate the column offsets
-@mixin make-column-offset($columns) {
-  @media (min-width: $grid-float-breakpoint) {
+// Generate the small column offsets
+@mixin make-sm-column-offset($columns) {
+  @media (min-width: $screen-small) {
     margin-left: percentage(($columns / $grid-columns));
   }
 }
-@mixin make-column-push($columns) {
-  @media (min-width: $grid-float-breakpoint) {
+@mixin make-sm-column-push($columns) {
+  @media (min-width: $screen-small) {
     left: percentage(($columns / $grid-columns));
   }
 }
-@mixin make-column-pull($columns) {
-  @media (min-width: $grid-float-breakpoint) {
+@mixin make-sm-column-pull($columns) {
+  @media (min-width: $screen-small) {
+    right: percentage(($columns / $grid-columns));
+  }
+}
+
+// Generate the medium columns
+@mixin make-md-column($columns, $gutter: $grid-gutter-width) {
+  position: relative;
+  // Prevent columns from collapsing when empty
+  min-height: 1px;
+  // Inner gutter via padding
+  padding-left:  ($gutter / 2);
+  padding-right: ($gutter / 2);
+
+  // Calculate width based on number of columns available
+  @media (min-width: $screen-medium) {
+    float: left;
+    width: percentage(($columns / $grid-columns));
+  }
+}
+
+// Generate the large column offsets
+@mixin make-md-column-offset($columns) {
+  @media (min-width: $screen-medium) {
+    margin-left: percentage(($columns / $grid-columns));
+  }
+}
+@mixin make-md-column-push($columns) {
+  @media (min-width: $screen-medium) {
+    left: percentage(($columns / $grid-columns));
+  }
+}
+@mixin make-md-column-pull($columns) {
+  @media (min-width: $screen-medium) {
+    right: percentage(($columns / $grid-columns));
+  }
+}
+
+// Generate the large columns
+@mixin make-lg-column($columns, $gutter: $grid-gutter-width) {
+  position: relative;
+  // Prevent columns from collapsing when empty
+  min-height: 1px;
+  // Inner gutter via padding
+  padding-left:  ($gutter / 2);
+  padding-right: ($gutter / 2);
+
+  // Calculate width based on number of columns available
+  @media (min-width: $screen-large) {
+    float: left;
+    width: percentage(($columns / $grid-columns));
+  }
+}
+
+// Generate the large column offsets
+@mixin make-lg-column-offset($columns) {
+  @media (min-width: $screen-large) {
+    margin-left: percentage(($columns / $grid-columns));
+  }
+}
+@mixin make-lg-column-push($columns) {
+  @media (min-width: $screen-large) {
+    left: percentage(($columns / $grid-columns));
+  }
+}
+@mixin make-lg-column-pull($columns) {
+  @media (min-width: $screen-large) {
     right: percentage(($columns / $grid-columns));
   }
 }
@@ -513,7 +634,6 @@
   }
   // Set the border and box shadow on specific inputs to match
   .form-control {
-    padding-right: 32px; // to account for the feedback icon
     border-color: $border-color;
     @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
     &:focus {
@@ -529,3 +649,58 @@
     background-color: $background-color;
   }
 }
+
+// Form control focus state
+//
+// Generate a customized focus state and for any input with the specified color,
+// which defaults to the `@input-focus-border` variable.
+//
+// We highly encourage you to not customize the default value, but instead use
+// this to tweak colors on an as-needed basis. This aesthetic change is based on
+// WebKit's default styles, but applicable to a wider range of browsers. Its
+// usability and accessibility should be taken into account with any change.
+//
+// Example usage: change the default blue border and shadow to white for better
+// contrast against a dark gray background.
+
+@mixin form-control-focus($color: $input-border-focus) {
+  $color-rgba: rgba(red($color), green($color), blue($color), .6);
+  &:focus {
+    border-color: $color;
+    outline: 0;
+    @include box-shadow((inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px $color-rgba));
+  }
+}
+
+// Form control sizing
+//
+// Relative text size, padding, and border-radii changes for form controls. For
+// horizontal sizing, wrap controls in the predefined grid classes. `<select>`
+// element gets special love because it's special, and that's a fact!
+
+@mixin input-size($selector, $input-height, $padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {
+  #{$selector} {
+    height: $input-height;
+    padding: $padding-vertical $padding-horizontal;
+    font-size: $font-size;
+    line-height: $line-height;
+    border-radius: $border-radius;
+  }
+
+  select#{$selector} {
+    height: $input-height;
+    line-height: $input-height;
+  }
+
+  textarea#{$selector} {
+    height: auto;
+  }
+}
+
+@mixin pull-right {
+  float: right !important;
+}
+
+@mixin pull-left {
+  float: left !important;
+}