bootstrap 4.0.0.alpha5 → 4.0.0.alpha6

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

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

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

@@ -2,7 +2,7 @@
 //
 // Breakpoints are defined as a map of (name: minimum width), order from small to large:
 //
-//    (xs: 0, sm: 544px, md: 768px)
+//    (xs: 0, sm: 576px, md: 768px)
 //
 // The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.
 
@@ -10,7 +10,7 @@
 //
 //    >> breakpoint-next(sm)
 //    md
-//    >> breakpoint-next(sm, (xs: 0, sm: 544px, md: 768px))
+//    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px))
 //    md
 //    >> breakpoint-next(sm, $breakpoint-names: (xs sm md))
 //    md
@@ -21,8 +21,8 @@
 
 // Minimum breakpoint width. Null for the smallest (first) breakpoint.
 //
-//    >> breakpoint-min(sm, (xs: 0, sm: 544px, md: 768px))
-//    544px
+//    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px))
+//    576px
 @function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
   $min: map-get($breakpoints, $name);
   @return if($min != 0, $min, null);
@@ -31,13 +31,24 @@
 // Maximum breakpoint width. Null for the largest (last) breakpoint.
 // The maximum value is calculated as the minimum of the next one less 0.1.
 //
-//    >> breakpoint-max(sm, (xs: 0, sm: 544px, md: 768px))
+//    >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px))
 //    767px
 @function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
   $next: breakpoint-next($name, $breakpoints);
   @return if($next, breakpoint-min($next, $breakpoints) - 1px, null);
 }
 
+// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.
+// Useful for making responsive utilities.
+//
+//    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px))
+//    ""  (Returns a blank string)
+//    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px))
+//    "-sm"
+@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
+  @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
+}
+
 // Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
 // Makes the @content apply to the given breakpoint and wider.
 @mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
@@ -64,17 +75,6 @@
   }
 }
 
-// Media between the breakpoint's minimum and maximum widths.
-// No minimum for the smallest breakpoint, and no maximum for the largest one.
-// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
-@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
-  @include media-breakpoint-up($name, $breakpoints) {
-    @include media-breakpoint-down($name, $breakpoints) {
-      @content;
-    }
-  }
-}
-
 // Media that spans multiple breakpoint widths.
 // Makes the @content apply between the min and max breakpoints
 @mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
@@ -84,3 +84,12 @@
     }
   }
 }
+
+// Media between the breakpoint's minimum and maximum widths.
+// No minimum for the smallest breakpoint, and no maximum for the largest one.
+// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
+@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
+  @include media-breakpoint-between($name, $name, $breakpoints) {
+    @content;
+  }
+}

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

@@ -12,96 +12,69 @@
   border-color: $border;
   @include box-shadow($btn-box-shadow);
 
+  // Hover and focus styles are shared
   @include hover {
     color: $color;
     background-color: $active-background;
-        border-color: $active-border;
+    border-color: $active-border;
   }
-
   &:focus,
   &.focus {
-    color: $color;
-    background-color: $active-background;
-        border-color: $active-border;
+    // Avoid using mixin so we can pass custom focus shadow properly
+    @if $enable-shadows {
+      box-shadow: $btn-box-shadow, 0 0 0 2px rgba($border, .5);
+    } @else {
+      box-shadow: 0 0 0 2px rgba($border, .5);
+    }
+  }
+
+  // Disabled comes first so active can properly restyle
+  &.disabled,
+  &:disabled {
+    background-color: $background;
+    border-color: $border;
   }
 
   &:active,
   &.active,
-  .open > &.dropdown-toggle {
+  .show > &.dropdown-toggle {
     color: $color;
     background-color: $active-background;
-        border-color: $active-border;
-    // Remove the gradient for the pressed/active state
-    background-image: none;
+    background-image: none; // Remove the gradient for the pressed/active state
+    border-color: $active-border;
     @include box-shadow($btn-active-box-shadow);
-
-    &:hover,
-    &:focus,
-    &.focus {
-      color: $color;
-      background-color: darken($background, 17%);
-          border-color: darken($border, 25%);
-    }
-  }
-
-  &.disabled,
-  &:disabled {
-    &:focus,
-    &.focus {
-      background-color: $background;
-          border-color: $border;
-    }
-    @include hover {
-      background-color: $background;
-          border-color: $border;
-    }
   }
 }
 
-@mixin button-outline-variant($color) {
+@mixin button-outline-variant($color, $color-hover: #fff) {
   color: $color;
   background-image: none;
   background-color: transparent;
   border-color: $color;
 
   @include hover {
-    color: #fff;
+    color: $color-hover;
     background-color: $color;
-        border-color: $color;
+    border-color: $color;
   }
 
   &:focus,
   &.focus {
-    color: #fff;
-    background-color: $color;
-        border-color: $color;
+    box-shadow: 0 0 0 2px rgba($color, .5);
+  }
+
+  &.disabled,
+  &:disabled {
+    color: $color;
+    background-color: transparent;
   }
 
   &:active,
   &.active,
-  .open > &.dropdown-toggle {
-    color: #fff;
+  .show > &.dropdown-toggle {
+    color: $color-hover;
     background-color: $color;
-        border-color: $color;
-
-    &:hover,
-    &:focus,
-    &.focus {
-      color: #fff;
-      background-color: darken($color, 17%);
-          border-color: darken($color, 25%);
-    }
-  }
-
-  &.disabled,
-  &:disabled {
-    &:focus,
-    &.focus {
-      border-color: lighten($color, 20%);
-    }
-    @include hover {
-      border-color: lighten($color, 20%);
-    }
+    border-color: $color;
   }
 }
 

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

@@ -20,8 +20,11 @@
 //
 
 @mixin card-inverse {
+  color: rgba(255,255,255,.65);
+
   .card-header,
   .card-footer {
+    background-color: transparent;
     border-color: rgba(255,255,255,.2);
   }
   .card-header,

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

@@ -1,7 +1,7 @@
 @mixin clearfix() {
   &::after {
+    display: block;
     content: "";
-    display: table;
     clear: both;
   }
 }

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

@@ -4,3 +4,6 @@
 @mixin float-right {
   float: right !important;
 }
+@mixin float-none {
+  float: none !important;
+}

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

@@ -7,8 +7,8 @@
   // Color the label and help text
   .form-control-feedback,
   .form-control-label,
+  .col-form-label,
   .form-check-label,
-  .form-check-inline,
   .custom-control {
     color: $color;
   }
@@ -17,10 +17,8 @@
   .form-control {
     border-color: $color;
 
-    @if $enable-rounded {
-      &:focus {
-        box-shadow: $input-box-shadow, 0 0 6px lighten($color, 20%);
-      }
+    &:focus {
+      @include box-shadow($input-box-shadow, 0 0 6px lighten($color, 20%));
     }
   }
 

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

@@ -3,21 +3,17 @@
 // Horizontal gradient, from left to right
 //
 // 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-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
 }
 
 // Vertical gradient, from top to bottom
 //
 // 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-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
 }
 
 @mixin gradient-directional($start-color: #555, $end-color: #333, $deg: 45deg) {
@@ -27,12 +23,10 @@
 @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-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
 }
 @mixin gradient-radial($inner-color: #555, $outer-color: #333) {
   background-image: radial-gradient(circle, $inner-color, $outer-color);
@@ -40,4 +34,4 @@
 }
 @mixin gradient-striped($color: rgba(255,255,255,.15), $angle: 45deg) {
   background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
-}
+}

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

@@ -7,50 +7,46 @@
   // Common properties for all breakpoints
   %grid-column {
     position: relative;
-    // Prevent columns from collapsing when empty
-    min-height: 1px;
-
-    @if $enable-flex {
-      width: 100%;
-    }
+    width: 100%;
+    min-height: 1px; // Prevent columns from collapsing when empty
 
     @include make-gutters($gutters);
   }
 
-  $breakpoint-counter: 0;
   @each $breakpoint in map-keys($breakpoints) {
-    $breakpoint-counter: ($breakpoint-counter + 1);
+    $infix: breakpoint-infix($breakpoint, $breakpoints);
 
     // Allow columns to stretch full width below their breakpoints
-    .col-#{$breakpoint} {
-      @extend %grid-column;
-    }
-
     @for $i from 1 through $columns {
-      .col-#{$breakpoint}-#{$i} {
+      .col#{$infix}-#{$i} {
         @extend %grid-column;
       }
     }
+    .col#{$infix} {
+      @extend %grid-column;
+    }
 
     @include media-breakpoint-up($breakpoint, $breakpoints) {
       // Provide basic `.col-{bp}` classes for equal-width flexbox columns
-      @if $enable-flex {
-        .col-#{$breakpoint} {
-          flex-basis: 0;
-          flex-grow: 1;
-          max-width: 100%;
-        }
+      .col#{$infix} {
+        flex-basis: 0;
+        flex-grow: 1;
+        max-width: 100%;
+      }
+      .col#{$infix}-auto {
+        flex: 0 0 auto;
+        width: auto;
       }
 
       @for $i from 1 through $columns {
-        .col-#{$breakpoint}-#{$i} {
+        .col#{$infix}-#{$i} {
           @include make-col($i, $columns);
         }
       }
 
       @each $modifier in (pull, push) {
         @for $i from 0 through $columns {
-          .#{$modifier}-#{$breakpoint}-#{$i} {
+          .#{$modifier}#{$infix}-#{$i} {
             @include make-col-modifier($modifier, $i, $columns)
           }
         }
@@ -58,8 +54,8 @@
 
       // `$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} {
+        @if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-xs-0
+          .offset#{$infix}-#{$i} {
             @include make-col-modifier(offset, $i, $columns)
           }
         }

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

@@ -2,13 +2,17 @@
 //
 // Generate semantic grid columns with these mixins.
 
-@mixin make-container($gutter: $grid-gutter-width-base) {
+@mixin make-container($gutters: $grid-gutter-widths) {
+  position: relative;
   margin-left: auto;
   margin-right: auto;
-  padding-left:  ($gutter / 2);
-  padding-right: ($gutter / 2);
-  @if not $enable-flex {
-    @include clearfix();
+
+  @each $breakpoint in map-keys($gutters) {
+    @include media-breakpoint-up($breakpoint) {
+      $gutter: map-get($gutters, $breakpoint);
+      padding-right: ($gutter / 2);
+      padding-left:  ($gutter / 2);
+    }
   }
 }
 
@@ -34,12 +38,8 @@
 }
 
 @mixin make-row($gutters: $grid-gutter-widths) {
-  @if $enable-flex {
-    display: flex;
-    flex-wrap: wrap;
-  } @else {
-    @include clearfix();
-  }
+  display: flex;
+  flex-wrap: wrap;
 
   @each $breakpoint in map-keys($gutters) {
     @include media-breakpoint-up($breakpoint) {
@@ -52,14 +52,11 @@
 
 @mixin make-col-ready($gutters: $grid-gutter-widths) {
   position: relative;
-  min-height: 1px; // Prevent collapsing
-
   // 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%;
-  }
+  width: 100%;
+  min-height: 1px; // Prevent collapsing
 
   @each $breakpoint in map-keys($gutters) {
     @include media-breakpoint-up($breakpoint) {
@@ -71,16 +68,12 @@
 }
 
 @mixin make-col($size, $columns: $grid-columns) {
-  @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);
-  }
+  flex: 0 0 percentage($size / $columns);
+  // width: 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);
 }
 
 @mixin make-col-offset($size, $columns: $grid-columns) {