bootstrap 4.0.0.alpha6 → 4.0.0.beta

data/assets/stylesheets/bootstrap/_functions.scss

@@ -0,0 +1,90 @@
+// Bootstrap functions
+//
+// Utility mixins and functions for evalutating source code across our variables, maps, and mixins.
+
+// Ascending
+// Used to evaluate Sass maps like our grid breakpoints.
+@mixin _assert-ascending($map, $map-name) {
+  $prev-key: null;
+  $prev-num: null;
+  @each $key, $num in $map {
+    @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;
+    $prev-num: $num;
+  }
+}
+
+// Starts at zero
+// Another grid mixin that ensures the min-width of the lowest breakpoint starts at 0.
+@mixin _assert-starts-at-zero($map) {
+  $values: map-values($map);
+  $first-value: nth($values, 1);
+  @if $first-value != 0 {
+    @warn "First breakpoint in `$grid-breakpoints` must start at 0, but starts at #{$first-value}.";
+  }
+}
+
+// Replace `$search` with `$replace` in `$string`
+// Used on our SVG icon backgrounds for custom forms.
+//
+// @author Hugo Giraudel
+// @param {String} $string - Initial string
+// @param {String} $search - Substring to replace
+// @param {String} $replace ('') - New value
+// @return {String} - Updated string
+@function str-replace($string, $search, $replace: "") {
+  $index: str-index($string, $search);
+
+  @if $index {
+    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+  }
+
+  @return $string;
+}
+
+// Color contrast
+@mixin color-yiq($color) {
+  $r: red($color);
+  $g: green($color);
+  $b: blue($color);
+
+  $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
+
+  @if ($yiq >= 150) {
+    color: #111;
+  } @else {
+    color: #fff;
+  }
+}
+
+// Retreive color Sass maps
+@function color($key: "blue") {
+  @return map-get($colors, $key);
+}
+
+@function theme-color($key: "primary") {
+  @return map-get($theme-colors, $key);
+}
+
+@function grayscale($key: "100") {
+  @return map-get($grays, $key);
+}
+
+// Request a theme color level
+@function theme-color-level($color-name: "primary", $level: 0) {
+  $color: theme-color($color-name);
+  $color-base: if($level > 0, #000, #fff);
+
+  @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);
+  }
+}

data/assets/stylesheets/bootstrap/_grid.scss

@@ -11,11 +11,12 @@
 
 // Fluid container
 //
-// Utilizes the mixin meant for fixed width containers, but without any defined
-// width for fluid, full width layouts.
+// Utilizes the mixin meant for fixed width containers, but with 100% width for
+// fluid, full width layouts.
 
 @if $enable-grid-classes {
   .container-fluid {
+    width: 100%;
     @include make-container();
   }
 }

data/assets/stylesheets/bootstrap/_images.scss

@@ -33,7 +33,7 @@
 }
 
 .figure-img {
-  margin-bottom: ($spacer-y / 2);
+  margin-bottom: ($spacer / 2);
   line-height: 1;
 }
 

data/assets/stylesheets/bootstrap/_input-group.scss

@@ -30,8 +30,7 @@
 .input-group .form-control {
   // Vertically centers the content of the addons within the input group
   display: flex;
-  flex-direction: column;
-  justify-content: center;
+  align-items: center;
 
   &:not(:first-child):not(:last-child) {
     @include border-radius(0);
@@ -67,11 +66,11 @@
 //
 
 .input-group-addon {
-  padding: $input-padding-y $input-padding-x;
+  padding: $input-btn-padding-y $input-btn-padding-x;
   margin-bottom: 0; // Allow use of <label> elements by overriding our default margin-bottom
   font-size: $font-size-base; // Match inputs
   font-weight: $font-weight-normal;
-  line-height: $input-line-height;
+  line-height: $input-btn-line-height;
   color: $input-color;
   text-align: center;
   background-color: $input-group-addon-bg;
@@ -80,12 +79,13 @@
 
   // Sizing
   &.form-control-sm {
-    padding: $input-padding-y-sm $input-padding-x-sm;
+    padding: $input-btn-padding-y-sm $input-btn-padding-x-sm;
     font-size: $font-size-sm;
     @include border-radius($input-border-radius-sm);
   }
+
   &.form-control-lg {
-    padding: $input-padding-y-lg $input-padding-x-lg;
+    padding: $input-btn-padding-y-lg $input-btn-padding-x-lg;
     font-size: $font-size-lg;
     @include border-radius($input-border-radius-lg);
   }
@@ -144,8 +144,6 @@
   // element above the siblings.
   > .btn {
     position: relative;
-    // Vertically stretch the button and center its content
-    flex: 1;
 
     + .btn {
       margin-left: (-$input-btn-border-width);

data/assets/stylesheets/bootstrap/_jumbotron.scss

@@ -9,10 +9,6 @@
   }
 }
 
-.jumbotron-hr {
-  border-top-color: darken($jumbotron-bg, 10%);
-}
-
 .jumbotron-fluid {
   padding-right: 0;
   padding-left: 0;

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

@@ -19,23 +19,19 @@
 
 .list-group-item-action {
   width: 100%; // For `<button>`s (anchors become 100% by default though)
-  color: $list-group-link-color;
+  color: $list-group-action-color;
   text-align: inherit; // For `<button>`s (anchors inherit)
 
-  .list-group-item-heading {
-    color: $list-group-link-heading-color;
-  }
-
   // Hover state
   @include hover-focus {
-    color: $list-group-link-hover-color;
+    color: $list-group-action-hover-color;
     text-decoration: none;
     background-color: $list-group-hover-bg;
   }
 
   &:active {
-    color: $list-group-link-active-color;
-    background-color: $list-group-link-active-bg;
+    color: $list-group-action-active-color;
+    background-color: $list-group-action-active-bg;
   }
 }
 
@@ -46,9 +42,7 @@
 
 .list-group-item {
   position: relative;
-  display: flex;
-  flex-flow: row wrap;
-  align-items: center;
+  display: block;
   padding: $list-group-item-padding-y $list-group-item-padding-x;
   // Place the border on the list items and negative margin up for better styling
   margin-bottom: -$list-group-border-width;
@@ -71,16 +65,7 @@
   &.disabled,
   &:disabled {
     color: $list-group-disabled-color;
-    cursor: $cursor-disabled;
     background-color: $list-group-disabled-bg;
-
-    // Force color to inherit for custom content
-    .list-group-item-heading {
-      color: inherit;
-    }
-    .list-group-item-text {
-      color: $list-group-disabled-text-color;
-    }
   }
 
   // Include both here for `<a>`s and `<button>`s
@@ -88,18 +73,7 @@
     z-index: 2; // Place active items above their siblings for proper border styling
     color: $list-group-active-color;
     background-color: $list-group-active-bg;
-    border-color: $list-group-active-border;
-
-    // Force color to inherit for custom content
-    .list-group-item-heading,
-    .list-group-item-heading > small,
-    .list-group-item-heading > .small {
-      color: inherit;
-    }
-
-    .list-group-item-text {
-      color: $list-group-active-text-color;
-    }
+    border-color: $list-group-active-border-color;
   }
 }
 
@@ -135,7 +109,6 @@
 // Add modifier classes to change text and background color on individual items.
 // Organizationally, this must come after the `:hover` states.
 
-@include list-group-item-variant(success, $state-success-bg, $state-success-text);
-@include list-group-item-variant(info, $state-info-bg, $state-info-text);
-@include list-group-item-variant(warning, $state-warning-bg, $state-warning-text);
-@include list-group-item-variant(danger, $state-danger-bg, $state-danger-text);
+@each $color, $value in $theme-colors {
+  @include list-group-item-variant($color, theme-color-level($color, -9), theme-color-level($color, 6));
+}

data/assets/stylesheets/bootstrap/_mixins.scss

@@ -2,22 +2,6 @@
 //
 // Used in conjunction with global variables to enable certain theme features.
 
-@mixin box-shadow($shadow...) {
-  @if $enable-shadows {
-    box-shadow: $shadow;
-  }
-}
-
-@mixin transition($transition...) {
-  @if $enable-transitions {
-    @if length($transition) == 0 {
-      transition: $transition-base;
-    } @else {
-      transition: $transition;
-    }
-  }
-}
-
 // Utilities
 @import "mixins/breakpoints";
 @import "mixins/hover";
@@ -30,13 +14,11 @@
 @import "mixins/text-emphasis";
 @import "mixins/text-hide";
 @import "mixins/text-truncate";
-@import "mixins/transforms";
 @import "mixins/visibility";
 
 // // Components
 @import "mixins/alert";
 @import "mixins/buttons";
-@import "mixins/cards";
 @import "mixins/pagination";
 @import "mixins/lists";
 @import "mixins/list-group";
@@ -47,7 +29,9 @@
 // // Skins
 @import "mixins/background-variant";
 @import "mixins/border-radius";
+@import "mixins/box-shadow";
 @import "mixins/gradients";
+@import "mixins/transition";
 
 // // Layout
 @import "mixins/clearfix";

data/assets/stylesheets/bootstrap/_modal.scss

@@ -54,7 +54,7 @@
   background-clip: padding-box;
   border: $modal-content-border-width solid $modal-content-border-color;
   @include border-radius($border-radius-lg);
-  @include box-shadow($modal-content-xs-box-shadow);
+  @include box-shadow($modal-content-box-shadow-xs);
   // Remove focus outline from opened modal
   outline: 0;
 }
@@ -127,11 +127,11 @@
   // Automatically set modal's width for larger viewports
   .modal-dialog {
     max-width: $modal-md;
-    margin: $modal-dialog-sm-up-margin-y auto;
+    margin: $modal-dialog-margin-y-sm-up auto;
   }
 
   .modal-content {
-    @include box-shadow($modal-content-sm-up-box-shadow);
+    @include box-shadow($modal-content-box-shadow-sm-up);
   }
 
   .modal-sm { max-width: $modal-sm; }

data/assets/stylesheets/bootstrap/_nav.scss

@@ -5,6 +5,7 @@
 
 .nav {
   display: flex;
+  flex-wrap: wrap;
   padding-left: 0;
   margin-bottom: 0;
   list-style: none;
@@ -12,20 +13,18 @@
 
 .nav-link {
   display: block;
-  padding: $nav-link-padding;
+  padding: $nav-link-padding-y $nav-link-padding-x;
 
   @include hover-focus {
     text-decoration: none;
   }
 
-  // Disabled state lightens text and removes hover/tab effects
+  // Disabled state lightens text
   &.disabled {
-    color: $nav-disabled-link-color;
-    cursor: $cursor-disabled;
+    color: $nav-link-disabled-color;
   }
 }
 
-
 //
 // Tabs
 //
@@ -46,7 +45,7 @@
     }
 
     &.disabled {
-      color: $nav-disabled-link-color;
+      color: $nav-link-disabled-color;
       background-color: transparent;
       border-color: transparent;
     }
@@ -54,9 +53,9 @@
 
   .nav-link.active,
   .nav-item.show .nav-link {
-    color: $nav-tabs-active-link-hover-color;
-    background-color: $nav-tabs-active-link-hover-bg;
-    border-color: $nav-tabs-active-link-hover-border-color $nav-tabs-active-link-hover-border-color $nav-tabs-active-link-hover-bg;
+    color: $nav-tabs-link-active-color;
+    background-color: $nav-tabs-link-active-bg;
+    border-color: $nav-tabs-link-active-border-color $nav-tabs-link-active-border-color $nav-tabs-link-active-bg;
   }
 
   .dropdown-menu {
@@ -75,13 +74,12 @@
 .nav-pills {
   .nav-link {
     @include border-radius($nav-pills-border-radius);
-  }
 
-  .nav-link.active,
-  .nav-item.show .nav-link {
-    color: $nav-pills-active-link-color;
-    cursor: default;
-    background-color: $nav-pills-active-link-bg;
+    &.active,
+    .show > & {
+      color: $nav-pills-link-active-color;
+      background-color: $nav-pills-link-active-bg;
+    }
   }
 }
 
@@ -99,7 +97,8 @@
 
 .nav-justified {
   .nav-item {
-    flex: 1 1 100%;
+    flex-basis: 0;
+    flex-grow: 1;
     text-align: center;
   }
 }

data/assets/stylesheets/bootstrap/_navbar.scss

@@ -18,8 +18,20 @@
 .navbar {
   position: relative;
   display: flex;
-  flex-direction: column;
+  flex-wrap: wrap; // allow us to do the line break for collapsing content
+  align-items: center;
+  justify-content: space-between; // space out brand from logo
   padding: $navbar-padding-y $navbar-padding-x;
+
+  // Because flex properties aren't inherited, we need to redeclare these first
+  // few properities so that content nested within behave properly.
+  > .container,
+  > .container-fluid {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+  }
 }
 
 
@@ -29,10 +41,10 @@
 
 .navbar-brand {
   display: inline-block;
-  padding-top: .25rem;
-  padding-bottom: .25rem;
+  padding-top: $navbar-brand-padding-y;
+  padding-bottom: $navbar-brand-padding-y;
   margin-right: $navbar-padding-x;
-  font-size: $font-size-lg;
+  font-size: $navbar-brand-font-size;
   line-height: inherit;
   white-space: nowrap;
 
@@ -57,6 +69,11 @@
     padding-right: 0;
     padding-left: 0;
   }
+
+  .dropdown-menu {
+    position: static;
+    float: none;
+  }
 }
 
 
@@ -66,8 +83,8 @@
 
 .navbar-text {
   display: inline-block;
-  padding-top:    .425rem;
-  padding-bottom: .425rem;
+  padding-top: $nav-link-padding-y;
+  padding-bottom: $nav-link-padding-y;
 }
 
 
@@ -76,9 +93,18 @@
 // Custom styles for responsive collapsing and toggling of navbar contents.
 // Powered by the collapse Bootstrap JavaScript plugin.
 
+// When collapsed, prevent the toggleable navbar contents from appearing in
+// the default flexbox row orienation. Requires the use of `flex-wrap: wrap`
+// on the `.navbar` parent.
+.navbar-collapse {
+  flex-basis: 100%;
+  // For always expanded or extra full navbars, ensure content aligns itself
+  // properly vertically. Can be easily overridden with flex utilities.
+  align-items: center;
+}
+
 // Button for toggling the navbar when in its collapsed state
 .navbar-toggler {
-  align-self: flex-start; // Prevent toggler from growing to full width when it's the only visible navbar child
   padding: $navbar-toggler-padding-y $navbar-toggler-padding-x;
   font-size: $navbar-toggler-font-size;
   line-height: 1;
@@ -103,34 +129,17 @@
   background-size: 100% 100%;
 }
 
-// Use `position` on the toggler to prevent it from being auto placed as a flex
-// item and allow easy placement.
-.navbar-toggler-left {
-  position: absolute;
-  left: $navbar-padding-x;
-}
-.navbar-toggler-right {
-  position: absolute;
-  right: $navbar-padding-x;
-}
-
-// Generate series of `.navbar-toggleable-*` responsive classes for configuring
+// Generate series of `.navbar-expand-*` responsive classes for configuring
 // where your navbar collapses.
-.navbar-toggleable {
+.navbar-expand {
   @each $breakpoint in map-keys($grid-breakpoints) {
     $next: breakpoint-next($breakpoint, $grid-breakpoints);
-    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+    $infix: breakpoint-infix($next, $grid-breakpoints);
 
     &#{$infix} {
       @include media-breakpoint-down($breakpoint) {
-        .navbar-nav {
-          .dropdown-menu {
-            position: static;
-            float: none;
-          }
-        }
-
-        > .container {
+        > .container,
+        > .container-fluid {
           padding-right: 0;
           padding-left: 0;
         }
@@ -139,11 +148,20 @@
       @include media-breakpoint-up($next) {
         flex-direction: row;
         flex-wrap: nowrap;
-        align-items: center;
+        justify-content: flex-start;
 
         .navbar-nav {
           flex-direction: row;
 
+          .dropdown-menu {
+            position: absolute;
+          }
+
+          .dropdown-menu-right {
+            right: 0;
+            left: auto; // Reset the default from `.dropdown-menu`
+          }
+
           .nav-link {
             padding-right: .5rem;
             padding-left: .5rem;
@@ -151,16 +169,14 @@
         }
 
         // For nesting containers, have to redeclare for alignment purposes
-        > .container {
-          display: flex;
+        > .container,
+        > .container-fluid {
           flex-wrap: nowrap;
-          align-items: center;
         }
 
         // scss-lint:disable ImportantRule
         .navbar-collapse {
           display: flex !important;
-          width: 100%;
         }
         // scss-lint:enable ImportantRule
 
@@ -179,8 +195,7 @@
 
 // Dark links against a light background
 .navbar-light {
-  .navbar-brand,
-  .navbar-toggler {
+  .navbar-brand {
     color: $navbar-light-active-color;
 
     @include hover-focus {
@@ -201,20 +216,21 @@
       }
     }
 
-    .open > .nav-link,
+    .show > .nav-link,
     .active > .nav-link,
-    .nav-link.open,
+    .nav-link.show,
     .nav-link.active {
       color: $navbar-light-active-color;
     }
   }
 
   .navbar-toggler {
-    border-color: $navbar-light-toggler-border;
+    color: $navbar-light-color;
+    border-color: $navbar-light-toggler-border-color;
   }
 
   .navbar-toggler-icon {
-    background-image: $navbar-light-toggler-bg;
+    background-image: $navbar-light-toggler-icon-bg;
   }
 
   .navbar-text {
@@ -223,46 +239,46 @@
 }
 
 // White links against a dark background
-.navbar-inverse {
-  .navbar-brand,
-  .navbar-toggler {
-    color: $navbar-inverse-active-color;
+.navbar-dark {
+  .navbar-brand {
+    color: $navbar-dark-active-color;
 
     @include hover-focus {
-      color: $navbar-inverse-active-color;
+      color: $navbar-dark-active-color;
     }
   }
 
   .navbar-nav {
     .nav-link {
-      color: $navbar-inverse-color;
+      color: $navbar-dark-color;
 
       @include hover-focus {
-        color: $navbar-inverse-hover-color;
+        color: $navbar-dark-hover-color;
       }
 
       &.disabled {
-        color: $navbar-inverse-disabled-color;
+        color: $navbar-dark-disabled-color;
       }
     }
 
-    .open > .nav-link,
+    .show > .nav-link,
     .active > .nav-link,
-    .nav-link.open,
+    .nav-link.show,
     .nav-link.active {
-      color: $navbar-inverse-active-color;
+      color: $navbar-dark-active-color;
     }
   }
 
   .navbar-toggler {
-    border-color: $navbar-inverse-toggler-border;
+    color: $navbar-dark-color;
+    border-color: $navbar-dark-toggler-border-color;
   }
 
   .navbar-toggler-icon {
-    background-image: $navbar-inverse-toggler-bg;
+    background-image: $navbar-dark-toggler-icon-bg;
   }
 
   .navbar-text {
-    color: $navbar-inverse-color;
+    color: $navbar-dark-color;
   }
 }