bootstrap 4.0.0.alpha2 → 4.0.0.alpha3

data/assets/stylesheets/bootstrap/_buttons.scss

@@ -10,7 +10,7 @@
   vertical-align: middle;
   cursor: pointer;
   user-select: none;
-  border: $border-width solid transparent;
+  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 transition(all .2s ease-in-out);
 

data/assets/stylesheets/bootstrap/_card.scss

@@ -93,55 +93,49 @@
 //
 
 .card-primary {
-  background-color: $brand-primary;
-  border-color: $brand-primary;
+  @include card-variant($brand-primary, $brand-primary);
 }
 .card-success {
-  background-color: $brand-success;
-  border-color: $brand-success;
+  @include card-variant($brand-success, $brand-success);
 }
 .card-info {
-  background-color: $brand-info;
-  border-color: $brand-info;
+  @include card-variant($brand-info, $brand-info);
 }
 .card-warning {
-  background-color: $brand-warning;
-  border-color: $brand-warning;
+  @include card-variant($brand-warning, $brand-warning);
 }
 .card-danger {
-  background-color: $brand-danger;
-  border-color: $brand-danger;
+  @include card-variant($brand-danger, $brand-danger);
 }
 
+// Remove all backgrounds
+.card-primary-outline {
+  @include card-outline-variant($btn-primary-bg);
+}
+.card-secondary-outline {
+  @include card-outline-variant($btn-secondary-border);
+}
+.card-info-outline {
+  @include card-outline-variant($btn-info-bg);
+}
+.card-success-outline {
+  @include card-outline-variant($btn-success-bg);
+}
+.card-warning-outline {
+  @include card-outline-variant($btn-warning-bg);
+}
+.card-danger-outline {
+  @include card-outline-variant($btn-danger-bg);
+}
 
 //
 // Inverse text within a card for use with dark backgrounds
 //
 
 .card-inverse {
-  .card-header,
-  .card-footer {
-    border-bottom: .075rem solid rgba(255,255,255,.2);
-  }
-  .card-header,
-  .card-footer,
-  .card-title,
-  .card-blockquote {
-    color: #fff;
-  }
-  .card-link,
-  .card-text,
-  .card-blockquote > footer {
-    color: rgba(255,255,255,.65);
-  }
-  .card-link {
-    @include hover-focus {
-      color: $card-link-hover-color;
-    }
-  }
+  @include card-inverse;
 }
 
-
 //
 // Blockquote
 //

data/assets/stylesheets/bootstrap/_code.scss

@@ -27,7 +27,7 @@ kbd {
   kbd {
     padding: 0;
     font-size: 100%;
-    font-weight: bold;
+    font-weight: $nested-kbd-font-weight;
     @include box-shadow(none);
   }
 }

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

@@ -134,11 +134,12 @@
   max-width: 100%;
   padding: .375rem 1.75rem .375rem .75rem;
   padding-right: .75rem \9;
+  color: $input-color;
   vertical-align: middle;
   background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC) no-repeat right .75rem center;
   background-image: none \9;
   background-size: 8px 10px;
-  border: 1px solid $input-border;
+  border: $input-btn-border-width solid $input-border-color;
   // Use vendor prefixes as `appearance` isn't part of the CSS spec.
   -moz-appearance: none;
   -webkit-appearance: none;
@@ -195,7 +196,7 @@
   color: #555;
   user-select: none;
   background-color: #fff;
-  border: .075rem solid #ddd;
+  border: $input-btn-border-width solid #ddd;
   border-radius: .25rem;
   @include box-shadow(inset 0 .2rem .4rem rgba(0,0,0,.05));
 }
@@ -215,7 +216,7 @@
   color: #555;
   content: "Browse";
   background-color: #eee;
-  border: .075rem solid #ddd;
+  border: $input-btn-border-width solid #ddd;
   border-radius: 0 .25rem .25rem 0;
 }
 

data/assets/stylesheets/bootstrap/_dropdown.scss

@@ -1,4 +1,4 @@
-// The dropdown wrapper (div)
+// The dropdown wrapper (`<div>`)
 .dropup,
 .dropdown {
   position: relative;
@@ -34,7 +34,7 @@
   }
 }
 
-// The dropdown menu (ul)
+// The dropdown menu
 .dropdown-menu {
   position: absolute;
   top: 100%;
@@ -51,19 +51,19 @@
   list-style: none;
   background-color: $dropdown-bg;
   background-clip: padding-box;
-  border: 1px solid $dropdown-border;
+  border: $dropdown-border-width solid $dropdown-border-color;
   @include border-radius($border-radius);
   @include box-shadow(0 6px 12px rgba(0,0,0,.175));
 }
 
-// Dividers (basically an hr) within the dropdown
+// Dividers (basically an `<hr>`) within the dropdown
 .dropdown-divider {
   @include nav-divider($dropdown-divider-bg);
 }
 
 // Links, buttons, and more within the dropdown menu
 //
-// `<button>`-specific styles are denoted with `// for <button>s`
+// `<button>`-specific styles are denoted with `// For <button>s`
 .dropdown-item {
   display: block;
   width: 100%; // For `<button>`s

data/assets/stylesheets/bootstrap/_forms.scss

@@ -14,7 +14,7 @@
   background-color: $input-bg;
   // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214.
   background-image: none;
-  border: $border-width solid $input-border;
+  border: $input-btn-border-width solid $input-border-color;
   // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
   @include border-radius($input-border-radius);
   @include box-shadow($input-box-shadow);
@@ -380,8 +380,6 @@ input[type="checkbox"] {
 //
 // Requires wrapping inputs and labels with `.form-group` for proper display of
 // default HTML form controls and our custom form controls (e.g., input groups).
-//
-// Heads up! This is mixin-ed into `.navbar-form` in _navbar.scss.
 
 .form-inline {
 
@@ -394,7 +392,7 @@ input[type="checkbox"] {
       vertical-align: middle;
     }
 
-    // In navbar-form, allow folks to *not* use `.form-group`
+    // Allow folks to *not* use `.form-group`
     .form-control {
       display: inline-block;
       width: auto; // Prevent labels from stacking above inputs in `.form-group`

data/assets/stylesheets/bootstrap/_images.scss

@@ -19,7 +19,7 @@
   padding: $thumbnail-padding;
   line-height: $line-height;
   background-color: $thumbnail-bg;
-  border: 1px solid $thumbnail-border;
+  border: $thumbnail-border-width solid $thumbnail-border-color;
   border-radius: $thumbnail-border-radius;
   transition: all .2s ease-in-out;
   @include box-shadow(0 1px 2px rgba(0,0,0,.075));

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

@@ -19,6 +19,10 @@
     // proper border colors.
     position: relative;
     z-index: 2;
+    // Bring the "active" form control to the front
+    @include hover-focus-active {
+      z-index: 3;
+    }
     @if $enable-flex {
       flex: 1;
     } @else {
@@ -87,7 +91,7 @@
   color: $input-color;
   text-align: center;
   background-color: $input-group-addon-bg;
-  border: 1px solid $input-group-addon-border-color;
+  border: $input-btn-border-width solid $input-group-addon-border-color;
   @include border-radius($border-radius);
 
   // Sizing
@@ -156,26 +160,30 @@
   > .btn {
     position: relative;
     + .btn {
-      margin-left: -1px;
+      margin-left: (-$input-btn-border-width);
     }
     // Bring the "active" button to the front
     @include hover-focus-active {
-      z-index: 2;
+      z-index: 3;
     }
   }
 
-  // Negative margin to only have a 1px border between the two
+  // Negative margin to only have a single, shared border between the two
   &:first-child {
     > .btn,
     > .btn-group {
-      margin-right: -1px;
+      margin-right: (-$input-btn-border-width);
     }
   }
   &:last-child {
     > .btn,
     > .btn-group {
       z-index: 2;
-      margin-left: -1px;
+      margin-left: (-$input-btn-border-width);
+      // Because specificity
+      @include hover-focus-active {
+        z-index: 3;
+      }
     }
   }
 }

data/assets/stylesheets/bootstrap/_jumbotron.scss

@@ -3,18 +3,16 @@
   margin-bottom: $jumbotron-padding;
   background-color: $jumbotron-bg;
   @include border-radius($border-radius-lg);
+
+  @include media-breakpoint-up(sm) {
+    padding: ($jumbotron-padding * 2) $jumbotron-padding;
+  }
 }
 
 .jumbotron-hr {
   border-top-color: darken($jumbotron-bg, 10%);
 }
 
-@include media-breakpoint-up(sm) {
-  .jumbotron {
-    padding: ($jumbotron-padding * 2) $jumbotron-padding;
-  }
-}
-
 .jumbotron-fluid {
   padding-right: 0;
   padding-left: 0;

data/assets/stylesheets/bootstrap/_labels.scss

@@ -7,7 +7,7 @@
   display: inline-block;
   padding: .25em .4em;
   font-size: 75%;
-  font-weight: bold;
+  font-weight: $label-font-weight;
   line-height: 1;
   color: $label-color;
   text-align: center;

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

@@ -18,9 +18,9 @@
   display: block;
   padding: .75rem 1.25rem;
   // Place the border on the list items and negative margin up for better styling
-  margin-bottom: -$border-width;
+  margin-bottom: -$list-group-border-width;
   background-color: $list-group-bg;
-  border: $border-width solid $list-group-border;
+  border: $list-group-border-width solid $list-group-border-color;
 
   // Round the first and last items
   &:first-child {
@@ -34,9 +34,21 @@
 
 .list-group-flush {
   .list-group-item {
-    border-width: $border-width 0;
+    border-width: $list-group-border-width 0;
     border-radius: 0;
   }
+
+  &:first-child {
+    .list-group-item:first-child {
+      border-top: 0;
+    }
+  }
+
+  &:last-child {
+    .list-group-item:last-child {
+      border-bottom: 0;
+    }
+  }
 }
 
 

data/assets/stylesheets/bootstrap/_mixins.scss

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

data/assets/stylesheets/bootstrap/_nav.scss

@@ -32,6 +32,11 @@
 // Nav inline
 
 .nav-inline {
+  .nav-item {
+    display: inline-block;
+  }
+
+  .nav-item + .nav-item,
   .nav-link + .nav-link {
     margin-left: 1rem;
   }
@@ -59,7 +64,7 @@
   .nav-link {
     display: block;
     padding: $nav-link-padding;
-    border: 1px solid transparent;
+    border: $nav-tabs-link-border-width solid transparent;
     @include border-radius($border-radius $border-radius 0 0);
 
     @include hover-focus {

data/assets/stylesheets/bootstrap/_pager.scss

@@ -14,7 +14,7 @@
       display: inline-block;
       padding: 5px 14px;
       background-color: $pager-bg;
-      border: 1px solid $pager-border;
+      border: $pager-border-width solid $pager-border-color;
       border-radius: $pager-border-radius;
     }
 

data/assets/stylesheets/bootstrap/_pagination.scss

@@ -4,48 +4,24 @@
   margin-top: $spacer-y;
   margin-bottom: $spacer-y;
   @include border-radius();
+}
 
-  > li {
-    display: inline; // Remove list-style and block-level defaults
+.page-item {
+  display: inline; // Remove list-style and block-level defaults
 
-    > a,
-    > span {
-      position: relative;
-      float: left; // Collapse white-space
-      padding: $pagination-padding-y $pagination-padding-x;
-      margin-left: -1px;
-      line-height: $line-height;
-      color: $pagination-color;
-      text-decoration: none;
-      background-color: $pagination-bg;
-      border: 1px solid $pagination-border;
-    }
-    &:first-child {
-      > a,
-      > span {
-        margin-left: 0;
-        @include border-left-radius($border-radius);
-      }
-    }
-    &:last-child {
-      > a,
-      > span {
-        @include border-right-radius($border-radius);
-      }
+  &:first-child {
+    .page-link {
+      margin-left: 0;
+      @include border-left-radius($border-radius);
     }
   }
-
-  > li > a,
-  > li > span {
-    @include hover-focus {
-      color: $pagination-hover-color;
-      background-color: $pagination-hover-bg;
-      border-color: $pagination-hover-border;
+  &:last-child {
+    .page-link {
+      @include border-right-radius($border-radius);
     }
   }
 
-  > .active > a,
-  > .active > span {
+  &.active .page-link {
     @include plain-hover-focus {
       z-index: 2;
       color: $pagination-active-color;
@@ -55,19 +31,34 @@
     }
   }
 
-  > .disabled {
-    > span,
-    > a {
-      @include plain-hover-focus {
-        color: $pagination-disabled-color;
-        cursor: $cursor-disabled;
-        background-color: $pagination-disabled-bg;
-        border-color: $pagination-disabled-border;
-      }
+  &.disabled .page-link {
+    @include plain-hover-focus {
+      color: $pagination-disabled-color;
+      cursor: $cursor-disabled;
+      background-color: $pagination-disabled-bg;
+      border-color: $pagination-disabled-border;
     }
   }
 }
 
+.page-link {
+  position: relative;
+  float: left; // Collapse white-space
+  padding: $pagination-padding-y $pagination-padding-x;
+  margin-left: -1px;
+  line-height: $line-height;
+  color: $pagination-color;
+  text-decoration: none;
+  background-color: $pagination-bg;
+  border: $pagination-border-width solid $pagination-border-color;
+
+  @include hover-focus {
+    color: $pagination-hover-color;
+    background-color: $pagination-hover-bg;
+    border-color: $pagination-hover-border;
+  }
+}
+
 
 //
 // Sizing