bootstrap 4.0.0 → 4.1.0

data/assets/stylesheets/bootstrap/_carousel.scss

@@ -1,4 +1,13 @@
-// Wrapper for the slide container and indicators
+// Notes on the classes:
+//
+// 1. The .carousel-item-left and .carousel-item-right is used to indicate where
+//    the active slide is heading.
+// 2. .active.carousel-item is the current slide.
+// 3. .active.carousel-item-left and .active.carousel-item-right is the current
+//    slide in its in-transition state. Only one of these occurs at a time.
+// 4. .carousel-item-next.carousel-item-left and .carousel-item-prev.carousel-item-right
+//    is the upcoming slide in transition.
+
 .carousel {
   position: relative;
 }
@@ -31,7 +40,6 @@
   top: 0;
 }
 
-// CSS3 transforms when supported by the browser
 .carousel-item-next.carousel-item-left,
 .carousel-item-prev.carousel-item-right {
   transform: translateX(0);
@@ -60,6 +68,42 @@
 }
 
 
+//
+// Alternate transitions
+//
+
+.carousel-fade {
+  .carousel-item {
+    opacity: 0;
+    transition-duration: .6s;
+    transition-property: opacity;
+  }
+
+  .carousel-item.active,
+  .carousel-item-next.carousel-item-left,
+  .carousel-item-prev.carousel-item-right {
+    opacity: 1;
+  }
+
+  .active.carousel-item-left,
+  .active.carousel-item-right {
+    opacity: 0;
+  }
+
+  .carousel-item-next,
+  .carousel-item-prev,
+  .carousel-item.active,
+  .active.carousel-item-left,
+  .active.carousel-item-prev {
+    transform: translateX(0);
+
+    @supports (transform-style: preserve-3d) {
+      transform: translate3d(0, 0, 0);
+    }
+  }
+}
+
+
 //
 // Left/right controls for nav
 //
@@ -91,13 +135,13 @@
 .carousel-control-prev {
   left: 0;
   @if $enable-gradients {
-    background: linear-gradient(90deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .001));
+    background: linear-gradient(90deg, rgba($black, .25), rgba($black, .001));
   }
 }
 .carousel-control-next {
   right: 0;
   @if $enable-gradients {
-    background: linear-gradient(270deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .001));
+    background: linear-gradient(270deg, rgba($black, .25), rgba($black, .001));
   }
 }
 

data/assets/stylesheets/bootstrap/_custom-forms.scss

@@ -157,7 +157,7 @@
 // Select
 //
 // Replaces the browser default select with a custom one, mostly pulled from
-// http://primercss.io.
+// https://primer.github.io/.
 //
 
 .custom-select {
@@ -247,11 +247,11 @@
   margin: 0;
   opacity: 0;
 
-  &:focus ~ .custom-file-control {
+  &:focus ~ .custom-file-label {
     border-color: $custom-file-focus-border-color;
     box-shadow: $custom-file-focus-box-shadow;
 
-    &::before {
+    &::after {
       border-color: $custom-file-focus-border-color;
     }
   }
@@ -295,3 +295,126 @@
     @include border-radius(0 $custom-file-border-radius $custom-file-border-radius 0);
   }
 }
+
+// Range
+//
+// Style range inputs the same across browsers. Vendor-specific rules for psuedo
+// elements cannot be mixed. As such, there are no shared styles for focus or
+// active states on prefixed selectors.
+
+.custom-range {
+  width: 100%;
+  padding-left: 0; // Firefox specific
+  background-color: transparent;
+  appearance: none;
+
+  &:focus {
+    outline: none;
+  }
+
+  &::-moz-focus-outer {
+    border: 0;
+  }
+
+  &::-webkit-slider-thumb {
+    width: $custom-range-thumb-width;
+    height: $custom-range-thumb-height;
+    margin-top: -($custom-range-thumb-width * .25); // Webkit specific?
+    @include gradient-bg($custom-range-thumb-bg);
+    border: $custom-range-thumb-border;
+    @include border-radius($custom-range-thumb-border-radius);
+    @include box-shadow($custom-range-thumb-box-shadow);
+    appearance: none;
+
+    &:focus {
+      outline: none;
+      box-shadow: $custom-range-thumb-focus-box-shadow; // No mixin for focus accessibility
+    }
+
+    &:active {
+      @include gradient-bg($custom-range-thumb-active-bg);
+    }
+  }
+
+  &::-webkit-slider-runnable-track {
+    width: $custom-range-track-width;
+    height: $custom-range-track-height;
+    color: transparent; // Why?
+    cursor: $custom-range-track-cursor;
+    background-color: $custom-range-track-bg;
+    border-color: transparent;
+    @include border-radius($custom-range-track-border-radius);
+    @include box-shadow($custom-range-track-box-shadow);
+  }
+
+  &::-moz-range-thumb {
+    width: $custom-range-thumb-width;
+    height: $custom-range-thumb-height;
+    @include gradient-bg($custom-range-thumb-bg);
+    border: $custom-range-thumb-border;
+    @include border-radius($custom-range-thumb-border-radius);
+    @include box-shadow($custom-range-thumb-box-shadow);
+    appearance: none;
+
+    &:focus {
+      outline: none;
+      box-shadow: $custom-range-thumb-focus-box-shadow; // No mixin for focus accessibility
+    }
+
+    &:active {
+      @include gradient-bg($custom-range-thumb-active-bg);
+    }
+  }
+
+  &::-moz-range-track {
+    width: $custom-range-track-width;
+    height: $custom-range-track-height;
+    color: transparent;
+    cursor: $custom-range-track-cursor;
+    background-color: $custom-range-track-bg;
+    border-color: transparent; // Firefox specific?
+    @include border-radius($custom-range-track-border-radius);
+    @include box-shadow($custom-range-track-box-shadow);
+  }
+
+  &::-ms-thumb {
+    width: $custom-range-thumb-width;
+    height: $custom-range-thumb-height;
+    @include gradient-bg($custom-range-thumb-bg);
+    border: $custom-range-thumb-border;
+    @include border-radius($custom-range-thumb-border-radius);
+    @include box-shadow($custom-range-thumb-box-shadow);
+    appearance: none;
+
+    &:focus {
+      outline: none;
+      box-shadow: $custom-range-thumb-focus-box-shadow; // No mixin for focus accessibility
+    }
+
+    &:active {
+      @include gradient-bg($custom-range-thumb-active-bg);
+    }
+  }
+
+  &::-ms-track {
+    width: $custom-range-track-width;
+    height: $custom-range-track-height;
+    color: transparent;
+    cursor: $custom-range-track-cursor;
+    background-color: transparent;
+    border-color: transparent;
+    border-width: ($custom-range-thumb-height * .5);
+    @include box-shadow($custom-range-track-box-shadow);
+  }
+
+  &::-ms-fill-lower {
+    background-color: $custom-range-track-bg;
+    @include border-radius($custom-range-track-border-radius);
+  }
+
+  &::-ms-fill-upper {
+    margin-right: 15px; // arbitrary?
+    background-color: $custom-range-track-bg;
+    @include border-radius($custom-range-track-border-radius);
+  }
+}

data/assets/stylesheets/bootstrap/_dropdown.scss

@@ -1,6 +1,8 @@
 // The dropdown wrapper (`<div>`)
 .dropup,
-.dropdown {
+.dropright,
+.dropdown,
+.dropleft {
   position: relative;
 }
 
@@ -31,10 +33,17 @@
   @include box-shadow($dropdown-box-shadow);
 }
 
+.dropdown-menu-right {
+  right: 0;
+  left: auto;
+}
+
 // Allow for dropdowns to go bottom up (aka, dropup-menu)
 // Just add .dropup after the standard .dropdown class and you're set.
 .dropup {
   .dropdown-menu {
+    top: auto;
+    bottom: 100%;
     margin-top: 0;
     margin-bottom: $dropdown-spacer;
   }
@@ -46,6 +55,9 @@
 
 .dropright {
   .dropdown-menu {
+    top: 0;
+    right: auto;
+    left: 100%;
     margin-top: 0;
     margin-left: $dropdown-spacer;
   }
@@ -60,6 +72,9 @@
 
 .dropleft {
   .dropdown-menu {
+    top: 0;
+    right: 100%;
+    left: auto;
     margin-top: 0;
     margin-right: $dropdown-spacer;
   }
@@ -72,6 +87,19 @@
   }
 }
 
+// When enabled Popper.js, reset basic dropdown position
+// stylelint-disable no-duplicate-selectors
+.dropdown-menu {
+  &[x-placement^="top"],
+  &[x-placement^="right"],
+  &[x-placement^="bottom"],
+  &[x-placement^="left"] {
+    right: auto;
+    bottom: auto;
+  }
+}
+// stylelint-enable no-duplicate-selectors
+
 // Dividers (basically an `<hr>`) within the dropdown
 .dropdown-divider {
   @include nav-divider($dropdown-divider-bg);
@@ -129,3 +157,10 @@
   color: $dropdown-header-color;
   white-space: nowrap; // as with > li > a
 }
+
+// Dropdown text
+.dropdown-item-text {
+  display: block;
+  padding: $dropdown-item-padding-y $dropdown-item-padding-x;
+  color: $dropdown-link-color;
+}

data/assets/stylesheets/bootstrap/_forms.scss

@@ -121,6 +121,7 @@ select.form-control {
   padding-bottom: $input-padding-y;
   margin-bottom: 0; // match inputs if this class comes on inputs with default margins
   line-height: $input-line-height;
+  color: $input-plaintext-color;
   background-color: transparent;
   border: solid transparent;
   border-width: $input-border-width 0;
@@ -302,7 +303,8 @@ select.form-control-lg {
       display: inline-block;
     }
 
-    .input-group {
+    .input-group,
+    .custom-select {
       width: auto;
     }
 

data/assets/stylesheets/bootstrap/_functions.scss

@@ -79,7 +79,7 @@
 // Request a theme color level
 @function theme-color-level($color-name: "primary", $level: 0) {
   $color: theme-color($color-name);
-  $color-base: if($level > 0, #000, #fff);
+  $color-base: if($level > 0, $black, $white);
   $level: abs($level);
 
   @return mix($color-base, $color, $level * $theme-color-interval);

data/assets/stylesheets/bootstrap/_input-group.scss

@@ -46,9 +46,9 @@
     align-items: center;
 
     &:not(:last-child) .custom-file-label,
-    &:not(:last-child) .custom-file-label::before { @include border-right-radius(0); }
+    &:not(:last-child) .custom-file-label::after { @include border-right-radius(0); }
     &:not(:first-child) .custom-file-label,
-    &:not(:first-child) .custom-file-label::before { @include border-left-radius(0); }
+    &:not(:first-child) .custom-file-label::after { @include border-left-radius(0); }
   }
 }
 

data/assets/stylesheets/bootstrap/_mixins.scss

@@ -36,7 +36,6 @@
 
 // // Layout
 @import "mixins/clearfix";
-// @import "mixins/navbar-align";
 @import "mixins/grid-framework";
 @import "mixins/grid";
 @import "mixins/float";

data/assets/stylesheets/bootstrap/_modal.scss

@@ -67,7 +67,7 @@
   background-color: $modal-content-bg;
   background-clip: padding-box;
   border: $modal-content-border-width solid $modal-content-border-color;
-  @include border-radius($border-radius-lg);
+  @include border-radius($modal-content-border-radius);
   @include box-shadow($modal-content-box-shadow-xs);
   // Remove focus outline from opened modal
   outline: 0;
@@ -96,7 +96,7 @@
   justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends
   padding: $modal-header-padding;
   border-bottom: $modal-header-border-width solid $modal-header-border-color;
-  @include border-top-radius($border-radius-lg);
+  @include border-top-radius($modal-content-border-radius);
 
   .close {
     padding: $modal-header-padding;

data/assets/stylesheets/bootstrap/_navbar.scss

@@ -162,11 +162,6 @@
             position: absolute;
           }
 
-          .dropdown-menu-right {
-            right: 0;
-            left: auto; // Reset the default from `.dropdown-menu`
-          }
-
           .nav-link {
             padding-right: $navbar-nav-link-padding-x;
             padding-left: $navbar-nav-link-padding-x;
@@ -189,13 +184,6 @@
         .navbar-toggler {
           display: none;
         }
-
-        .dropup {
-          .dropdown-menu {
-            top: auto;
-            bottom: 100%;
-          }
-        }
       }
     }
   }

data/assets/stylesheets/bootstrap/_pagination.scss

@@ -15,6 +15,7 @@
   border: $pagination-border-width solid $pagination-border-color;
 
   &:hover {
+    z-index: 2;
     color: $pagination-hover-color;
     text-decoration: none;
     background-color: $pagination-hover-bg;
@@ -23,7 +24,7 @@
 
   &:focus {
     z-index: 2;
-    outline: 0;
+    outline: $pagination-focus-outline;
     box-shadow: $pagination-focus-box-shadow;
   }
 

data/assets/stylesheets/bootstrap/_print.scss

@@ -5,7 +5,7 @@
 // ==========================================================================
 // Print styles.
 // Inlined to avoid the additional HTTP request:
-// http://www.phpied.com/delay-loading-your-print-css/
+// https://www.phpied.com/delay-loading-your-print-css/
 // ==========================================================================
 
 @if $enable-print-styles {
@@ -14,7 +14,7 @@
     *::before,
     *::after {
       // Bootstrap specific; comment out `color` and `background`
-      //color: #000 !important; // Black prints faster: http://www.sanbeiji.com/archives/953
+      //color: $black !important; // Black prints faster
       text-shadow: none !important;
       //background: transparent !important;
       box-shadow: none !important;
@@ -51,7 +51,7 @@
     }
     pre,
     blockquote {
-      border: $border-width solid #999;   // Bootstrap custom code; using `$border-width` instead of 1px
+      border: $border-width solid $gray-500;   // Bootstrap custom code; using `$border-width` instead of 1px
       page-break-inside: avoid;
     }
 
@@ -101,7 +101,7 @@
       display: none;
     }
     .badge {
-      border: $border-width solid #000;
+      border: $border-width solid $black;
     }
 
     .table {
@@ -109,13 +109,13 @@
 
       td,
       th {
-        background-color: #fff !important;
+        background-color: $white !important;
       }
     }
     .table-bordered {
       th,
       td {
-        border: 1px solid #ddd !important;
+        border: 1px solid $gray-300 !important;
       }
     }