bootstrap 4.0.0.alpha6 → 4.0.0.beta

data/assets/stylesheets/bootstrap/mixins/_hover.scss

@@ -8,16 +8,18 @@
 //    }
 //  }
 //  @else {
+// scss-lint:disable Indentation
     &:hover { @content }
+// scss-lint:enable Indentation
 //  }
 }
 
+
 @mixin hover-focus {
   @if $enable-hover-media-query {
     &:focus { @content }
     @include hover { @content }
-  }
-  @else {
+  } @else {
     &:focus,
     &:hover {
       @content
@@ -32,8 +34,7 @@
       @content
     }
     @include hover { @content }
-  }
-  @else {
+  } @else {
     &,
     &:focus,
     &:hover {
@@ -49,8 +50,7 @@
       @content
     }
     @include hover { @content }
-  }
-  @else {
+  } @else {
     &:focus,
     &:active,
     &:hover {

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

@@ -6,14 +6,11 @@
     background-color: $background;
   }
 
+  //scss-lint:disable QualifyingElement
   a.list-group-item-#{$state},
   button.list-group-item-#{$state} {
     color: $color;
 
-    .list-group-item-heading {
-      color: inherit;
-    }
-
     @include hover-focus {
       color: $color;
       background-color: darken($background, 5%);
@@ -25,4 +22,5 @@
       border-color: $color;
     }
   }
+  // scss-lint:enable QualifyingElement
 }

data/assets/stylesheets/bootstrap/mixins/_nav-divider.scss

@@ -3,8 +3,8 @@
 // Dividers (basically an hr) within dropdowns and nav lists
 
 @mixin nav-divider($color: #e5e5e5) {
-  height: 1px;
-  margin: ($spacer-y / 2) 0;
+  height: 0;
+  margin: ($spacer / 2) 0;
   overflow: hidden;
-  background-color: $color;
+  border-top: 1px solid $color;
 }

data/assets/stylesheets/bootstrap/mixins/_pagination.scss

@@ -4,6 +4,7 @@
   .page-link {
     padding: $padding-y $padding-x;
     font-size: $font-size;
+    line-height: $line-height;
   }
 
   .page-item {

data/assets/stylesheets/bootstrap/mixins/_reset-text.scss

@@ -1,17 +1,18 @@
+// scss-lint:disable DuplicateProperty
 @mixin reset-text {
   font-family: $font-family-base;
   // We deliberately do NOT reset font-size or word-wrap.
   font-style: normal;
   font-weight: $font-weight-normal;
-  letter-spacing: normal;
-  line-break: auto;
   line-height: $line-height-base;
   text-align: left; // Fallback for where `start` is not supported
   text-align: start;
   text-decoration: none;
   text-shadow: none;
   text-transform: none;
-  white-space: normal;
+  letter-spacing: normal;
   word-break: normal;
   word-spacing: normal;
+  white-space: normal;
+  line-break: auto;
 }

data/assets/stylesheets/bootstrap/mixins/_resize.scss

@@ -1,6 +1,6 @@
 // Resize anything
 
 @mixin resizable($direction) {
-  resize: $direction; // Options: horizontal, vertical, both
   overflow: auto; // Per CSS3 UI, `resize` only applies when `overflow` isn't `visible`
+  resize: $direction; // Options: horizontal, vertical, both
 }

data/assets/stylesheets/bootstrap/mixins/_screen-reader.scss

@@ -1,15 +1,17 @@
 // Only display content to screen readers
 //
 // See: http://a11yproject.com/posts/how-to-hide-content
+// See: http://hugogiraudel.com/2016/10/13/css-hide-and-seek/
 
 @mixin sr-only {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
-  margin: -1px;
   overflow: hidden;
   clip: rect(0,0,0,0);
+  white-space: nowrap;
+  clip-path: inset(50%);
   border: 0;
 }
 
@@ -25,8 +27,9 @@
     position: static;
     width: auto;
     height: auto;
-    margin: 0;
     overflow: visible;
     clip: auto;
+    white-space: normal;
+    clip-path: none;
   }
 }

data/assets/stylesheets/bootstrap/mixins/_text-truncate.scss

@@ -5,4 +5,4 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-}
+}

data/assets/stylesheets/bootstrap/mixins/_transition.scss

@@ -0,0 +1,9 @@
+@mixin transition($transition...) {
+  @if $enable-transitions {
+    @if length($transition) == 0 {
+      transition: $transition-base;
+    } @else {
+      transition: $transition;
+    }
+  }
+}

data/assets/stylesheets/bootstrap/mixins/_visibility.scss

@@ -1,5 +1,5 @@
 // Visibility
 
-@mixin invisible {
-  visibility: hidden !important;
+@mixin invisible($visibility) {
+  visibility: $visibility !important;
 }

data/assets/stylesheets/bootstrap/utilities/_background.scss

@@ -1,19 +1,6 @@
-//
-// Contextual backgrounds
-//
-
-.bg-faded {
-  background-color: darken($body-bg, 3%);
+@each $color, $value in $theme-colors {
+  @include bg-variant('.bg-#{$color}', $value);
 }
 
-@include bg-variant('.bg-primary', $brand-primary);
-
-@include bg-variant('.bg-success', $brand-success);
-
-@include bg-variant('.bg-info', $brand-info);
-
-@include bg-variant('.bg-warning', $brand-warning);
-
-@include bg-variant('.bg-danger', $brand-danger);
-
-@include bg-variant('.bg-inverse', $brand-inverse);
+.bg-white { background-color: $white !important; }
+.bg-transparent { background-color: transparent !important; }

data/assets/stylesheets/bootstrap/utilities/_borders.scss

@@ -2,30 +2,45 @@
 // Border
 //
 
+.border          { border: 1px solid $gray-200 !important; }
 .border-0        { border: 0 !important; }
 .border-top-0    { border-top: 0 !important; }
 .border-right-0  { border-right: 0 !important; }
 .border-bottom-0 { border-bottom: 0 !important; }
 .border-left-0   { border-left: 0 !important; }
 
+@each $color, $value in $theme-colors {
+  .border-#{$color} {
+    border-color: $value !important;
+  }
+}
+
+.border-white {
+  border-color: $white !important;
+}
+
 //
 // Border-radius
 //
 
 .rounded {
-  @include border-radius($border-radius);
+  border-radius: $border-radius !important;
 }
 .rounded-top {
-  @include border-top-radius($border-radius);
+  border-top-left-radius: $border-radius !important;
+  border-top-right-radius: $border-radius !important;
 }
 .rounded-right {
-  @include border-right-radius($border-radius);
+  border-top-right-radius: $border-radius !important;
+  border-bottom-right-radius: $border-radius !important;
 }
 .rounded-bottom {
-  @include border-bottom-radius($border-radius);
+  border-bottom-right-radius: $border-radius !important;
+  border-bottom-left-radius: $border-radius !important;
 }
 .rounded-left {
-  @include border-left-radius($border-radius);
+  border-top-left-radius: $border-radius !important;
+  border-bottom-left-radius: $border-radius !important;
 }
 
 .rounded-circle {

data/assets/stylesheets/bootstrap/utilities/_display.scss

@@ -1,5 +1,5 @@
 //
-// Display utilities
+// Utilities for common `display` values
 //
 
 @each $breakpoint in map-keys($grid-breakpoints) {
@@ -16,3 +16,38 @@
     .d#{$infix}-inline-flex  { display: inline-flex !important; }
   }
 }
+
+
+//
+// Utilities for toggling `display` in print
+//
+
+.d-print-block {
+  display: none !important;
+
+  @media print {
+    display: block !important;
+  }
+}
+
+.d-print-inline {
+  display: none !important;
+
+  @media print {
+    display: inline !important;
+  }
+}
+
+.d-print-inline-block {
+  display: none !important;
+
+  @media print {
+    display: inline-block !important;
+  }
+}
+
+.d-print-none {
+  @media print {
+    display: none !important;
+  }
+}

data/assets/stylesheets/bootstrap/utilities/_flex.scss

@@ -6,10 +6,6 @@
   @include media-breakpoint-up($breakpoint) {
     $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 
-    .flex#{$infix}-first     { order: -1; }
-    .flex#{$infix}-last      { order: 1; }
-    .flex#{$infix}-unordered { order: 0; }
-
     .flex#{$infix}-row            { flex-direction: row !important; }
     .flex#{$infix}-column         { flex-direction: column !important; }
     .flex#{$infix}-row-reverse    { flex-direction: row-reverse !important; }

data/assets/stylesheets/bootstrap/utilities/_position.scss

@@ -17,7 +17,9 @@
 }
 
 .sticky-top {
-  position: sticky;
-  top: 0;
-  z-index: $zindex-sticky;
+  @supports (position: sticky) {
+    position: sticky;
+    top: 0;
+    z-index: $zindex-sticky;
+  }
 }

data/assets/stylesheets/bootstrap/utilities/_spacing.scss

@@ -5,22 +5,20 @@
     $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 
     @each $prop, $abbrev in (margin: m, padding: p) {
-      @each $size, $lengths in $spacers {
-        $length-x: map-get($lengths, x);
-        $length-y: map-get($lengths, y);
+      @each $size, $length in $spacers {
 
-        .#{$abbrev}#{$infix}-#{$size}  { #{$prop}:        $length-y $length-x !important; }
-        .#{$abbrev}t#{$infix}-#{$size} { #{$prop}-top:    $length-y !important; }
-        .#{$abbrev}r#{$infix}-#{$size} { #{$prop}-right:  $length-x !important; }
-        .#{$abbrev}b#{$infix}-#{$size} { #{$prop}-bottom: $length-y !important; }
-        .#{$abbrev}l#{$infix}-#{$size} { #{$prop}-left:   $length-x !important; }
+        .#{$abbrev}#{$infix}-#{$size}  { #{$prop}:        $length !important; }
+        .#{$abbrev}t#{$infix}-#{$size} { #{$prop}-top:    $length !important; }
+        .#{$abbrev}r#{$infix}-#{$size} { #{$prop}-right:  $length !important; }
+        .#{$abbrev}b#{$infix}-#{$size} { #{$prop}-bottom: $length !important; }
+        .#{$abbrev}l#{$infix}-#{$size} { #{$prop}-left:   $length !important; }
         .#{$abbrev}x#{$infix}-#{$size} {
-          #{$prop}-right: $length-x !important;
-          #{$prop}-left:  $length-x !important;
+          #{$prop}-right: $length !important;
+          #{$prop}-left:  $length !important;
         }
         .#{$abbrev}y#{$infix}-#{$size} {
-          #{$prop}-top:    $length-y !important;
-          #{$prop}-bottom: $length-y !important;
+          #{$prop}-top:    $length !important;
+          #{$prop}-bottom: $length !important;
         }
       }
     }

data/assets/stylesheets/bootstrap/utilities/_text.scss

@@ -34,25 +34,13 @@
 
 // Contextual colors
 
-.text-white {
-  color: #fff !important;
-}
-
-@include text-emphasis-variant('.text-muted', $text-muted);
-
-@include text-emphasis-variant('.text-primary', $brand-primary);
-
-@include text-emphasis-variant('.text-success', $brand-success);
+.text-white { color: #fff !important; }
 
-@include text-emphasis-variant('.text-info', $brand-info);
-
-@include text-emphasis-variant('.text-warning', $brand-warning);
-
-@include text-emphasis-variant('.text-danger', $brand-danger);
-
-// Font color
+@each $color, $value in $theme-colors {
+  @include text-emphasis-variant('.text-#{$color}', $value);
+}
 
-@include text-emphasis-variant('.text-gray-dark', $gray-dark);
+.text-muted { color: $text-muted !important; }
 
 // Misc
 

data/assets/stylesheets/bootstrap/utilities/_visibility.scss

@@ -2,54 +2,10 @@
 // Visibility utilities
 //
 
-.invisible {
-  @include invisible();
-}
-
-// Responsive visibility utilities
-
-@each $bp in map-keys($grid-breakpoints) {
-  .hidden-#{$bp}-up {
-    @include media-breakpoint-up($bp) {
-      display: none !important;
-    }
-  }
-  .hidden-#{$bp}-down {
-    @include media-breakpoint-down($bp) {
-      display: none !important;
-    }
-  }
+.visible {
+  @include invisible(visible);
 }
 
-
-// Print utilities
-//
-// Media queries are placed on the inside to be mixin-friendly.
-
-.visible-print-block {
-  display: none !important;
-
-  @media print {
-    display: block !important;
-  }
-}
-.visible-print-inline {
-  display: none !important;
-
-  @media print {
-    display: inline !important;
-  }
-}
-.visible-print-inline-block {
-  display: none !important;
-
-  @media print {
-    display: inline-block !important;
-  }
-}
-
-.hidden-print {
-  @media print {
-    display: none !important;
-  }
+.invisible {
+  @include invisible(hidden);
 }