Merge branch 'v4-dev' into v4-font-stack

docs/_includes/nav-docs.html

@@ -25,6 +25,7 @@
       <ul class="nav bd-sidenav">
         {% for doc in group.pages %}
           {% assign slug = doc.title | downcase | replace: ' ', '-' | replace:'-&-','-' %}
+          {% capture slug %}/{{ slug }}{% endcapture %}
           {% assign active = nil %}
 
           {% if page.url contains slug %}

docs/assets/scss/_ads.scss

@@ -1,3 +1,5 @@
+// scss-lint:disable ImportantRule
+
 //
 // Carbon ads
 //

docs/assets/scss/_callouts.scss

@@ -10,13 +10,16 @@
   border-left-width: .25rem;
   border-radius: .25rem;
 }
+
 .bd-callout h4 {
   margin-top: 0;
   margin-bottom: .25rem;
 }
+
 .bd-callout p:last-child {
   margin-bottom: 0;
 }
+
 .bd-callout code {
   border-radius: .25rem;
 }
@@ -31,6 +34,7 @@
 
   h4 { color: $color; }
 }
-.bd-callout-info    { @include bs-callout-variant($bd-info); }
+
+.bd-callout-info { @include bs-callout-variant($bd-info); }
 .bd-callout-warning { @include bs-callout-variant($bd-warning); }
-.bd-callout-danger  { @include bs-callout-variant($bd-danger); }
+.bd-callout-danger { @include bs-callout-variant($bd-danger); }

docs/assets/scss/_content.scss

@@ -1,4 +1,4 @@
-// scss-lint:disable IdSelector
+// scss-lint:disable IdSelector, NestingDepth, SelectorDepth
 
 //
 // Automatically style Markdown-based tables like a Bootstrap `.table`.

docs/assets/scss/_masthead.scss

@@ -1,3 +1,5 @@
+// scss-lint:disable ImportantRule
+
 .bd-masthead {
   position: relative;
   padding: 3rem ($grid-gutter-width / 2) 2rem;

docs/assets/scss/_page-header.scss

@@ -1,3 +1,5 @@
+// scss-lint:disable ImportantRule
+
 .bd-pageheader {
   padding: 2rem ($grid-gutter-width / 2);
   margin-bottom: 1.5rem;

docs/assets/scss/_responsive-tests.scss

@@ -1,3 +1,5 @@
+// scss-lint:disable ImportantRule
+
 //
 // Responsive tests
 //
@@ -20,11 +22,11 @@
 .responsive-utilities td {
   text-align: center;
 }
-.responsive-utilities td.is-visible {
+.responsive-utilities .is-visible {
   color: #468847;
   background-color: #dff0d8 !important;
 }
-.responsive-utilities td.is-hidden {
+.responsive-utilities .is-hidden {
   color: #ccc;
   background-color: #f9f9f9 !important;
 }

docs/layout/grid.md

@@ -164,23 +164,40 @@ Mixins are used in conjunction with the grid variables to generate semantic CSS
 {% highlight scss %}
 // Creates a wrapper for a series of columns
 @mixin make-row($gutter: $grid-gutter-width) {
+  @if $enable-flex {
+    display: flex;
+    flex-wrap: wrap;
+  } @else {
+    @include clearfix();
+  }
   margin-left:  ($gutter / -2);
   margin-right: ($gutter / -2);
-  @include clearfix();
 }
 
 // Make the element grid-ready (applying everything but the width)
 @mixin make-col($gutter: $grid-gutter-width) {
   position: relative;
-  float: left;
+  @if $enable-flex {
+    flex: 1;
+  } @else {
+    float: left;
+  }
   min-height: 1px;
   padding-left:  ($gutter / 2);
   padding-right: ($gutter / 2);
 }
 
-// Set a width (to be used in or out of media queries)
-@mixin make-col-span($columns) {
-  width: percentage(($columns / $grid-columns));
+@mixin make-col-span($size, $columns: $grid-columns) {
+  // Set a width (to be used in or out of media queries)
+  @if $enable-flex {
+    flex: 0 0 percentage($size / $columns);
+    // Add a `max-width` to ensure content within each column does not blow out
+    // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
+    // do not appear to require this.
+    max-width: percentage($size / $columns);
+  } @else {
+    width: percentage($size / $columns);
+  }
 }
 
 // Get fancy by offsetting, or changing the sort order