New: (Fixes #773) Table added option to configure `$table-responsive-…

…margin-bottom` and `$table-margin-bottom` Update: Table List removed Chrome 61 overflow hack, fixed in newer versions
liferay · Apr 5, 2018 · 9786820 · 9786820
1 parent fd88509
commit 9786820
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 6 deletions.
diff --git a/packages/clay/src/scss/components/_tables.scss b/packages/clay/src/scss/components/_tables.scss
@@ -22,6 +22,7 @@ th {
 
 .table {
 	border-collapse: collapse;
+	margin-bottom: $table-margin-bottom;
 
 	thead {
 		td,
@@ -568,18 +569,15 @@ th {
 	}
 }
 
-// Chrome 61.0.3163.100 bug, box-shadow on th td with .table-responsive causes
-// vertical scrollbar to appear.
+// Table Responsive
 
 .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) {
-				overflow-y: hidden;
-			}
+			margin-bottom: $table-responsive-margin-bottom;
 		}
 	}
 }
diff --git a/packages/clay/src/scss/variables/_tables.scss b/packages/clay/src/scss/variables/_tables.scss
@@ -1,3 +1,9 @@
+$table-responsive-margin-bottom: 1.5rem !default;
+
+// Table
+
+$table-margin-bottom: 0 !default;
+
 $table-cell-gutters: $grid-gutter-width / 2 !default; // 15px
 
 $table-head-border-bottom-width: null !default;
@@ -90,7 +96,7 @@ $table-list-border-color: $table-border-color !default;
 $table-list-border-width: 0.0625rem !default; // 1px
 $table-list-border-radius: 6px !default;
 $table-list-font-size: null !default;
-$table-list-margin-bottom: 1.5rem !default;
+$table-list-margin-bottom: $table-list-border-width !default;
 $table-list-margin-top: null !default;
 
 $table-list-head-bg: null !default;