bootstrap 4.0.0.alpha5 → 4.0.0.alpha6

data/assets/stylesheets/bootstrap/_close.scss

@@ -1,17 +1,17 @@
 .close {
   float: right;
-  font-size: ($font-size-base * 1.5);
+  font-size: $close-font-size;
   font-weight: $close-font-weight;
   line-height: 1;
   color: $close-color;
   text-shadow: $close-text-shadow;
-  opacity: .2;
+  opacity: .5;
 
   @include hover-focus {
     color: $close-color;
     text-decoration: none;
     cursor: pointer;
-    opacity: .5;
+    opacity: .75;
   }
 }
 

data/assets/stylesheets/bootstrap/_code.scss

@@ -13,6 +13,13 @@ code {
   color: $code-color;
   background-color: $code-bg;
   @include border-radius($border-radius);
+
+  // Streamline the style when inside anchors to avoid broken underline and more
+  a > & {
+    padding: 0;
+    color: inherit;
+    background-color: inherit;
+  }
 }
 
 // User input typically entered via keyboard

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

@@ -11,13 +11,11 @@
 
 .custom-control {
   position: relative;
-  display: inline-block;
+  display: inline-flex;
+  min-height: (1rem * $line-height-base);
   padding-left: $custom-control-gutter;
+  margin-right: $custom-control-spacer-x;
   cursor: pointer;
-
-  + .custom-control {
-    margin-left: $custom-control-spacer-x;
-  }
 }
 
 .custom-control-input {
@@ -61,7 +59,7 @@
 
 .custom-control-indicator {
   position: absolute;
-  top: .25rem;
+  top: (($line-height-base - $custom-control-indicator-size) / 2);
   left: 0;
   display: block;
   width: $custom-control-indicator-size;
@@ -116,9 +114,11 @@
 // set. Use these optional classes to tweak the layout.
 
 .custom-controls-stacked {
+  display: flex;
+  flex-direction: column;
+
   .custom-control {
-    float: left;
-    clear: left;
+    margin-bottom: $custom-control-spacer-y;
 
     + .custom-control {
       margin-left: 0;
@@ -132,19 +132,17 @@
 // Replaces the browser default select with a custom one, mostly pulled from
 // http://primercss.io.
 //
-// Includes IE9-specific hacks (noted by ` \9`).
 
 .custom-select {
   display: inline-block;
   max-width: 100%;
   $select-border-width: ($border-width * 2);
-  height: calc(#{$input-height} - #{$select-border-width});
+  height: calc(#{$input-height} + #{$select-border-width});
   padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x;
-  padding-right: $custom-select-padding-x \9;
+  line-height: $custom-select-line-height;
   color: $custom-select-color;
   vertical-align: middle;
   background: $custom-select-bg $custom-select-indicator no-repeat right $custom-select-padding-x center;
-  background-image: none \9;
   background-size: $custom-select-bg-size;
   border: $custom-select-border-width solid $custom-select-border-color;
   @include border-radius($custom-select-border-radius);
@@ -201,12 +199,14 @@
   display: inline-block;
   max-width: 100%;
   height: $custom-file-height;
+  margin-bottom: 0;
   cursor: pointer;
 }
 
 .custom-file-input {
   min-width: $custom-file-width;
   max-width: 100%;
+  height: $custom-file-height;
   margin: 0;
   filter: alpha(opacity = 0);
   opacity: 0;
@@ -226,6 +226,7 @@
   padding: $custom-file-padding-x $custom-file-padding-y;
   line-height: $custom-file-line-height;
   color: $custom-file-color;
+  pointer-events: none;
   user-select: none;
   background-color: $custom-file-bg;
   border: $custom-file-border-width solid $custom-file-border-color;

data/assets/stylesheets/bootstrap/_dropdown.scss

@@ -44,7 +44,7 @@
   min-width: $dropdown-min-width;
   padding: $dropdown-padding-y 0;
   margin: $dropdown-margin-top 0 0; // override default ul
-  font-size: $font-size-base;
+  font-size: $font-size-base; // Redeclare because nesting can cause inheritance issues
   color: $body-color;
   text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
   list-style: none;
@@ -68,7 +68,7 @@
   width: 100%; // For `<button>`s
   padding: 3px $dropdown-item-padding-x;
   clear: both;
-  font-weight: normal;
+  font-weight: $font-weight-normal;
   color: $dropdown-link-color;
   text-align: inherit; // For `<button>`s
   white-space: nowrap; // prevent links from randomly breaking onto new lines
@@ -81,37 +81,27 @@
     background-color: $dropdown-link-hover-bg;
   }
 
-  // Active state
-  &.active {
-    @include plain-hover-focus {
-      color: $dropdown-link-active-color;
-      text-decoration: none;
-      background-color: $dropdown-link-active-bg;
-      outline: 0;
-    }
+  &.active,
+  &:active {
+    color: $dropdown-link-active-color;
+    text-decoration: none;
+    background-color: $dropdown-link-active-bg;
   }
 
-  // Disabled state
-  //
-  // Gray out text and ensure the hover/focus state remains gray
-  &.disabled {
-    @include plain-hover-focus {
-      color: $dropdown-link-disabled-color;
-    }
-
-    // Nuke hover/focus effects
-    @include hover-focus {
-      text-decoration: none;
-      cursor: $cursor-disabled;
-      background-color: transparent;
-      background-image: none; // Remove CSS gradient
-      @include reset-filter();
+  &.disabled,
+  &:disabled {
+    color: $dropdown-link-disabled-color;
+    cursor: $cursor-disabled;
+    background-color: transparent;
+    // Remove CSS gradients if they're enabled
+    @if $enable-gradients {
+      background-image: none;
     }
   }
 }
 
 // Open state for the dropdown
-.open {
+.show {
   // Show the menu
   > .dropdown-menu {
     display: block;
@@ -160,17 +150,8 @@
 // Allow for dropdowns to go bottom up (aka, dropup-menu)
 //
 // Just add .dropup after the standard .dropdown class and you're set.
-// TODO: abstract this so that the navbar fixed styles are not placed here?
-
-.dropup,
-.navbar-fixed-bottom .dropdown {
-  // Reverse the caret
-  .caret {
-    content: "";
-    border-top: 0;
-    border-bottom: $caret-width solid;
-  }
 
+.dropup {
   // Different positioning for bottom up menu
   .dropdown-menu {
     top: auto;

data/assets/stylesheets/bootstrap/_forms.scss

@@ -29,7 +29,7 @@
   }
 
   @include box-shadow($input-box-shadow);
-  @include transition(border-color ease-in-out .15s, box-shadow ease-in-out .15s);
+  @include transition($input-transition);
 
   // Unstyle the caret on `<select>`s in IE10+.
   &::-ms-expand {
@@ -67,7 +67,7 @@
 select.form-control {
   &:not([size]):not([multiple]) {
     $select-border-width: ($border-width * 2);
-    height: calc(#{$input-height} - #{$select-border-width});
+    height: calc(#{$input-height} + #{$select-border-width});
   }
 
   &:focus::-ms-value {
@@ -95,20 +95,20 @@ select.form-control {
 // For use with horizontal and inline forms, when you need the label text to
 // align with the form controls.
 .col-form-label {
-  padding-top: $input-padding-y;
-  padding-bottom: $input-padding-y;
+  padding-top: calc(#{$input-padding-y} - #{$input-btn-border-width} * 2);
+  padding-bottom: calc(#{$input-padding-y} - #{$input-btn-border-width} * 2);
   margin-bottom: 0; // Override the `<label>` default
 }
 
 .col-form-label-lg {
-  padding-top: $input-padding-y-lg;
-  padding-bottom: $input-padding-y-lg;
+  padding-top: calc(#{$input-padding-y-lg} - #{$input-btn-border-width} * 2);
+  padding-bottom: calc(#{$input-padding-y-lg} - #{$input-btn-border-width} * 2);
   font-size: $font-size-lg;
 }
 
 .col-form-label-sm {
-  padding-top: $input-padding-y-sm;
-  padding-bottom: $input-padding-y-sm;
+  padding-top: calc(#{$input-padding-y-sm} - #{$input-btn-border-width} * 2);
+  padding-bottom: calc(#{$input-padding-y-sm} - #{$input-btn-border-width} * 2);
   font-size: $font-size-sm;
 }
 
@@ -135,9 +135,10 @@ select.form-control {
 .form-control-static {
   padding-top: $input-padding-y;
   padding-bottom: $input-padding-y;
+  margin-bottom: 0; // match inputs if this class comes on inputs with default margins
   line-height: $input-line-height;
   border: solid transparent;
-  border-width: 1px 0;
+  border-width: $input-btn-border-width 0;
 
   &.form-control-sm,
   &.form-control-lg {
@@ -191,7 +192,7 @@ select.form-control-lg {
 
 .form-text {
   display: block;
-  margin-top: ($spacer * .25);
+  margin-top: $form-text-margin-top;
 }
 
 
@@ -202,12 +203,7 @@ select.form-control-lg {
 .form-check {
   position: relative;
   display: block;
-  margin-bottom: ($spacer * .75);
-
-  // Move up sibling radios or checkboxes for tighter spacing
-  + .form-check {
-    margin-top: -.25rem;
-  }
+  margin-bottom: $form-check-margin-bottom;
 
   &.disabled {
     .form-check-label {
@@ -218,15 +214,15 @@ select.form-control-lg {
 }
 
 .form-check-label {
-  padding-left: 1.25rem;
+  padding-left: $form-check-input-gutter;
   margin-bottom: 0; // Override default `<label>` bottom margin
   cursor: pointer;
 }
 
 .form-check-input {
   position: absolute;
-  margin-top: .25rem;
-  margin-left: -1.25rem;
+  margin-top: $form-check-input-margin-y;
+  margin-left: -$form-check-input-gutter;
 
   &:only-child {
     position: static;
@@ -235,20 +231,14 @@ select.form-control-lg {
 
 // Radios and checkboxes on same line
 .form-check-inline {
-  position: relative;
   display: inline-block;
-  padding-left: 1.25rem;
-  margin-bottom: 0; // Override default `<label>` bottom margin
-  vertical-align: middle;
-  cursor: pointer;
 
-  + .form-check-inline {
-    margin-left: .75rem;
+  .form-check-label {
+    vertical-align: middle;
   }
 
-  &.disabled {
-    color: $text-muted;
-    cursor: $cursor-disabled;
+  + .form-check-inline {
+    margin-left: $form-check-inline-margin-x;
   }
 }
 
@@ -258,7 +248,7 @@ select.form-control-lg {
 // Apply contextual and semantic states to individual form controls.
 
 .form-control-feedback {
-  margin-top: ($spacer * .25);
+  margin-top: $form-feedback-margin-top;
 }
 
 .form-control-success,
@@ -306,14 +296,33 @@ select.form-control-lg {
 // default HTML form controls and our custom form controls (e.g., input groups).
 
 .form-inline {
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center; // Prevent shorter elements from growing to same height as others (e.g., small buttons growing to normal sized button height)
+
+  // Because we use flex, the initial sizing of checkboxes is collapsed and
+  // doesn't occupy the full-width (which is what we want for xs grid tier),
+  // so we force that here.
+  .form-check {
+    width: 100%;
+  }
 
   // Kick in the inline
   @include media-breakpoint-up(sm) {
+    label {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 0;
+    }
+
     // Inline-block all the things for "inline"
     .form-group {
-      display: inline-block;
+      display: flex;
+      flex: 0 0 auto;
+      flex-flow: row wrap;
+      align-items: center;
       margin-bottom: 0;
-      vertical-align: middle;
     }
 
     // Allow folks to *not* use `.form-group`
@@ -329,20 +338,7 @@ select.form-control-lg {
     }
 
     .input-group {
-      display: inline-table;
       width: auto;
-      vertical-align: middle;
-
-      .input-group-addon,
-      .input-group-btn,
-      .form-control {
-        width: auto;
-      }
-    }
-
-    // Input groups need that 100% width though
-    .input-group > .form-control {
-      width: 100%;
     }
 
     .form-control-label {
@@ -353,19 +349,37 @@ select.form-control-lg {
     // Remove default margin on radios/checkboxes that were used for stacking, and
     // then undo the floating of radios and checkboxes to match.
     .form-check {
-      display: inline-block;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: auto;
       margin-top: 0;
       margin-bottom: 0;
-      vertical-align: middle;
     }
     .form-check-label {
       padding-left: 0;
     }
     .form-check-input {
       position: relative;
+      margin-top: 0;
+      margin-right: $form-check-input-margin-x;
       margin-left: 0;
     }
 
+    // Custom form controls
+    .custom-control {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding-left: 0;
+    }
+    .custom-control-indicator {
+      position: static;
+      display: inline-block;
+      margin-right: $form-check-input-margin-x; // Flexbox alignment means we lose our HTML space here, so we compensate.
+      vertical-align: text-bottom;
+    }
+
     // Re-override the feedback icon.
     .has-feedback .form-control-feedback {
       top: 0;

data/assets/stylesheets/bootstrap/_grid.scss

@@ -28,6 +28,19 @@
   .row {
     @include make-row();
   }
+
+  // Remove the negative margin from default .row, then the horizontal padding
+  // from all immediate children columns (to prevent runaway style inheritance).
+  .no-gutters {
+    margin-right: 0;
+    margin-left: 0;
+
+    > .col,
+    > [class*="col-"] {
+      padding-right: 0;
+      padding-left: 0;
+    }
+  }
 }
 
 // Columns