@gitlab/ui 122.6.1 → 122.8.0

package/dist/tokens/build/js/tokens.dark.js

@@ -608,7 +608,7 @@ const GL_DROPDOWN_OPTION_BACKGROUND_COLOR_SELECTED_DEFAULT = '#3a383f';
 const GL_DROPDOWN_OPTION_BACKGROUND_COLOR_SELECTED_HOVER = '#4c4b51';
 const GL_DROPDOWN_OPTION_BACKGROUND_COLOR_SELECTED_FOCUS = '#4c4b51';
 const GL_DROPDOWN_OPTION_BACKGROUND_COLOR_SELECTED_ACTIVE = '#28272d';
-const GL_DROPDOWN_SEARCH_BACKGROUND_COLOR = 'rgba(05, 05, 06, 0.24)';
+const GL_DROPDOWN_SEARCH_BACKGROUND_COLOR = 'rgba(05, 05, 06, 0.16)';
 const GL_FILTERED_SEARCH_TOKEN_TYPE_BACKGROUND_COLOR_DEFAULT = '#28272d';
 const GL_FILTERED_SEARCH_TOKEN_TYPE_BACKGROUND_COLOR_HOVER = '#3a383f';
 const GL_FILTERED_SEARCH_TOKEN_DATA_BACKGROUND_COLOR_DEFAULT = '#3a383f';

package/dist/tokens/css/tokens.dark.css

@@ -752,7 +752,7 @@
   --gl-dropdown-option-background-color-selected-default: var(--gl-color-neutral-800); /** Used for the background of a selected dropdown option in the default state. */
   --gl-dropdown-option-background-color-selected-hover: var(--gl-color-neutral-700); /** Used for the background of a selected dropdown option in the hover state. */
   --gl-dropdown-option-background-color-selected-active: var(--gl-color-neutral-900); /** Used for the background of a selected dropdown option in the active state. */
-  --gl-dropdown-search-background-color: var(--gl-color-alpha-dark-24); /** Used for the background of a search input in a dropdown listbox. */
+  --gl-dropdown-search-background-color: var(--gl-color-alpha-dark-16); /** Used for the background of a search input in a dropdown listbox. */
   --gl-filtered-search-token-type-background-color-default: var(--gl-color-neutral-900); /** Used for the filtered search type token background color in the default state. */
   --gl-filtered-search-token-type-background-color-hover: var(--gl-color-neutral-800); /** Used for the filtered search type token background color in the hover state. */
   --gl-filtered-search-token-data-background-color-default: var(--gl-color-neutral-800); /** Used for the filtered search data background color in the default state. */

package/dist/tokens/docs/tokens-tailwind-docs.dark.json

@@ -17039,6 +17039,7 @@
           "STROKE_COLOR"
         ]
       },
+      "$deprecated": true,
       "filePath": "src/tokens/contextual/dropdown.tokens.json",
       "isSource": true,
       "original": {
@@ -17054,6 +17055,7 @@
             "STROKE_COLOR"
           ]
         },
+        "$deprecated": true,
         "key": "{dropdown.border.color}"
       },
       "name": "DROPDOWN_BORDER_COLOR",

package/dist/tokens/docs/tokens-tailwind-docs.json

@@ -17039,6 +17039,7 @@
           "STROKE_COLOR"
         ]
       },
+      "$deprecated": true,
       "filePath": "src/tokens/contextual/dropdown.tokens.json",
       "isSource": true,
       "original": {
@@ -17054,6 +17055,7 @@
             "STROKE_COLOR"
           ]
         },
+        "$deprecated": true,
         "key": "{dropdown.border.color}"
       },
       "name": "DROPDOWN_BORDER_COLOR",

package/dist/tokens/figma/contextual.tokens.json

@@ -4267,7 +4267,8 @@
             "EFFECT_COLOR",
             "STROKE_COLOR"
           ]
-        }
+        },
+        "$deprecated": true
       }
     },
     "divider": {
@@ -4502,7 +4503,7 @@
         "color": {
           "$value": {
             "default": "{color.alpha.dark.2}",
-            "dark": "{color.alpha.dark.24}"
+            "dark": "{color.alpha.dark.16}"
           },
           "$type": "color",
           "$description": "Used for the background of a search input in a dropdown listbox.",

package/dist/tokens/js/tokens.dark.js

@@ -636,7 +636,7 @@ export const GL_DROPDOWN_OPTION_BACKGROUND_COLOR_SELECTED_DEFAULT = "#3a383f";
 export const GL_DROPDOWN_OPTION_BACKGROUND_COLOR_SELECTED_HOVER = "#4c4b51";
 export const GL_DROPDOWN_OPTION_BACKGROUND_COLOR_SELECTED_FOCUS = "#4c4b51";
 export const GL_DROPDOWN_OPTION_BACKGROUND_COLOR_SELECTED_ACTIVE = "#28272d";
-export const GL_DROPDOWN_SEARCH_BACKGROUND_COLOR = "rgba(05, 05, 06, 0.24)";
+export const GL_DROPDOWN_SEARCH_BACKGROUND_COLOR = "rgba(05, 05, 06, 0.16)";
 export const GL_FILTERED_SEARCH_TOKEN_TYPE_BACKGROUND_COLOR_DEFAULT = "#28272d";
 export const GL_FILTERED_SEARCH_TOKEN_TYPE_BACKGROUND_COLOR_HOVER = "#3a383f";
 export const GL_FILTERED_SEARCH_TOKEN_DATA_BACKGROUND_COLOR_DEFAULT = "#3a383f";

package/dist/tokens/json/tokens.dark.json

@@ -18537,6 +18537,7 @@
             "STROKE_COLOR"
           ]
         },
+        "$deprecated": true,
         "filePath": "src/tokens/contextual/dropdown.tokens.json",
         "isSource": true,
         "original": {
@@ -18552,6 +18553,7 @@
               "STROKE_COLOR"
             ]
           },
+          "$deprecated": true,
           "key": "{dropdown.border.color}"
         },
         "name": "DROPDOWN_BORDER_COLOR",
@@ -19231,7 +19233,7 @@
       "background": {
         "color": {
           "key": "{dropdown.search.background.color}",
-          "$value": "rgba(05, 05, 06, 0.24)",
+          "$value": "rgba(05, 05, 06, 0.16)",
           "$type": "color",
           "$description": "Used for the background of a search input in a dropdown listbox.",
           "$extensions": {
@@ -19245,7 +19247,7 @@
           "original": {
             "$value": {
               "default": "{color.alpha.dark.2}",
-              "dark": "{color.alpha.dark.24}"
+              "dark": "{color.alpha.dark.16}"
             },
             "$type": "color",
             "$description": "Used for the background of a search input in a dropdown listbox.",

package/dist/tokens/json/tokens.json

@@ -18537,6 +18537,7 @@
             "STROKE_COLOR"
           ]
         },
+        "$deprecated": true,
         "filePath": "src/tokens/contextual/dropdown.tokens.json",
         "isSource": true,
         "original": {
@@ -18552,6 +18553,7 @@
               "STROKE_COLOR"
             ]
           },
+          "$deprecated": true,
           "key": "{dropdown.border.color}"
         },
         "name": "DROPDOWN_BORDER_COLOR",
@@ -19245,7 +19247,7 @@
           "original": {
             "$value": {
               "default": "{color.alpha.dark.2}",
-              "dark": "{color.alpha.dark.24}"
+              "dark": "{color.alpha.dark.16}"
             },
             "$type": "color",
             "$description": "Used for the background of a search input in a dropdown listbox.",

package/dist/tokens/scss/_tokens.dark.scss

@@ -750,7 +750,7 @@ $gl-dropdown-option-background-color-unselected-active: $gl-action-neutral-backg
 $gl-dropdown-option-background-color-selected-default: $gl-color-neutral-800; // Used for the background of a selected dropdown option in the default state.
 $gl-dropdown-option-background-color-selected-hover: $gl-color-neutral-700; // Used for the background of a selected dropdown option in the hover state.
 $gl-dropdown-option-background-color-selected-active: $gl-color-neutral-900; // Used for the background of a selected dropdown option in the active state.
-$gl-dropdown-search-background-color: $gl-color-alpha-dark-24; // Used for the background of a search input in a dropdown listbox.
+$gl-dropdown-search-background-color: $gl-color-alpha-dark-16; // Used for the background of a search input in a dropdown listbox.
 $gl-filtered-search-token-type-background-color-default: $gl-color-neutral-900; // Used for the filtered search type token background color in the default state.
 $gl-filtered-search-token-type-background-color-hover: $gl-color-neutral-800; // Used for the filtered search type token background color in the hover state.
 $gl-filtered-search-token-data-background-color-default: $gl-color-neutral-800; // Used for the filtered search data background color in the default state.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "122.6.1",
+  "version": "122.8.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -133,7 +133,7 @@
     "acorn": "^8.15.0",
     "acorn-walk": "^8.3.4",
     "autoprefixer": "10.4.21",
-    "axe-playwright": "^2.1.0",
+    "axe-playwright": "^2.2.2",
     "babel-loader": "^9.2.1",
     "cypress": "14.5.4",
     "cypress-real-events": "^1.15.0",

package/src/components/base/new_dropdowns/dropdown.scss

@@ -11,10 +11,6 @@
     // these create the 45deg cutoff angle at the base of the caret
     border-bottom: 1px solid var(--gl-dropdown-background-color);
     border-right: 1px solid var(--gl-dropdown-background-color);
-
-    // match the dropdown border
-    border-top: 1px solid var(--gl-dropdown-border-color);
-    border-left: 1px solid var(--gl-dropdown-border-color);
     position: absolute;
   }
 
@@ -31,7 +27,6 @@
   .gl-new-dropdown-panel {
     @apply gl-hidden;
     @apply gl-bg-dropdown;
-    @apply gl-border-1 gl-border-solid gl-border-dropdown;
     @apply gl-rounded-lg;
     @apply gl-drop-shadow-md;
     top: 0;

package/src/components/base/table/table.scss

@@ -1,3 +1,5 @@
+@use "sass:map";
+
 table.gl-table {
   background-color: var(--gl-color-alpha-0);
   @apply gl-text-default;
@@ -96,22 +98,18 @@ table.gl-table {
     }
   }
 
-  $stacked-table-breakpoints: (
-    'sm': 'xs',
-    'md': 'sm',
-    'lg': 'md',
-    'xl': 'lg',
-  );
-
   &.b-table {
     &.b-table-stacked {
       @include gl-tmp-stacked-override();
     }
 
-    @each $class, $mq in $stacked-table-breakpoints {
-      &.b-table-stacked-#{$class} {
-        @include media-breakpoint-down(#{$mq}) {
-          @include gl-tmp-stacked-override();
+    @each $breakpoint in map.keys($grid-breakpoints) {
+      $next: breakpoint-next($breakpoint, $grid-breakpoints);
+      @if ($next != null) {
+        &.b-table-stacked-#{$next} {
+          @include gl-container-width-down(#{$next}) {
+            @include gl-tmp-stacked-override();
+          }
         }
       }
     }

package/src/scss/gitlab_ui.scss

@@ -1,5 +1,6 @@
-@import 'bootstrap';
+@import 'mixins';
 
+@import 'bootstrap';
 @import 'bootstrap_vue';
 
 // Design Tokens
@@ -8,7 +9,6 @@
 // Settings
 @import 'functions';
 @import 'variables';
-@import 'mixins';
 @import 'typescale/index';
 
 // Body

package/src/scss/storybook.scss

@@ -7,9 +7,11 @@
 @import '../vendor/bootstrap/scss/variables';
 @import '../vendor/bootstrap/scss/mixins';
 
+@import 'mixins';
+
+@import 'bootstrap';
 @import 'bootstrap_vue';
 
-@import 'mixins';
 
 @import 'fonts';
 

package/src/tokens/build/css/tokens.dark.css

@@ -752,7 +752,7 @@
   --gl-dropdown-option-background-color-selected-default: var(--gl-color-neutral-800); /** Used for the background of a selected dropdown option in the default state. */
   --gl-dropdown-option-background-color-selected-hover: var(--gl-color-neutral-700); /** Used for the background of a selected dropdown option in the hover state. */
   --gl-dropdown-option-background-color-selected-active: var(--gl-color-neutral-900); /** Used for the background of a selected dropdown option in the active state. */
-  --gl-dropdown-search-background-color: var(--gl-color-alpha-dark-24); /** Used for the background of a search input in a dropdown listbox. */
+  --gl-dropdown-search-background-color: var(--gl-color-alpha-dark-16); /** Used for the background of a search input in a dropdown listbox. */
   --gl-filtered-search-token-type-background-color-default: var(--gl-color-neutral-900); /** Used for the filtered search type token background color in the default state. */
   --gl-filtered-search-token-type-background-color-hover: var(--gl-color-neutral-800); /** Used for the filtered search type token background color in the hover state. */
   --gl-filtered-search-token-data-background-color-default: var(--gl-color-neutral-800); /** Used for the filtered search data background color in the default state. */

package/src/tokens/build/docs/tokens-tailwind-docs.dark.json

@@ -17039,6 +17039,7 @@
           "STROKE_COLOR"
         ]
       },
+      "$deprecated": true,
       "filePath": "src/tokens/contextual/dropdown.tokens.json",
       "isSource": true,
       "original": {
@@ -17054,6 +17055,7 @@
             "STROKE_COLOR"
           ]
         },
+        "$deprecated": true,
         "key": "{dropdown.border.color}"
       },
       "name": "DROPDOWN_BORDER_COLOR",

package/src/tokens/build/docs/tokens-tailwind-docs.json

@@ -17039,6 +17039,7 @@
           "STROKE_COLOR"
         ]
       },
+      "$deprecated": true,
       "filePath": "src/tokens/contextual/dropdown.tokens.json",
       "isSource": true,
       "original": {
@@ -17054,6 +17055,7 @@
             "STROKE_COLOR"
           ]
         },
+        "$deprecated": true,
         "key": "{dropdown.border.color}"
       },
       "name": "DROPDOWN_BORDER_COLOR",

package/src/tokens/build/figma/contextual.tokens.json

@@ -4267,7 +4267,8 @@
             "EFFECT_COLOR",
             "STROKE_COLOR"
           ]
-        }
+        },
+        "$deprecated": true
       }
     },
     "divider": {
@@ -4502,7 +4503,7 @@
         "color": {
           "$value": {
             "default": "{color.alpha.dark.2}",
-            "dark": "{color.alpha.dark.24}"
+            "dark": "{color.alpha.dark.16}"
           },
           "$type": "color",
           "$description": "Used for the background of a search input in a dropdown listbox.",

package/src/tokens/build/js/tokens.dark.js

@@ -608,7 +608,7 @@ export const GL_DROPDOWN_OPTION_BACKGROUND_COLOR_SELECTED_DEFAULT = '#3a383f';
 export const GL_DROPDOWN_OPTION_BACKGROUND_COLOR_SELECTED_HOVER = '#4c4b51';
 export const GL_DROPDOWN_OPTION_BACKGROUND_COLOR_SELECTED_FOCUS = '#4c4b51';
 export const GL_DROPDOWN_OPTION_BACKGROUND_COLOR_SELECTED_ACTIVE = '#28272d';
-export const GL_DROPDOWN_SEARCH_BACKGROUND_COLOR = 'rgba(05, 05, 06, 0.24)';
+export const GL_DROPDOWN_SEARCH_BACKGROUND_COLOR = 'rgba(05, 05, 06, 0.16)';
 export const GL_FILTERED_SEARCH_TOKEN_TYPE_BACKGROUND_COLOR_DEFAULT = '#28272d';
 export const GL_FILTERED_SEARCH_TOKEN_TYPE_BACKGROUND_COLOR_HOVER = '#3a383f';
 export const GL_FILTERED_SEARCH_TOKEN_DATA_BACKGROUND_COLOR_DEFAULT = '#3a383f';

package/src/tokens/build/json/tokens.dark.json

@@ -18537,6 +18537,7 @@
             "STROKE_COLOR"
           ]
         },
+        "$deprecated": true,
         "filePath": "src/tokens/contextual/dropdown.tokens.json",
         "isSource": true,
         "original": {
@@ -18552,6 +18553,7 @@
               "STROKE_COLOR"
             ]
           },
+          "$deprecated": true,
           "key": "{dropdown.border.color}"
         },
         "name": "DROPDOWN_BORDER_COLOR",
@@ -19231,7 +19233,7 @@
       "background": {
         "color": {
           "key": "{dropdown.search.background.color}",
-          "$value": "rgba(05, 05, 06, 0.24)",
+          "$value": "rgba(05, 05, 06, 0.16)",
           "$type": "color",
           "$description": "Used for the background of a search input in a dropdown listbox.",
           "$extensions": {
@@ -19245,7 +19247,7 @@
           "original": {
             "$value": {
               "default": "{color.alpha.dark.2}",
-              "dark": "{color.alpha.dark.24}"
+              "dark": "{color.alpha.dark.16}"
             },
             "$type": "color",
             "$description": "Used for the background of a search input in a dropdown listbox.",

package/src/tokens/build/json/tokens.json

@@ -18537,6 +18537,7 @@
             "STROKE_COLOR"
           ]
         },
+        "$deprecated": true,
         "filePath": "src/tokens/contextual/dropdown.tokens.json",
         "isSource": true,
         "original": {
@@ -18552,6 +18553,7 @@
               "STROKE_COLOR"
             ]
           },
+          "$deprecated": true,
           "key": "{dropdown.border.color}"
         },
         "name": "DROPDOWN_BORDER_COLOR",
@@ -19245,7 +19247,7 @@
           "original": {
             "$value": {
               "default": "{color.alpha.dark.2}",
-              "dark": "{color.alpha.dark.24}"
+              "dark": "{color.alpha.dark.16}"
             },
             "$type": "color",
             "$description": "Used for the background of a search input in a dropdown listbox.",

package/src/tokens/build/scss/_tokens.dark.scss

@@ -750,7 +750,7 @@ $gl-dropdown-option-background-color-unselected-active: $gl-action-neutral-backg
 $gl-dropdown-option-background-color-selected-default: $gl-color-neutral-800; // Used for the background of a selected dropdown option in the default state.
 $gl-dropdown-option-background-color-selected-hover: $gl-color-neutral-700; // Used for the background of a selected dropdown option in the hover state.
 $gl-dropdown-option-background-color-selected-active: $gl-color-neutral-900; // Used for the background of a selected dropdown option in the active state.
-$gl-dropdown-search-background-color: $gl-color-alpha-dark-24; // Used for the background of a search input in a dropdown listbox.
+$gl-dropdown-search-background-color: $gl-color-alpha-dark-16; // Used for the background of a search input in a dropdown listbox.
 $gl-filtered-search-token-type-background-color-default: $gl-color-neutral-900; // Used for the filtered search type token background color in the default state.
 $gl-filtered-search-token-type-background-color-hover: $gl-color-neutral-800; // Used for the filtered search type token background color in the hover state.
 $gl-filtered-search-token-data-background-color-default: $gl-color-neutral-800; // Used for the filtered search data background color in the default state.

package/src/tokens/contextual/dropdown.tokens.json

@@ -26,7 +26,8 @@
             "EFFECT_COLOR",
             "STROKE_COLOR"
           ]
-        }
+        },
+        "$deprecated": true
       }
     },
     "divider": {
@@ -261,7 +262,7 @@
         "color": {
           "$value": {
             "default": "{color.alpha.dark.2}",
-            "dark": "{color.alpha.dark.24}"
+            "dark": "{color.alpha.dark.16}"
           },
           "$type": "color",
           "$description": "Used for the background of a search input in a dropdown listbox.",

package/src/vendor/bootstrap/scss/_tables.scss

@@ -135,24 +135,32 @@
 //
 // Generate series of `.table-responsive-*` classes for configuring the screen
 // size of where your table will overflow.
+@mixin resonsive-table-styles {
+  display: block;
+  width: 100%;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+
+  // Prevent double border on horizontal scroll due to use of `display: block;`
+  > .table-bordered {
+    border: 0;
+  }
+}
 
 .table-responsive {
   @each $breakpoint in map.keys($grid-breakpoints) {
     $next: breakpoint-next($breakpoint, $grid-breakpoints);
     $infix: breakpoint-infix($next, $grid-breakpoints);
-
-    &#{$infix} {
-      @include media-breakpoint-down($breakpoint) {
-        display: block;
-        width: 100%;
-        overflow-x: auto;
-        -webkit-overflow-scrolling: touch;
-
-        // Prevent double border on horizontal scroll due to use of `display: block;`
-        > .table-bordered {
-          border: 0;
+    @if ($next != null) {
+      &#{$infix} {
+        @include gl-container-width-down($next) {
+          @include resonsive-table-styles;
         }
       }
     }
   }
+
+  & {
+    @include resonsive-table-styles;
+  }
 }

package/src/vendor/bootstrap-vue/src/components/table/_table.scss

@@ -378,6 +378,89 @@ $bv-escaped-characters: (("<", "%3c"), (">", "%3e"), ("#", "%23"));
 }
 
 // --- Stacked tables ---
+@mixin stacked-table-styles {
+  display: block;
+  width: 100%;
+
+  // Convert to blocks when stacked
+  > caption,
+  > tbody,
+  > tbody > tr,
+  > tbody > tr > td,
+  > tbody > tr > th {
+    display: block;
+  }
+
+  // Hide when stacked
+  > thead,
+  > tfoot {
+    display: none;
+
+    > tr.b-table-top-row,
+    > tr.b-table-bottom-row {
+      display: none;
+    }
+  }
+
+  // Caption positioning
+  > caption {
+    caption-side: top !important;
+  }
+
+  > tbody {
+    > tr {
+      // Turn cells with labels into micro-grids
+      > [data-label] {
+        // Cell header label pseudo element
+        &::before {
+          content: attr(data-label);
+          width: $b-table-stacked-heading-width;
+          float: left;
+          text-align: right;
+          overflow-wrap: break-word;
+          font-weight: bold;
+          font-style: normal;
+          padding: 0 calc(#{$b-table-stacked-gap} / 2) 0 0;
+          margin: 0;
+        }
+
+        // Add clearfix in-case field label wraps
+        &::after {
+          display: block;
+          clear: both;
+          content: "";
+        }
+
+        // Cell value (we wrap the cell value in a div when stacked)
+        > div {
+          display: inline-block;
+          width: calc(100% - #{$b-table-stacked-heading-width});
+          // Add "gap" between "cells"
+          padding: 0 0 0 calc(#{$b-table-stacked-gap} / 2);
+          margin: 0;
+        }
+      }
+
+      // Dont show the fixed top/bottom rows
+      &.top-row,
+      &.bottom-row {
+        display: none;
+      }
+
+      // Give the top cell of each "row" a heavy border
+      > :first-child {
+        border-top-width: (3 * $table-border-width);
+      }
+
+      // Give any cell after a rowspan'ed cell a heavy top border
+      > [rowspan] + td,
+      > [rowspan] + th {
+        border-top-width: (3 * $table-border-width);
+      }
+    }
+  }
+}
+
 @if $bv-enable-table-stacked {
   .table.b-table {
     &.b-table-stacked {
@@ -385,91 +468,18 @@ $bv-escaped-characters: (("<", "%3c"), (">", "%3e"), ("#", "%23"));
         $next: breakpoint-next($breakpoint, $grid-breakpoints);
         $infix: breakpoint-infix($next, $grid-breakpoints);
 
-        &#{$infix} {
-          @include media-breakpoint-down($breakpoint) {
-            display: block;
-            width: 100%;
-
-            // Convert to blocks when stacked
-            > caption,
-            > tbody,
-            > tbody > tr,
-            > tbody > tr > td,
-            > tbody > tr > th {
-              display: block;
-            }
-
-            // Hide when stacked
-            > thead,
-            > tfoot {
-              display: none;
-
-              > tr.b-table-top-row,
-              > tr.b-table-bottom-row {
-                display: none;
-              }
-            }
-
-            // Caption positioning
-            > caption {
-              caption-side: top !important;
-            }
-
-            > tbody {
-              > tr {
-                // Turn cells with labels into micro-grids
-                > [data-label] {
-                  // Cell header label pseudo element
-                  &::before {
-                    content: attr(data-label);
-                    width: $b-table-stacked-heading-width;
-                    float: left;
-                    text-align: right;
-                    overflow-wrap: break-word;
-                    font-weight: bold;
-                    font-style: normal;
-                    padding: 0 calc(#{$b-table-stacked-gap} / 2) 0 0;
-                    margin: 0;
-                  }
-
-                  // Add clearfix in-case field label wraps
-                  &::after {
-                    display: block;
-                    clear: both;
-                    content: "";
-                  }
-
-                  // Cell value (we wrap the cell value in a div when stacked)
-                  > div {
-                    display: inline-block;
-                    width: calc(100% - #{$b-table-stacked-heading-width});
-                    // Add "gap" between "cells"
-                    padding: 0 0 0 calc(#{$b-table-stacked-gap} / 2);
-                    margin: 0;
-                  }
-                }
-
-                // Dont show the fixed top/bottom rows
-                &.top-row,
-                &.bottom-row {
-                  display: none;
-                }
-
-                // Give the top cell of each "row" a heavy border
-                > :first-child {
-                  border-top-width: (3 * $table-border-width);
-                }
-
-                // Give any cell after a rowspan'ed cell a heavy top border
-                > [rowspan] + td,
-                > [rowspan] + th {
-                  border-top-width: (3 * $table-border-width);
-                }
-              }
+        @if ($next != null) {
+          &#{$infix} {
+            @include gl-container-width-down($next) {
+              @include stacked-table-styles;
             }
           }
         }
       }
+
+      & {
+        @include stacked-table-styles;
+      }
     }
   }
 }