bootstrap 4.0.0.beta → 4.0.0.beta2

data/assets/stylesheets/bootstrap/_grid.scss

@@ -16,7 +16,6 @@
 
 @if $enable-grid-classes {
   .container-fluid {
-    width: 100%;
     @include make-container();
   }
 }

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

@@ -1,3 +1,5 @@
+// stylelint-disable selector-no-qualifying-type
+
 //
 // Base styles
 //
@@ -5,6 +7,7 @@
 .input-group {
   position: relative;
   display: flex;
+  align-items: stretch;
   width: 100%;
 
   .form-control {
@@ -28,10 +31,8 @@
 .input-group-addon,
 .input-group-btn,
 .input-group .form-control {
-  // Vertically centers the content of the addons within the input group
   display: flex;
   align-items: center;
-
   &:not(:first-child):not(:last-child) {
     @include border-radius(0);
   }
@@ -40,7 +41,6 @@
 .input-group-addon,
 .input-group-btn {
   white-space: nowrap;
-  vertical-align: middle; // Match the inputs
 }
 
 
@@ -71,7 +71,7 @@
   font-size: $font-size-base; // Match inputs
   font-weight: $font-weight-normal;
   line-height: $input-btn-line-height;
-  color: $input-color;
+  color: $input-group-addon-color;
   text-align: center;
   background-color: $input-group-addon-bg;
   border: $input-btn-border-width solid $input-group-addon-border-color;
@@ -90,13 +90,11 @@
     @include border-radius($input-border-radius-lg);
   }
 
-  // scss-lint:disable QualifyingElement
   // Nuke default margins from checkboxes and radios to vertically center within.
   input[type="radio"],
   input[type="checkbox"] {
     margin-top: 0;
   }
-  // scss-lint:enable QualifyingElement
 }
 
 
@@ -135,6 +133,7 @@
 
 .input-group-btn {
   position: relative;
+  align-items: stretch;
   // Jankily prevent input button groups from wrapping with `white-space` and
   // `font-size` in combination with `inline-block` on buttons.
   font-size: 0;
@@ -155,6 +154,10 @@
     }
   }
 
+  &:first-child > .btn + .btn {
+    margin-left: 0;
+  }
+
   // Negative margin to only have a single, shared border between the two
   &:not(:last-child) {
     > .btn,
@@ -166,7 +169,14 @@
     > .btn,
     > .btn-group {
       z-index: 2;
-      margin-left: (-$input-btn-border-width);
+      // remove nagative margin ($input-btn-border-width) to solve overlapping issue with button.
+      margin-left: 0;
+
+      // When input is first, overlap the right side of it with the button(-group)
+      &:first-child {
+        margin-left: (-$input-btn-border-width);
+      }
+
       // Because specificity
       @include hover-focus-active {
         z-index: 3;

data/assets/stylesheets/bootstrap/_mixins.scss

@@ -19,6 +19,7 @@
 // // Components
 @import "mixins/alert";
 @import "mixins/buttons";
+@import "mixins/caret";
 @import "mixins/pagination";
 @import "mixins/lists";
 @import "mixins/list-group";

data/assets/stylesheets/bootstrap/_modal.scss

@@ -43,6 +43,8 @@
   position: relative;
   width: auto;
   margin: $modal-dialog-margin;
+  // allow clicks to pass through for custom click handling to close modal
+  pointer-events: none;
 }
 
 // Actual modal
@@ -50,6 +52,8 @@
   position: relative;
   display: flex;
   flex-direction: column;
+  // counteract the pointer-events: none; in the .modal-dialog
+  pointer-events: auto;
   background-color: $modal-content-bg;
   background-clip: padding-box;
   border: $modal-content-border-width solid $modal-content-border-color;
@@ -78,10 +82,17 @@
 // Top section of the modal w/ title and dismiss
 .modal-header {
   display: flex;
-  align-items: center; // vertically center it
+  align-items: flex-start; // so the close btn always stays on the upper right corner
   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);
+
+  .close {
+    padding: $modal-header-padding;
+    // auto on the left force icon to the right even when there is no .modal-title
+    margin: (-$modal-header-padding) (-$modal-header-padding) (-$modal-header-padding) auto;
+  }
 }
 
 // Title text within header

data/assets/stylesheets/bootstrap/_nav.scss

@@ -74,12 +74,12 @@
 .nav-pills {
   .nav-link {
     @include border-radius($nav-pills-border-radius);
+  }
 
-    &.active,
-    .show > & {
-      color: $nav-pills-link-active-color;
-      background-color: $nav-pills-link-active-bg;
-    }
+  .nav-link.active,
+  .show > .nav-link {
+    color: $nav-pills-link-active-color;
+    background-color: $nav-pills-link-active-bg;
   }
 }
 

data/assets/stylesheets/bootstrap/_navbar.scss

@@ -98,6 +98,7 @@
 // on the `.navbar` parent.
 .navbar-collapse {
   flex-basis: 100%;
+  flex-grow: 1;
   // For always expanded or extra full navbars, ensure content aligns itself
   // properly vertically. Can be easily overridden with flex utilities.
   align-items: center;
@@ -146,8 +147,7 @@
       }
 
       @include media-breakpoint-up($next) {
-        flex-direction: row;
-        flex-wrap: nowrap;
+        flex-flow: row nowrap;
         justify-content: flex-start;
 
         .navbar-nav {
@@ -174,15 +174,23 @@
           flex-wrap: nowrap;
         }
 
-        // scss-lint:disable ImportantRule
         .navbar-collapse {
-          display: flex !important;
+          display: flex !important;  // stylelint-disable-line declaration-no-important
+
+          // Changes flex-bases to auto because of an IE10 bug
+          flex-basis: auto;
         }
-        // scss-lint:enable ImportantRule
 
         .navbar-toggler {
           display: none;
         }
+
+        .dropup {
+          .dropdown-menu {
+            top: auto;
+            bottom: 100%;
+          }
+        }
       }
     }
   }
@@ -235,6 +243,13 @@
 
   .navbar-text {
     color: $navbar-light-color;
+    a {
+      color: $navbar-light-active-color;
+
+      @include hover-focus {
+        color: $navbar-light-active-color;
+      }
+    }
   }
 }
 
@@ -280,5 +295,12 @@
 
   .navbar-text {
     color: $navbar-dark-color;
+    a {
+      color: $navbar-dark-active-color;
+
+      @include hover-focus {
+        color: $navbar-dark-active-color;
+      }
+    }
   }
 }

data/assets/stylesheets/bootstrap/_pagination.scss

@@ -1,8 +1,6 @@
 .pagination {
   display: flex;
-  // 1-2: Disable browser default list styles
-  padding-left: 0; // 1
-  list-style: none; // 2
+  @include list-unstyled();
   @include border-radius();
 }
 
@@ -38,7 +36,7 @@
   position: relative;
   display: block;
   padding: $pagination-padding-y $pagination-padding-x;
-  margin-left: -1px;
+  margin-left: -$pagination-border-width;
   line-height: $pagination-line-height;
   color: $pagination-color;
   background-color: $pagination-bg;

data/assets/stylesheets/bootstrap/_popover.scss

@@ -5,7 +5,6 @@
   z-index: $zindex-popover;
   display: block;
   max-width: $popover-max-width;
-  padding: $popover-inner-padding;
   // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
   // So reset our font and text properties to avoid inheriting weird values.
   @include reset-text();
@@ -39,11 +38,11 @@
 
   .arrow::before {
     content: "";
-    border-width: $popover-arrow-outer-width;
+    border-width: $popover-arrow-width;
   }
   .arrow::after {
     content: "";
-    border-width: $popover-arrow-outer-width;
+    border-width: $popover-arrow-width;
   }
 
   // Popover directions
@@ -61,14 +60,14 @@
     }
 
     .arrow::before {
-      bottom: -$popover-arrow-outer-width;
-      margin-left: -($popover-arrow-outer-width - 5);
+      bottom: -$popover-arrow-width;
+      margin-left: -$popover-arrow-width;
       border-top-color: $popover-arrow-outer-color;
     }
 
     .arrow::after {
-      bottom: -($popover-arrow-outer-width - 1);
-      margin-left: -($popover-arrow-outer-width - 5);
+      bottom: calc((#{$popover-arrow-width} - #{$popover-border-width}) * -1);
+      margin-left: -$popover-arrow-width;
       border-top-color: $popover-arrow-color;
     }
   }
@@ -82,17 +81,17 @@
 
     .arrow::before,
     .arrow::after {
-      margin-top: -($popover-arrow-outer-width - 3);
+      margin-top: -$popover-arrow-width;
       border-left-width: 0;
     }
 
     .arrow::before {
-      left: -$popover-arrow-outer-width;
+      left: -$popover-arrow-width;
       border-right-color: $popover-arrow-outer-color;
     }
 
     .arrow::after {
-      left: -($popover-arrow-outer-width - 1);
+      left: calc((#{$popover-arrow-width} - #{$popover-border-width}) * -1);
       border-right-color: $popover-arrow-color;
     }
   }
@@ -106,17 +105,17 @@
 
     .arrow::before,
     .arrow::after {
-      margin-left: -($popover-arrow-width - 3);
+      margin-left: -$popover-arrow-width;
       border-top-width: 0;
     }
 
     .arrow::before {
-      top: -$popover-arrow-outer-width;
+      top: -$popover-arrow-width;
       border-bottom-color: $popover-arrow-outer-color;
     }
 
     .arrow::after {
-      top: -($popover-arrow-outer-width - 1);
+      top: calc((#{$popover-arrow-width} - #{$popover-border-width}) * -1);
       border-bottom-color: $popover-arrow-color;
     }
 
@@ -129,7 +128,7 @@
       width: 20px;
       margin-left: -10px;
       content: "";
-      border-bottom: 1px solid $popover-header-bg;
+      border-bottom: $popover-border-width solid $popover-header-bg;
     }
   }
 
@@ -142,17 +141,17 @@
 
     .arrow::before,
     .arrow::after {
-      margin-top: -($popover-arrow-outer-width - 3);
+      margin-top: -$popover-arrow-width;
       border-right-width: 0;
     }
 
     .arrow::before {
-      right: -$popover-arrow-outer-width;
+      right: -$popover-arrow-width;
       border-left-color: $popover-arrow-outer-color;
     }
 
     .arrow::after {
-      right: -($popover-arrow-outer-width - 1);
+      right: calc((#{$popover-arrow-width} - #{$popover-border-width}) * -1);
       border-left-color: $popover-arrow-color;
     }
   }

data/assets/stylesheets/bootstrap/_print.scss

@@ -1,4 +1,4 @@
-// scss-lint:disable QualifyingElement
+// stylelint-disable declaration-no-important, selector-no-qualifying-type
 
 // Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css
 
@@ -14,8 +14,7 @@
     *::before,
     *::after {
       // Bootstrap specific; comment out `color` and `background`
-      //color: #000 !important; // Black prints faster:
-                                //   http://www.sanbeiji.com/archives/953
+      //color: #000 !important; // Black prints faster: http://www.sanbeiji.com/archives/953
       text-shadow: none !important;
       //background: transparent !important;
       box-shadow: none !important;

data/assets/stylesheets/bootstrap/_progress.scss

@@ -5,21 +5,19 @@
 
 .progress {
   display: flex;
+  height: $progress-height;
   overflow: hidden; // force rounded corners by cropping it
   font-size: $progress-font-size;
-  line-height: $progress-height;
-  text-align: center;
   background-color: $progress-bg;
   @include border-radius($progress-border-radius);
-  @include box-shadow($progress-box-shadow);
 }
 
 .progress-bar {
-  height: $progress-height;
-  line-height: $progress-height;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   color: $progress-bar-color;
   background-color: $progress-bar-bg;
-  @include transition($progress-bar-transition);
 }
 
 .progress-bar-striped {

data/assets/stylesheets/bootstrap/_reboot.scss

@@ -1,4 +1,4 @@
-// scss-lint:disable QualifyingElement, DuplicateProperty, VendorPrefix
+// stylelint-disable at-rule-no-vendor-prefix, declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
 
 // Reboot
 //
@@ -18,8 +18,13 @@
 //    we force a non-overlapping, non-auto-hiding scrollbar to counteract.
 // 6. Change the default tap highlight to be completely transparent in iOS.
 
-html {
+*,
+*::before,
+*::after {
   box-sizing: border-box; // 1
+}
+
+html {
   font-family: sans-serif; // 2
   line-height: 1.15; // 3
   -webkit-text-size-adjust: 100%; // 4
@@ -28,26 +33,26 @@ html {
   -webkit-tap-highlight-color: rgba(0,0,0,0); // 6
 }
 
-*,
-*::before,
-*::after {
-  box-sizing: inherit; // 1
-}
-
 // IE10+ doesn't honor `<meta name="viewport">` in some cases.
 @at-root {
-  @-ms-viewport { width: device-width; }
+  @-ms-viewport {
+    width: device-width;
+  }
 }
 
+// stylelint-disable selector-list-comma-newline-after
 // Shim for "new" HTML5 structural elements to display correctly (IE10, older browsers)
 article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section {
   display: block;
 }
+// stylelint-enable selector-list-comma-newline-after
 
 // Body
 //
 // 1. Remove the margin in all browsers.
 // 2. As a best practice, apply a default `background-color`.
+// 3. Set an explicit initial text-align value so that we can later use the
+//    the `inherit` value on things like `<th>` elements.
 
 body {
   margin: 0; // 1
@@ -56,6 +61,7 @@ body {
   font-weight: $font-weight-base;
   line-height: $line-height-base;
   color: $body-color;
+  text-align: left; // 3
   background-color: $body-bg; // 2
 }
 
@@ -89,10 +95,12 @@ hr {
 //
 // By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top
 // margin for easier control within type scales as it avoids margin collapsing.
+// stylelint-disable selector-list-comma-newline-after
 h1, h2, h3, h4, h5, h6 {
   margin-top: 0;
-  margin-bottom: .5rem;
+  margin-bottom: $headings-margin-bottom;
 }
+// stylelint-enable selector-list-comma-newline-after
 
 // Reset margins on paragraphs
 //
@@ -100,7 +108,7 @@ h1, h2, h3, h4, h5, h6 {
 // bottom margin to use `rem` units instead of `em`.
 p {
   margin-top: 0;
-  margin-bottom: 1rem;
+  margin-bottom: $paragraph-margin-bottom;
 }
 
 // Abbreviations
@@ -155,10 +163,12 @@ dfn {
   font-style: italic; // Add the correct font style in Android 4.3-
 }
 
+// stylelint-disable font-weight-notation
 b,
 strong {
   font-weight: bolder; // Add the correct font weight in Chrome, Edge, and Safari
 }
+// stylelint-enable font-weight-notation
 
 small {
   font-size: 80%; // Add the correct font size in all browsers
@@ -222,6 +232,7 @@ a:not([href]):not([tabindex]) {
 // Code
 //
 
+// stylelint-disable font-family-no-duplicate-names
 pre,
 code,
 kbd,
@@ -229,6 +240,7 @@ samp {
   font-family: monospace, monospace; // Correct the inheritance and scaling of font size in all browsers.
   font-size: 1em; // Correct the odd `em` font sizing in all browsers.
 }
+// stylelint-enable font-family-no-duplicate-names
 
 pre {
   // Remove browser default top margin
@@ -237,6 +249,9 @@ pre {
   margin-bottom: 1rem;
   // Don't allow content to break outside
   overflow: auto;
+  // We have @viewport set which causes scrollbars to overlap content in IE11 and Edge, so
+  // we force a non-overlapping, non-auto-hiding scrollbar to counteract.
+  -ms-overflow-style: scrollbar;
 }
 
 
@@ -270,15 +285,15 @@ svg:not(:root) {
 // DON'T remove the click delay when `<meta name="viewport" content="width=device-width">` is present.
 // However, they DO support removing the click delay via `touch-action: manipulation`.
 // See:
-// * https://v4-alpha.getbootstrap.com/content/reboot/#click-delay-optimization-for-touch
-// * http://caniuse.com/#feat=css-touch-action
+// * https://getbootstrap.com/docs/4.0/content/reboot/#click-delay-optimization-for-touch
+// * https://caniuse.com/#feat=css-touch-action
 // * https://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay
 
 a,
 area,
 button,
 [role="button"],
-input,
+input:not([type="range"]),
 label,
 select,
 summary,
@@ -304,8 +319,9 @@ caption {
 }
 
 th {
-  // Matches default `<td>` alignment
-  text-align: left;
+  // Matches default `<td>` alignment by inheriting from the `<body>`, or the
+  // closest parent with a set `text-align`.
+  text-align: inherit;
 }
 
 
@@ -319,6 +335,13 @@ label {
   margin-bottom: .5rem;
 }
 
+// Remove the default `border-radius` that macOS Chrome adds.
+//
+// Details at https://github.com/twbs/bootstrap/issues/24093
+button {
+  border-radius: 0;
+}
+
 // Work around a Firefox/IE bug where the transparent `button` background
 // results in a loss of the default `button` focus styles.
 //