foundation-rails 5.1.1.0 → 5.2.0.0

data/vendor/assets/stylesheets/foundation/components/_visibility.scss

@@ -1,568 +1,228 @@
+// Foundation by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
 @import "global";
 
 //
 // Foundation Visibility Classes
 //
 $include-html-visibility-classes: $include-html-classes !default;
-
-@if $include-html-visibility-classes != false {
+$include-table-visibility-classes: true !default;
+$include-legacy-visibility-classes: true !default;
 
 //
 // Media Class Names
 //
+// Visibility Breakpoints
+$visibility-breakpoint-sizes:
+  small,
+  medium,
+  large,
+  xlarge,
+  xxlarge;
 
-  /* Foundation Visibility HTML Classes */
-  .show-for-small,
-  .show-for-small-only,
-  .show-for-medium-down,
-  .show-for-large-down,
-  .hide-for-medium,
-  .hide-for-medium-up,
-  .hide-for-medium-only,
-  .hide-for-large,
-  .hide-for-large-up,
-  .hide-for-large-only,
-  .hide-for-xlarge,
-  .hide-for-xlarge-up,
-  .hide-for-xlarge-only,
-  .hide-for-xxlarge-up,
-  .hide-for-xxlarge-only { display: inherit !important; }
+$visibility-breakpoint-queries:
+  unquote($small-up),
+  unquote($medium-up),
+  unquote($large-up),
+  unquote($xlarge-up),
+  unquote($xxlarge-up);
 
-  .hide-for-small,
-  .hide-for-small-only,
-  .hide-for-medium-down,
-  .show-for-medium,
-  .show-for-medium-up,
-  .show-for-medium-only,
-  .hide-for-large-down,
-  .show-for-large,
-  .show-for-large-up,
-  .show-for-large-only,
-  .show-for-xlarge,
-  .show-for-xlarge-up,
-  .show-for-xlarge-only,
-  .show-for-xxlarge-up,
-  .show-for-xxlarge-only { display: none !important; }
+@mixin visibility-loop {
+  @each $current-visibility-breakpoint in $visibility-breakpoint-sizes {
+    $visibility-inherit-list: ();
+    $visibility-none-list: ();
 
-  /* Specific visibility for tables */
-  table {
-    &.show-for-small,
-    &.show-for-small-only,
-    &.show-for-medium-down,
-    &.show-for-large-down,
-    &.hide-for-medium,
-    &.hide-for-medium-up,
-    &.hide-for-medium-only,
-    &.hide-for-large,
-    &.hide-for-large-up,
-    &.hide-for-large-only,
-    &.hide-for-xlarge,
-    &.hide-for-xlarge-up,
-    &.hide-for-xlarge-only,
-    &.hide-for-xxlarge-up,
-    &.hide-for-xxlarge-only { display: table; }
-  }
-  thead {
-    &.show-for-small,
-    &.show-for-small-only,
-    &.show-for-medium-down,
-    &.show-for-large-down,
-    &.hide-for-medium,
-    &.hide-for-medium-up,
-    &.hide-for-medium-only,
-    &.hide-for-large,
-    &.hide-for-large-up,
-    &.hide-for-large-only,
-    &.hide-for-xlarge,
-    &.hide-for-xlarge-up,
-    &.hide-for-xlarge-only,
-    &.hide-for-xxlarge-up,
-    &.hide-for-xxlarge-only { display: table-header-group !important; }
-  }
-  tbody {
-    &.show-for-small,
-    &.show-for-small-only,
-    &.show-for-medium-down,
-    &.show-for-large-down,
-    &.hide-for-medium,
-    &.hide-for-medium-up,
-    &.hide-for-medium-only,
-    &.hide-for-large,
-    &.hide-for-large-up,
-    &.hide-for-large-only,
-    &.hide-for-xlarge,
-    &.hide-for-xlarge-up,
-    &.hide-for-xlarge-only,
-    &.hide-for-xxlarge-up,
-    &.hide-for-xxlarge-only { display: table-row-group !important; }
-  }
-  tr {
-    &.show-for-small,
-    &.show-for-small-only,
-    &.show-for-medium-down,
-    &.show-for-large-down,
-    &.hide-for-medium,
-    &.hide-for-medium-up,
-    &.hide-for-medium-only,
-    &.hide-for-large,
-    &.hide-for-large-up,
-    &.hide-for-large-only,
-    &.hide-for-xlarge,
-    &.hide-for-xlarge-up,
-    &.hide-for-xlarge-only,
-    &.hide-for-xxlarge-up,
-    &.hide-for-xxlarge-only { display: table-row !important; }
-  }
-  td,
-  th {
-    &.show-for-small,
-    &.show-for-small-only,
-    &.show-for-medium-down,
-    &.show-for-large-down,
-    &.hide-for-medium,
-    &.hide-for-medium-up,
-    &.hide-for-large,
-    &.hide-for-large-up,
-    &.hide-for-xlarge,
-    &.hide-for-xlarge-up,
-    &.hide-for-xxlarge-up { display: table-cell !important; }
-  }
+    $visibility-table-list: ();
+    $visibility-table-header-group-list: ();
+    $visibility-table-row-group-list: ();
+    $visibility-table-row-list: ();
+    $visibility-table-cell-list: ();
 
-  /* Medium Displays: 641px and up */
-  @media #{$medium-up} {
-    .hide-for-small,
-    .hide-for-small-only,
-    .show-for-medium,
-    .show-for-medium-down,
-    .show-for-medium-up,
-    .show-for-medium-only,
-    .hide-for-large,
-    .hide-for-large-up,
-    .hide-for-large-only,
-    .hide-for-xlarge,
-    .hide-for-xlarge-up,
-    .hide-for-xlarge-only,
-    .hide-for-xxlarge-up,
-    .hide-for-xxlarge-only { display: inherit !important; }
+    @each $visibility-comparison-breakpoint in $visibility-breakpoint-sizes {
+      @if index($visibility-breakpoint-sizes, $visibility-comparison-breakpoint) < index($visibility-breakpoint-sizes, $current-visibility-breakpoint) {
+        // smaller than current breakpoint
 
-    .show-for-small,
-    .show-for-small-only,
-    .hide-for-medium,
-    .hide-for-medium-down,
-    .hide-for-medium-up,
-    .hide-for-medium-only,
-    .hide-for-large-down,
-    .show-for-large,
-    .show-for-large-up,
-    .show-for-large-only,
-    .show-for-xlarge,
-    .show-for-xlarge-up,
-    .show-for-xlarge-only,
-    .show-for-xxlarge-up,
-    .show-for-xxlarge-only { display: none !important; }
+        $visibility-inherit-list: append($visibility-inherit-list, unquote(
+          '.hide-for-#{$visibility-comparison-breakpoint}-only, .show-for-#{$visibility-comparison-breakpoint}-up'
+        ), comma);
+        $visibility-none-list: append($visibility-none-list, unquote(
+          '.show-for-#{$visibility-comparison-breakpoint}-only, .hide-for-#{$visibility-comparison-breakpoint}-up'
+        ), comma);
+        $visibility-table-list: append($visibility-table-list, unquote(
+          'table.hide-for-#{$visibility-comparison-breakpoint}-only, table.show-for-#{$visibility-comparison-breakpoint}-up'
+        ), comma);
+        $visibility-table-header-group-list: append($visibility-table-header-group-list, unquote(
+          'thead.hide-for-#{$visibility-comparison-breakpoint}-only, thead.show-for-#{$visibility-comparison-breakpoint}-up'
+        ), comma);
+        $visibility-table-row-group-list: append($visibility-table-row-group-list, unquote(
+          'tbody.hide-for-#{$visibility-comparison-breakpoint}-only, tbody.show-for-#{$visibility-comparison-breakpoint}-up'
+        ), comma);
+        $visibility-table-row-list: append($visibility-table-row-list, unquote(
+          'tr.hide-for-#{$visibility-comparison-breakpoint}-only, tr.show-for-#{$visibility-comparison-breakpoint}-up'
+        ), comma);
+        $visibility-table-cell-list: append($visibility-table-cell-list, unquote(
+          'th.hide-for-#{$visibility-comparison-breakpoint}-only, td.hide-for-#{$visibility-comparison-breakpoint}-only, th.show-for-#{$visibility-comparison-breakpoint}-up, td.show-for-#{$visibility-comparison-breakpoint}-up'
+        ), comma);
 
-    /* Specific visibility for tables */
-    table {
-      &.hide-for-small,
-      &.hide-for-small-only,
-      &.show-for-medium,
-      &.show-for-medium-down,
-      &.show-for-medium-up,
-      &.show-for-medium-only,
-      &.hide-for-large,
-      &.hide-for-large-up,
-      &.hide-for-large-only,
-      &.hide-for-xlarge,
-      &.hide-for-xlarge-up,
-      &.hide-for-xlarge-only,
-      &.hide-for-xxlarge-up,
-      &.hide-for-xxlarge-only { display: table; }
-    }
-    thead {
-      &.hide-for-small,
-      &.hide-for-small-only,
-      &.show-for-medium,
-      &.show-for-medium-down,
-      &.show-for-medium-up,
-      &.show-for-medium-only,
-      &.hide-for-large,
-      &.hide-for-large-up,
-      &.hide-for-large-only,
-      &.hide-for-xlarge,
-      &.hide-for-xlarge-up,
-      &.hide-for-xlarge-only,
-      &.hide-for-xxlarge-up,
-      &.hide-for-xxlarge-only { display: table-header-group !important; }
-    }
-    tbody {
-      &.hide-for-small,
-      &.hide-for-small-only,
-      &.show-for-medium,
-      &.show-for-medium-down,
-      &.show-for-medium-up,
-      &.show-for-medium-only,
-      &.hide-for-large,
-      &.hide-for-large-up,
-      &.hide-for-large-only,
-      &.hide-for-xlarge,
-      &.hide-for-xlarge-up,
-      &.hide-for-xlarge-only,
-      &.hide-for-xxlarge-up,
-      &.hide-for-xxlarge-only { display: table-row-group !important; }
-    }
-    tr {
-      &.hide-for-small,
-      &.hide-for-small-only,
-      &.show-for-medium,
-      &.show-for-medium-down,
-      &.show-for-medium-up,
-      &.show-for-medium-only,
-      &.hide-for-large,
-      &.hide-for-large-up,
-      &.hide-for-large-only,
-      &.hide-for-xlarge,
-      &.hide-for-xlarge-up,
-      &.hide-for-xlarge-only,
-      &.hide-for-xxlarge-up,
-      &.hide-for-xxlarge-only { display: table-row !important; }
-    }
-    td,
-    th {
-      &.hide-for-small,
-      &.hide-for-small-only,
-      &.show-for-medium,
-      &.show-for-medium-down,
-      &.show-for-medium-up,
-      &.show-for-medium-only,
-      &.hide-for-large,
-      &.hide-for-large-up,
-      &.hide-for-large-only,
-      &.hide-for-xlarge,
-      &.hide-for-xlarge-up,
-      &.hide-for-xlarge-only,
-      &.hide-for-xxlarge-up,
-      &.hide-for-xxlarge-only { display: table-cell !important; }
-    }
-  }
+        @if $include-legacy-visibility-classes {
+          $visibility-inherit-list: append($visibility-inherit-list, unquote(
+            '.hide-for-#{$visibility-comparison-breakpoint}, .hide-for-#{$visibility-comparison-breakpoint}-down'
+          ), comma);
+          $visibility-none-list: append($visibility-none-list, unquote(
+            '.show-for-#{$visibility-comparison-breakpoint}, .show-for-#{$visibility-comparison-breakpoint}-down'
+          ), comma);
+          $visibility-table-list: append($visibility-table-list, unquote(
+            'table.hide-for-#{$visibility-comparison-breakpoint}, table.hide-for-#{$visibility-comparison-breakpoint}-down'
+          ), comma);
+          $visibility-table-header-group-list: append($visibility-table-header-group-list, unquote(
+            'thead.hide-for-#{$visibility-comparison-breakpoint}, thead.hide-for-#{$visibility-comparison-breakpoint}-down'
+          ), comma);
+          $visibility-table-row-group-list: append($visibility-table-row-group-list, unquote(
+            'tbody.hide-for-#{$visibility-comparison-breakpoint}, tbody.hide-for-#{$visibility-comparison-breakpoint}-down'
+          ), comma);
+          $visibility-table-row-list: append($visibility-table-row-list, unquote(
+            'tr.hide-for-#{$visibility-comparison-breakpoint}, tr.hide-for-#{$visibility-comparison-breakpoint}-down'
+          ), comma);
+          $visibility-table-cell-list: append($visibility-table-cell-list, unquote(
+            'th.hide-for-#{$visibility-comparison-breakpoint}, td.hide-for-#{$visibility-comparison-breakpoint}, th.hide-for-#{$visibility-comparison-breakpoint}-down, td.hide-for-#{$visibility-comparison-breakpoint}-down'
+          ), comma);
+        }
 
-  /* Large Displays: 1024px and up */
-  @media #{$large-up} {
-    .hide-for-small,
-    .hide-for-small-only,
-    .hide-for-medium,
-    .hide-for-medium-down,
-    .hide-for-medium-only,
-    .show-for-medium-up,
-    .show-for-large,
-    .show-for-large-up,
-    .show-for-large-only,
-    .hide-for-xlarge,
-    .hide-for-xlarge-up,
-    .hide-for-xlarge-only,
-    .hide-for-xxlarge-up,
-    .hide-for-xxlarge-only { display: inherit !important; }
+      } @else if index($visibility-breakpoint-sizes, $visibility-comparison-breakpoint) > index($visibility-breakpoint-sizes, $current-visibility-breakpoint) {
+        // larger than current breakpoint
 
-    .show-for-small-only,
-    .show-for-medium,
-    .show-for-medium-down,
-    .show-for-medium-only,
-    .hide-for-large,
-    .hide-for-large-up,
-    .hide-for-large-only,
-    .show-for-xlarge,
-    .show-for-xlarge-up,
-    .show-for-xlarge-only,
-    .show-for-xxlarge-up,
-    .show-for-xxlarge-only { display: none !important; }
+        $visibility-inherit-list: append($visibility-inherit-list, unquote(
+          '.hide-for-#{$visibility-comparison-breakpoint}-only, .hide-for-#{$visibility-comparison-breakpoint}-up'
+        ), comma);
+        $visibility-none-list: append($visibility-none-list, unquote(
+          '.show-for-#{$visibility-comparison-breakpoint}-only, .show-for-#{$visibility-comparison-breakpoint}-up'
+        ), comma);
+        $visibility-table-list: append($visibility-table-list, unquote(
+          'table.hide-for-#{$visibility-comparison-breakpoint}-only, table.hide-for-#{$visibility-comparison-breakpoint}-up'
+        ), comma);
+        $visibility-table-header-group-list: append($visibility-table-header-group-list, unquote(
+          'thead.hide-for-#{$visibility-comparison-breakpoint}-only, thead.hide-for-#{$visibility-comparison-breakpoint}-up'
+        ), comma);
+        $visibility-table-row-group-list: append($visibility-table-row-group-list, unquote(
+          'tbody.hide-for-#{$visibility-comparison-breakpoint}-only, tbody.hide-for-#{$visibility-comparison-breakpoint}-up'
+        ), comma);
+        $visibility-table-row-list: append($visibility-table-row-list, unquote(
+          'tr.hide-for-#{$visibility-comparison-breakpoint}-only, tr.hide-for-#{$visibility-comparison-breakpoint}-up'
+        ), comma);
+        $visibility-table-cell-list: append($visibility-table-cell-list, unquote(
+          'th.hide-for-#{$visibility-comparison-breakpoint}-only, td.hide-for-#{$visibility-comparison-breakpoint}-only, th.hide-for-#{$visibility-comparison-breakpoint}-up, td.hide-for-#{$visibility-comparison-breakpoint}-up'
+        ), comma);
 
-    /* Specific visibility for tables */
-    table {
-      &.hide-for-small,
-      &.hide-for-small-only,
-      &.hide-for-medium,
-      &.hide-for-medium-down,
-      &.hide-for-medium-only,
-      &.show-for-medium-up,
-      &.show-for-large,
-      &.show-for-large-up,
-      &.show-for-large-only,
-      &.hide-for-xlarge,
-      &.hide-for-xlarge-up,
-      &.hide-for-xlarge-only,
-      &.hide-for-xxlarge-up,
-      &.hide-for-xxlarge-only { display: table; }
-    }
-    thead {
-      &.hide-for-small,
-      &.hide-for-small-only,
-      &.hide-for-medium,
-      &.hide-for-medium-down,
-      &.hide-for-medium-only,
-      &.show-for-medium-up,
-      &.show-for-large,
-      &.show-for-large-up,
-      &.show-for-large-only,
-      &.hide-for-xlarge,
-      &.hide-for-xlarge-up,
-      &.hide-for-xlarge-only,
-      &.hide-for-xxlarge-up,
-      &.hide-for-xxlarge-only { display: table-header-group !important; }
-    }
-    tbody {
-      &.hide-for-small,
-      &.hide-for-small-only,
-      &.hide-for-medium,
-      &.hide-for-medium-down,
-      &.hide-for-medium-only,
-      &.show-for-medium-up,
-      &.show-for-large,
-      &.show-for-large-up,
-      &.show-for-large-only,
-      &.hide-for-xlarge,
-      &.hide-for-xlarge-up,
-      &.hide-for-xlarge-only,
-      &.hide-for-xxlarge-up,
-      &.hide-for-xxlarge-only { display: table-row-group !important; }
-    }
-    tr {
-      &.hide-for-small,
-      &.hide-for-small-only,
-      &.hide-for-medium,
-      &.hide-for-medium-down,
-      &.hide-for-medium-only,
-      &.show-for-medium-up,
-      &.show-for-large,
-      &.show-for-large-up,
-      &.show-for-large-only,
-      &.hide-for-xlarge,
-      &.hide-for-xlarge-up,
-      &.hide-for-xlarge-only,
-      &.hide-for-xxlarge-up,
-      &.hide-for-xxlarge-only { display: table-row !important; }
-    }
-    td,
-    th {
-      &.hide-for-small,
-      &.hide-for-small-only,
-      &.hide-for-medium,
-      &.hide-for-medium-down,
-      &.hide-for-medium-only,
-      &.show-for-medium-up,
-      &.show-for-large,
-      &.show-for-large-up,
-      &.show-for-large-only,
-      &.hide-for-xlarge,
-      &.hide-for-xlarge-up,
-      &.hide-for-xlarge-only,
-      &.hide-for-xxlarge-up,
-      &.hide-for-xxlarge-only { display: table-cell !important; }
-    }
-  }
+        @if $include-legacy-visibility-classes {
+          $visibility-inherit-list: append($visibility-inherit-list, unquote(
+            '.hide-for-#{$visibility-comparison-breakpoint}, .show-for-#{$visibility-comparison-breakpoint}-down'
+          ), comma);
+          $visibility-none-list: append($visibility-none-list, unquote(
+            '.show-for-#{$visibility-comparison-breakpoint}, .hide-for-#{$visibility-comparison-breakpoint}-down'
+          ), comma);
+          $visibility-table-list: append($visibility-table-list, unquote(
+            'table.hide-for-#{$visibility-comparison-breakpoint}, table.show-for-#{$visibility-comparison-breakpoint}-down'
+          ), comma);
+          $visibility-table-header-group-list: append($visibility-table-header-group-list, unquote(
+            'thead.hide-for-#{$visibility-comparison-breakpoint}, thead.show-for-#{$visibility-comparison-breakpoint}-down'
+          ), comma);
+          $visibility-table-row-group-list: append($visibility-table-row-group-list, unquote(
+            'tbody.hide-for-#{$visibility-comparison-breakpoint}, tbody.show-for-#{$visibility-comparison-breakpoint}-down'
+          ), comma);
+          $visibility-table-row-list: append($visibility-table-row-list, unquote(
+            'tr.hide-for-#{$visibility-comparison-breakpoint}, tr.show-for-#{$visibility-comparison-breakpoint}-down'
+          ), comma);
+          $visibility-table-cell-list: append($visibility-table-cell-list, unquote(
+            'th.hide-for-#{$visibility-comparison-breakpoint}, td.hide-for-#{$visibility-comparison-breakpoint}, th.show-for-#{$visibility-comparison-breakpoint}-down, td.show-for-#{$visibility-comparison-breakpoint}-down'
+          ), comma);
+        }
 
-  /* X-Large Displays: 1441 and up */
-  @media #{$xlarge-up} {
-    .hide-for-small,
-    .hide-for-small-only,
-    .hide-for-medium,
-    .hide-for-medium-down,
-    .hide-for-medium-only,
-    .show-for-medium-up,
-    .show-for-large-up,
-    .hide-for-large-only,
-    .show-for-xlarge,
-    .show-for-xlarge-up,
-    .show-for-xlarge-only,
-    .hide-for-xxlarge-up,
-    .hide-for-xxlarge-only { display: inherit !important; }
+      } @else {
+        // current breakpoint
 
-    .show-for-small-only,
-    .show-for-medium,
-    .show-for-medium-down,
-    .show-for-medium-only,
-    .show-for-large,
-    .show-for-large-only,
-    .show-for-large-down,
-    .hide-for-xlarge,
-    .hide-for-xlarge-up,
-    .hide-for-xlarge-only,
-    .show-for-xxlarge-up,
-    .show-for-xxlarge-only { display: none !important; }
+        $visibility-inherit-list: append($visibility-inherit-list, unquote(
+          '.show-for-#{$visibility-comparison-breakpoint}-only, .show-for-#{$visibility-comparison-breakpoint}-up'
+        ), comma);
+        $visibility-none-list: append($visibility-none-list, unquote(
+          '.hide-for-#{$visibility-comparison-breakpoint}-only, .hide-for-#{$visibility-comparison-breakpoint}-up'
+        ), comma);
+        $visibility-table-list: append($visibility-table-list, unquote(
+          'table.show-for-#{$visibility-comparison-breakpoint}-only, table.show-for-#{$visibility-comparison-breakpoint}-up'
+        ), comma);
+        $visibility-table-header-group-list: append($visibility-table-header-group-list, unquote(
+          'thead.show-for-#{$visibility-comparison-breakpoint}-only, thead.show-for-#{$visibility-comparison-breakpoint}-up'
+        ), comma);
+        $visibility-table-row-group-list: append($visibility-table-row-group-list, unquote(
+          'tbody.show-for-#{$visibility-comparison-breakpoint}-only, tbody.show-for-#{$visibility-comparison-breakpoint}-up'
+        ), comma);
+        $visibility-table-row-list: append($visibility-table-row-list, unquote(
+          'tr.show-for-#{$visibility-comparison-breakpoint}-only, tr.show-for-#{$visibility-comparison-breakpoint}-up'
+        ), comma);
+        $visibility-table-cell-list: append($visibility-table-cell-list, unquote(
+          'th.show-for-#{$visibility-comparison-breakpoint}-only, td.show-for-#{$visibility-comparison-breakpoint}-only, th.show-for-#{$visibility-comparison-breakpoint}-up, td.show-for-#{$visibility-comparison-breakpoint}-up'
+        ), comma);
 
-    /* Specific visibility for tables */
-    table {
-      &.hide-for-small,
-      &.hide-for-small-only,
-      &.hide-for-medium,
-      &.hide-for-medium-down,
-      &.hide-for-medium-only,
-      &.show-for-medium-up,
-      &.show-for-large-up,
-      &.hide-for-large-only,
-      &.show-for-xlarge,
-      &.show-for-xlarge-up,
-      &.show-for-xlarge-only,
-      &.hide-for-xxlarge-up,
-      &.hide-for-xxlarge-only { display: table; }
+        @if $include-legacy-visibility-classes {
+          $visibility-inherit-list: append($visibility-inherit-list, unquote(
+            '.show-for-#{$visibility-comparison-breakpoint}, .show-for-#{$visibility-comparison-breakpoint}-down'
+          ), comma);
+          $visibility-none-list: append($visibility-none-list, unquote(
+            '.hide-for-#{$visibility-comparison-breakpoint}, .hide-for-#{$visibility-comparison-breakpoint}-down'
+          ), comma);
+          $visibility-table-list: append($visibility-table-list, unquote(
+            'table.show-for-#{$visibility-comparison-breakpoint}, table.show-for-#{$visibility-comparison-breakpoint}-down'
+          ), comma);
+          $visibility-table-header-group-list: append($visibility-table-header-group-list, unquote(
+            'thead.show-for-#{$visibility-comparison-breakpoint}, thead.show-for-#{$visibility-comparison-breakpoint}-down'
+          ), comma);
+          $visibility-table-row-group-list: append($visibility-table-row-group-list, unquote(
+            'tbody.show-for-#{$visibility-comparison-breakpoint}, tbody.show-for-#{$visibility-comparison-breakpoint}-down'
+          ), comma);
+          $visibility-table-row-list: append($visibility-table-row-list, unquote(
+            'tr.show-for-#{$visibility-comparison-breakpoint}, tr.show-for-#{$visibility-comparison-breakpoint}-down'
+          ), comma);
+          $visibility-table-cell-list: append($visibility-table-cell-list, unquote(
+            'th.show-for-#{$visibility-comparison-breakpoint}, td.show-for-#{$visibility-comparison-breakpoint}, th.show-for-#{$visibility-comparison-breakpoint}-down, td.show-for-#{$visibility-comparison-breakpoint}-down'
+          ), comma);
+        }
+      }
     }
-    thead {
-      &.hide-for-small,
-      &.hide-for-small-only,
-      &.hide-for-medium,
-      &.hide-for-medium-down,
-      &.hide-for-medium-only,
-      &.show-for-medium-up,
-      &.show-for-large-up,
-      &.hide-for-large-only,
-      &.show-for-xlarge,
-      &.show-for-xlarge-up,
-      &.show-for-xlarge-only,
-      &.hide-for-xxlarge-up,
-      &.hide-for-xxlarge-only { display: table-header-group !important; }
-    }
-    tbody {
-      &.hide-for-small,
-      &.hide-for-small-only,
-      &.hide-for-medium,
-      &.hide-for-medium-down,
-      &.hide-for-medium-only,
-      &.show-for-medium-up,
-      &.show-for-large-up,
-      &.hide-for-large-only,
-      &.show-for-xlarge,
-      &.show-for-xlarge-up,
-      &.show-for-xlarge-only,
-      &.hide-for-xxlarge-up,
-      &.hide-for-xxlarge-only { display: table-row-group !important; }
-    }
-    tr {
-      &.hide-for-small,
-      &.hide-for-small-only,
-      &.hide-for-medium,
-      &.hide-for-medium-down,
-      &.hide-for-medium-only,
-      &.show-for-medium-up,
-      &.show-for-large-up,
-      &.hide-for-large-only,
-      &.show-for-xlarge,
-      &.show-for-xlarge-up,
-      &.show-for-xlarge-only,
-      &.hide-for-xxlarge-up,
-      &.hide-for-xxlarge-only { display: table-row !important; }
-    }
-    td,
-    th {
-      &.hide-for-small,
-      &.hide-for-small-only,
-      &.hide-for-medium,
-      &.hide-for-medium-down,
-      &.hide-for-medium-only,
-      &.show-for-medium-up,
-      &.show-for-large-up,
-      &.hide-for-large-only,
-      &.show-for-xlarge,
-      &.show-for-xlarge-up,
-      &.show-for-xlarge-only,
-      &.hide-for-xxlarge-up,
-      &.hide-for-xxlarge-only { display: table-cell !important; }
+
+    /* #{$current-visibility-breakpoint} displays */
+    @media #{nth($visibility-breakpoint-queries, index($visibility-breakpoint-sizes, $current-visibility-breakpoint))} {
+      #{$visibility-inherit-list} {
+        display: inherit !important;
+      }
+      #{$visibility-none-list} {
+        display: none !important;
+      }
+      @if $include-table-visibility-classes != false {
+        #{$visibility-table-list} {
+          display: table;
+        }
+        #{$visibility-table-header-group-list} {
+          display: table-header-group !important;
+        }
+        #{$visibility-table-row-group-list} {
+          display: table-row-group !important;
+        }
+        #{$visibility-table-row-list} {
+          display: table-row !important;
+        }
+        #{$visibility-table-cell-list} {
+          display: table-cell !important;
+        }
+      }
     }
   }
+}
 
-  /* XX-Large Displays: 1920 and up */
-  @media #{$xxlarge-up} {
-    .hide-for-small,
-    .hide-for-small-only,
-    .hide-for-medium,
-    .hide-for-medium-down,
-    .hide-for-medium-only,
-    .show-for-medium-up,
-    .show-for-large-up,
-    .hide-for-large-only,
-    .hide-for-xlarge-only,
-    .show-for-xlarge-up,
-    .show-for-xxlarge-up,
-    .show-for-xxlarge-only { display: inherit !important; }
-
-    .show-for-small-only,
-    .show-for-medium,
-    .show-for-medium-down,
-    .show-for-medium-only,
-    .show-for-large,
-    .show-for-large-only,
-    .show-for-large-down,
-    .hide-for-xlarge,
-    .show-for-xlarge-only,
-    .hide-for-xxlarge-up,
-    .hide-for-xxlarge-only { display: none !important; }
 
-    /* Specific visibility for tables */
-    table {
-      &.hide-for-small,
-      &.hide-for-small-only,
-      &.hide-for-medium,
-      &.hide-for-medium-down,
-      &.hide-for-medium-only,
-      &.show-for-medium-up,
-      &.show-for-large-up,
-      &.hide-for-xlarge-only,
-      &.show-for-xlarge-up,
-      &.show-for-xxlarge-up,
-      &.show-for-xxlarge-only { display: table; }
-    }
-    thead {
-      &.hide-for-small,
-      &.hide-for-small-only,
-      &.hide-for-medium,
-      &.hide-for-medium-down,
-      &.hide-for-medium-only,
-      &.show-for-medium-up,
-      &.show-for-large-up,
-      &.hide-for-xlarge-only,
-      &.show-for-xlarge-up,
-      &.show-for-xxlarge-up,
-      &.show-for-xxlarge-only { display: table-header-group !important; }
-    }
-    tbody {
-      &.hide-for-small,
-      &.hide-for-small-only,
-      &.hide-for-medium,
-      &.hide-for-medium-down,
-      &.hide-for-medium-only,
-      &.show-for-medium-up,
-      &.show-for-large-up,
-      &.hide-for-xlarge-only,
-      &.show-for-xlarge-up,
-      &.show-for-xxlarge-up,
-      &.show-for-xxlarge-only { display: table-row-group !important; }
-    }
-    tr {
-      &.hide-for-small,
-      &.hide-for-small-only,
-      &.hide-for-medium,
-      &.hide-for-medium-down,
-      &.hide-for-medium-only,
-      &.show-for-medium-up,
-      &.show-for-large-up,
-      &.hide-for-xlarge-only,
-      &.show-for-xlarge-up,
-      &.show-for-xxlarge-up,
-      &.show-for-xxlarge-only { display: table-row !important; }
-    }
-    td,
-    th {
-      &.hide-for-small,
-      &.hide-for-small-only,
-      &.hide-for-medium,
-      &.hide-for-medium-down,
-      &.hide-for-medium-only,
-      &.show-for-medium-up,
-      &.show-for-large-up,
-      &.hide-for-xlarge-only,
-      &.show-for-xlarge-up,
-      &.show-for-xxlarge-up,
-      &.show-for-xxlarge-only { display: table-cell !important; }
-    }
-  }
+@if $include-html-visibility-classes != false {
 
+  @include visibility-loop;
 
   /* Orientation targeting */
   .show-for-landscape,
@@ -673,4 +333,4 @@ $include-html-visibility-classes: $include-html-classes !default;
   th.hide-for-touch { display: table-cell !important; }
   .touch th.show-for-touch { display: table-cell !important; }
 
-}
+}