New: (Fixes liferay#838) Table List added options to configure `$tabl…

…e-list-border-x-width`, `$table-list-border-y-width`, `$table-list-divider-padding-x`, and `$table-list-divider-padding-y`
pat270 · Apr 25, 2018 · 0bdb33d · 0bdb33d
1 parent de3422f
commit 0bdb33d
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 36 deletions.
diff --git a/packages/clay/src/scss/atlas/variables/_tables.scss b/packages/clay/src/scss/atlas/variables/_tables.scss
@@ -63,6 +63,9 @@ $table-list-color: $body-color !default;
 
 $table-list-link-color: $secondary !default;
 
+$table-list-divider-padding-x: 0.75rem !default;
+$table-list-divider-padding-y: 0.4375rem !default;
+
 // Table List Title
 
 $table-list-title: () !default;

diff --git a/packages/clay/src/scss/components/_tables.scss b/packages/clay/src/scss/components/_tables.scss
@@ -209,34 +209,34 @@ th {
 
 	th,
 	td {
-		box-shadow: inset 0 #{$table-list-border-width} $table-list-border-color, // top
-					0 #{$table-list-border-width} $table-list-border-color; // bottom
-		padding-top: $table-list-border-width + $table-cell-padding;
+		box-shadow: inset 0 #{$table-list-border-y-width} $table-list-border-color, // top
+					0 #{$table-list-border-y-width} $table-list-border-color; // bottom
+		padding-top: $table-list-border-y-width + $table-cell-padding;
 
 		&:first-child {
-			box-shadow: inset 0 #{$table-list-border-width} $table-list-border-color, // top
-						0 #{$table-list-border-width} $table-list-border-color, // bottom
-						inset #{$table-list-border-width} 0 $table-list-border-color; // left
-			padding-left: $table-list-border-width + $table-cell-padding;
-			padding-top: $table-list-border-width + $table-cell-padding;
+			box-shadow: inset 0 #{$table-list-border-y-width} $table-list-border-color, // top
+						0 #{$table-list-border-y-width} $table-list-border-color, // bottom
+						inset #{$table-list-border-x-width} 0 $table-list-border-color; // left
+			padding-left: $table-list-border-x-width + $table-cell-padding;
+			padding-top: $table-list-border-y-width + $table-cell-padding;
 		}
 
 		&:last-child {
-			box-shadow: inset 0 #{$table-list-border-width} $table-list-border-color, // top
-						inset #{-$table-list-border-width} 0 $table-list-border-color, // right
-						0 #{$table-list-border-width} $table-list-border-color; // bottom
-			padding-right: $table-list-border-width + $table-cell-padding;
-			padding-top: $table-list-border-width + $table-cell-padding;
+			box-shadow: inset 0 #{$table-list-border-y-width} $table-list-border-color, // top
+						inset #{-$table-list-border-x-width} 0 $table-list-border-color, // right
+						0 #{$table-list-border-y-width} $table-list-border-color; // bottom
+			padding-right: $table-list-border-x-width + $table-cell-padding;
+			padding-top: $table-list-border-y-width + $table-cell-padding;
 		}
 
 		&:only-child {
-			box-shadow: inset 0 #{$table-list-border-width} $table-list-border-color, // top
-						inset #{-$table-list-border-width} 0 $table-list-border-color, // right
-						0 #{$table-list-border-width} $table-list-border-color, // bottom
-						inset #{$table-list-border-width} 0 $table-list-border-color; // left
-			padding-left: $table-list-border-width + $table-cell-padding;
-			padding-right: $table-list-border-width + $table-cell-padding;
-			padding-top: $table-list-border-width + $table-cell-padding;
+			box-shadow: inset 0 #{$table-list-border-y-width} $table-list-border-color, // top
+						inset #{-$table-list-border-x-width} 0 $table-list-border-color, // right
+						0 #{$table-list-border-y-width} $table-list-border-color, // bottom
+						inset #{$table-list-border-x-width} 0 $table-list-border-color; // left
+			padding-left: $table-list-border-x-width + $table-cell-padding;
+			padding-right: $table-list-border-x-width + $table-cell-padding;
+			padding-top: $table-list-border-y-width + $table-cell-padding;
 		}
 	}
 
@@ -271,21 +271,20 @@ th {
 
 	th,
 	td {
-		box-shadow: inset 0 #{$table-list-border-width} #{$table-list-border-color}, // top
-					inset #{-$table-list-border-width} 0 #{$table-list-border-color}, // right
-					0 #{$table-list-border-width} #{$table-list-border-color}, // bottom
-					#{-$table-list-border-width / 2} #{$table-list-border-width / 2} 0 #{$table-list-border-width / 2} #{$table-list-border-color}; // left
-		padding-right: $table-list-border-width + $table-cell-padding;
-		padding-top: $table-list-border-width + $table-cell-padding;
+		box-shadow: inset 0 #{$table-list-border-y-width} #{$table-list-border-color}, // top
+					inset #{-$table-list-border-x-width} 0 #{$table-list-border-color}, // right
+					0 #{$table-list-border-y-width} #{$table-list-border-color}; // bottom
+		padding-right: $table-list-border-x-width + $table-cell-padding;
+		padding-top: $table-list-border-y-width + $table-cell-padding;
 
 		&:first-child {
-			box-shadow: inset 0 #{$table-list-border-width} #{$table-list-border-color}, // top
-						inset #{-$table-list-border-width} 0 #{$table-list-border-color}, // right
-						0 #{$table-list-border-width} #{$table-list-border-color}, // bottom
-						inset #{$table-list-border-width} 0 #{$table-list-border-color}; // left
-			padding-left: $table-list-border-width + $table-cell-padding;
-			padding-right: $table-list-border-width + $table-cell-padding;
-			padding-top: $table-list-border-width + $table-cell-padding;
+			box-shadow: inset 0 #{$table-list-border-y-width} #{$table-list-border-color}, // top
+						inset #{-$table-list-border-x-width} 0 #{$table-list-border-color}, // right
+						0 #{$table-list-border-y-width} #{$table-list-border-color}, // bottom
+						inset #{$table-list-border-x-width} 0 #{$table-list-border-color}; // left
+			padding-left: $table-list-border-x-width + $table-cell-padding;
+			padding-right: $table-list-border-x-width + $table-cell-padding;
+			padding-top: $table-list-border-y-width + $table-cell-padding;
 		}
 	}
 }
@@ -386,6 +385,16 @@ th {
 	}
 }
 
+.table-list .table-divider {
+	td,
+	th {
+		padding-bottom: $table-list-divider-padding-y;
+		padding-left: $table-list-border-x-width + $table-list-divider-padding-x;
+		padding-right: $table-list-border-x-width + $table-list-divider-padding-x;
+		padding-top: $table-list-border-y-width + $table-list-divider-padding-y;
+	}
+}
+
 // Table Vertical Align
 
 .table-valign-bottom {
@@ -540,7 +549,7 @@ th {
 		align-items: $table-list-quick-action-menu-align-items;
 		background-color: $table-list-quick-action-menu-bg;
 		bottom: 0;
-		top: $table-list-border-width;
+		top: $table-list-border-y-width;
 	}
 }
 

diff --git a/packages/clay/src/scss/variables/_tables.scss b/packages/clay/src/scss/variables/_tables.scss
@@ -95,10 +95,15 @@ $table-list-hover-bg: #ECECEC !default;
 $table-list-active-bg: #DADADA !default;
 
 $table-list-border-color: $table-border-color !default;
-$table-list-border-width: 0.0625rem !default; // 1px
+
+$table-list-border-x-width: 0.0625rem !default;
+$table-list-border-y-width: 0.0625rem !default;
+
+$table-list-border-width: $table-list-border-y-width $table-list-border-x-width !default;
+
 $table-list-border-radius: 6px !default;
 $table-list-font-size: null !default;
-$table-list-margin-bottom: $table-list-border-width !default;
+$table-list-margin-bottom: $table-list-border-y-width !default;
 $table-list-margin-top: null !default;
 
 $table-list-head-bg: null !default;
@@ -109,6 +114,9 @@ $table-list-head-vertical-alignment: null !default;
 
 $table-list-head-link: () !default;
 
+$table-list-divider-padding-x: 0.75rem !default;
+$table-list-divider-padding-y: 0.75rem !default;
+
 $table-list-quick-action-menu-align-items: center !default;
 $table-list-quick-action-menu-bg: $table-list-bg !default;
 $table-list-quick-action-menu-accent-bg: $table-list-accent-bg !default;