Merge branch 'v4-dev' into fix-travis-v4

24 files changed, 139 insertions, 134 deletions

diff --git a/scss/.scsslint.yml b/scss/.scsslint.yml
index 3b24eeb3a..35ce8194f 100644
--- a/scss/.scsslint.yml
+++ b/scss/.scsslint.yml
@@ -12,6 +12,9 @@ linters:
   ColorKeyword:
     enabled: true
 
+  ColorVariable:
+    enabled: false
+
   Comment:
     enabled: true
     exclude: ['_normalize.scss', 'bootstrap.scss']
@@ -55,6 +58,9 @@ linters:
   IdSelector:
     enabled: true
 
+  ImportantRule:
+    enabled: false
+
   ImportPath:
     enabled: true
     leading_underscore: false
@@ -96,6 +102,9 @@ linters:
       "bottom",
       "left",
       "z-index",
+      "-webkit-box-sizing",
+      "-moz-box-sizing",
+      "box-sizing",
       "display",
       "float",
       "width",
@@ -104,10 +113,6 @@ linters:
       "height",
       "min-height",
       "max-height",
-      "-webkit-box-sizing",
-      "-moz-box-sizing",
-      "box-sizing",
-      "-webkit-appearance",
       "flex",
       "flex-direction",
       "flex-flow",
diff --git a/scss/_alert.scss b/scss/_alert.scss
index aaa2a1da5..e52e957b5 100644
--- a/scss/_alert.scss
+++ b/scss/_alert.scss
@@ -20,7 +20,6 @@
 
 // Headings for larger alerts
 .alert-heading {
-  margin-top: 0;
   // Specified to prevent conflicts of changing $headings-color
   color: inherit;
 }
diff --git a/scss/_breadcrumb.scss b/scss/_breadcrumb.scss
index d2302b829..07ca300a5 100644
--- a/scss/_breadcrumb.scss
+++ b/scss/_breadcrumb.scss
@@ -8,7 +8,7 @@
   > li {
     display: inline-block;
 
-    + li:before {
+    + li::before {
       $nbsp: "\00a0";
       padding-right: .5rem;
       padding-left: .5rem;
diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index 97d225103..265f35776 100644
--- a/scss/_buttons.scss
+++ b/scss/_buttons.scss
@@ -48,7 +48,7 @@
 }
 
 // Future-proof disabling of clicks on `<a>` elements
-a.btn.disaabled,
+a.btn.disabled,
 fieldset[disabled] a.btn {
   pointer-events: none;
 }
diff --git a/scss/_card.scss b/scss/_card.scss
index b0bac74e1..fc456c059 100644
--- a/scss/_card.scss
+++ b/scss/_card.scss
@@ -2,18 +2,10 @@
 // Base styles
 //
 
-$card-spacer-x:            1.25rem;
-$card-spacer-y:            .75rem;
-$card-border-width:        .0625rem;
-$card-border-radius:       .25rem;
-$card-border-color:        #e5e5e5;
-$card-border-radius-inner: ($card-border-radius - $card-border-width);
-
-$card-cap-bg: #f5f5f5;
-
 .card {
   position: relative;
   margin-bottom: $card-spacer-y;
+  background-color: #fff;
   border: $card-border-width solid $card-border-color;
   @include border-radius($card-border-radius);
 }
@@ -23,7 +15,6 @@ $card-cap-bg: #f5f5f5;
 }
 
 .card-title {
-  margin-top: 0;
   margin-bottom: $card-spacer-y;
 }
 
diff --git a/scss/_carousel.scss b/scss/_carousel.scss
index c5a7fdfcb..c7d182b5a 100644
--- a/scss/_carousel.scss
+++ b/scss/_carousel.scss
@@ -141,12 +141,12 @@
   }
 
   .icon-prev {
-    &:before {
+    &::before {
       content: "\2039";// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039)
     }
   }
   .icon-next {
-    &:before {
+    &::before {
       content: "\203a";// SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A)
     }
   }
diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss
index ec211acaa..34dfc48e7 100644
--- a/scss/_custom-forms.scss
+++ b/scss/_custom-forms.scss
@@ -19,16 +19,17 @@
     z-index: -1; // Put the input behind the label so it doesn't overlay text
     opacity: 0;
 
-    &:focus ~ .c-indicator {
-      @include box-shadow(0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9);
-    }
-
     &:checked ~ .c-indicator {
       color: #fff;
       background-color: #0074d9;
       @include box-shadow(none);
     }
 
+    &:focus ~ .c-indicator {
+      // the mixin is not used here to make sure there is feedback
+      box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9;
+    }
+
     &:active ~ .c-indicator {
       color: #fff;
       background-color: #84c6ff;
@@ -108,7 +109,7 @@
   .c-input {
     display: inline;
 
-    &:after {
+    &::after {
       display: block;
       margin-bottom: .25rem;
       content: "";
@@ -125,29 +126,27 @@
 //
 // Replaces the browser default select with a custom one, mostly pulled from
 // http://primercss.io.
+//
+// Includes IE9-specific hacks (noted by ` \9`).
 
 .c-select {
   display: inline-block;
   max-width: 100%;
   padding: .375rem 1.75rem .375rem .75rem;
+  padding-right: .75rem \9;
   vertical-align: middle;
-	background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC) no-repeat right .75rem center;
+  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;
-
-  // Have to include vendor prefixes as the `appearance` property isn't part of the CSS spec.
-  -webkit-appearance: none;
+  // Use vendor prefixes as `appearance` isn't part of the CSS spec.
   -moz-appearance: none;
-  appearance: none;
-
-  // IE9 hacks to hide the background-image and reduce padding
-  padding-right: .75rem \9;
-  background-image: none \9;
+  -webkit-appearance: none;
 
   &:focus {
-    outline: none;
     border-color: #51a7e8;
-    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 5px rgba(81, 167, 232, 0.5);
+    outline: none;
+    @include box-shadow(inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 5px rgba(81, 167, 232, 0.5));
   }
 
   // Hides the default caret in IE11
@@ -198,12 +197,12 @@
   background-color: #fff;
   border: .075rem solid #ddd;
   border-radius: .25rem;
-  box-shadow: inset 0 .2rem .4rem rgba(0,0,0,.05);
+  @include box-shadow(inset 0 .2rem .4rem rgba(0,0,0,.05));
 }
-.file-custom:after {
+.file-custom::after {
   content: "Choose file...";
 }
-.file-custom:before {
+.file-custom::before {
   position: absolute;
   top: -.075rem;
   right: -.075rem;
@@ -222,5 +221,5 @@
 
 // Focus state
 .file input:focus ~ .file-custom {
-  box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9;
+  @include box-shadow(0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9);
 }
diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss
index d3588d270..2f0659a5c 100644
--- a/scss/_dropdown.scss
+++ b/scss/_dropdown.scss
@@ -6,7 +6,7 @@
 
 .dropdown-toggle {
   // Generate the caret automatically
-  &:after {
+  &::after {
     display: inline-block;
     width: 0;
     height: 0;
@@ -24,6 +24,15 @@
   }
 }
 
+.dropup {
+  .dropdown-toggle {
+    &::after {
+      border-bottom: $caret-width solid;
+      border-top: 0;
+    }
+  }
+}
+
 // The dropdown menu (ul)
 .dropdown-menu {
   position: absolute;
@@ -51,20 +60,20 @@
 }
 
 // Links, buttons, and more within the dropdown menu
+//
+// `<button>`-specific styles are denoted with `// for <button>s`
 .dropdown-item {
   display: block;
+  width: 100%; // For `<button>`s
   padding: 3px 20px;
   clear: both;
   font-weight: normal;
   line-height: $line-height;
   color: $dropdown-link-color;
+  text-align: inherit; // For `<button>`s
   white-space: nowrap; // prevent links from randomly breaking onto new lines
-
-  // For `<button>`s
-  text-align: inherit;
-  width: 100%;
-  background: none;
-  border: 0;
+  background: none; // For `<button>`s
+  border: 0; // For `<button>`s
 
   @include hover-focus {
     color: $dropdown-link-hover-color;
diff --git a/scss/_forms.scss b/scss/_forms.scss
index 9888da1d6..72ec9b03f 100644
--- a/scss/_forms.scss
+++ b/scss/_forms.scss
@@ -148,7 +148,7 @@
   padding: $input-padding-y-sm $input-padding-x-sm;
   font-size: $font-size-sm;
   line-height: $line-height-sm;
-  border-radius: $input-border-radius-sm;
+  @include border-radius($input-border-radius-sm);
 }
 
 .form-control-lg {
@@ -156,7 +156,7 @@
   padding: $input-padding-y-lg $input-padding-x-lg;
   font-size: $font-size-lg;
   line-height: $line-height-lg;
-  border-radius: $input-border-radius-lg;
+  @include border-radius($input-border-radius-lg);
 }
 
 
@@ -266,9 +266,9 @@ input[type="checkbox"] {
 .form-control-warning,
 .form-control-error {
   padding-right: ($input-padding-x * 3);
+  background-repeat: no-repeat;
   background-position: center right ($input-height * .25);
   background-size: ($input-height * .65) ($input-height * .65);
-  background-repeat: no-repeat;
 }
 
 // Form validation states
diff --git a/scss/_input-group.scss b/scss/_input-group.scss
index df8aa10eb..3b4ef632c 100644
--- a/scss/_input-group.scss
+++ b/scss/_input-group.scss
@@ -97,7 +97,7 @@
     @include border-radius($border-radius-sm);
   }
   &.form-control-lg {
-    padding: $input-padding-x-lg $input-padding-x-lg;
+    padding: $input-padding-y-lg $input-padding-x-lg;
     font-size: $font-size-lg;
     @include border-radius($border-radius-lg);
   }
diff --git a/scss/_labels.scss b/scss/_labels.scss
index 599f33558..403504b86 100644
--- a/scss/_labels.scss
+++ b/scss/_labels.scss
@@ -41,8 +41,8 @@ a.label {
 // Make them extra rounded with a modifier to replace v3's badges.
 
 .label-pill {
-  padding-left: .6em;
   padding-right: .6em;
+  padding-left: .6em;
   border-radius: 1rem;
 }
 
diff --git a/scss/_list-group.scss b/scss/_list-group.scss
index d90902290..4e3d73cc5 100644
--- a/scss/_list-group.scss
+++ b/scss/_list-group.scss
@@ -48,8 +48,8 @@
 a.list-group-item,
 button.list-group-item {
   width: 100%;
-  text-align: inherit;
   color: $list-group-link-color;
+  text-align: inherit;
 
   .list-group-item-heading {
     color: $list-group-link-heading-color;
diff --git a/scss/_modal.scss b/scss/_modal.scss
index f034c77c8..046810f5f 100644
--- a/scss/_modal.scss
+++ b/scss/_modal.scss
@@ -26,8 +26,8 @@
 
   // When fading in the modal, animate it to slide down
   &.fade .modal-dialog {
-    transform: translate(0, -25%);
     transition: transform .3s ease-out;
+    transform: translate(0, -25%);
   }
   &.in .modal-dialog { transform: translate(0, 0); }
 }
diff --git a/scss/_navbar.scss b/scss/_navbar.scss
index 61c212144..7fbd4448e 100644
--- a/scss/_navbar.scss
+++ b/scss/_navbar.scss
@@ -35,7 +35,6 @@
   right: 0;
   left: 0;
   z-index: $zindex-navbar-fixed;
-  margin-bottom: 0; // override .navbar defaults
 
   // Undo the rounded corners
   @include media-breakpoint-up(sm) {
@@ -70,9 +69,9 @@
 
 .navbar-brand {
   float: left;
-  margin-right: 1rem;
   padding-top:    .25rem;
   padding-bottom: .25rem;
+  margin-right: 1rem;
   font-size: $font-size-lg;
 
   @include hover-focus {
@@ -90,12 +89,12 @@
   width: 1px;
   padding-top: .425rem;
   padding-bottom: .425rem;
-  overflow: hidden;
-  margin-left:  $navbar-padding-horizontal;
   margin-right: $navbar-padding-horizontal;
+  margin-left:  $navbar-padding-horizontal;
+  overflow: hidden;
 
-  &:before {
-    content: '\00a0';
+  &::before {
+    content: "\00a0";
   }
 }
 
diff --git a/scss/_popover.scss b/scss/_popover.scss
index 2bd8415d5..674a8f31f 100644
--- a/scss/_popover.scss
+++ b/scss/_popover.scss
@@ -29,7 +29,7 @@
       margin-left: -$popover-arrow-outer-width;
       border-top-color: $popover-arrow-outer-color;
       border-bottom-width: 0;
-      &:after {
+      &::after {
         bottom: 1px;
         margin-left: -$popover-arrow-width;
         content: "";
@@ -49,7 +49,7 @@
       margin-top: -$popover-arrow-outer-width;
       border-right-color: $popover-arrow-outer-color;
       border-left-width: 0;
-      &:after {
+      &::after {
         bottom: -$popover-arrow-width;
         left: 1px;
         content: "";
@@ -69,7 +69,7 @@
       margin-left: -$popover-arrow-outer-width;
       border-top-width: 0;
       border-bottom-color: $popover-arrow-outer-color;
-      &:after {
+      &::after {
         top: 1px;
         margin-left: -$popover-arrow-width;
         content: "";
@@ -89,7 +89,7 @@
       margin-top: -$popover-arrow-outer-width;
       border-right-width: 0;
       border-left-color: $popover-arrow-outer-color;
-      &:after {
+      &::after {
         right: 1px;
         bottom: -$popover-arrow-width;
         content: "";
@@ -118,11 +118,11 @@
 
 // Arrows
 //
-// .popover-arrow is outer, .popover-arrow:after is inner
+// .popover-arrow is outer, .popover-arrow::after is inner
 
 .popover-arrow {
   &,
-  &:after {
+  &::after {
     position: absolute;
     display: block;
     width: 0;
@@ -134,7 +134,7 @@
 .popover-arrow {
   border-width: $popover-arrow-outer-width;
 }
-.popover-arrow:after {
+.popover-arrow::after {
   content: "";
   border-width: $popover-arrow-width;
 }
diff --git a/scss/_print.scss b/scss/_print.scss
index 4bbece544..e9cc65e32 100644
--- a/scss/_print.scss
+++ b/scss/_print.scss
@@ -7,8 +7,8 @@
 
 @media print {
   *,
-  *:before,
-  *:after {
+  *::before,
+  *::after {
     text-shadow: none !important;
     box-shadow: none !important;
   }
@@ -18,7 +18,7 @@
     text-decoration: underline;
   }
 
-  abbr[title]:after {
+  abbr[title]::after {
     content: " (" attr(title) ")";
   }
 
diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index fe466da04..0c0accb8b 100644
--- a/scss/_reboot.scss
+++ b/scss/_reboot.scss
@@ -15,15 +15,15 @@
 // recommendations on resolving such conflicts, see
 // http://getbootstrap.com/getting-started/#third-box-sizing.
 //
-// Credit: shttp://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
+// Credit: https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
 
 html {
   box-sizing: border-box;
 }
 
 *,
-*:before,
-*:after {
+*::before,
+*::after {
   box-sizing: inherit;
 }
 
diff --git a/scss/_type.scss b/scss/_type.scss
index 2f5cdb4f9..2d2de68ec 100644
--- a/scss/_type.scss
+++ b/scss/_type.scss
@@ -143,7 +143,7 @@ mark,
     line-height: $line-height;
     color: $blockquote-small-color;
 
-    &:before {
+    &::before {
       content: "\2014 \00A0"; // em dash, nbsp
     }
   }
@@ -159,8 +159,8 @@ mark,
 
   // Account for citation
   footer {
-    &:before { content: ""; }
-    &:after {
+    &::before { content: ""; }
+    &::after {
       content: "\00A0 \2014"; // nbsp, em dash
     }
   }
@@ -176,8 +176,8 @@ mark,
 
   > img {
     @extend .img-responsive;
-    line-height: 1;
     margin-bottom: ($spacer-y / 2);
+    line-height: 1;
   }
 }
 
diff --git a/scss/_utilities-spacing.scss b/scss/_utilities-spacing.scss
index 547bea701..1c2cca468 100644
--- a/scss/_utilities-spacing.scss
+++ b/scss/_utilities-spacing.scss
@@ -40,7 +40,7 @@
 .p-r-0 { padding-right:  0 !important; }
 .p-b-0 { padding-bottom: 0 !important; }
 .p-l-0 { padding-left:   0 !important; }
-.p-x-0 { padding-left:   0 !important; padding-right: 0 !important; }
+.p-x-0 { padding-right:  0 !important; padding-left:   0 !important; }
 .p-y-0 { padding-top:    0 !important; padding-bottom: 0 !important; }
 
 .p-a { padding:        $spacer !important; }
diff --git a/scss/_variables.scss b/scss/_variables.scss
index b655a3f08..b96e45b0e 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -4,7 +4,7 @@
 // the Bootstrap defaults without modifying key, versioned files.
 
 
-// Table of ontents
+// Table of Contents
 //
 // Colors
 // Options
@@ -172,7 +172,7 @@ $blockquote-font-size:        ($font-size-base * 1.25) !default;
 $blockquote-border-color:     $gray-lighter !default;
 
 $hr-border-color:             rgba(0,0,0,.1) !default;
-$hr-border-width:             $border-width;
+$hr-border-width:             $border-width !default;
 
 
 // Components
@@ -212,8 +212,8 @@ $table-border-color:            $gray-lighter !default;
 //
 // For each of Bootstrap's buttons, define text, background and border color.
 
-$btn-padding-x:                  1rem;
-$btn-padding-y:                  .375rem;
+$btn-padding-x:                  1rem !default;
+$btn-padding-y:                  .375rem !default;
 $btn-font-weight:                normal !default;
 
 $btn-primary-color:              #fff !default;
@@ -249,9 +249,9 @@ $btn-padding-x-lg:               1.25rem !default;
 $btn-padding-y-lg:               .75rem !default;
 
 // Allows for customizing button radius independently from global border radius
-$btn-border-radius:              $border-radius;
-$btn-border-radius-lg:           $border-radius-lg;
-$btn-border-radius-sm:           $border-radius-sm;
+$btn-border-radius:              $border-radius !default;
+$btn-border-radius-lg:           $border-radius-lg !default;
+$btn-border-radius-sm:           $border-radius-sm !default;
 
 
 // Forms
@@ -285,7 +285,7 @@ $input-height:                   (($font-size-base * $line-height) + ($input-pad
 $input-height-lg:                (($font-size-lg * $line-height-lg) + ($input-padding-y-lg * 2) + ($border-width * 2)) !default;
 $input-height-sm:                (($font-size-sm * $line-height-sm) + ($input-padding-y-sm * 2) + ($border-width * 2)) !default;
 
-$form-group-margin-bottom:       15px;
+$form-group-margin-bottom:       15px !default;
 
 $input-group-addon-bg:           $gray-lighter !default;
 $input-group-addon-border-color: $input-border !default;
@@ -293,9 +293,9 @@ $input-group-addon-border-color: $input-border !default;
 $cursor-disabled:                not-allowed !default;
 
 // Form validation icons
-$form-icon-success: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNoZWNrIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDYxMiA3OTIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYxMiA3OTIiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGZpbGw9IiM1Q0I4NUMiIGQ9Ik0yMzMuOCw2MTAuMWMtMTMuMywwLTI1LjktNi4yLTM0LTE2LjlMOTAuNSw0NDguOEM3Ni4zLDQzMCw4MCw0MDMuMyw5OC44LDM4OS4xYzE4LjgtMTQuMyw0NS41LTEwLjUsNTkuOCw4LjNsNzEuOSw5NWwyMjAuOS0yNTAuNWMxMi41LTIwLDM4LjgtMjYuMSw1OC44LTEzLjZjMjAsMTIuNCwyNi4xLDM4LjcsMTMuNiw1OC44TDI3MCw1OTBjLTcuNCwxMi0yMC4yLDE5LjQtMzQuMywyMC4xQzIzNS4xLDYxMC4xLDIzNC41LDYxMC4xLDIzMy44LDYxMC4xeiIvPjwvc3ZnPg==";
-$form-icon-warning: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9Ildhcm5pbmciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNjEyIDc5MiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNjEyIDc5MiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZmlsbD0iI0YwQUQ0RSIgZD0iTTYwMyw2NDAuMmwtMjc4LjUtNTA5Yy0zLjgtNi42LTEwLjgtMTAuNi0xOC41LTEwLjZzLTE0LjcsNC4xLTE4LjUsMTAuNkw5LDY0MC4yYy0zLjcsNi41LTMuNiwxNC40LDAuMiwyMC44YzMuOCw2LjUsMTAuOCwxMC40LDE4LjMsMTAuNGg1NTcuMWM3LjUsMCwxNC41LTMuOSwxOC4zLTEwLjRDNjA2LjYsNjU0LjYsNjA2LjcsNjQ2LjYsNjAzLDY0MC4yeiBNMzM2LjYsNjEwLjJoLTYxLjJWNTQ5aDYxLjJWNjEwLjJ6IE0zMzYuNiw1MDMuMWgtNjEuMlYzMDQuMmg2MS4yVjUwMy4xeiIvPjwvc3ZnPg==";
-$form-icon-error: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNyb3NzIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDYxMiA3OTIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYxMiA3OTIiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGZpbGw9IiNEOTUzNEYiIGQ9Ik00NDcsNTQ0LjRjLTE0LjQsMTQuNC0zNy42LDE0LjQtNTEuOSwwTDMwNiw0NTEuN2wtODkuMSw5Mi43Yy0xNC40LDE0LjQtMzcuNiwxNC40LTUxLjksMGMtMTQuNC0xNC40LTE0LjQtMzcuNiwwLTUxLjlsOTIuNC05Ni40TDE2NSwyOTkuNmMtMTQuNC0xNC40LTE0LjQtMzcuNiwwLTUxLjlzMzcuNi0xNC40LDUxLjksMGw4OS4yLDkyLjdsODkuMS05Mi43YzE0LjQtMTQuNCwzNy42LTE0LjQsNTEuOSwwYzE0LjQsMTQuNCwxNC40LDM3LjYsMCw1MS45TDM1NC43LDM5Nmw5Mi40LDk2LjRDNDYxLjQsNTA2LjgsNDYxLjQsNTMwLDQ0Nyw1NDQuNHoiLz48L3N2Zz4=";
+$form-icon-success: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNoZWNrIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDYxMiA3OTIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYxMiA3OTIiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGZpbGw9IiM1Q0I4NUMiIGQ9Ik0yMzMuOCw2MTAuMWMtMTMuMywwLTI1LjktNi4yLTM0LTE2LjlMOTAuNSw0NDguOEM3Ni4zLDQzMCw4MCw0MDMuMyw5OC44LDM4OS4xYzE4LjgtMTQuMyw0NS41LTEwLjUsNTkuOCw4LjNsNzEuOSw5NWwyMjAuOS0yNTAuNWMxMi41LTIwLDM4LjgtMjYuMSw1OC44LTEzLjZjMjAsMTIuNCwyNi4xLDM4LjcsMTMuNiw1OC44TDI3MCw1OTBjLTcuNCwxMi0yMC4yLDE5LjQtMzQuMywyMC4xQzIzNS4xLDYxMC4xLDIzNC41LDYxMC4xLDIzMy44LDYxMC4xeiIvPjwvc3ZnPg==" !default;
+$form-icon-warning: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9Ildhcm5pbmciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNjEyIDc5MiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNjEyIDc5MiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZmlsbD0iI0YwQUQ0RSIgZD0iTTYwMyw2NDAuMmwtMjc4LjUtNTA5Yy0zLjgtNi42LTEwLjgtMTAuNi0xOC41LTEwLjZzLTE0LjcsNC4xLTE4LjUsMTAuNkw5LDY0MC4yYy0zLjcsNi41LTMuNiwxNC40LDAuMiwyMC44YzMuOCw2LjUsMTAuOCwxMC40LDE4LjMsMTAuNGg1NTcuMWM3LjUsMCwxNC41LTMuOSwxOC4zLTEwLjRDNjA2LjYsNjU0LjYsNjA2LjcsNjQ2LjYsNjAzLDY0MC4yeiBNMzM2LjYsNjEwLjJoLTYxLjJWNTQ5aDYxLjJWNjEwLjJ6IE0zMzYuNiw1MDMuMWgtNjEuMlYzMDQuMmg2MS4yVjUwMy4xeiIvPjwvc3ZnPg==" !default;
+$form-icon-error: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNyb3NzIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDYxMiA3OTIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYxMiA3OTIiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGZpbGw9IiNEOTUzNEYiIGQ9Ik00NDcsNTQ0LjRjLTE0LjQsMTQuNC0zNy42LDE0LjQtNTEuOSwwTDMwNiw0NTEuN2wtODkuMSw5Mi43Yy0xNC40LDE0LjQtMzcuNiwxNC40LTUxLjksMGMtMTQuNC0xNC40LTE0LjQtMzcuNiwwLTUxLjlsOTIuNC05Ni40TDE2NSwyOTkuNmMtMTQuNC0xNC40LTE0LjQtMzcuNiwwLTUxLjlzMzcuNi0xNC40LDUxLjksMGw4OS4yLDkyLjdsODkuMS05Mi43YzE0LjQtMTQuNCwzNy42LTE0LjQsNTEuOSwwYzE0LjQsMTQuNCwxNC40LDM3LjYsMCw1MS45TDM1NC43LDM5Nmw5Mi40LDk2LjRDNDYxLjQsNTA2LjgsNDYxLjQsNTMwLDQ0Nyw1NDQuNHoiLz48L3N2Zz4=" !default;
 
 
 // Dropdowns
@@ -341,15 +341,15 @@ $navbar-border-radius:              $border-radius !default;
 $navbar-padding-horizontal:         $spacer !default;
 $navbar-padding-vertical:           ($spacer / 2) !default;
 
-$navbar-dark-color:                 rgba(255,255,255,.5);
-$navbar-dark-hover-color:           rgba(255,255,255,.75);
-$navbar-dark-active-color:          rgba(255,255,255,1);
-$navbar-dark-disabled-color:        rgba(255,255,255,.25);
+$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-light-color:                rgba(0,0,0,.3);
-$navbar-light-hover-color:          rgba(0,0,0,.6);
-$navbar-light-active-color:         rgba(0,0,0,.8);
-$navbar-light-disabled-color:       rgba(0,0,0,.15);
+$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;
 
 
 // Navs
@@ -444,6 +444,16 @@ $state-danger-bg:                #f2dede !default;
 $state-danger-border:            darken($state-danger-bg, 5%) !default;
 
 
+// Cards
+$card-spacer-x:            1.25rem !default;
+$card-spacer-y:            .75rem !default;
+$card-border-width:        .0625rem !default;
+$card-border-radius:       .25rem !default;
+$card-border-color:        #e5e5e5 !default;
+$card-border-radius-inner: ($card-border-radius - $card-border-width) !default;
+
+$card-cap-bg: #f5f5f5;
+
 // Tooltips
 
 $tooltip-max-width:           200px !default;
diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss
index 75d284778..c64f0e8f7 100644
--- a/scss/mixins/_buttons.scss
+++ b/scss/mixins/_buttons.scss
@@ -4,36 +4,46 @@
 // and disabled options for all buttons
 
 @mixin button-variant($color, $background, $border) {
+  $active-background: darken($background, 10%);
+  $active-border: darken($border, 12%);
+
   color: $color;
   background-color: $background;
   border-color: $border;
-//  $shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075);
-//  .box-shadow($shadow);
-
-  $active-background: darken($background, 10%);
-  $active-border: darken($border, 12%);
+  @include box-shadow(inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075));
 
-  &:focus,
-  &.focus,
-  &:active,
-  &.active,
-  .open > &.dropdown-toggle {
+  @include hover {
     color: $color;
     background-color: $active-background;
         border-color: $active-border;
   }
-  @include hover {
+
+  &:focus,
+  &.focus {
     color: $color;
     background-color: $active-background;
         border-color: $active-border;
   }
+
   &:active,
   &.active,
   .open > &.dropdown-toggle {
+    color: $color;
+    background-color: $active-background;
+        border-color: $active-border;
     // Remove the gradient for the pressed/active state
     background-image: none;
     @include box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
+
+    &:hover,
+    &:focus,
+    &.focus {
+      color: $color;
+      background-color: darken($background, 17%);
+          border-color: darken($border, 25%);
+    }
   }
+
   &.disabled,
   &:disabled,
   fieldset[disabled] & {
diff --git a/scss/mixins/_clearfix.scss b/scss/mixins/_clearfix.scss
index dc3e2ab42..d0ae125f3 100644
--- a/scss/mixins/_clearfix.scss
+++ b/scss/mixins/_clearfix.scss
@@ -1,22 +1,7 @@
-// Clearfix
-//
-// For modern browsers
-// 1. The space content is one way to avoid an Opera bug when the
-//    contenteditable attribute is included anywhere else in the document.
-//    Otherwise it causes space to appear at the top and bottom of elements
-//    that are clearfixed.
-// 2. The use of `table` rather than `block` is only necessary if using
-//    `:before` to contain the top-margins of child elements.
-//
-// Source: http://nicolasgallagher.com/micro-clearfix-hack/
-
 @mixin clearfix() {
-  &:before,
-  &:after {
-    content: " "; // 1
-    display: table; // 2
-  }
-  &:after {
+  &::after {
+    content: "";
+    display: table;
     clear: both;
   }
 }
diff --git a/scss/mixins/_grid-framework.scss b/scss/mixins/_grid-framework.scss
index ad2060cbf..aa5f4924a 100644
--- a/scss/mixins/_grid-framework.scss
+++ b/scss/mixins/_grid-framework.scss
@@ -22,15 +22,13 @@
     @include media-breakpoint-up($breakpoint) {
       // Work around cross-media @extend (https://github.com/sass/sass/issues/1050)
       %grid-column-float-#{$breakpoint} {
-        @if $enable-flex {
-          // Do nothing
-        } @else {
-          float: left;
-        }
+        float: left;
       }
       @for $i from 1 through $columns {
         .col-#{$breakpoint}-#{$i} {
-          @extend %grid-column-float-#{$breakpoint};
+          @if not $enable-flex {
+            @extend %grid-column-float-#{$breakpoint};
+          }
           @include make-col-span($i, $columns);
         }
       }
diff --git a/scss/mixins/_list-group.scss b/scss/mixins/_list-group.scss
index a40dda96d..81b0f1634 100644
--- a/scss/mixins/_list-group.scss
+++ b/scss/mixins/_list-group.scss
@@ -1,13 +1,13 @@
 // List Groups
 
 @mixin list-group-item-variant($state, $background, $color) {
-  .list-group-item-#{state} {
+  .list-group-item-#{$state} {
     color: $color;
     background-color: $background;
   }
 
-  a.list-group-item-#{state},
-  button.list-group-item-#{state} {
+  a.list-group-item-#{$state},
+  button.list-group-item-#{$state} {
     color: $color;
 
     .list-group-item-heading {