bootstrap 4.0.0.alpha3 → 4.0.0.alpha3.1

data/assets/stylesheets/_bootstrap.scss

@@ -1,10 +1,12 @@
 /*!
- * Bootstrap v4.0.0-alpha.2 (http://getbootstrap.com)
- * Copyright 2011-2015 Twitter, Inc.
+ * Bootstrap v4.0.0-alpha.3 (http://getbootstrap.com)
+ * Copyright 2011-2016 The Bootstrap Authors
+ * Copyright 2011-2016 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  */
 
 // Core variables and mixins
+@import "bootstrap/custom";
 @import "bootstrap/variables";
 @import "bootstrap/mixins";
 
@@ -33,8 +35,7 @@
 @import "bootstrap/card";
 @import "bootstrap/breadcrumb";
 @import "bootstrap/pagination";
-@import "bootstrap/pager";
-@import "bootstrap/labels";
+@import "bootstrap/tags";
 @import "bootstrap/jumbotron";
 @import "bootstrap/alert";
 @import "bootstrap/progress";
@@ -51,6 +52,3 @@
 
 // Utility classes
 @import "bootstrap/utilities";
-@import "bootstrap/utilities-background";
-@import "bootstrap/utilities-spacing";
-@import "bootstrap/utilities-responsive";

data/assets/stylesheets/bootstrap/_alert.scss

@@ -7,15 +7,6 @@
   margin-bottom: $spacer-y;
   border: $alert-border-width solid transparent;
   @include border-radius($alert-border-radius);
-
-  // Improve alignment and spacing of inner content
-  > p,
-  > ul {
-    margin-bottom: 0;
-  }
-  > p + p {
-    margin-top: 5px;
-  }
 }
 
 // Headings for larger alerts
@@ -35,7 +26,7 @@
 // Expand the right padding and account for the close button's positioning.
 
 .alert-dismissible {
-  padding-right: ($alert-padding + 20);
+  padding-right: ($alert-padding + 20px);
 
   // Adjust close link position
   .close {

data/assets/stylesheets/bootstrap/_breadcrumb.scss

@@ -1,23 +1,38 @@
 .breadcrumb {
-  padding: $breadcrumb-padding-vertical $breadcrumb-padding-horizontal;
+  padding: $breadcrumb-padding-y $breadcrumb-padding-x;
   margin-bottom: $spacer-y;
   list-style: none;
   background-color: $breadcrumb-bg;
   @include border-radius($border-radius);
   @include clearfix;
+}
+
+.breadcrumb-item {
+  float: left;
 
-  > li {
-    float: left;
+  // The separator between breadcrumbs (by default, a forward-slash: "/")
+  + .breadcrumb-item::before {
+    display: inline-block; // Suppress underlining of the separator in modern browsers
+    padding-right: $breadcrumb-item-padding;
+    padding-left: $breadcrumb-item-padding;
+    color: $breadcrumb-divider-color;
+    content: "#{$breadcrumb-divider}";
+  }
 
-    + li::before {
-      padding-right: .5rem;
-      padding-left: .5rem;
-      color: $breadcrumb-divider-color;
-      content: "#{$breadcrumb-divider}";
-    }
+  // IE9-11 hack to properly handle hyperlink underlines for breadcrumbs built
+  // without `<ul>`s. The `::before` pseudo-element generates an element
+  // *within* the .breadcrumb-item and thereby inherits the `text-decoration`.
+  //
+  // To trick IE into suppressing the underline, we give the pseudo-element an
+  // underline and then immediately remove it.
+  + .breadcrumb-item:hover::before {
+    text-decoration: underline;
+  }
+  + .breadcrumb-item:hover::before {
+    text-decoration: none;
   }
 
-  > .active {
+  &.active {
     color: $breadcrumb-active-color;
   }
 }

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

@@ -1,3 +1,5 @@
+// scss-lint:disable QualifyingElement
+
 // Make the div behave like a button
 .btn-group,
 .btn-group-vertical {
@@ -33,7 +35,7 @@
 
 // Optional: Group multiple button groups together for a toolbar
 .btn-toolbar {
-  margin-left: -5px; // Offset the first child's margin
+  margin-left: -$btn-toolbar-margin; // Offset the first child's margin
   @include clearfix();
 
   .btn-group,
@@ -44,7 +46,7 @@
   > .btn,
   > .btn-group,
   > .input-group {
-    margin-left: 5px;
+    margin-left: $btn-toolbar-margin;
   }
 }
 
@@ -102,20 +104,30 @@
 // Split button dropdowns
 //
 
-// Give the line between buttons some depth
-.btn-group > .btn + .dropdown-toggle {
-  padding-right: 8px;
-  padding-left: 8px;
+.btn + .dropdown-toggle-split {
+  padding-right: $btn-padding-x * .75;
+  padding-left: $btn-padding-x * .75;
+
+  &::after {
+    margin-left: 0;
+  }
+}
+
+.btn-sm + .dropdown-toggle-split {
+  padding-right: $btn-padding-x-sm * .75;
+  padding-left: $btn-padding-x-sm * .75;
 }
-.btn-group > .btn-lg + .dropdown-toggle {
-  padding-right: 12px;
-  padding-left: 12px;
+
+.btn-lg + .dropdown-toggle-split {
+  padding-right: $btn-padding-x-lg * .75;
+  padding-left: $btn-padding-x-lg * .75;
 }
 
+
 // The clickable button for toggling the menu
 // Remove the gradient and set the same inset shadow as the :active state
 .btn-group.open .dropdown-toggle {
-  @include box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
+  @include box-shadow($btn-active-box-shadow);
 
   // Show no shadow for `.btn-link` since it has no other button styles.
   &.btn-link {
@@ -177,11 +189,9 @@
     border-radius: 0;
   }
   &:first-child:not(:last-child) {
-    border-top-right-radius: $btn-border-radius;
     @include border-bottom-radius(0);
   }
   &:last-child:not(:first-child) {
-    border-bottom-left-radius: $btn-border-radius;
     @include border-top-radius(0);
   }
 }

data/assets/stylesheets/bootstrap/_buttons.scss

@@ -1,3 +1,5 @@
+// scss-lint:disable QualifyingElement
+
 //
 // Base styles
 //
@@ -5,13 +7,14 @@
 .btn {
   display: inline-block;
   font-weight: $btn-font-weight;
+  line-height: $btn-line-height;
   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, $line-height, $btn-border-radius);
+  @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-border-radius);
   @include transition(all .2s ease-in-out);
 
   &,
@@ -34,7 +37,7 @@
   &.active {
     background-image: none;
     outline: 0;
-    @include box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
+    @include box-shadow($btn-active-box-shadow);
   }
 
   &.disabled,
@@ -76,22 +79,22 @@ fieldset[disabled] a.btn {
 }
 
 // Remove all backgrounds
-.btn-primary-outline {
+.btn-outline-primary {
   @include button-outline-variant($btn-primary-bg);
 }
-.btn-secondary-outline {
+.btn-outline-secondary {
   @include button-outline-variant($btn-secondary-border);
 }
-.btn-info-outline {
+.btn-outline-info {
   @include button-outline-variant($btn-info-bg);
 }
-.btn-success-outline {
+.btn-outline-success {
   @include button-outline-variant($btn-success-bg);
 }
-.btn-warning-outline {
+.btn-outline-warning {
   @include button-outline-variant($btn-warning-bg);
 }
-.btn-danger-outline {
+.btn-outline-danger {
   @include button-outline-variant($btn-danger-bg);
 }
 
@@ -141,11 +144,11 @@ fieldset[disabled] a.btn {
 
 .btn-lg {
   // line-height: ensure even-numbered height of button next to large input
-  @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-lg, $line-height-lg, $btn-border-radius-lg);
+  @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-lg, $btn-border-radius-lg);
 }
 .btn-sm {
   // line-height: ensure proper height of button next to small input
-  @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $line-height-sm, $btn-border-radius-sm);
+  @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-border-radius-sm);
 }
 
 
@@ -160,7 +163,7 @@ fieldset[disabled] a.btn {
 
 // Vertically space out multiple block buttons
 .btn-block + .btn-block {
-  margin-top: 5px;
+  margin-top: $btn-block-spacing-y;
 }
 
 // Specificity overrides

data/assets/stylesheets/bootstrap/_card.scss

@@ -7,11 +7,13 @@
   display: block;
   margin-bottom: $card-spacer-y;
   background-color: $card-bg;
-  border: $card-border-width solid $card-border-color;
+  // border: $card-border-width solid $card-border-color;
   @include border-radius($card-border-radius);
+  border: $card-border-width solid $card-border-color;
 }
 
 .card-block {
+  @include clearfix;
   padding: $card-spacer-x;
 }
 
@@ -46,18 +48,16 @@
   }
 }
 
-@if $enable-rounded {
-  .card {
-    > .list-group:first-child {
-      .list-group-item:first-child {
-        border-radius: $card-border-radius $card-border-radius 0 0;
-      }
+.card {
+  > .list-group:first-child {
+    .list-group-item:first-child {
+      @include border-top-radius($card-border-radius);
     }
+  }
 
-    > .list-group:last-child {
-      .list-group-item:last-child {
-        border-radius: 0 0 $card-border-radius $card-border-radius;
-      }
+  > .list-group:last-child {
+    .list-group-item:last-child {
+      @include border-bottom-radius($card-border-radius);
     }
   }
 }
@@ -68,6 +68,7 @@
 //
 
 .card-header {
+  @include clearfix;
   padding: $card-spacer-y $card-spacer-x;
   background-color: $card-cap-bg;
   border-bottom: $card-border-width solid $card-border-color;
@@ -78,6 +79,7 @@
 }
 
 .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;
@@ -88,6 +90,23 @@
 }
 
 
+//
+// Header navs
+//
+
+.card-header-tabs {
+  margin-right: -($card-spacer-x / 2);
+  margin-bottom: -$card-spacer-y;
+  margin-left: -($card-spacer-x / 2);
+  border-bottom: 0;
+}
+
+.card-header-pills {
+  margin-right: -($card-spacer-x / 2);
+  margin-left: -($card-spacer-x / 2);
+}
+
+
 //
 // Background variations
 //
@@ -109,22 +128,22 @@
 }
 
 // Remove all backgrounds
-.card-primary-outline {
+.card-outline-primary {
   @include card-outline-variant($btn-primary-bg);
 }
-.card-secondary-outline {
+.card-outline-secondary {
   @include card-outline-variant($btn-secondary-border);
 }
-.card-info-outline {
+.card-outline-info {
   @include card-outline-variant($btn-info-bg);
 }
-.card-success-outline {
+.card-outline-success {
   @include card-outline-variant($btn-success-bg);
 }
-.card-warning-outline {
+.card-outline-warning {
   @include card-outline-variant($btn-warning-bg);
 }
-.card-danger-outline {
+.card-outline-danger {
   @include card-outline-variant($btn-danger-bg);
 }
 
@@ -157,55 +176,65 @@
   right: 0;
   bottom: 0;
   left: 0;
-  padding: 1.25rem;
+  padding: $card-img-overlay-padding;
 }
 
 
 
 // Card image caps
 .card-img-top {
-  @include border-radius($card-border-radius-inner $card-border-radius-inner 0 0);
+  @include border-top-radius($card-border-radius-inner);
 }
 .card-img-bottom {
-  @include border-radius(0 0 $card-border-radius-inner $card-border-radius-inner);
+  @include border-bottom-radius($card-border-radius-inner);
 }
 
 
-//
 // 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`.
 
 @if $enable-flex {
   @include media-breakpoint-up(sm) {
     .card-deck {
       display: flex;
       flex-flow: row wrap;
-      margin-right: -.625rem;
-      margin-left: -.625rem;
+      margin-right: -$card-deck-margin;
+      margin-bottom: $card-spacer-y; // Margin balancing
+      margin-left: -$card-deck-margin;
 
       .card {
         flex: 1 0 0;
-        margin-right: .625rem;
-        margin-left: .625rem;
+        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: 1.25rem 0;
+      border-spacing: $space-between-cards 0;
 
       .card {
         display: table-cell;
-        width: 1%;
+        margin-bottom: 0; // Margin balancing
         vertical-align: top;
       }
     }
     .card-deck-wrapper {
-      margin-right: -1.25rem;
-      margin-left: -1.25rem;
+      margin-right: (-$space-between-cards);
+      margin-left: (-$space-between-cards);
     }
   }
 }
@@ -282,7 +311,7 @@
 @include media-breakpoint-up(sm) {
   .card-columns {
     column-count: 3;
-    column-gap: 1.25rem;
+    column-gap: $card-columns-sm-up-column-gap;
 
     .card {
       display: inline-block;