Merge pull request #980 from pat270/clay-964

New: (Fixes #964) Table added `.table-disabled` for disabling table r…
liferay · Jun 9, 2018 · 0458b5d · 0458b5d
2 parents 13eda3a + 469405a
commit 0458b5d
Show file tree

Hide file tree

Showing 3 changed files with 98 additions and 2 deletions.
diff --git a/packages/clay-css/src/scss/atlas/variables/_tables.scss b/packages/clay-css/src/scss/atlas/variables/_tables.scss
@@ -4,6 +4,8 @@ $table-hover-bg: lighten($component-active-bg, 44.90) !default;
 $table-border-color: lighten(saturate(adjust-hue($secondary, 3), 6.13), 46.08) !default;
 $table-font-size: 0.875rem !default;
 
+$table-disabled-color: #D9D9DD !default;
+
 $table-head-bg: #FFF !default;
 $table-head-border-bottom-width: 1px !default;
 $table-head-color: $secondary !default;
@@ -62,6 +64,8 @@ $table-list-active-bg: $table-list-hover-bg !default;
 $table-list-border-color: lighten(saturate(adjust-hue($secondary, 3), 6.13), 46.08) !default;
 $table-list-color: $body-color !default;
 
+$table-list-disabled-color: #D9D9DD !default;
+
 $table-list-head-bg: #FFF !default;
 
 $table-list-link-color: $secondary !default;

diff --git a/packages/clay-css/src/scss/components/_tables.scss b/packages/clay-css/src/scss/components/_tables.scss
@@ -175,6 +175,44 @@ th {
 	}
 }
 
+// Table Disabled
+
+.table-disabled {
+	color: $table-disabled-color;
+
+	> td,
+	> th {
+		background-color: $table-disabled-bg;
+		cursor: $table-disabled-cursor;
+
+		a {
+			color: $table-disabled-color;
+			pointer-events: $table-disabled-pointer-events;
+		}
+	}
+
+	.table-title,
+	.table-list-title {
+		color: $table-disabled-color;
+	}
+}
+
+.table-hover .table-disabled:hover {
+	> td,
+	> th {
+		background-color: $table-disabled-bg;
+	}
+}
+
+.table-striped {
+	tbody .table-disabled:nth-of-type(odd) {
+		td,
+		th {
+			background-color: $table-disabled-bg;
+		}
+	}
+}
+
 // Table Title
 
 .table-title {
@@ -334,6 +372,8 @@ th {
 	}
 }
 
+// Table List Striped
+
 .table-list.table-striped {
 	tbody tr:nth-of-type(odd) {
 		td,
@@ -343,6 +383,8 @@ th {
 	}
 }
 
+// Table List Hover
+
 .table-list.table-hover {
 	tbody tr {
 		@include hover {
@@ -354,6 +396,8 @@ th {
 	}
 }
 
+// Table List Active
+
 .table-list.table-hover {
 	.table-active {
 		@include hover {
@@ -375,6 +419,44 @@ th {
 	}
 }
 
+// Table List Disabled
+
+.table-list .table-disabled {
+	color: $table-list-disabled-color;
+
+	> td,
+	> th {
+		background-color: $table-list-disabled-bg;
+		cursor: $table-list-disabled-cursor;
+
+		a {
+			color: $table-list-disabled-color;
+			pointer-events: $table-list-disabled-pointer-events;
+		}
+	}
+
+	.table-title,
+	.table-list-title {
+		color: $table-list-disabled-color;
+	}
+}
+
+.table-list.table-hover .table-disabled:hover {
+	> td,
+	> th {
+		background-color: $table-list-disabled-bg;
+	}
+}
+
+.table-list.table-striped {
+	tbody .table-disabled:nth-of-type(odd) {
+		td,
+		th {
+			background-color: $table-list-disabled-bg;
+		}
+	}
+}
+
 // Table List Title
 
 .table-list-title {
@@ -533,15 +615,15 @@ th {
 // Show Quick Action
 
 .show-quick-actions-on-hover {
-	tr:not(.table-active) {
+	tr:not(.table-active):not(.table-disabled) {
 		@include hover {
 			.quick-action-menu {
 				display: flex;
 			}
 		}
 	}
 
-	.table-focus:not(.table-active) {
+	.table-focus:not(.table-active):not(.table-disabled) {
 		.quick-action-menu {
 			display: flex;
 		}

diff --git a/packages/clay-css/src/scss/variables/_tables.scss b/packages/clay-css/src/scss/variables/_tables.scss
@@ -7,6 +7,11 @@ $table-margin-bottom: 0 !default;
 
 $table-cell-gutters: $grid-gutter-width / 2 !default; // 15px
 
+$table-disabled-bg: #FFF !default;
+$table-disabled-color: #ACACAC !default;
+$table-disabled-cursor: $disabled-cursor !default;
+$table-disabled-pointer-events: none !default;
+
 $table-head-border-bottom-width: null !default;
 $table-head-border-top-width: 0 !default;
 $table-head-font-size: null !default;
@@ -94,6 +99,11 @@ $table-list-accent-bg: #F2F2F2 !default;
 $table-list-hover-bg: #ECECEC !default;
 $table-list-active-bg: #DADADA !default;
 
+$table-list-disabled-bg: #FFF !default;
+$table-list-disabled-color: #ACACAC !default;
+$table-list-disabled-cursor: $disabled-cursor !default;
+$table-list-disabled-pointer-events: none !default;
+
 $table-list-border-color: $table-border-color !default;
 
 $table-list-border-x-width: 0.0625rem !default; // 1px