bootstrap 4.0.0.alpha3 → 4.0.0.alpha3.1

data/assets/stylesheets/bootstrap/mixins/_background-variant.scss

@@ -7,7 +7,7 @@
   }
   a#{$parent} {
     @include hover-focus {
-      background-color: darken($color, 10%);
+      background-color: darken($color, 10%) !important;
     }
   }
 }

data/assets/stylesheets/bootstrap/mixins/_buttons.scss

@@ -10,7 +10,7 @@
   color: $color;
   background-color: $background;
   border-color: $border;
-  @include box-shadow(inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075));
+  @include box-shadow($btn-box-shadow);
 
   @include hover {
     color: $color;
@@ -33,7 +33,7 @@
         border-color: $active-border;
     // Remove the gradient for the pressed/active state
     background-image: none;
-    @include box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
+    @include box-shadow($btn-active-box-shadow);
 
     &:hover,
     &:focus,
@@ -64,19 +64,33 @@
   background-color: transparent;
   border-color: $color;
 
+  @include hover {
+    color: #fff;
+    background-color: $color;
+        border-color: $color;
+  }
+
   &:focus,
-  &.focus,
-  &:active,
-  &.active,
-  .open > &.dropdown-toggle {
+  &.focus {
     color: #fff;
     background-color: $color;
         border-color: $color;
   }
-  @include hover {
+
+  &:active,
+  &.active,
+  .open > &.dropdown-toggle {
     color: #fff;
     background-color: $color;
         border-color: $color;
+
+    &:hover,
+    &:focus,
+    &.focus {
+      color: #fff;
+      background-color: darken($color, 17%);
+          border-color: darken($color, 25%);
+    }
   }
 
   &.disabled,
@@ -92,9 +106,8 @@
 }
 
 // Button sizes
-@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
+@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
   padding: $padding-y $padding-x;
   font-size: $font-size;
-  line-height: $line-height;
   @include border-radius($border-radius);
 }

data/assets/stylesheets/bootstrap/mixins/_cards.scss

@@ -3,6 +3,11 @@
 @mixin card-variant($background, $border) {
   background-color: $background;
   border-color: $border;
+
+  .card-header,
+  .card-footer {
+    background-color: transparent;
+  }
 }
 
 @mixin card-outline-variant($color) {
@@ -17,7 +22,7 @@
 @mixin card-inverse {
   .card-header,
   .card-footer {
-    border-bottom: $card-border-width solid rgba(255,255,255,.2);
+    border-color: rgba(255,255,255,.2);
   }
   .card-header,
   .card-footer,
@@ -27,7 +32,8 @@
   }
   .card-link,
   .card-text,
-  .card-blockquote > footer {
+  .card-subtitle,
+  .card-blockquote .blockquote-footer {
     color: rgba(255,255,255,.65);
   }
   .card-link {

data/assets/stylesheets/bootstrap/mixins/_forms.scss

@@ -5,7 +5,7 @@
 
 @mixin form-control-validation($color) {
   // Color the label and help text
-  .text-help,
+  .form-control-feedback,
   .form-control-label,
   .radio,
   .checkbox,
@@ -14,7 +14,8 @@
   &.radio label,
   &.checkbox label,
   &.radio-inline label,
-  &.checkbox-inline label  {
+  &.checkbox-inline label,
+  .custom-control {
     color: $color;
   }
   // Set the border and box shadow on specific inputs to match
@@ -55,6 +56,8 @@
 // contrast against a dark gray background.
 @mixin form-control-focus() {
   &:focus {
+    color: $input-color-focus;
+    background-color: $input-bg-focus;
     border-color: $input-border-focus;
     outline: none;
     $shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px $input-box-shadow-focus;
@@ -68,10 +71,10 @@
 // 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($parent, $input-height, $padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {
+@mixin input-size($parent, $input-height, $padding-y, $padding-x, $font-size, $line-height, $border-radius) {
   #{$parent} {
     height: $input-height;
-    padding: $padding-vertical $padding-horizontal;
+    padding: $padding-y $padding-x;
     font-size: $font-size;
     line-height: $line-height;
     @include border-radius($border-radius);

data/assets/stylesheets/bootstrap/mixins/_gradients.scss

@@ -4,7 +4,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.
-@mixin gradient-horizontal($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
+@mixin gradient-x($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
   background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent);
   background-repeat: repeat-x;
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=1); // IE9
@@ -14,7 +14,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.
-@mixin gradient-vertical($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
+@mixin gradient-y($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
   background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent);
   background-repeat: repeat-x;
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0); // IE9
@@ -24,12 +24,12 @@
   background-repeat: repeat-x;
   background-image: linear-gradient($deg, $start-color, $end-color);
 }
-@mixin gradient-horizontal-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
+@mixin gradient-x-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
   background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
   background-repeat: no-repeat;
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=1); // IE9 gets no color-stop at all for proper fallback
 }
-@mixin gradient-vertical-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
+@mixin gradient-y-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
   background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);
   background-repeat: no-repeat;
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0); // IE9 gets no color-stop at all for proper fallback

data/assets/stylesheets/bootstrap/mixins/_grid-framework.scss

@@ -4,41 +4,67 @@
 // any value of `$grid-columns`.
 
 @mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
+
   // Common properties for all breakpoints
   %grid-column {
     position: relative;
     // Prevent columns from collapsing when empty
     min-height: 1px;
     // Inner gutter via padding
-    padding-left: ($gutter / 2);
     padding-right: ($gutter / 2);
+    padding-left: ($gutter / 2);
+
+    @if $enable-flex {
+      width: 100%;
+    }
   }
+
+  $breakpoint-counter: 0;
   @each $breakpoint in map-keys($breakpoints) {
+    $breakpoint-counter: ($breakpoint-counter + 1);
+
     @for $i from 1 through $columns {
       .col-#{$breakpoint}-#{$i} {
         @extend %grid-column;
       }
     }
-    @include media-breakpoint-up($breakpoint) {
-      // Work around cross-media @extend (https://github.com/sass/sass/issues/1050)
-      %grid-column-float-#{$breakpoint} {
-        float: left;
+
+    @include media-breakpoint-up($breakpoint, $breakpoints) {
+      // Provide basic `.col-{bp}` classes for equal-width flexbox columns
+      @if $enable-flex {
+        .col-#{$breakpoint} {
+          position: relative;
+          flex-basis: 0;
+          flex-grow: 1;
+          max-width: 100%;
+          min-height: 1px;
+          padding-right: ($grid-gutter-width / 2);
+          padding-left:  ($grid-gutter-width / 2);
+        }
       }
+
       @for $i from 1 through $columns {
         .col-#{$breakpoint}-#{$i} {
-          @if not $enable-flex {
-            @extend %grid-column-float-#{$breakpoint};
-          }
-          @include make-col-span($i, $columns);
+          @include make-col($i, $columns, $gutter);
         }
       }
-      @each $modifier in (pull, push, offset) {
+
+      @each $modifier in (pull, push) {
         @for $i from 0 through $columns {
-          .col-#{$breakpoint}-#{$modifier}-#{$i} {
+          .#{$modifier}-#{$breakpoint}-#{$i} {
             @include make-col-modifier($modifier, $i, $columns)
           }
         }
       }
+
+      // `$columns - 1` because offsetting by the width of an entire row isn't possible
+      @for $i from 0 through ($columns - 1) {
+        @if $breakpoint-counter != 1 or $i != 0 { // Avoid emitting useless .offset-xs-0
+          .offset-#{$breakpoint}-#{$i} {
+            @include make-col-modifier(offset, $i, $columns)
+          }
+        }
+      }
     }
   }
 }

data/assets/stylesheets/bootstrap/mixins/_grid.scss

@@ -14,9 +14,9 @@
 
 
 // For each breakpoint, define the maximum width of the container in a media query
-@mixin make-container-max-widths($max-widths: $container-max-widths) {
+@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
   @each $breakpoint, $container-max-width in $max-widths {
-    @include media-breakpoint-up($breakpoint) {
+    @include media-breakpoint-up($breakpoint, $breakpoints) {
       max-width: $container-max-width;
     }
   }
@@ -33,20 +33,29 @@
   margin-right: ($gutter / -2);
 }
 
-@mixin make-col($gutter: $grid-gutter-width) {
+@mixin make-col-ready($size, $columns: $grid-columns, $gutter: $grid-gutter-width) {
   position: relative;
-  @if not $enable-flex {
-    float: left;
-  }
-  min-height: 1px;
-  padding-left:  ($gutter / 2);
+  min-height: 1px; // Prevent collapsing
   padding-right: ($gutter / 2);
+  padding-left:  ($gutter / 2);
+
+  // Prevent columns from becoming too narrow when at smaller grid tiers by
+  // always setting `width: 100%;`. This works because we use `flex` values
+  // later on to override this initial width.
+  @if $enable-flex {
+    width: 100%;
+  }
 }
 
-@mixin make-col-span($size, $columns: $grid-columns) {
+@mixin make-col($size, $columns: $grid-columns, $gutter: $grid-gutter-width) {
   @if $enable-flex {
     flex: 0 0 percentage($size / $columns);
+    // Add a `max-width` to ensure content within each column does not blow out
+    // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
+    // do not appear to require this.
+    max-width: percentage($size / $columns);
   } @else {
+    float: left;
     width: percentage($size / $columns);
   }
 }

data/assets/stylesheets/bootstrap/mixins/_hover.scss

@@ -1,14 +1,15 @@
 @mixin hover {
-  @if $enable-hover-media-query {
-    // See Media Queries Level 4: http://drafts.csswg.org/mediaqueries/#hover
-    // Currently shimmed by https://github.com/twbs/mq4-hover-shim
-    @media (hover: hover) {
-      &:hover { @content }
-    }
-  }
-  @else {
+  // TODO: re-enable along with mq4-hover-shim
+//  @if $enable-hover-media-query {
+//    // See Media Queries Level 4: http://drafts.csswg.org/mediaqueries/#hover
+//    // Currently shimmed by https://github.com/twbs/mq4-hover-shim
+//    @media (hover: hover) {
+//      &:hover { @content }
+//    }
+//  }
+//  @else {
     &:hover { @content }
-  }
+//  }
 }
 
 @mixin hover-focus {

data/assets/stylesheets/bootstrap/mixins/_pagination.scss

@@ -1,10 +1,9 @@
 // Pagination
 
-@mixin pagination-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {
+@mixin pagination-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
   .page-link {
-    padding: $padding-vertical $padding-horizontal;
+    padding: $padding-y $padding-x;
     font-size: $font-size;
-    line-height: $line-height;
   }
 
   .page-item {

data/assets/stylesheets/bootstrap/mixins/_progress.scss

@@ -9,6 +9,11 @@
     background-color: $color;
   }
 
+  // IE10+, Microsoft Edge
+  &[value]::-ms-fill {
+    background-color: $color;
+  }
+
   // IE9
   @media screen and (min-width:0\0) {
     .progress-bar {

data/assets/stylesheets/bootstrap/mixins/_reset-text.scss

@@ -1,11 +1,11 @@
 @mixin reset-text {
   font-family: $font-family-base;
-  // We deliberately do NOT reset font-size.
+  // We deliberately do NOT reset font-size or word-wrap.
   font-style: normal;
   font-weight: normal;
   letter-spacing: normal;
   line-break: auto;
-  line-height: $line-height;
+  line-height: $line-height-base;
   text-align: left; // Fallback for where `start` is not supported
   text-align: start;
   text-decoration: none;
@@ -14,5 +14,4 @@
   white-space: normal;
   word-break: normal;
   word-spacing: normal;
-  word-wrap: normal;
 }

data/assets/stylesheets/bootstrap/mixins/_screen-reader.scss

@@ -1,6 +1,6 @@
 // Only display content to screen readers
 //
-// See: http://a11yproject.com/posts/how-to-hide-content/
+// See: http://a11yproject.com/posts/how-to-hide-content
 
 @mixin sr-only {
   position: absolute;

data/assets/stylesheets/bootstrap/mixins/_tab-focus.scss

@@ -1,9 +1,9 @@
 // WebKit-style focus
 
 @mixin tab-focus() {
-  // Default
-  outline: thin dotted;
-  // WebKit
+  // WebKit-specific. Other browsers will keep their default outline style.
+  // (Initially tried to also force default via `outline: initial`,
+  // but that seems to erroneously remove the outline in Firefox altogether.)
   outline: 5px auto -webkit-focus-ring-color;
   outline-offset: -2px;
 }

data/assets/stylesheets/bootstrap/mixins/{_label.scss → _tag.scss}

@@ -1,6 +1,6 @@
-// Labels
+// Tags
 
-@mixin label-variant($color) {
+@mixin tag-variant($color) {
   background-color: $color;
 
   &[href] {

data/assets/stylesheets/bootstrap/mixins/_text-hide.scss

@@ -1,6 +1,6 @@
 // CSS image replacement
 @mixin text-hide() {
-  font: "0/0" a;
+  font: 0/0 a;
   color: transparent;
   text-shadow: none;
   background-color: transparent;

data/assets/stylesheets/bootstrap/{_utilities-background.scss → utilities/_background.scss}

@@ -2,11 +2,8 @@
 // Contextual backgrounds
 //
 
-// Inverse
-// TODO: redo this as a proper class
 .bg-inverse {
-  color: $gray-lighter;
-  background-color: $gray-dark;
+  background-color: $brand-inverse;
 }
 
 .bg-faded {

data/assets/stylesheets/bootstrap/utilities/_clearfix.scss

@@ -0,0 +1,3 @@
+.clearfix {
+  @include clearfix();
+}

data/assets/stylesheets/bootstrap/utilities/_display.scss

@@ -0,0 +1,13 @@
+//
+// Display utilities
+//
+
+.d-block {
+  display: block !important;
+}
+.d-inline-block {
+  display: inline-block !important;
+}
+.d-inline {
+  display: inline !important;
+}