jekyll-bootstrap 4.0.0.pre.beta.2.2 → 4.0.0

data/_sass/bootstrap-grid.scss

@@ -1,7 +1,7 @@
 /*!
- * Bootstrap Grid v4.0.0-beta.2 (https://getbootstrap.com)
- * Copyright 2011-2017 The Bootstrap Authors
- * Copyright 2011-2017 Twitter, Inc.
+ * Bootstrap Grid v4.0.0 (https://getbootstrap.com)
+ * Copyright 2011-2018 The Bootstrap Authors
+ * Copyright 2011-2018 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  */
 
@@ -23,13 +23,10 @@ html {
 @import "functions";
 @import "variables";
 
-//
-// Grid mixins
-//
-
 @import "mixins/breakpoints";
 @import "mixins/grid-framework";
 @import "mixins/grid";
 
 @import "grid";
+@import "utilities/display";
 @import "utilities/flex";

data/_sass/bootstrap-reboot.scss

@@ -1,7 +1,7 @@
 /*!
- * Bootstrap Reboot v4.0.0-beta.2 (https://getbootstrap.com)
- * Copyright 2011-2017 The Bootstrap Authors
- * Copyright 2011-2017 Twitter, Inc.
+ * Bootstrap Reboot v4.0.0 (https://getbootstrap.com)
+ * Copyright 2011-2018 The Bootstrap Authors
+ * Copyright 2011-2018 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
  */

data/_sass/bootstrap.scss

@@ -1,7 +1,7 @@
 /*!
- * Bootstrap v4.0.0-beta.2 (https://getbootstrap.com)
- * Copyright 2011-2017 The Bootstrap Authors
- * Copyright 2011-2017 Twitter, Inc.
+ * Bootstrap v4.0.0 (https://getbootstrap.com)
+ * Copyright 2011-2018 The Bootstrap Authors
+ * Copyright 2011-2018 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  */
 
@@ -9,7 +9,6 @@
 @import "variables";
 @import "mixins";
 @import "root";
-@import "print";
 @import "reboot";
 @import "type";
 @import "images";
@@ -40,3 +39,4 @@
 @import "popover";
 @import "carousel";
 @import "utilities";
+@import "print";

data/_sass/mixins/_background-variant.scss

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

data/_sass/mixins/_breakpoints.scss

@@ -29,13 +29,17 @@
 }
 
 // Maximum breakpoint width. Null for the largest (last) breakpoint.
-// The maximum value is calculated as the minimum of the next one less 0.1.
+// The maximum value is calculated as the minimum of the next one less 0.02px
+// to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths.
+// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max
+// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.
+// See https://bugs.webkit.org/show_bug.cgi?id=178261
 //
 //    >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
-//    767px
+//    767.98px
 @function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
   $next: breakpoint-next($name, $breakpoints);
-  @return if($next, breakpoint-min($next, $breakpoints) - 1px, null);
+  @return if($next, breakpoint-min($next, $breakpoints) - .02px, null);
 }
 
 // Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.
@@ -86,11 +90,11 @@
       @content;
     }
   } @else if $max == null {
-    @include media-breakpoint-up($lower) {
+    @include media-breakpoint-up($lower, $breakpoints) {
       @content;
     }
   } @else if $min == null {
-    @include media-breakpoint-down($upper) {
+    @include media-breakpoint-down($upper, $breakpoints) {
       @content;
     }
   }
@@ -108,11 +112,11 @@
       @content;
     }
   } @else if $max == null {
-    @include media-breakpoint-up($name) {
+    @include media-breakpoint-up($name, $breakpoints) {
       @content;
     }
   } @else if $min == null {
-    @include media-breakpoint-down($name) {
+    @include media-breakpoint-down($name, $breakpoints) {
       @content;
     }
   }

data/_sass/mixins/_buttons.scss

@@ -19,21 +19,22 @@
   &.focus {
     // Avoid using mixin so we can pass custom focus shadow properly
     @if $enable-shadows {
-      box-shadow: $btn-box-shadow, 0 0 0 $input-btn-focus-width rgba($border, .5);
+      box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5);
     } @else {
-      box-shadow: 0 0 0 $input-btn-focus-width rgba($border, .5);
+      box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);
     }
   }
 
   // Disabled comes first so active can properly restyle
   &.disabled,
   &:disabled {
+    color: color-yiq($background);
     background-color: $background;
     border-color: $border;
   }
 
-  &:not([disabled]):not(.disabled):active,
-  &:not([disabled]):not(.disabled).active,
+  &:not(:disabled):not(.disabled):active,
+  &:not(:disabled):not(.disabled).active,
   .show > &.dropdown-toggle {
     color: color-yiq($active-background);
     background-color: $active-background;
@@ -42,30 +43,32 @@
     }
     border-color: $active-border;
 
-    // Avoid using mixin so we can pass custom focus shadow properly
-    @if $enable-shadows {
-      box-shadow: $btn-active-box-shadow, 0 0 0 $input-btn-focus-width rgba($border, .5);
-    } @else {
-      box-shadow: 0 0 0 $input-btn-focus-width rgba($border, .5);
+    &:focus {
+      // Avoid using mixin so we can pass custom focus shadow properly
+      @if $enable-shadows {
+        box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5);
+      } @else {
+        box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);
+      }
     }
   }
 }
 
-@mixin button-outline-variant($color, $color-hover: #fff) {
+@mixin button-outline-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) {
   color: $color;
   background-color: transparent;
   background-image: none;
   border-color: $color;
 
-  @include hover {
+  &:hover {
     color: $color-hover;
-    background-color: $color;
-    border-color: $color;
+    background-color: $active-background;
+    border-color: $active-border;
   }
 
   &:focus,
   &.focus {
-    box-shadow: 0 0 0 $input-btn-focus-width rgba($color, .5);
+    box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
   }
 
   &.disabled,
@@ -74,14 +77,21 @@
     background-color: transparent;
   }
 
-  &:not([disabled]):not(.disabled):active,
-  &:not([disabled]):not(.disabled).active,
+  &:not(:disabled):not(.disabled):active,
+  &:not(:disabled):not(.disabled).active,
   .show > &.dropdown-toggle {
-    color: $color-hover;
-    background-color: $color;
-    border-color: $color;
-    // Avoid using mixin so we can pass custom focus shadow properly
-    box-shadow: 0 0 0 $input-btn-focus-width rgba($color, .5);
+    color: color-yiq($active-background);
+    background-color: $active-background;
+    border-color: $active-border;
+
+    &:focus {
+      // Avoid using mixin so we can pass custom focus shadow properly
+      @if $enable-shadows and $btn-active-box-shadow != none {
+        box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5);
+      } @else {
+        box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
+      }
+    }
   }
 }
 
@@ -90,5 +100,10 @@
   padding: $padding-y $padding-x;
   font-size: $font-size;
   line-height: $line-height;
-  @include border-radius($border-radius);
+  // Manually declare to provide an override to the browser default
+  @if $enable-rounded {
+    border-radius: $border-radius;
+  } @else {
+    border-radius: 0;
+  }
 }

data/_sass/mixins/_caret.scss

@@ -12,6 +12,18 @@
   border-left: $caret-width solid transparent;
 }
 
+@mixin caret-right {
+  border-top: $caret-width solid transparent;
+  border-bottom: $caret-width solid transparent;
+  border-left: $caret-width solid;
+}
+
+@mixin caret-left {
+  border-top: $caret-width solid transparent;
+  border-right: $caret-width solid;
+  border-bottom: $caret-width solid transparent;
+}
+
 @mixin caret($direction: down) {
   @if $enable-caret {
     &::after {
@@ -25,6 +37,24 @@
         @include caret-down;
       } @else if $direction == up {
         @include caret-up;
+      } @else if $direction == right {
+        @include caret-right;
+      }
+    }
+
+    @if $direction == left {
+      &::after {
+        display: none;
+      }
+
+      &::before {
+        display: inline-block;
+        width: 0;
+        height: 0;
+        margin-right: $caret-width * .85;
+        vertical-align: $caret-width * .85;
+        content: "";
+        @include caret-left;
       }
     }
 

data/_sass/mixins/_forms.scss

@@ -15,23 +15,23 @@
     color: $input-focus-color;
     background-color: $input-focus-bg;
     border-color: $input-focus-border-color;
-    outline: none;
+    outline: 0;
     // Avoid using mixin so we can pass custom focus shadow properly
     @if $enable-shadows {
-      box-shadow: $input-box-shadow, $input-btn-focus-box-shadow;
+      box-shadow: $input-box-shadow, $input-focus-box-shadow;
     } @else {
-      box-shadow: $input-btn-focus-box-shadow;
+      box-shadow: $input-focus-box-shadow;
     }
   }
 }
 
 
 @mixin form-validation-state($state, $color) {
-
   .#{$state}-feedback {
     display: none;
-    margin-top: .25rem;
-    font-size: .875rem;
+    width: 100%;
+    margin-top: $form-feedback-margin-top;
+    font-size: $form-feedback-font-size;
     color: $color;
   }
 
@@ -40,13 +40,13 @@
     top: 100%;
     z-index: 5;
     display: none;
-    width: 250px;
+    max-width: 100%; // Contain to parent when possible
     padding: .5rem;
     margin-top: .1rem;
     font-size: .875rem;
     line-height: 1;
     color: #fff;
-    background-color: rgba($color,.8);
+    background-color: rgba($color, .8);
     border-radius: .2rem;
   }
 
@@ -57,7 +57,8 @@
       border-color: $color;
 
       &:focus {
-        box-shadow: 0 0 0 .2rem rgba($color,.25);
+        border-color: $color;
+        box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
       }
 
       ~ .#{$state}-feedback,
@@ -67,26 +68,46 @@
     }
   }
 
-
-  // TODO: redo check markup lol crap
   .form-check-input {
     .was-validated &:#{$state},
     &.is-#{$state} {
-      + .form-check-label {
+      ~ .form-check-label {
         color: $color;
       }
+
+      ~ .#{$state}-feedback,
+      ~ .#{$state}-tooltip {
+        display: block;
+      }
     }
   }
 
-  // custom radios and checks
   .custom-control-input {
     .was-validated &:#{$state},
     &.is-#{$state} {
-      ~ .custom-control-indicator {
-        background-color: rgba($color, .25);
-      }
-      ~ .custom-control-description {
+      ~ .custom-control-label {
         color: $color;
+
+        &::before {
+          background-color: lighten($color, 25%);
+        }
+      }
+
+      ~ .#{$state}-feedback,
+      ~ .#{$state}-tooltip {
+        display: block;
+      }
+
+      &:checked {
+        ~ .custom-control-label::before {
+          @include gradient-bg(lighten($color, 10%));
+        }
+      }
+
+      &:focus {
+        ~ .custom-control-label::before {
+          box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-focus-width rgba($color, .25);
+        }
       }
     }
   }
@@ -95,13 +116,21 @@
   .custom-file-input {
     .was-validated &:#{$state},
     &.is-#{$state} {
-      ~ .custom-file-control {
+      ~ .custom-file-label {
         border-color: $color;
 
         &::before { border-color: inherit; }
       }
+
+      ~ .#{$state}-feedback,
+      ~ .#{$state}-tooltip {
+        display: block;
+      }
+
       &:focus {
-        box-shadow: 0 0 0 .2rem rgba($color,.25);
+        ~ .custom-file-label {
+          box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
+        }
       }
     }
   }

data/_sass/mixins/_grid-framework.scss

@@ -46,14 +46,12 @@
         }
       }
 
-      .order#{$infix}-first {
-        order: -1;
-      }
+      .order#{$infix}-first { order: -1; }
 
-      @for $i from 1 through $columns {
-        .order#{$infix}-#{$i} {
-          order: $i;
-        }
+      .order#{$infix}-last { order: $columns + 1; }
+
+      @for $i from 0 through $columns {
+        .order#{$infix}-#{$i} { order: $i; }
       }
 
       // `$columns - 1` because offsetting by the width of an entire row isn't possible

data/_sass/mixins/_hover.scss

@@ -1,61 +1,39 @@
 // stylelint-disable indentation
+
+// Hover mixin and `$enable-hover-media-query` are deprecated.
+//
+// Origally added during our alphas and maintained during betas, this mixin was
+// designed to prevent `:hover` stickiness on iOS—an issue where hover styles
+// would persist after initial touch.
+//
+// For backward compatibility, we've kept these mixins and updated them to
+// always return their regular psuedo-classes instead of a shimmed media query.
+//
+// Issue: https://github.com/twbs/bootstrap/issues/25195
+
 @mixin hover {
-  // TODO: re-enable along with mq4-hover-shim
-//  @if $enable-hover-media-query {
-//    // See Media Queries Level 4: https://drafts.csswg.org/mediaqueries/#hover
-//    // Currently shimmed by https://github.com/twbs/mq4-hover-shim
-//    @media (hover: hover) {
-//      &:hover { @content }
-//    }
-//  }
-//  @else {
-    &:hover { @content; }
-//  }
+  &:hover { @content; }
 }
 
-
 @mixin hover-focus {
-  @if $enable-hover-media-query {
-    &:focus {
-      @content;
-    }
-    @include hover { @content; }
-  } @else {
-    &:focus,
-    &:hover {
-      @content;
-    }
+  &:hover,
+  &:focus {
+    @content;
   }
 }
 
 @mixin plain-hover-focus {
-  @if $enable-hover-media-query {
-    &,
-    &:focus {
-      @content;
-    }
-    @include hover { @content; }
-  } @else {
-    &,
-    &:focus,
-    &:hover {
-      @content;
-    }
+  &,
+  &:hover,
+  &:focus {
+    @content;
   }
 }
 
 @mixin hover-focus-active {
-  @if $enable-hover-media-query {
-    &:focus,
-    &:active {
-      @content;
-    }
-    @include hover { @content; }
-  } @else {
-    &:focus,
-    &:active,
-    &:hover {
-      @content;
-    }
+  &:hover,
+  &:focus,
+  &:active {
+    @content;
   }
 }