Merge branch 'v4-dev' into v4-navbars

scss/.scss-lint.yml

@@ -457,7 +457,7 @@ linters:
 
   Shorthand:
     enabled: true
-    allowed_shorthands: [1, 2, 3]
+    allowed_shorthands: [1, 2, 3, 4]
 
   SingleLinePerProperty:
     enabled: false

scss/_popover.scss

@@ -5,7 +5,7 @@
   z-index: $zindex-popover;
   display: block;
   max-width: $popover-max-width;
-  padding: 1px;
+  padding: $popover-inner-padding;
   // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
   // So reset our font and text properties to avoid inheriting weird values.
   @include reset-text();
@@ -112,6 +112,10 @@
   border-bottom: $popover-border-width solid darken($popover-title-bg, 5%);
   $offset-border-width: ($border-width / $font-size-root);
   @include border-radius(($border-radius-lg - $offset-border-width) ($border-radius-lg - $offset-border-width) 0 0);
+
+  &:empty {
+    display: none;
+  }
 }
 
 .popover-content {

scss/_reboot.scss

@@ -171,12 +171,13 @@ a {
   }
 }
 
-// And undo these styles for placeholder links/named anchors (without href).
+// And undo these styles for placeholder links/named anchors (without href)
+// which have not been made explicitly keyboard-focusable (without tabindex).
 // It would be more straightforward to just use a[href] in previous block, but that
 // causes specificity issues in many other styles that are too complex to fix.
 // See https://github.com/twbs/bootstrap/issues/19402
 
-a:not([href]) {
+a:not([href]):not([tabindex]) {
   color: inherit;
   text-decoration: none;
 

scss/_variables.scss

@@ -21,7 +21,11 @@
   $prev-key: null;
   $prev-num: null;
   @each $key, $num in $map {
-    @if $prev-num != null and $prev-num >= $num {
+    @if $prev-num == null {
+      // Do nothing
+    } @else if not comparable($prev-num, $num) {
+      @warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
+    } @else if $prev-num >= $num {
       @warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !";
     }
     $prev-key: $key;
@@ -614,6 +618,7 @@ $tooltip-arrow-color:         $tooltip-bg !default;
 
 // Popovers
 
+$popover-inner-padding:               1px !default;
 $popover-bg:                          #fff !default;
 $popover-max-width:                   276px !default;
 $popover-border-width:                $border-width !default;

scss/bootstrap.scss

@@ -1,5 +1,6 @@
 /*!
  * Bootstrap v4.0.0-alpha.2 (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)
  */

scss/mixins/_grid-framework.scss

@@ -4,22 +4,32 @@
 // any value of `$grid-columns`.
 
 @mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
+
+  // Common properties for all breakpoints
+  %grid-column {
+    position: relative;
+    // Prevent columns from collapsing when empty
+    min-height: 1px;
+    // Inner gutter via padding
+    padding-right: ($gutter / 2);
+    padding-left: ($gutter / 2);
+
+    @if $enable-flex {
+      width: 100%;
+    }
+  }
+
   $breakpoint-counter: 0;
   @each $breakpoint in map-keys($breakpoints) {
     $breakpoint-counter: ($breakpoint-counter + 1);
-    @include media-breakpoint-up($breakpoint, $breakpoints) {
-      @if $enable-flex {
-        .col-#{$breakpoint} {
-          position: relative;
-          flex-basis: 0;
-          flex-grow: 1;
-          max-width: 100%;
-          min-height: 1px;
-          padding-right: ($gutter / 2);
-          padding-left:  ($gutter / 2);
-        }
-      }
 
+    @for $i from 1 through $columns {
+      .col-#{$breakpoint}-#{$i} {
+        @extend %grid-column;
+      }
+    }
+
+    @include media-breakpoint-up($breakpoint, $breakpoints) {
       @for $i from 1 through $columns {
         .col-#{$breakpoint}-#{$i} {
           @include make-col($i, $columns, $gutter);

scss/mixins/_grid.scss

@@ -33,12 +33,21 @@
   margin-right: ($gutter / -2);
 }
 
-@mixin make-col($size, $columns: $grid-columns, $gutter: $grid-gutter-width) {
+@mixin make-col-ready($size, $columns: $grid-columns, $gutter: $grid-gutter-width) {
   position: relative;
-  min-height: 1px;
+  min-height: 1px; // Prevent collapsing
   padding-right: ($gutter / 2);
   padding-left:  ($gutter / 2);
 
+  // Prevent columns from becoming too narrow when at smaller grid tiers by
+  // always setting `width: 100%;`. This works because we use `flex` values
+  // later on to override this initial width.
+  @if $enable-flex {
+    width: 100%;
+  }
+}
+
+@mixin make-col($size, $columns: $grid-columns, $gutter: $grid-gutter-width) {
   @if $enable-flex {
     flex: 0 0 percentage($size / $columns);
     // Add a `max-width` to ensure content within each column does not blow out

scss/mixins/_hover.scss

@@ -1,14 +1,15 @@
 @mixin hover {
-  @if $enable-hover-media-query {
-    // See Media Queries Level 4: http://drafts.csswg.org/mediaqueries/#hover
-    // Currently shimmed by https://github.com/twbs/mq4-hover-shim
-    @media (hover: hover) {
-      &:hover { @content }
-    }
-  }
-  @else {
+  // TODO: re-enable along with mq4-hover-shim
+//  @if $enable-hover-media-query {
+//    // See Media Queries Level 4: http://drafts.csswg.org/mediaqueries/#hover
+//    // Currently shimmed by https://github.com/twbs/mq4-hover-shim
+//    @media (hover: hover) {
+//      &:hover { @content }
+//    }
+//  }
+//  @else {
     &:hover { @content }
-  }
+//  }
 }
 
 @mixin hover-focus {

scss/mixins/_tab-focus.scss

@@ -1,9 +1,9 @@
 // WebKit-style focus
 
 @mixin tab-focus() {
-  // Default
-  outline: thin dotted;
-  // WebKit
+  // WebKit-specific. Other browsers will keep their default outline style.
+  // (Initially tried to also force default via `outline: initial`,
+  // but that seems to erroneously remove the outline in Firefox altogether.)
   outline: 5px auto -webkit-focus-ring-color;
   outline-offset: -2px;
 }

scss/utilities/_flex.scss

@@ -8,6 +8,7 @@
     @include media-breakpoint-up($breakpoint) {
       .flex-#{$breakpoint}-first { order: -1; }
       .flex-#{$breakpoint}-last { order: 1; }
+      .flex-#{$breakpoint}-unordered { order: 0; }
     }
 
     // Alignment for every item