Merge branch 'v4-dev' into v4-navbars

22 files changed, 123 insertions, 112 deletions

diff --git a/scss/.scss-lint.yml b/scss/.scss-lint.yml
index 66c63335c..65c365ddb 100644
--- a/scss/.scss-lint.yml
+++ b/scss/.scss-lint.yml
@@ -89,7 +89,7 @@ linters:
     enabled: true
 
   ImportantRule:
-    enabled: true
+    enabled: false
 
   ImportPath:
     enabled: true
diff --git a/scss/_alert.scss b/scss/_alert.scss
index 55fc101dc..433177101 100644
--- a/scss/_alert.scss
+++ b/scss/_alert.scss
@@ -26,13 +26,13 @@
 // Expand the right padding and account for the close button's positioning.
 
 .alert-dismissible {
-  padding-right: ($alert-padding + 20px);
+  padding-right: ($alert-padding * 2);
 
   // Adjust close link position
   .close {
     position: relative;
-    top: -2px;
-    right: -21px;
+    top: -.125rem;
+    right: -$alert-padding;
     color: inherit;
   }
 }
diff --git a/scss/_card.scss b/scss/_card.scss
index a419d4d08..01a5733d6 100644
--- a/scss/_card.scss
+++ b/scss/_card.scss
@@ -70,6 +70,7 @@
 .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;
   border-bottom: $card-border-width solid $card-border-color;
 
@@ -168,7 +169,7 @@
 // Card image
 .card-img {
   // margin: -1.325rem;
-  @include border-radius(.25rem);
+  @include border-radius($card-border-radius-inner);
 }
 .card-img-overlay {
   position: absolute;
@@ -314,7 +315,7 @@
     column-gap: $card-columns-sm-up-column-gap;
 
     .card {
-      display: inline-block;
+      display: inline-block; // Don't let them vertically span multiple columns
       width: 100%; // Don't let them exceed the column width
     }
   }
diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss
index a5f0bdfc4..fe30f9fad 100644
--- a/scss/_custom-forms.scss
+++ b/scss/_custom-forms.scss
@@ -11,7 +11,7 @@
 
 .custom-control {
   position: relative;
-  display: inline;
+  display: inline-block;
   padding-left: $custom-control-gutter;
   cursor: pointer;
 
@@ -61,7 +61,7 @@
 
 .custom-control-indicator {
   position: absolute;
-  top: .0625rem;
+  top: .25rem;
   left: 0;
   display: block;
   width: $custom-control-indicator-size;
@@ -117,13 +117,8 @@
 
 .custom-controls-stacked {
   .custom-control {
-    display: inline;
-
-    &::after {
-      display: block;
-      margin-bottom: $custom-control-spacer-y;
-      content: "";
-    }
+    float: left;
+    clear: left;
 
     + .custom-control {
       margin-left: 0;
diff --git a/scss/_input-group.scss b/scss/_input-group.scss
index fff9cb560..b447a3282 100644
--- a/scss/_input-group.scss
+++ b/scss/_input-group.scss
@@ -90,18 +90,18 @@
   text-align: center;
   background-color: $input-group-addon-bg;
   border: $input-btn-border-width solid $input-group-addon-border-color;
-  @include border-radius($border-radius);
+  @include border-radius($input-border-radius);
 
   // Sizing
   &.form-control-sm {
     padding: $input-padding-y-sm $input-padding-x-sm;
     font-size: $font-size-sm;
-    @include border-radius($border-radius-sm);
+    @include border-radius($input-border-radius-sm);
   }
   &.form-control-lg {
     padding: $input-padding-y-lg $input-padding-x-lg;
     font-size: $font-size-lg;
-    @include border-radius($border-radius-lg);
+    @include border-radius($input-border-radius-lg);
   }
 
   // scss-lint:disable QualifyingElement
diff --git a/scss/_media.scss b/scss/_media.scss
index d970c946a..d1ebbcdeb 100644
--- a/scss/_media.scss
+++ b/scss/_media.scss
@@ -1,7 +1,6 @@
 @if $enable-flex {
   .media {
     display: flex;
-    margin-bottom: $spacer;
   }
   .media-body {
     flex: 1;
@@ -13,13 +12,6 @@
     align-self: flex-end;
   }
 } @else {
-  .media {
-    margin-top: $media-margin-top;
-
-    &:first-child {
-      margin-top: 0;
-    }
-  }
   .media,
   .media-body {
     overflow: hidden;
diff --git a/scss/_modal.scss b/scss/_modal.scss
index 83a133531..e4a04e45e 100644
--- a/scss/_modal.scss
+++ b/scss/_modal.scss
@@ -1,7 +1,7 @@
 // .modal-open      - body class for killing the scroll
 // .modal           - container to scroll within
 // .modal-dialog    - positioning shell for the actual modal
-// .modal-content   - actual modal w/ bg and corners and shit
+// .modal-content   - actual modal w/ bg and corners and stuff
 
 
 // Kill the scroll on the body
diff --git a/scss/_navbar.scss b/scss/_navbar.scss
index 6e563d439..def526fdd 100644
--- a/scss/_navbar.scss
+++ b/scss/_navbar.scss
@@ -116,10 +116,13 @@
 // Bootstrap JavaScript plugin.
 
 .navbar-toggler {
+  width: 2.5em;
+  height: 2em;
   padding: $navbar-toggler-padding-y $navbar-toggler-padding-x;
   font-size: $navbar-toggler-font-size;
   line-height: 1;
-  background: none;
+  background: transparent no-repeat center center;
+  background-size: 24px 24px;
   border: $border-width solid transparent;
   @include border-radius($navbar-toggler-border-radius);
 
@@ -207,6 +210,10 @@
     }
   }
 
+  .navbar-toggler {
+    background-image: $navbar-light-toggler-bg;
+  }
+
   .navbar-divider {
     background-color: rgba(0,0,0,.075);
   }
@@ -242,7 +249,57 @@
     }
   }
 
+  .navbar-toggler {
+    background-image: $navbar-dark-toggler-bg;
+  }
+
   .navbar-divider {
     background-color: rgba(255,255,255,.075);
   }
 }
+
+
+// Navbar toggleable
+//
+// Custom override for collapse plugin in navbar.
+
+.navbar-toggleable {
+  &-xs {
+    @include clearfix;
+    @include media-breakpoint-down(xs) {
+      .navbar-nav .nav-item {
+        float: none;
+        margin-left: 0;
+      }
+    }
+    @include media-breakpoint-up(sm) {
+      display: block !important;
+    }
+  }
+
+  &-sm {
+    @include clearfix;
+    @include media-breakpoint-down(sm) {
+      .navbar-nav .nav-item {
+        float: none;
+        margin-left: 0;
+      }
+    }
+    @include media-breakpoint-up(md) {
+      display: block !important;
+    }
+  }
+
+  &-md {
+    @include clearfix;
+    @include media-breakpoint-down(md) {
+      .navbar-nav .nav-item {
+        float: none;
+        margin-left: 0;
+      }
+    }
+    @include media-breakpoint-up(lg) {
+      display: block !important;
+    }
+  }
+}
diff --git a/scss/_print.scss b/scss/_print.scss
index b2c93735c..84556602f 100644
--- a/scss/_print.scss
+++ b/scss/_print.scss
@@ -1,4 +1,4 @@
-// scss-lint:disable ImportantRule, QualifyingElement
+// scss-lint:disable QualifyingElement
 
 // Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css
 
diff --git a/scss/_progress.scss b/scss/_progress.scss
index b2bcb3056..c2364feee 100644
--- a/scss/_progress.scss
+++ b/scss/_progress.scss
@@ -26,7 +26,7 @@
   // Reset the default appearance
   appearance: none;
   // Set overall border radius
-  @include border-radius($border-radius);
+  @include border-radius($progress-border-radius);
 }
 
 // Filled-in portion of the bar
@@ -37,30 +37,30 @@
 }
 .progress[value]::-moz-progress-bar {
   background-color: $progress-bar-color;
-  @include border-left-radius($border-radius);
+  @include border-left-radius($progress-border-radius);
 }
 .progress[value]::-webkit-progress-value {
   background-color: $progress-bar-color;
-  @include border-left-radius($border-radius);
+  @include border-left-radius($progress-border-radius);
 }
 // Tweaks for full progress bar
 .progress[value="100"]::-moz-progress-bar {
-  @include border-right-radius($border-radius);
+  @include border-right-radius($progress-border-radius);
 }
 .progress[value="100"]::-webkit-progress-value {
-  @include border-right-radius($border-radius);
+  @include border-right-radius($progress-border-radius);
 }
 
 // Unfilled portion of the bar
 .progress[value]::-webkit-progress-bar {
   background-color: $progress-bg;
-  @include border-radius($border-radius);
+  @include border-radius($progress-border-radius);
   @include box-shadow($progress-box-shadow);
 }
 base::-moz-progress-bar, // Absurd-but-syntactically-valid selector to make these styles Firefox-only
 .progress[value] {
   background-color: $progress-bg;
-  @include border-radius($border-radius);
+  @include border-radius($progress-border-radius);
   @include box-shadow($progress-box-shadow);
 }
 
@@ -68,7 +68,7 @@ base::-moz-progress-bar, // Absurd-but-syntactically-valid selector to make thes
 @media screen and (min-width:0\0) {
   .progress {
     background-color: $progress-bg;
-    @include border-radius($border-radius);
+    @include border-radius($progress-border-radius);
     @include box-shadow($progress-box-shadow);
   }
   .progress-bar {
@@ -76,10 +76,10 @@ base::-moz-progress-bar, // Absurd-but-syntactically-valid selector to make thes
     height: $spacer-y;
     text-indent: -999rem; // Simulate hiding of value as in native `<progress>`
     background-color: $progress-bar-color;
-    @include border-left-radius($border-radius);
+    @include border-left-radius($progress-border-radius);
   }
   .progress[width="100%"] {
-    @include border-right-radius($border-radius);
+    @include border-right-radius($progress-border-radius);
   }
 }
 
diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index 02c579d32..1a1e4728b 100644
--- a/scss/_reboot.scss
+++ b/scss/_reboot.scss
@@ -1,4 +1,4 @@
-// scss-lint:disable ImportantRule, QualifyingElement, DuplicateProperty
+// scss-lint:disable QualifyingElement, DuplicateProperty
 
 // Reboot
 //
diff --git a/scss/_tables.scss b/scss/_tables.scss
index d865884ec..235ec984e 100644
--- a/scss/_tables.scss
+++ b/scss/_tables.scss
@@ -101,7 +101,7 @@
 
 // Inverse styles
 //
-// Same table markup, but inverted color scheme—dark background and light text.
+// Same table markup, but inverted color scheme: dark background and light text.
 
 .thead-inverse {
   th {
@@ -184,7 +184,6 @@
     }
   }
 
-  // scss-lint:disable ImportantRule
   tr {
     float: left;
 
@@ -194,5 +193,4 @@
       border: $table-border-width solid $table-border-color;
     }
   }
-  // scss-lint:enable ImportantRule
 }
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 90d6e5b51..fa4875d45 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -158,7 +158,7 @@ $grid-gutter-width: 30px !default;
 //
 // Font, line-height, and color for body text, headings, and more.
 
-$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif !default;
+$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default;
 $font-family-serif:      Georgia, "Times New Roman", Times, serif !default;
 $font-family-monospace:  Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
 $font-family-base:       $font-family-sans-serif !default;
@@ -327,10 +327,10 @@ $input-border-radius:            $border-radius !default;
 $input-border-radius-lg:         $border-radius-lg !default;
 $input-border-radius-sm:         $border-radius-sm !default;
 
-$input-bg-focus:                 $input-bg;
+$input-bg-focus:                 $input-bg !default;
 $input-border-focus:             #66afe9 !default;
-$input-box-shadow-focus:         rgba(102,175,233,.6) !default;
-$input-color-focus:              $input-color;
+$input-box-shadow-focus:         $input-box-shadow, 0 0 8px rgba(102,175,233,.6) !default;
+$input-color-focus:              $input-color !default;
 
 $input-color-placeholder:        #999 !default;
 
@@ -495,11 +495,13 @@ $navbar-dark-color:                 rgba(255,255,255,.5) !default;
 $navbar-dark-hover-color:           rgba(255,255,255,.75) !default;
 $navbar-dark-active-color:          rgba(255,255,255,1) !default;
 $navbar-dark-disabled-color:        rgba(255,255,255,.25) !default;
+$navbar-dark-toggler-bg: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") !default;
 
 $navbar-light-color:                rgba(0,0,0,.3) !default;
 $navbar-light-hover-color:          rgba(0,0,0,.6) !default;
 $navbar-light-active-color:         rgba(0,0,0,.8) !default;
 $navbar-light-disabled-color:       rgba(0,0,0,.15) !default;
+$navbar-light-toggler-bg: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") !default;
 
 
 // Navs
@@ -589,7 +591,7 @@ $card-spacer-y:            .75rem !default;
 $card-border-width:        1px !default;
 $card-border-radius:       $border-radius !default;
 $card-border-color:        rgba(0,0,0,.125) !default;
-$card-border-radius-inner: $card-border-radius !default;
+$card-border-radius-inner: calc(#{$card-border-radius} - #{$card-border-width}) !default;
 $card-cap-bg:              #f5f5f5 !default;
 $card-bg:                  #fff !default;
 
@@ -693,7 +695,7 @@ $modal-sm:                    300px !default;
 //
 // Define alert colors, border radius, and padding.
 
-$alert-padding:               15px !default;
+$alert-padding:               1rem !default;
 $alert-border-radius:         $border-radius !default;
 $alert-link-font-weight:      bold !default;
 $alert-border-width:          $border-width !default;
diff --git a/scss/bootstrap-grid.scss b/scss/bootstrap-grid.scss
index 5dc331eb6..40680ca96 100644
--- a/scss/bootstrap-grid.scss
+++ b/scss/bootstrap-grid.scss
@@ -8,53 +8,13 @@
 // Variables
 //
 
-
-// Grid breakpoints
-//
-// Define the minimum and maximum dimensions at which your layout will change,
-// adapting to different screen sizes, for use in media queries.
-
-$grid-breakpoints: (
-  // Extra small screen / phone
-  xs: 0,
-  // Small screen / phone
-  sm: 544px,
-  // Medium screen / tablet
-  md: 768px,
-  // Large screen / desktop
-  lg: 992px,
-  // Extra large screen / wide desktop
-  xl: 1200px
-) !default;
-
-
-// Grid containers
-//
-// Define the maximum width of `.container` for different screen sizes.
-
-$container-max-widths: (
-  sm: 576px,
-  md: 720px,
-  lg: 940px,
-  xl: 1140px
-) !default;
-
-
-// Grid columns
-//
-// Set the number of columns and specify the width of the gutters.
-
-$grid-columns:               12 !default;
-$grid-gutter-width:          1.875rem !default; // 30px
-
+@import "custom";
+@import "variables";
 
 //
 // Grid mixins
 //
 
-@import "custom";
-@import "variables";
-
 @import "mixins/clearfix";
 @import "mixins/breakpoints";
 @import "mixins/grid-framework";
diff --git a/scss/bootstrap.scss b/scss/bootstrap.scss
index 7697abb18..219eda217 100644
--- a/scss/bootstrap.scss
+++ b/scss/bootstrap.scss
@@ -1,5 +1,5 @@
 /*!
- * Bootstrap v4.0.0-alpha.2 (http://getbootstrap.com)
+ * Bootstrap v4.0.0-alpha.4 (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)
diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
index 026e41e23..698e7dc12 100644
--- a/scss/mixins/_forms.scss
+++ b/scss/mixins/_forms.scss
@@ -7,14 +7,8 @@
   // Color the label and help text
   .form-control-feedback,
   .form-control-label,
-  .radio,
-  .checkbox,
-  .radio-inline,
-  .checkbox-inline,
-  &.radio label,
-  &.checkbox label,
-  &.radio-inline label,
-  &.checkbox-inline label,
+  .form-check-label,
+  .form-check-inline,
   .custom-control {
     color: $color;
   }
@@ -60,8 +54,7 @@
     background-color: $input-bg-focus;
     border-color: $input-border-focus;
     outline: none;
-    $shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px $input-box-shadow-focus;
-    @include box-shadow($shadow);
+    @include box-shadow($input-box-shadow-focus);
   }
 }
 
diff --git a/scss/mixins/_grid-framework.scss b/scss/mixins/_grid-framework.scss
index be2ee50db..8b17d7843 100644
--- a/scss/mixins/_grid-framework.scss
+++ b/scss/mixins/_grid-framework.scss
@@ -30,9 +30,22 @@
     }
 
     @include media-breakpoint-up($breakpoint, $breakpoints) {
+      // Provide basic `.col-{bp}` classes for equal-width flexbox columns
+      @if $enable-flex {
+        .col-#{$breakpoint} {
+          position: relative;
+          flex-basis: 0;
+          flex-grow: 1;
+          max-width: 100%;
+          min-height: 1px;
+          padding-right: ($grid-gutter-width / 2);
+          padding-left:  ($grid-gutter-width / 2);
+        }
+      }
+
       @for $i from 1 through $columns {
         .col-#{$breakpoint}-#{$i} {
-          @include make-col($i, $columns, $gutter);
+          @include make-col($i, $columns);
         }
       }
 
diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss
index 87f112278..fa9b3995b 100644
--- a/scss/mixins/_grid.scss
+++ b/scss/mixins/_grid.scss
@@ -33,7 +33,7 @@
   margin-right: ($gutter / -2);
 }
 
-@mixin make-col-ready($size, $columns: $grid-columns, $gutter: $grid-gutter-width) {
+@mixin make-col-ready($gutter: $grid-gutter-width) {
   position: relative;
   min-height: 1px; // Prevent collapsing
   padding-right: ($gutter / 2);
@@ -47,7 +47,7 @@
   }
 }
 
-@mixin make-col($size, $columns: $grid-columns, $gutter: $grid-gutter-width) {
+@mixin make-col($size, $columns: $grid-columns) {
   @if $enable-flex {
     flex: 0 0 percentage($size / $columns);
     // Add a `max-width` to ensure content within each column does not blow out
diff --git a/scss/mixins/_text-emphasis.scss b/scss/mixins/_text-emphasis.scss
index 27a4f454e..9cd4b6a4f 100644
--- a/scss/mixins/_text-emphasis.scss
+++ b/scss/mixins/_text-emphasis.scss
@@ -6,7 +6,7 @@
   }
   a#{$parent} {
     @include hover-focus {
-      color: darken($color, 10%);
+      color: darken($color, 10%) !important;
     }
   }
 }
diff --git a/scss/utilities/_background.scss b/scss/utilities/_background.scss
index b1589792f..a81dcff2c 100644
--- a/scss/utilities/_background.scss
+++ b/scss/utilities/_background.scss
@@ -2,10 +2,6 @@
 // Contextual backgrounds
 //
 
-.bg-inverse {
-  background-color: $brand-inverse;
-}
-
 .bg-faded {
   background-color: $gray-lightest;
 }
@@ -19,3 +15,5 @@
 @include bg-variant('.bg-warning', $brand-warning);
 
 @include bg-variant('.bg-danger', $brand-danger);
+
+@include bg-variant('.bg-inverse', $brand-inverse);
diff --git a/scss/utilities/_text.scss b/scss/utilities/_text.scss
index 901f77144..c1cbe1270 100644
--- a/scss/utilities/_text.scss
+++ b/scss/utilities/_text.scss
@@ -44,6 +44,10 @@
 
 @include text-emphasis-variant('.text-danger', $brand-danger);
 
+// Font color
+
+@include text-emphasis-variant('.text-gray-dark', $gray-dark);
+
 // Misc
 
 .text-hide {
diff --git a/scss/utilities/_visibility.scss b/scss/utilities/_visibility.scss
index 63891677e..cdb142869 100644
--- a/scss/utilities/_visibility.scss
+++ b/scss/utilities/_visibility.scss
@@ -1,5 +1,3 @@
-// scss-lint:disable ImportantRule
-
 //
 // Visibility utilities
 //