bootstrap 4.0.0.alpha6 → 4.0.0.beta

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

@@ -1,14 +1,13 @@
-// Alerts
-
-@mixin alert-variant($background, $border, $body-color) {
+@mixin alert-variant($background, $border, $color) {
+  color: $color;
   background-color: $background;
   border-color: $border;
-  color: $body-color;
 
   hr {
     border-top-color: darken($border, 5%);
   }
+
   .alert-link {
-    color: darken($body-color, 10%);
+    color: darken($color, 10%);
   }
 }

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

@@ -1,11 +1,12 @@
-// Badges
-
-@mixin badge-variant($color) {
-  background-color: $color;
+@mixin badge-variant($bg) {
+  @include color-yiq($bg);
+  background-color: $bg;
 
   &[href] {
     @include hover-focus {
-      background-color: darken($color, 10%);
+      @include color-yiq($bg);
+      text-decoration: none;
+      background-color: darken($bg, 10%);
     }
   }
 }

data/assets/stylesheets/bootstrap/mixins/_border-radius.scss

@@ -8,15 +8,15 @@
 
 @mixin border-top-radius($radius) {
   @if $enable-rounded {
-    border-top-right-radius: $radius;
     border-top-left-radius: $radius;
+    border-top-right-radius: $radius;
   }
 }
 
 @mixin border-right-radius($radius) {
   @if $enable-rounded {
-    border-bottom-right-radius: $radius;
     border-top-right-radius: $radius;
+    border-bottom-right-radius: $radius;
   }
 }
 
@@ -29,7 +29,7 @@
 
 @mixin border-left-radius($radius) {
   @if $enable-rounded {
-    border-bottom-left-radius: $radius;
     border-top-left-radius: $radius;
+    border-bottom-left-radius: $radius;
   }
 }

data/assets/stylesheets/bootstrap/mixins/_box-shadow.scss

@@ -0,0 +1,5 @@
+@mixin box-shadow($shadow...) {
+  @if $enable-shadows {
+    box-shadow: $shadow;
+  }
+}

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: 576px, md: 768px)
+//    (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)
 //
 // The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.
 
@@ -10,9 +10,9 @@
 //
 //    >> breakpoint-next(sm)
 //    md
-//    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px))
+//    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
 //    md
-//    >> breakpoint-next(sm, $breakpoint-names: (xs sm md))
+//    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))
 //    md
 @function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
   $n: index($breakpoint-names, $name);
@@ -21,7 +21,7 @@
 
 // Minimum breakpoint width. Null for the smallest (first) breakpoint.
 //
-//    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px))
+//    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
 //    576px
 @function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
   $min: map-get($breakpoints, $name);
@@ -31,7 +31,7 @@
 // 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: 576px, md: 768px))
+//    >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
 //    767px
 @function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
   $next: breakpoint-next($name, $breakpoints);
@@ -41,9 +41,9 @@
 // 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))
+//    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
 //    ""  (Returns a blank string)
-//    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px))
+//    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
 //    "-sm"
 @function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
   @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
@@ -78,10 +78,11 @@
 // 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) {
-  @include media-breakpoint-up($lower, $breakpoints) {
-    @include media-breakpoint-down($upper, $breakpoints) {
-      @content;
-    }
+  $min: breakpoint-min($lower, $breakpoints);
+  $max: breakpoint-max($upper, $breakpoints);
+
+  @media (min-width: $min) and (max-width: $max) {
+    @content;
   }
 }
 
@@ -89,7 +90,16 @@
 // 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;
+  $min: breakpoint-min($name, $breakpoints);
+  $max: breakpoint-max($name, $breakpoints);
+
+  @if $min != null and $max != null {
+    @media (min-width: $min) and (max-width: $max) {
+      @content;
+    }
+  } @else if $max == null {
+    @include media-breakpoint-up($name)
+  } @else if $min == null {
+    @include media-breakpoint-down($name)
   }
 }

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

@@ -3,28 +3,25 @@
 // Easily pump out default styles, as well as :hover, :focus, :active,
 // and disabled options for all buttons
 
-@mixin button-variant($color, $background, $border) {
-  $active-background: darken($background, 10%);
-  $active-border: darken($border, 12%);
-
-  color: $color;
+@mixin button-variant($background, $border, $active-background: darken($background, 7.5%), $active-border: darken($border, 10%)) {
+  @include color-yiq($background);
   background-color: $background;
   border-color: $border;
   @include box-shadow($btn-box-shadow);
 
-  // Hover and focus styles are shared
-  @include hover {
-    color: $color;
+  &:hover {
+    @include color-yiq($background);
     background-color: $active-background;
     border-color: $active-border;
   }
+
   &:focus,
   &.focus {
     // 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);
+      box-shadow: $btn-box-shadow, 0 0 0 3px rgba($border, .5);
     } @else {
-      box-shadow: 0 0 0 2px rgba($border, .5);
+      box-shadow: 0 0 0 3px rgba($border, .5);
     }
   }
 
@@ -38,7 +35,6 @@
   &:active,
   &.active,
   .show > &.dropdown-toggle {
-    color: $color;
     background-color: $active-background;
     background-image: none; // Remove the gradient for the pressed/active state
     border-color: $active-border;
@@ -48,8 +44,8 @@
 
 @mixin button-outline-variant($color, $color-hover: #fff) {
   color: $color;
-  background-image: none;
   background-color: transparent;
+  background-image: none;
   border-color: $color;
 
   @include hover {
@@ -60,7 +56,7 @@
 
   &:focus,
   &.focus {
-    box-shadow: 0 0 0 2px rgba($color, .5);
+    box-shadow: 0 0 0 3px rgba($color, .5);
   }
 
   &.disabled,
@@ -79,8 +75,9 @@
 }
 
 // Button sizes
-@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
+@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $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/_clearfix.scss

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

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

@@ -1,39 +1,7 @@
-// Form validation states
-//
-// Used in _forms.scss to generate the form validation CSS for warnings, errors,
-// and successes.
-
-@mixin form-control-validation($color) {
-  // Color the label and help text
-  .form-control-feedback,
-  .form-control-label,
-  .col-form-label,
-  .form-check-label,
-  .custom-control {
-    color: $color;
-  }
-
-  // Set the border and box shadow on specific inputs to match
-  .form-control {
-    border-color: $color;
-
-    &:focus {
-      @include box-shadow($input-box-shadow, 0 0 6px lighten($color, 20%));
-    }
-  }
-
-  // Set validation states also for addons
-  .input-group-addon {
-    color: $color;
-    border-color: $color;
-    background-color: lighten($color, 40%);
-  }
-}
-
 // Form control focus state
 //
 // Generate a customized focus state and for any input with the specified color,
-// which defaults to the `@input-border-focus` variable.
+// which defaults to the `@input-border-color-focus` 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
@@ -44,36 +12,70 @@
 // 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;
+    color: $input-focus-color;
+    background-color: $input-focus-bg;
+    border-color: $input-focus-border-color;
     outline: none;
-    @include box-shadow($input-box-shadow-focus);
+    @include box-shadow($input-focus-box-shadow);
   }
 }
 
-// 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($parent, $input-height, $padding-y, $padding-x, $font-size, $line-height, $border-radius) {
-  #{$parent} {
-    height: $input-height;
-    padding: $padding-y $padding-x;
-    font-size: $font-size;
-    line-height: $line-height;
-    @include border-radius($border-radius);
+@mixin form-validation-state($state, $color) {
+
+  .form-control,
+  .custom-select {
+    .was-validated &:#{$state},
+    &.is-#{$state} {
+      border-color: $color;
+
+      &:focus {
+        box-shadow: 0 0 0 .2rem rgba($color,.25);
+      }
+
+      ~ .invalid-feedback,
+      ~ .invalid-tooltip {
+        display: block;
+      }
+    }
   }
 
-  select#{$parent} {
-    height: $input-height;
-    line-height: $input-height;
+
+  // TODO: redo check markup lol crap
+  .form-check-input {
+    .was-validated &:#{$state},
+    &.is-#{$state} {
+      + .form-check-label {
+        color: $color;
+      }
+    }
   }
 
-  textarea#{$parent},
-  select[multiple]#{$parent} {
-    height: auto;
+  // custom radios and checks
+  .custom-control-input {
+    .was-validated &:#{$state},
+    &.is-#{$state} {
+      ~ .custom-control-indicator {
+        background-color: rgba($color, .25);
+      }
+      ~ .custom-control-description {
+        color: $color;
+      }
+    }
+  }
+
+  // custom file
+  .custom-file-input {
+    .was-validated &:#{$state},
+    &.is-#{$state} {
+      ~ .custom-file-control {
+        border-color: $color;
+
+        &::before { border-color: inherit; }
+      }
+      &:focus {
+        box-shadow: 0 0 0 .2rem rgba($color,.25);
+      }
+    }
   }
 }

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

@@ -17,8 +17,8 @@
 }
 
 @mixin gradient-directional($start-color: #555, $end-color: #333, $deg: 45deg) {
-  background-repeat: repeat-x;
   background-image: linear-gradient($deg, $start-color, $end-color);
+  background-repeat: repeat-x;
 }
 @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);

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

@@ -3,14 +3,14 @@
 // Used only by Bootstrap to generate the correct number of grid classes given
 // any value of `$grid-columns`.
 
-@mixin make-grid-columns($columns: $grid-columns, $gutters: $grid-gutter-widths, $breakpoints: $grid-breakpoints) {
+@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
   // Common properties for all breakpoints
   %grid-column {
     position: relative;
     width: 100%;
     min-height: 1px; // Prevent columns from collapsing when empty
-
-    @include make-gutters($gutters);
+    padding-right: ($gutter / 2);
+    padding-left:  ($gutter / 2);
   }
 
   @each $breakpoint in map-keys($breakpoints) {
@@ -22,7 +22,8 @@
         @extend %grid-column;
       }
     }
-    .col#{$infix} {
+    .col#{$infix},
+    .col#{$infix}-auto {
       @extend %grid-column;
     }
 
@@ -36,6 +37,7 @@
       .col#{$infix}-auto {
         flex: 0 0 auto;
         width: auto;
+        max-width: none; // Reset earlier grid tiers
       }
 
       @for $i from 1 through $columns {
@@ -44,20 +46,9 @@
         }
       }
 
-      @each $modifier in (pull, push) {
-        @for $i from 0 through $columns {
-          .#{$modifier}#{$infix}-#{$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 not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-xs-0
-          .offset#{$infix}-#{$i} {
-            @include make-col-modifier(offset, $i, $columns)
-          }
+      @for $i from 1 through $columns {
+        .order#{$infix}-#{$i} {
+          order: $i;
         }
       }
     }

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

@@ -2,18 +2,12 @@
 //
 // Generate semantic grid columns with these mixins.
 
-@mixin make-container($gutters: $grid-gutter-widths) {
-  position: relative;
-  margin-left: auto;
+@mixin make-container() {
   margin-right: auto;
-
-  @each $breakpoint in map-keys($gutters) {
-    @include media-breakpoint-up($breakpoint) {
-      $gutter: map-get($gutters, $breakpoint);
-      padding-right: ($gutter / 2);
-      padding-left:  ($gutter / 2);
-    }
-  }
+  margin-left: auto;
+  padding-right: ($grid-gutter-width / 2);
+  padding-left:  ($grid-gutter-width / 2);
+  width: 100%;
 }
 
 
@@ -21,80 +15,33 @@
 @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, $breakpoints) {
-      width: $container-max-width;
-      max-width: 100%;
+      max-width: $container-max-width;
     }
   }
 }
 
-@mixin make-gutters($gutters: $grid-gutter-widths) {
-  @each $breakpoint in map-keys($gutters) {
-    @include media-breakpoint-up($breakpoint) {
-      $gutter: map-get($gutters, $breakpoint);
-      padding-right: ($gutter / 2);
-      padding-left:  ($gutter / 2);
-    }
-  }
-}
-
-@mixin make-row($gutters: $grid-gutter-widths) {
+@mixin make-row() {
   display: flex;
   flex-wrap: wrap;
-
-  @each $breakpoint in map-keys($gutters) {
-    @include media-breakpoint-up($breakpoint) {
-      $gutter: map-get($gutters, $breakpoint);
-      margin-right: ($gutter / -2);
-      margin-left:  ($gutter / -2);
-    }
-  }
+  margin-right: ($grid-gutter-width / -2);
+  margin-left:  ($grid-gutter-width / -2);
 }
 
-@mixin make-col-ready($gutters: $grid-gutter-widths) {
+@mixin make-col-ready() {
   position: relative;
   // 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.
   width: 100%;
   min-height: 1px; // Prevent collapsing
-
-  @each $breakpoint in map-keys($gutters) {
-    @include media-breakpoint-up($breakpoint) {
-      $gutter: map-get($gutters, $breakpoint);
-      padding-right: ($gutter / 2);
-      padding-left:  ($gutter / 2);
-    }
-  }
+  padding-right: ($grid-gutter-width / 2);
+  padding-left:  ($grid-gutter-width / 2);
 }
 
 @mixin make-col($size, $columns: $grid-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) {
-  margin-left: percentage($size / $columns);
-}
-
-@mixin make-col-push($size, $columns: $grid-columns) {
-  left: if($size > 0, percentage($size / $columns), auto);
-}
-
-@mixin make-col-pull($size, $columns: $grid-columns) {
-  right: if($size > 0, percentage($size / $columns), auto);
-}
-
-@mixin make-col-modifier($type, $size, $columns) {
-  // Work around the lack of dynamic mixin @include support (https://github.com/sass/sass/issues/626)
-  @if $type == push {
-    @include make-col-push($size, $columns);
-  } @else if $type == pull {
-    @include make-col-pull($size, $columns);
-  } @else if $type == offset {
-    @include make-col-offset($size, $columns);
-  }
-}