bootstrap 4.0.0.alpha5 → 4.0.0.alpha6

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

@@ -4,28 +4,26 @@
 .btn-group,
 .btn-group-vertical {
   position: relative;
-  display: inline-block;
+  display: inline-flex;
   vertical-align: middle; // match .btn alignment given font-size hack above
 
   > .btn {
     position: relative;
-    float: left;
-    margin-bottom: 0;
+    flex: 0 1 auto;
 
-    // Bring the "active" button to the front
+    // Bring the hover, focused, and "active" buttons to the fron to overlay
+    // the borders properly
+    @include hover {
+      z-index: 2;
+    }
     &:focus,
     &:active,
     &.active {
       z-index: 2;
     }
-    @include hover {
-      z-index: 2;
-    }
   }
-}
 
-// Prevent double borders when buttons are next to each other
-.btn-group {
+  // Prevent double borders when buttons are next to each other
   .btn + .btn,
   .btn + .btn-group,
   .btn-group + .btn,
@@ -36,18 +34,11 @@
 
 // Optional: Group multiple button groups together for a toolbar
 .btn-toolbar {
-  margin-left: -$btn-toolbar-margin; // Offset the first child's margin
-  @include clearfix();
+  display: flex;
+  justify-content: flex-start;
 
-  .btn-group,
   .input-group {
-    float: left;
-  }
-
-  > .btn,
-  > .btn-group,
-  > .input-group {
-    margin-left: $btn-toolbar-margin;
+    width: auto;
   }
 }
 
@@ -137,43 +128,19 @@
 }
 
 
-// Reposition the caret
-.btn .caret {
-  margin-left: 0;
-}
-// Carets in other button sizes
-.btn-lg .caret {
-  border-width: $caret-width-lg $caret-width-lg 0;
-  border-bottom-width: 0;
-}
-// Upside down carets for .dropup
-.dropup .btn-lg .caret {
-  border-width: 0 $caret-width-lg $caret-width-lg;
-}
-
-
-
 //
 // Vertical button groups
 //
 
 .btn-group-vertical {
-  > .btn,
-  > .btn-group,
-  > .btn-group > .btn {
-    display: block;
-    float: none;
-    width: 100%;
-    max-width: 100%;
-  }
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
 
-  // Clear floats so dropdown menus can be properly placed
-  > .btn-group {
-    @include clearfix();
-
-    > .btn {
-      float: none;
-    }
+  .btn,
+  .btn-group {
+    width: 100%;
   }
 
   > .btn + .btn,

data/assets/stylesheets/bootstrap/_buttons.scss

@@ -11,41 +11,34 @@
   text-align: center;
   white-space: nowrap;
   vertical-align: middle;
-  cursor: pointer;
   user-select: none;
   border: $input-btn-border-width solid transparent;
   @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-border-radius);
-  @include transition(all .2s ease-in-out);
-
-  &,
-  &:active,
-  &.active {
-    &:focus,
-    &.focus {
-      @include tab-focus();
-    }
-  }
+  @include transition($btn-transition);
 
+  // Share hover and focus styles
   @include hover-focus {
     text-decoration: none;
   }
+  &:focus,
   &.focus {
-    text-decoration: none;
-  }
-
-  &:active,
-  &.active {
-    background-image: none;
     outline: 0;
-    @include box-shadow($btn-active-box-shadow);
+    box-shadow: $btn-focus-box-shadow;
   }
 
+  // Disabled comes first so active can properly restyle
   &.disabled,
   &:disabled {
     cursor: $cursor-disabled;
     opacity: .65;
     @include box-shadow(none);
   }
+
+  &:active,
+  &.active {
+    background-image: none;
+    @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
+  }
 }
 
 // Future-proof disabling of clicks on `<a>` elements
@@ -105,7 +98,7 @@ fieldset[disabled] a.btn {
 
 // Make a button look and behave like a link
 .btn-link {
-  font-weight: normal;
+  font-weight: $font-weight-normal;
   color: $link-color;
   border-radius: 0;
 
@@ -130,8 +123,9 @@ fieldset[disabled] a.btn {
     background-color: transparent;
   }
   &:disabled {
+    color: $btn-link-disabled-color;
+
     @include hover-focus {
-      color: $btn-link-disabled-color;
       text-decoration: none;
     }
   }

data/assets/stylesheets/bootstrap/_card.scss

@@ -4,16 +4,17 @@
 
 .card {
   position: relative;
-  display: block;
-  margin-bottom: $card-spacer-y;
+  display: flex;
+  flex-direction: column;
   background-color: $card-bg;
-  // border: $card-border-width solid $card-border-color;
-  @include border-radius($card-border-radius);
   border: $card-border-width solid $card-border-color;
+  @include border-radius($card-border-radius);
 }
 
 .card-block {
-  @include clearfix;
+  // Enable `flex-grow: 1` for decks and groups so that card blocks take up
+  // as much space as possible, ensuring footers are aligned to the bottom.
+  flex: 1 1 auto;
   padding: $card-spacer-x;
 }
 
@@ -30,14 +31,6 @@
   margin-bottom: 0;
 }
 
-// .card-actions {
-//   padding: $card-spacer-y $card-spacer-x;
-
-//   .card-link + .card-link {
-//     margin-left: $card-spacer-x;
-//   }
-// }
-
 .card-link {
   @include hover {
     text-decoration: none;
@@ -68,7 +61,6 @@
 //
 
 .card-header {
-  @include clearfix;
   padding: $card-spacer-y $card-spacer-x;
   margin-bottom: 0; // Removes the default margin-bottom of <hN>
   background-color: $card-cap-bg;
@@ -80,7 +72,6 @@
 }
 
 .card-footer {
-  @include clearfix;
   padding: $card-spacer-y $card-spacer-x;
   background-color: $card-cap-bg;
   border-top: $card-border-width solid $card-border-color;
@@ -191,77 +182,39 @@
 }
 
 
-// Card set
-//
-// Heads up! We do some funky style resetting here for margins across our two
-// variations (one flex, one table). Individual cards have margin-bottom by
-// default, but they're ignored due to table styles. For a consistent design,
-// we've done the same to the flex variation.
-//
-// Those changes are noted by `// Margin balancing`.
+// Card deck
 
-@if $enable-flex {
-  @include media-breakpoint-up(sm) {
-    .card-deck {
+@include media-breakpoint-up(sm) {
+  .card-deck {
+    display: flex;
+    flex-flow: row wrap;
+
+    .card {
       display: flex;
-      flex-flow: row wrap;
-      margin-right: -$card-deck-margin;
-      margin-bottom: $card-spacer-y; // Margin balancing
-      margin-left: -$card-deck-margin;
-
-      .card {
-        flex: 1 0 0;
-        margin-right: $card-deck-margin;
-        margin-bottom: 0; // Margin balancing
-        margin-left: $card-deck-margin;
-      }
-    }
-  }
-} @else {
-  @include media-breakpoint-up(sm) {
-    $space-between-cards: (2 * $card-deck-margin);
-    .card-deck {
-      display: table;
-      width: 100%;
-      margin-bottom: $card-spacer-y; // Margin balancing
-      table-layout: fixed;
-      border-spacing: $space-between-cards 0;
-
-      .card {
-        display: table-cell;
-        margin-bottom: 0; // Margin balancing
-        vertical-align: top;
-      }
-    }
-    .card-deck-wrapper {
-      margin-right: (-$space-between-cards);
-      margin-left: (-$space-between-cards);
+      flex: 1 0 0;
+      flex-direction: column;
+
+      // Selectively apply horizontal margins to cards to avoid doing the
+      // negative margin dance like our grid. This differs from the grid
+      // due to the use of margins as gutters instead of padding.
+      &:not(:first-child) { margin-left: $card-deck-margin; }
+      &:not(:last-child) { margin-right: $card-deck-margin; }
     }
   }
 }
 
+
 //
 // Card groups
 //
 
 @include media-breakpoint-up(sm) {
   .card-group {
-    @if $enable-flex {
-      display: flex;
-      flex-flow: row wrap;
-    } @else {
-      display: table;
-      width: 100%;
-      table-layout: fixed;
-    }
+    display: flex;
+    flex-flow: row wrap;
 
     .card {
-      @if $enable-flex {
-        flex: 1 0 0;
-      } @else {
-        display: table-cell;
-        vertical-align: top;
-      }
+      flex: 1 0 0;
 
       + .card {
         margin-left: 0;
@@ -306,17 +259,18 @@
 
 
 //
-// Card
+// Columns
 //
 
 @include media-breakpoint-up(sm) {
   .card-columns {
-    column-count: 3;
-    column-gap: $card-columns-sm-up-column-gap;
+    column-count: $card-columns-count;
+    column-gap: $card-columns-gap;
 
     .card {
       display: inline-block; // Don't let them vertically span multiple columns
-      width: 100%; // Don't let them exceed the column width
+      width: 100%; // Don't let their width change
+      margin-bottom: $card-columns-margin;
     }
   }
 }

data/assets/stylesheets/bootstrap/_carousel.scss

@@ -7,77 +7,47 @@
   position: relative;
   width: 100%;
   overflow: hidden;
+}
 
-  > .carousel-item {
-    position: relative;
-    display: none;
-    transition: .6s ease-in-out left;
-
-    // Account for jankitude on images
-    > img,
-    > a > img {
-      @extend .img-fluid;
-      line-height: 1;
-    }
+.carousel-item {
+  position: relative;
+  display: none;
+  width: 100%;
 
-    // WebKit CSS3 transforms for supported devices
-    @media all and (transform-3d), (-webkit-transform-3d) {
-      transition: transform .6s ease-in-out;
-      backface-visibility: hidden;
-      perspective: 1000px;
-
-      &.next,
-      &.active.right {
-        left: 0;
-        transform: translate3d(100%, 0, 0);
-      }
-      &.prev,
-      &.active.left {
-        left: 0;
-        transform: translate3d(-100%, 0, 0);
-      }
-      &.next.left,
-      &.prev.right,
-      &.active {
-        left: 0;
-        transform: translate3d(0, 0, 0);
-      }
-    }
+  @include if-supports-3d-transforms() {
+    @include transition($carousel-transition);
+    backface-visibility: hidden;
+    perspective: 1000px;
   }
+}
 
-  > .active,
-  > .next,
-  > .prev {
-    display: block;
-  }
+.carousel-item.active,
+.carousel-item-next,
+.carousel-item-prev {
+  display: flex;
+}
 
-  > .active {
-    left: 0;
-  }
+.carousel-item-next,
+.carousel-item-prev {
+  position: absolute;
+  top: 0;
+}
 
-  > .next,
-  > .prev {
-    position: absolute;
-    top: 0;
-    width: 100%;
+// CSS3 transforms when supported by the browser
+@include if-supports-3d-transforms() {
+  .carousel-item-next.carousel-item-left,
+  .carousel-item-prev.carousel-item-right {
+    transform: translate3d(0, 0, 0);
   }
 
-  > .next {
-    left: 100%;
-  }
-  > .prev {
-    left: -100%;
-  }
-  > .next.left,
-  > .prev.right {
-    left: 0;
+  .carousel-item-next,
+  .active.carousel-item-right {
+    transform: translate3d(100%, 0, 0);
   }
 
-  > .active.left {
-    left: -100%;
-  }
-  > .active.right {
-    left: 100%;
+  .carousel-item-prev,
+  .active.carousel-item-left {
+    transform: translate3d(-100%, 0, 0);
   }
 }
 
@@ -86,30 +56,22 @@
 // Left/right controls for nav
 //
 
-.carousel-control {
+.carousel-control-prev,
+.carousel-control-next {
   position: absolute;
   top: 0;
   bottom: 0;
-  left: 0;
+  // Use flex for alignment (1-3)
+  display: flex; // 1. allow flex styles
+  align-items: center; // 2. vertically center contents
+  justify-content: center; // 3. horizontally center contents
   width: $carousel-control-width;
-  font-size: $carousel-control-font-size;
   color: $carousel-control-color;
   text-align: center;
-  text-shadow: $carousel-text-shadow;
   opacity: $carousel-control-opacity;
-  // We can't have this transition here because WebKit cancels the carousel
+  // We can't have a transition here because WebKit cancels the carousel
   // animation if you trip this while in the middle of another animation.
 
-  // Set gradients for backgrounds
-  &.left {
-    @include gradient-x($start-color: rgba(0,0,0,.5), $end-color: rgba(0,0,0,.0001));
-  }
-  &.right {
-    right: 0;
-    left: auto;
-    @include gradient-x($start-color: rgba(0,0,0,.0001), $end-color: rgba(0,0,0,.5));
-  }
-
   // Hover/focus state
   @include hover-focus {
     color: $carousel-control-color;
@@ -117,79 +79,83 @@
     outline: 0;
     opacity: .9;
   }
+}
+.carousel-control-prev {
+  left: 0;
+}
+.carousel-control-next {
+  right: 0;
+}
 
-  // Toggles
-  .icon-prev,
-  .icon-next {
-    position: absolute;
-    top: 50%;
-    z-index: 5;
-    display: inline-block;
-    width: $carousel-icon-width;
-    height: $carousel-icon-width;
-    margin-top: -($carousel-icon-width / 2);
-    font-family: serif;
-    line-height: 1;
-  }
-  .icon-prev {
-    left: 50%;
-    margin-left: -($carousel-icon-width / 2);
-  }
-  .icon-next {
-    right: 50%;
-    margin-right: -($carousel-icon-width / 2);
-  }
-
-  .icon-prev {
-    &::before {
-      content: "\2039";// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039)
-    }
-  }
-  .icon-next {
-    &::before {
-      content: "\203a";// SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A)
-    }
-  }
+// Icons for within
+.carousel-control-prev-icon,
+.carousel-control-next-icon {
+  display: inline-block;
+  width: $carousel-control-icon-width;
+  height: $carousel-control-icon-width;
+  background: transparent no-repeat center center;
+  background-size: 100% 100%;
+}
+.carousel-control-prev-icon {
+  background-image: $carousel-control-prev-icon-bg;
+}
+.carousel-control-next-icon {
+  background-image: $carousel-control-next-icon-bg;
 }
 
 
 // Optional indicator pips
 //
-// Add an unordered list with the following class and add a list item for each
+// Add an ordered list with the following class and add a list item for each
 // slide your carousel holds.
 
 .carousel-indicators {
   position: absolute;
+  right: 0;
   bottom: 10px;
-  left: 50%;
+  left: 0;
   z-index: 15;
-  width: $carousel-indicators-width;
-  padding-left: 0;
-  margin-left: -($carousel-indicators-width / 2);
-  text-align: center;
+  display: flex;
+  justify-content: center;
+  padding-left: 0; // override <ol> default
+  // Use the .carousel-control's width as margin so we don't overlay those
+  margin-right: $carousel-control-width;
+  margin-left: $carousel-control-width;
   list-style: none;
 
   li {
-    display: inline-block;
-    width: $carousel-indicator-size;
-    height: $carousel-indicator-size;
-    margin: 1px;
+    position: relative;
+    flex: 1 0 auto;
+    max-width: $carousel-indicator-width;
+    height: $carousel-indicator-height;
+    margin-right: $carousel-indicator-spacer;
+    margin-left: $carousel-indicator-spacer;
     text-indent: -999px;
     cursor: pointer;
-    // IE9 hack for event handling
-    //
-    // Internet Explorer 9 does not properly handle clicks on elements with a `background-color` of `transparent`,
-    // so we use `rgba(0,0,0,0)` instead since it's a non-buggy equivalent.
-    // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Internet_Explorer
-    background-color: rgba(0,0,0,0); // IE9
-    border: 1px solid $carousel-indicator-border-color;
-    border-radius: $carousel-indicator-size;
+    background-color: rgba($carousel-indicator-active-bg, .5);
+
+    // Use pseudo classes to increase the hit area by 10px on top and bottom.
+    &::before {
+      position: absolute;
+      top: -10px;
+      left: 0;
+      display: inline-block;
+      width: 100%;
+      height: 10px;
+      content: "";
+    }
+    &::after {
+      position: absolute;
+      bottom: -10px;
+      left: 0;
+      display: inline-block;
+      width: 100%;
+      height: 10px;
+      content: "";
+    }
   }
 
   .active {
-    width: $carousel-indicator-active-size;
-    height: $carousel-indicator-active-size;
-    margin: 0;
     background-color: $carousel-indicator-active-bg;
   }
 }
@@ -197,7 +163,7 @@
 
 // Optional captions
 //
-// Hidden by default for smaller viewports.
+//
 
 .carousel-caption {
   position: absolute;
@@ -209,45 +175,4 @@
   padding-bottom: 20px;
   color: $carousel-caption-color;
   text-align: center;
-  text-shadow: $carousel-text-shadow;
-
-  .btn {
-    text-shadow: none; // No shadow for button elements in carousel-caption
-  }
-}
-
-
-//
-// Responsive variations
-//
-
-@include media-breakpoint-up(sm) {
-  // Scale up the controls a smidge
-  .carousel-control {
-    .icon-prev,
-    .icon-next {
-      width: $carousel-control-sm-up-size;
-      height: $carousel-control-sm-up-size;
-      margin-top: -($carousel-control-sm-up-size / 2);
-      font-size: $carousel-control-sm-up-size;
-    }
-    .icon-prev {
-      margin-left: -($carousel-control-sm-up-size / 2);
-    }
-    .icon-next {
-      margin-right: -($carousel-control-sm-up-size / 2);
-    }
-  }
-
-  // Show and left align the captions
-  .carousel-caption {
-    right: ((100% - $carousel-caption-sm-up-width) / 2);
-    left: ((100% - $carousel-caption-sm-up-width) / 2);
-    padding-bottom: 30px;
-  }
-
-  // Move up the indicators
-  .carousel-indicators {
-    bottom: 20px;
-  }
 }