bootstrap 4.0.0.alpha5 → 4.0.0.alpha6

data/assets/stylesheets/bootstrap/_images.scss

@@ -16,7 +16,7 @@
   background-color: $thumbnail-bg;
   border: $thumbnail-border-width solid $thumbnail-border-color;
   @include border-radius($thumbnail-border-radius);
-  transition: all .2s ease-in-out;
+  @include transition($thumbnail-transition);
   @include box-shadow($thumbnail-box-shadow);
 
   // Keep them at most 100% wide
@@ -39,5 +39,5 @@
 
 .figure-caption {
   font-size: $figure-caption-font-size;
-  color: $gray-light;
+  color: $figure-caption-color;
 }

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

@@ -4,45 +4,34 @@
 
 .input-group {
   position: relative;
+  display: flex;
   width: 100%;
 
-  @if $enable-flex {
-    display: flex;
-  } @else {
-    display: table;
-    // Prevent input groups from inheriting border styles from table cells when
-    // placed within a table.
-    border-collapse: separate;
-  }
-
   .form-control {
     // Ensure that the input is always above the *appended* addon button for
     // proper border colors.
     position: relative;
     z-index: 2;
+    flex: 1 1 auto;
+    // Add width 1% and flex-basis auto to ensure that button will not wrap out
+    // the column. Applies to IE Edge+ and Firefox. Chrome does not require this.
+    width: 1%;
+    margin-bottom: 0;
+
     // Bring the "active" form control to the front
     @include hover-focus-active {
       z-index: 3;
     }
-    @if $enable-flex {
-      flex: 1;
-    } @else {
-      // IE9 fubars the placeholder attribute in text inputs and the arrows on
-      // select elements in input groups. To fix it, we float the input. Details:
-      // https://github.com/twbs/bootstrap/issues/11561#issuecomment-28936855
-      float: left;
-      width: 100%;
-    }
-    margin-bottom: 0;
   }
 }
 
 .input-group-addon,
 .input-group-btn,
 .input-group .form-control {
-  @if not $enable-flex {
-    display: table-cell;
-  }
+  // Vertically centers the content of the addons within the input group
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 
   &:not(:first-child):not(:last-child) {
     @include border-radius(0);
@@ -51,9 +40,6 @@
 
 .input-group-addon,
 .input-group-btn {
-  @if not $enable-flex {
-    width: 1%;
-  }
   white-space: nowrap;
   vertical-align: middle; // Match the inputs
 }
@@ -83,8 +69,8 @@
 .input-group-addon {
   padding: $input-padding-y $input-padding-x;
   margin-bottom: 0; // Allow use of <label> elements by overriding our default margin-bottom
-  font-size: $font-size-base;
-  font-weight: normal;
+  font-size: $font-size-base; // Match inputs
+  font-weight: $font-weight-normal;
   line-height: $input-line-height;
   color: $input-color;
   text-align: center;
@@ -158,9 +144,13 @@
   // element above the siblings.
   > .btn {
     position: relative;
+    // Vertically stretch the button and center its content
+    flex: 1;
+
     + .btn {
       margin-left: (-$input-btn-border-width);
     }
+
     // Bring the "active" button to the front
     @include hover-focus-active {
       z-index: 3;

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

@@ -3,19 +3,52 @@
 // Easily usable on <ul>, <ol>, or <div>.
 
 .list-group {
+  display: flex;
+  flex-direction: column;
+
   // No need to set list-style: none; since .list-group-item is block level
   padding-left: 0; // reset padding because ul and ol
   margin-bottom: 0;
 }
 
 
+// Interactive list items
+//
+// Use anchor or button elements instead of `li`s or `div`s to create interactive
+// list items. Includes an extra `.active` modifier class for selected items.
+
+.list-group-item-action {
+  width: 100%; // For `<button>`s (anchors become 100% by default though)
+  color: $list-group-link-color;
+  text-align: inherit; // For `<button>`s (anchors inherit)
+
+  .list-group-item-heading {
+    color: $list-group-link-heading-color;
+  }
+
+  // Hover state
+  @include hover-focus {
+    color: $list-group-link-hover-color;
+    text-decoration: none;
+    background-color: $list-group-hover-bg;
+  }
+
+  &:active {
+    color: $list-group-link-active-color;
+    background-color: $list-group-link-active-bg;
+  }
+}
+
+
 // Individual list items
 //
 // Use on `li`s or `div`s within the `.list-group` parent.
 
 .list-group-item {
   position: relative;
-  display: block;
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
   padding: $list-group-item-padding-y $list-group-item-padding-x;
   // Place the border on the list items and negative margin up for better styling
   margin-bottom: -$list-group-border-width;
@@ -31,71 +64,68 @@
     @include border-bottom-radius($list-group-border-radius);
   }
 
-  &.disabled {
-    @include plain-hover-focus {
-      color: $list-group-disabled-color;
-      cursor: $cursor-disabled;
-      background-color: $list-group-disabled-bg;
-
-      // Force color to inherit for custom content
-      .list-group-item-heading {
-        color: inherit;
-      }
-      .list-group-item-text {
-        color: $list-group-disabled-text-color;
-      }
+  @include hover-focus {
+    text-decoration: none;
+  }
+
+  &.disabled,
+  &:disabled {
+    color: $list-group-disabled-color;
+    cursor: $cursor-disabled;
+    background-color: $list-group-disabled-bg;
+
+    // Force color to inherit for custom content
+    .list-group-item-heading {
+      color: inherit;
+    }
+    .list-group-item-text {
+      color: $list-group-disabled-text-color;
     }
   }
 
+  // Include both here for `<a>`s and `<button>`s
   &.active {
-    @include plain-hover-focus {
-      z-index: 2; // Place active items above their siblings for proper border styling
-      color: $list-group-active-color;
-      text-decoration: none; // Repeat here because it inherits global a:hover otherwise
-      background-color: $list-group-active-bg;
-      border-color: $list-group-active-border;
-
-      // Force color to inherit for custom content
-      .list-group-item-heading,
-      .list-group-item-heading > small,
-      .list-group-item-heading > .small {
-        color: inherit;
-      }
-      .list-group-item-text {
-        color: $list-group-active-text-color;
-      }
+    z-index: 2; // Place active items above their siblings for proper border styling
+    color: $list-group-active-color;
+    background-color: $list-group-active-bg;
+    border-color: $list-group-active-border;
+
+    // Force color to inherit for custom content
+    .list-group-item-heading,
+    .list-group-item-heading > small,
+    .list-group-item-heading > .small {
+      color: inherit;
+    }
+
+    .list-group-item-text {
+      color: $list-group-active-text-color;
     }
   }
 }
 
+
+// Flush list items
+//
+// Remove borders and border-radius to keep list group items edge-to-edge. Most
+// useful within other components (e.g., cards).
+
 .list-group-flush {
   .list-group-item {
     border-right: 0;
     border-left: 0;
     border-radius: 0;
   }
-}
-
 
-// Interactive list items
-//
-// Use anchor or button elements instead of `li`s or `div`s to create interactive
-// list items. Includes an extra `.active` modifier class for selected items.
-
-.list-group-item-action {
-  width: 100%; // For `<button>`s (anchors become 100% by default though)
-  color: $list-group-link-color;
-  text-align: inherit; // For `<button>`s (anchors inherit)
-
-  .list-group-item-heading {
-    color: $list-group-link-heading-color;
+  &:first-child {
+    .list-group-item:first-child {
+      border-top: 0;
+    }
   }
 
-  // Hover state
-  @include hover-focus {
-    color: $list-group-link-hover-color;
-    text-decoration: none;
-    background-color: $list-group-hover-bg;
+  &:last-child {
+    .list-group-item:last-child {
+      border-bottom: 0;
+    }
   }
 }
 
@@ -109,17 +139,3 @@
 @include list-group-item-variant(info, $state-info-bg, $state-info-text);
 @include list-group-item-variant(warning, $state-warning-bg, $state-warning-text);
 @include list-group-item-variant(danger, $state-danger-bg, $state-danger-text);
-
-
-// Custom content options
-//
-// Extra classes for creating well-formatted content within `.list-group-item`s.
-
-.list-group-item-heading {
-  margin-top: 0;
-  margin-bottom: $list-group-item-heading-margin-bottom;
-}
-.list-group-item-text {
-  margin-bottom: 0;
-  line-height: 1.3;
-}

data/assets/stylesheets/bootstrap/_media.scss

@@ -1,81 +1,8 @@
-@if $enable-flex {
-  .media {
-    display: flex;
-  }
-  .media-body {
-    flex: 1;
-  }
-  .media-middle {
-    align-self: center;
-  }
-  .media-bottom {
-    align-self: flex-end;
-  }
-} @else {
-  .media,
-  .media-body {
-    overflow: hidden;
-  }
-  .media-body {
-    width: 10000px;
-  }
-  .media-left,
-  .media-right,
-  .media-body {
-    display: table-cell;
-    vertical-align: top;
-  }
-  .media-middle {
-    vertical-align: middle;
-  }
-  .media-bottom {
-    vertical-align: bottom;
-  }
+.media {
+  display: flex;
+  align-items: flex-start;
 }
 
-
-//
-// Images/elements as the media anchor
-//
-
-.media-object {
-  display: block;
-
-  // Fix collapse in webkit from max-width: 100% and display: table-cell.
-  &.img-thumbnail {
-    max-width: none;
-  }
-}
-
-
-//
-// Alignment
-//
-
-.media-right {
-  padding-left: $media-alignment-padding-x;
-}
-
-.media-left {
-  padding-right: $media-alignment-padding-x;
-}
-
-
-//
-// Headings
-//
-
-.media-heading {
-  margin-top: 0;
-  margin-bottom: $media-heading-margin-bottom;
-}
-
-
-//
-// Media list variation
-//
-
-.media-list {
-  padding-left: 0;
-  list-style: none;
+.media-body {
+  flex: 1;
 }

data/assets/stylesheets/bootstrap/_mixins.scss

@@ -10,7 +10,11 @@
 
 @mixin transition($transition...) {
   @if $enable-transitions {
-    transition: $transition;
+    @if length($transition) == 0 {
+      transition: $transition-base;
+    } @else {
+      transition: $transition;
+    }
   }
 }
 
@@ -18,16 +22,16 @@
 @import "mixins/breakpoints";
 @import "mixins/hover";
 @import "mixins/image";
-@import "mixins/tag";
-@import "mixins/reset-filter";
+@import "mixins/badge";
 @import "mixins/resize";
 @import "mixins/screen-reader";
 @import "mixins/size";
-@import "mixins/tab-focus";
 @import "mixins/reset-text";
 @import "mixins/text-emphasis";
 @import "mixins/text-hide";
 @import "mixins/text-truncate";
+@import "mixins/transforms";
+@import "mixins/visibility";
 
 // // Components
 @import "mixins/alert";
@@ -38,7 +42,6 @@
 @import "mixins/list-group";
 @import "mixins/nav-divider";
 @import "mixins/forms";
-@import "mixins/progress";
 @import "mixins/table-row";
 
 // // Skins

data/assets/stylesheets/bootstrap/_modal.scss

@@ -28,10 +28,10 @@
 
   // When fading in the modal, animate it to slide down
   &.fade .modal-dialog {
-    transition: transform .3s ease-out;
+    @include transition($modal-transition);
     transform: translate(0, -25%);
   }
-  &.in .modal-dialog { transform: translate(0, 0); }
+  &.show .modal-dialog { transform: translate(0, 0); }
 }
 .modal-open .modal {
   overflow-x: hidden;
@@ -48,6 +48,8 @@
 // Actual modal
 .modal-content {
   position: relative;
+  display: flex;
+  flex-direction: column;
   background-color: $modal-content-bg;
   background-clip: padding-box;
   border: $modal-content-border-width solid $modal-content-border-color;
@@ -64,29 +66,27 @@
   right: 0;
   bottom: 0;
   left: 0;
-  z-index: $zindex-modal-bg;
+  z-index: $zindex-modal-backdrop;
   background-color: $modal-backdrop-bg;
 
   // Fade for backdrop
   &.fade { opacity: 0; }
-  &.in { opacity: $modal-backdrop-opacity; }
+  &.show { opacity: $modal-backdrop-opacity; }
 }
 
 // Modal header
 // Top section of the modal w/ title and dismiss
 .modal-header {
-  padding: $modal-title-padding;
+  display: flex;
+  align-items: center; // vertically center it
+  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 clearfix;
-}
-// Close icon
-.modal-header .close {
-  margin-top: -2px;
 }
 
 // Title text within header
 .modal-title {
-  margin: 0;
+  margin-bottom: 0;
   line-height: $modal-title-line-height;
 }
 
@@ -94,15 +94,23 @@
 // Where all modal content resides (sibling of .modal-header and .modal-footer)
 .modal-body {
   position: relative;
+  // Enable `flex-grow: 1` so that the body take up as much space as possible
+  // when should there be a fixed height on `.modal-dialog`.
+  flex: 1 1 auto;
   padding: $modal-inner-padding;
 }
 
 // Footer (for actions)
 .modal-footer {
+  display: flex;
+  align-items: center; // vertically center
+  justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
   padding: $modal-inner-padding;
-  text-align: right; // right align buttons
   border-top: $modal-footer-border-width solid $modal-footer-border-color;
-  @include clearfix(); // clear it in case folks use .pull-* classes on buttons
+
+  // Easily place margin between footer elements
+  > :not(:first-child) { margin-left: .25rem; }
+  > :not(:last-child) { margin-right: .25rem; }
 }
 
 // Measure scrollbar width for padding body during modal show/hide