bootstrap 4.0.0.beta → 4.0.0.beta2

data/assets/stylesheets/bootstrap/_card.scss

@@ -12,6 +12,23 @@
   background-clip: border-box;
   border: $card-border-width solid $card-border-color;
   @include border-radius($card-border-radius);
+
+  > hr {
+    margin-right: 0;
+    margin-left: 0;
+  }
+
+  > .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 {
+      @include border-bottom-radius($card-border-radius);
+    }
+  }
 }
 
 .card-body {
@@ -44,21 +61,6 @@
   }
 }
 
-.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 {
-      @include border-bottom-radius($card-border-radius);
-    }
-  }
-}
-
-
 //
 // Optional textual caps
 //
@@ -72,6 +74,12 @@
   &:first-child {
     @include border-radius($card-inner-border-radius $card-inner-border-radius 0 0);
   }
+
+  + .list-group {
+    .list-group-item:first-child {
+      border-top: 0;
+    }
+  }
 }
 
 .card-footer {
@@ -130,18 +138,26 @@
 
 // Card deck
 
-@include media-breakpoint-up(sm) {
-  .card-deck {
-    display: flex;
+.card-deck {
+  display: flex;
+  flex-direction: column;
+
+  .card {
+    margin-bottom: $card-deck-margin;
+  }
+
+  @include media-breakpoint-up(sm) {
     flex-flow: row wrap;
     margin-right: -$card-deck-margin;
     margin-left: -$card-deck-margin;
 
     .card {
       display: flex;
+      // Flexbugs #4: https://github.com/philipwalton/flexbugs#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored
       flex: 1 0 0%;
       flex-direction: column;
       margin-right: $card-deck-margin;
+      margin-bottom: 0; // Override the default
       margin-left: $card-deck-margin;
     }
   }
@@ -152,13 +168,21 @@
 // Card groups
 //
 
-@include media-breakpoint-up(sm) {
-  .card-group {
-    display: flex;
+.card-group {
+  display: flex;
+  flex-direction: column;
+
+  .card {
+    margin-bottom: $card-group-margin;
+  }
+
+  @include media-breakpoint-up(sm) {
     flex-flow: row wrap;
 
     .card {
+      // Flexbugs #4: https://github.com/philipwalton/flexbugs#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored
       flex: 1 0 0%;
+      margin-bottom: 0;
 
       + .card {
         margin-left: 0;
@@ -177,6 +201,7 @@
             border-bottom-right-radius: 0;
           }
         }
+
         &:last-child {
           @include border-left-radius(0);
 
@@ -188,7 +213,18 @@
           }
         }
 
-        &:not(:first-child):not(:last-child) {
+        &:only-child {
+          @include border-radius($card-border-radius);
+
+          .card-img-top {
+            @include border-top-radius($card-border-radius);
+          }
+          .card-img-bottom {
+            @include border-bottom-radius($card-border-radius);
+          }
+        }
+
+        &:not(:first-child):not(:last-child):not(:only-child) {
           border-radius: 0;
 
           .card-img-top,

data/assets/stylesheets/bootstrap/_carousel.scss

@@ -90,9 +90,15 @@
 }
 .carousel-control-prev {
   left: 0;
+  @if $enable-gradients {
+    background: linear-gradient(90deg, rgba(0,0,0,.25), rgba(0,0,0,.001));
+  }
 }
 .carousel-control-next {
   right: 0;
+  @if $enable-gradients {
+    background: linear-gradient(270deg, rgba(0,0,0,.25), rgba(0,0,0,.001));
+  }
 }
 
 // Icons for within

data/assets/stylesheets/bootstrap/_close.scss

@@ -19,11 +19,11 @@
 // If you want the anchor version, it requires `href="#"`.
 // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
 
-// scss-lint:disable QualifyingElement
+// stylelint-disable property-no-vendor-prefix, selector-no-qualifying-type
 button.close {
   padding: 0;
   background: transparent;
   border: 0;
   -webkit-appearance: none;
 }
-// scss-lint:enable QualifyingElement
+// stylelint-enable

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

@@ -1,5 +1,3 @@
-// scss-lint:disable PropertyCount, VendorPrefix
-
 // Embedded icons from Open Iconic.
 // Released under MIT and copyright 2014 Waybury.
 // https://useiconic.com/open
@@ -24,7 +22,7 @@
 
   &:checked ~ .custom-control-indicator {
     color: $custom-control-indicator-checked-color;
-    background-color: $custom-control-indicator-checked-bg;
+    @include gradient-bg($custom-control-indicator-checked-bg);
     @include box-shadow($custom-control-indicator-checked-box-shadow);
   }
 
@@ -35,7 +33,7 @@
 
   &:active ~ .custom-control-indicator {
     color: $custom-control-indicator-active-color;
-    background-color: $custom-control-indicator-active-bg;
+    @include gradient-bg($custom-control-indicator-active-bg);
     @include box-shadow($custom-control-indicator-active-box-shadow);
   }
 
@@ -164,6 +162,11 @@
     }
   }
 
+  &[multiple] {
+    height: auto;
+    background-image: none;
+  }
+
   &:disabled {
     color: $custom-select-disabled-color;
     background-color: $custom-select-disabled-bg;
@@ -203,7 +206,7 @@
   opacity: 0;
 
   &:focus ~ .custom-file-control {
-    @include box-shadow($custom-file-focus-box-shadow);
+    box-shadow: $custom-file-focus-box-shadow;
   }
 }
 
@@ -214,7 +217,7 @@
   left: 0;
   z-index: 5;
   height: $custom-file-height;
-  padding: $custom-file-padding-x $custom-file-padding-y;
+  padding: $custom-file-padding-y $custom-file-padding-x;
   line-height: $custom-file-line-height;
   color: $custom-file-color;
   pointer-events: none;
@@ -238,10 +241,10 @@
     z-index: 6;
     display: block;
     height: $custom-file-height;
-    padding: $custom-file-padding-x $custom-file-padding-y;
+    padding: $custom-file-padding-y $custom-file-padding-x;
     line-height: $custom-file-line-height;
     color: $custom-file-button-color;
-    background-color: $custom-file-button-bg;
+    @include gradient-bg($custom-file-button-bg);
     border: $custom-file-border-width solid $custom-file-border-color;
     @include border-radius(0 $custom-file-border-radius $custom-file-border-radius 0);
   }

data/assets/stylesheets/bootstrap/_dropdown.scss

@@ -6,37 +6,7 @@
 
 .dropdown-toggle {
   // Generate the caret automatically
-  &::after {
-    display: inline-block;
-    width: 0;
-    height: 0;
-    margin-left: $caret-width * .85;
-    vertical-align: $caret-width * .85;
-    content: "";
-    border-top: $caret-width solid;
-    border-right: $caret-width solid transparent;
-    border-left: $caret-width solid transparent;
-  }
-
-  &:empty::after {
-    margin-left: 0;
-  }
-}
-
-// Allow for dropdowns to go bottom up (aka, dropup-menu)
-// Just add .dropup after the standard .dropdown class and you're set.
-.dropup {
-  .dropdown-menu {
-    margin-top: 0;
-    margin-bottom: $dropdown-spacer;
-  }
-
-  .dropdown-toggle {
-    &::after {
-      border-top: 0;
-      border-bottom: $caret-width solid;
-    }
-  }
+  @include caret;
 }
 
 // The dropdown menu
@@ -61,6 +31,19 @@
   @include box-shadow($dropdown-box-shadow);
 }
 
+// Allow for dropdowns to go bottom up (aka, dropup-menu)
+// Just add .dropup after the standard .dropdown class and you're set.
+.dropup {
+  .dropdown-menu {
+    margin-top: 0;
+    margin-bottom: $dropdown-spacer;
+  }
+
+  .dropdown-toggle {
+    @include caret(up);
+  }
+}
+
 // Dividers (basically an `<hr>`) within the dropdown
 .dropdown-divider {
   @include nav-divider($dropdown-divider-bg);
@@ -84,14 +67,14 @@
   @include hover-focus {
     color: $dropdown-link-hover-color;
     text-decoration: none;
-    background-color: $dropdown-link-hover-bg;
+    @include gradient-bg($dropdown-link-hover-bg);
   }
 
   &.active,
   &:active {
     color: $dropdown-link-active-color;
     text-decoration: none;
-    background-color: $dropdown-link-active-bg;
+    @include gradient-bg($dropdown-link-active-bg);
   }
 
   &.disabled,
@@ -105,14 +88,6 @@
   }
 }
 
-// Open state for the dropdown
-.show {
-  // Remove the outline when :focus is triggered
-  > a {
-    outline: 0;
-  }
-}
-
 .dropdown-menu.show {
   display: block;
 }

data/assets/stylesheets/bootstrap/_forms.scss

@@ -1,4 +1,4 @@
-// scss-lint:disable QualifyingElement, VendorPrefix
+// stylelint-disable selector-no-qualifying-type
 
 //
 // Textual form controls
@@ -7,8 +7,6 @@
 .form-control {
   display: block;
   width: 100%;
-  // // Make inputs at least the height of their button counterpart (base line-height + padding + border)
-  // height: $input-height;
   padding: $input-btn-padding-y $input-btn-padding-x;
   font-size: $font-size-base;
   line-height: $input-btn-line-height;
@@ -90,21 +88,24 @@ select.form-control {
 // For use with horizontal and inline forms, when you need the label text to
 // align with the form controls.
 .col-form-label {
-  padding-top: calc(#{$input-btn-padding-y} - #{$input-btn-border-width} * 2);
-  padding-bottom: calc(#{$input-btn-padding-y} - #{$input-btn-border-width} * 2);
+  padding-top: calc(#{$input-btn-padding-y} + #{$input-btn-border-width});
+  padding-bottom: calc(#{$input-btn-padding-y} + #{$input-btn-border-width});
   margin-bottom: 0; // Override the `<label>` default
+  line-height: $input-btn-line-height;
 }
 
 .col-form-label-lg {
-  padding-top: calc(#{$input-btn-padding-y-lg} - #{$input-btn-border-width} * 2);
-  padding-bottom: calc(#{$input-btn-padding-y-lg} - #{$input-btn-border-width} * 2);
+  padding-top: calc(#{$input-btn-padding-y-lg} + #{$input-btn-border-width});
+  padding-bottom: calc(#{$input-btn-padding-y-lg} + #{$input-btn-border-width});
   font-size: $font-size-lg;
+  line-height: $input-btn-line-height-lg;
 }
 
 .col-form-label-sm {
-  padding-top: calc(#{$input-btn-padding-y-sm} - #{$input-btn-border-width} * 2);
-  padding-bottom: calc(#{$input-btn-padding-y-sm} - #{$input-btn-border-width} * 2);
+  padding-top: calc(#{$input-btn-padding-y-sm} + #{$input-btn-border-width});
+  padding-bottom: calc(#{$input-btn-padding-y-sm} + #{$input-btn-border-width});
   font-size: $font-size-sm;
+  line-height: $input-btn-line-height-sm;
 }
 
 
@@ -132,6 +133,7 @@ select.form-control {
   padding-bottom: $input-btn-padding-y;
   margin-bottom: 0; // match inputs if this class comes on inputs with default margins
   line-height: $input-btn-line-height;
+  background-color: transparent;
   border: solid transparent;
   border-width: $input-btn-border-width 0;
 
@@ -236,23 +238,16 @@ select.form-control-lg {
   position: absolute;
   margin-top: $form-check-input-margin-y;
   margin-left: -$form-check-input-gutter;
-
-  &:only-child {
-    position: static;
-  }
 }
 
 // Radios and checkboxes on same line
 .form-check-inline {
   display: inline-block;
+  margin-right: $form-check-inline-margin-x;
 
   .form-check-label {
     vertical-align: middle;
   }
-
-  + .form-check-inline {
-    margin-left: $form-check-inline-margin-x;
-  }
 }
 
 
@@ -263,28 +258,6 @@ select.form-control-lg {
 // pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for
 // server side validation.
 
-.invalid-feedback {
-  display: none;
-  margin-top: .25rem;
-  font-size: .875rem;
-  color: $form-feedback-invalid-color;
-}
-
-.invalid-tooltip {
-  position: absolute;
-  top: 100%;
-  z-index: 5;
-  display: none;
-  width: 250px;
-  padding: .5rem;
-  margin-top: .1rem;
-  font-size: .875rem;
-  line-height: 1;
-  color: #fff;
-  background-color: rgba($form-feedback-invalid-color,.8);
-  border-radius: .2rem;
-}
-
 @include form-validation-state("valid", $form-feedback-valid-color);
 @include form-validation-state("invalid", $form-feedback-invalid-color);
 
@@ -343,11 +316,6 @@ select.form-control-lg {
       width: auto;
     }
 
-    .form-control-label {
-      margin-bottom: 0;
-      vertical-align: middle;
-    }
-
     // Remove default margin on radios/checkboxes that were used for stacking, and
     // then undo the floating of radios and checkboxes to match.
     .form-check {

data/assets/stylesheets/bootstrap/_functions.scss

@@ -49,7 +49,7 @@
 }
 
 // Color contrast
-@mixin color-yiq($color) {
+@function color-yiq($color) {
   $r: red($color);
   $g: green($color);
   $b: blue($color);
@@ -57,9 +57,9 @@
   $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
 
   @if ($yiq >= 150) {
-    color: #111;
+    @return #111;
   } @else {
-    color: #fff;
+    @return #fff;
   }
 }
 
@@ -72,7 +72,7 @@
   @return map-get($theme-colors, $key);
 }
 
-@function grayscale($key: "100") {
+@function gray($key: "100") {
   @return map-get($grays, $key);
 }
 
@@ -80,11 +80,7 @@
 @function theme-color-level($color-name: "primary", $level: 0) {
   $color: theme-color($color-name);
   $color-base: if($level > 0, #000, #fff);
+  $level: abs($level);
 
-  @if $level < 0 {
-    // Lighter values need a quick double negative for the Sass math to work
-    @return mix($color-base, $color, $level * -1 * $theme-color-interval);
-  } @else {
-    @return mix($color-base, $color, $level * $theme-color-interval);
-  }
+  @return mix($color-base, $color, $level * $theme-color-interval);
 }