@clayui/css 3.106.1 → 3.108.0

package/src/scss/variables/_tables.scss

@@ -52,9 +52,10 @@ $table-striped-order: odd !default;
 
 // Table Cell applies to `th` and `td`
 
-$table-cell-gutters: $grid-gutter-width * 0.5 !default; // 15px
-$table-cell-padding: 0.75rem !default;
-$table-cell-padding-sm: 0.3rem !default;
+$table-cell-gutters: 1.25rem !default;
+$table-cell-padding: 0.5rem 1rem !default;
+$table-cell-padding-sm: 0.25rem 1rem !default;
+$table-cell-padding-lg: 1.0625rem !default;
 
 $table-cell-expand-min-width: 12.5rem !default; // 200px
 
@@ -75,17 +76,9 @@ $table-head-border-top-width: 0px !default;
 $table-head-color: $gray-700 !default;
 $table-head-font-size: null !default;
 $table-head-font-weight: null !default;
-$table-head-height: 36px !default;
-
-// table-cell: Webkit (Safari 11) rendering issue with responsive-tables. See https://github.com/liferay/clay/issues/950
+$table-head-height: 56px !default;
 
 $c-table-thead: () !default;
-$c-table-thead: map-merge(
-	(
-		background-color: $table-head-bg,
-	),
-	$c-table-thead
-);
 
 $table-head-link: () !default;
 
@@ -115,7 +108,7 @@ $table-divider-bg: $white !default;
 $table-divider-color: null !default;
 $table-divider-font-weight: null !default;
 $table-divider-font-size: null !default;
-$table-divider-padding: $table-cell-padding !default;
+$table-divider-padding: 0.5rem 1rem 0.5rem 1.25rem !default;
 $table-divider-text-transform: null !default;
 
 $table-quick-action-menu-align-items: flex-start !default;
@@ -147,8 +140,8 @@ $c-table-caption: () !default;
 $c-table-caption: map-merge(
 	(
 		caption-side: top,
-		padding-left: $table-cell-padding,
-		padding-right: $table-cell-padding,
+		padding-left: nth($table-cell-padding, 2),
+		padding-right: nth($table-cell-padding, 2),
 	),
 	$c-table-caption
 );
@@ -230,12 +223,10 @@ $table-action-link: map-deep-merge(
 
 // .table
 
-// thead, tbody, tfoot Chrome 87 rendering issue. See https://github.com/liferay/clay/issues/3847.
-// thead table-cell, tbody table-cell, tfoot table-cell: Webkit (Safari 11) rendering issue with responsive-tables. See https://github.com/liferay/clay/issues/950
-
 $c-table: () !default;
 $c-table: map-deep-merge(
 	(
+		background-color: $table-bg,
 		border-spacing: 0,
 		color: $table-color,
 		font-size: $table-font-size,
@@ -245,12 +236,12 @@ $c-table: map-deep-merge(
 			map-deep-merge(
 				$c-table-thead,
 				(
+					background-color: $table-head-bg,
 					table-cell: (
-						background-color: $table-head-bg,
 						border-bottom: $table-head-border-bottom-width solid
 							$table-border-color,
 						border-top-width: $table-head-border-top-width,
-						vertical-align: bottom,
+						vertical-align: middle,
 					),
 					th: (
 						href: $table-head-link,
@@ -260,9 +251,6 @@ $c-table: map-deep-merge(
 		table-column-start: (
 			padding-left: $table-cell-gutters,
 		),
-		table-column-end: (
-			padding-right: $table-cell-gutters,
-		),
 		th: (
 			background-clip: padding-box,
 			border-top: $table-border-width solid $table-border-color,
@@ -282,6 +270,7 @@ $c-table: map-deep-merge(
 			border-right-width: $table-data-border-right-width,
 			border-style: $table-data-border-style,
 			border-top-width: $table-data-border-top-width,
+			height: 56px,
 			padding: $table-cell-padding,
 			position: relative,
 			vertical-align: $table-data-vertical-align,
@@ -290,26 +279,13 @@ $c-table: map-deep-merge(
 			map-deep-merge(
 				$c-table-tbody,
 				(
-					table-cell: (
-						background-color:
-							map-get($c-table-tbody, background-color),
-					),
 					tbody: (
 						border-top: calc(2 * #{$table-border-width}) solid
 							$table-border-color,
 					),
 				)
 			),
-		tfoot:
-			map-deep-merge(
-				$c-table-tfoot,
-				(
-					table-cell: (
-						background-color:
-							map-get($c-table-tfoot, background-color),
-					),
-				)
-			),
+		tfoot: $c-table-tfoot,
 		caption: $c-table-caption,
 		table-divider: (
 			table-cell: (
@@ -317,23 +293,22 @@ $c-table: map-deep-merge(
 				color: $table-divider-color,
 				font-size: $table-divider-font-size,
 				font-weight: $table-divider-font-weight,
+				height: 34px,
+				line-height: 17px,
 				padding: $table-divider-padding,
 				text-transform: $table-divider-text-transform,
 			),
 		),
 		table-active: (
 			background-color: $table-active-bg,
-			table-cell: (
-				background-color: $table-active-bg,
-			),
 			quick-action-menu: (
 				background-color: $table-quick-action-menu-active-bg,
 			),
 		),
 		table-disabled: (
+			background-color: $table-disabled-bg,
 			color: $table-disabled-color,
 			table-cell: (
-				background-color: $table-disabled-bg,
 				cursor: $table-disabled-cursor,
 				href: (
 					color: $table-disabled-color,
@@ -349,8 +324,8 @@ $c-table: map-deep-merge(
 		),
 		autofit-col: (
 			justify-content: center,
-			padding-left: $table-cell-padding,
-			padding-right: $table-cell-padding,
+			padding-left: nth($table-cell-padding, 2),
+			padding-right: nth($table-cell-padding, 2),
 			first-child: (
 				padding-left: 0,
 			),
@@ -372,8 +347,8 @@ $c-table: map-deep-merge(
 		quick-action-menu: (
 			align-items: $table-quick-action-menu-align-items,
 			background-color: $table-quick-action-menu-bg,
-			padding-bottom: $table-cell-padding,
-			padding-top: $table-cell-padding,
+			padding-bottom: nth($table-cell-padding, 1),
+			padding-top: nth($table-cell-padding, 1),
 		),
 	),
 	$c-table
@@ -389,10 +364,6 @@ $c-table-hover: map-deep-merge(
 				hover: (
 					background-color: $table-hover-bg,
 					color: $table-hover-color,
-					table-cell: (
-						background-color: $table-hover-bg,
-						color: $table-hover-color,
-					),
 					quick-action-menu: (
 						background-color: $table-quick-action-menu-hover-bg,
 					),
@@ -409,15 +380,94 @@ $c-table-hover: map-deep-merge(
 		table-disabled: (
 			hover: (
 				background-color: $table-disabled-bg,
-				table-cell: (
-					background-color: $table-disabled-bg,
-				),
 			),
 		),
 	),
 	$c-table-hover
 );
 
+// .table-focus
+
+$c-tr-table-focus: () !default;
+$c-tr-table-focus: map-deep-merge(
+	(
+		outline: 0,
+		td: (
+			outline: 0,
+			before: (
+				box-shadow: (
+					inset 0 0.2rem 0 0 rgba($primary, 0.25),
+					inset 0 -0.2rem 0 0 rgba($primary, 0.25),
+				),
+				content: '',
+				display: block,
+				position: absolute,
+				left: math-sign($table-border-width),
+				right: math-sign($table-border-width),
+				top: math-sign($table-border-width),
+				bottom: math-sign($table-border-width),
+				pointer-events: none,
+				z-index: 1,
+			),
+			first-child: (
+				after: (
+					box-shadow: inset 0.2rem 0 0 0 rgba($primary, 0.25),
+					content: '',
+					display: block,
+					position: absolute,
+					pointer-events: none,
+					top: $table-border-width,
+					bottom: $table-border-width,
+					left: math-sign($table-border-width),
+					z-index: 1,
+					width: 0.25rem,
+				),
+			),
+			last-child: (
+				after: (
+					box-shadow: inset -0.2rem 0 0 0 rgba($primary, 0.25),
+					content: '',
+					display: block,
+					position: absolute,
+					pointer-events: none,
+					top: $table-border-width,
+					bottom: $table-border-width,
+					right: math-sign($table-border-width),
+					z-index: 1,
+					width: 0.25rem,
+				),
+			),
+		),
+	),
+	$c-tr-table-focus
+);
+
+$c-td-table-focus: () !default;
+$c-td-table-focus: map-deep-merge(
+	(
+		outline: 'none',
+		box-shadow: clay-enable-shadows($component-focus-inset-box-shadow),
+	),
+	$c-td-table-focus
+);
+
+// .table-head-bordered
+
+$c-table-head-bordered: () !default;
+$c-table-head-bordered: map-deep-merge(
+	(
+		thead: (
+			table-cell: (
+				border-left: $table-border-width solid $table-border-color,
+				table-column-start: (
+					border-left-width: 0,
+				),
+			),
+		),
+	),
+	$c-table-head-bordered
+);
+
 // .table-bordered
 
 $table-bordered-border-width: $table-border-width !default;
@@ -444,23 +494,43 @@ $c-table-sm: () !default;
 $c-table-sm: map-deep-merge(
 	(
 		table-cell: (
+			height: 32px,
 			padding: $table-cell-padding-sm,
 		),
 	),
 	$c-table-sm
 );
 
+// .table-md
+
+$c-table-md: () !default;
+$c-table-md: map-deep-merge(
+	(
+		table-cell: (
+			height: 48px,
+			padding: 0.375rem 1rem,
+		),
+	),
+	$c-table-md
+);
+
+// .table-lg
+
+$c-table-lg: () !default;
+$c-table-lg: map-deep-merge(
+	(
+		table-cell: (
+			padding: $table-cell-padding-lg,
+		),
+	),
+	$c-table-lg
+);
+
 // .table-nested-rows
 
 $c-table-nested-rows: () !default;
 $c-table-nested-rows: map-deep-merge(
 	(
-		table-column-start: (
-			padding-left: 1.25rem,
-		),
-		table-column-end: (
-			padding-right: 1.25rem,
-		),
 		autofit-col: (
 			padding-left: 0.125rem,
 			padding-right: 0.125rem,
@@ -569,7 +639,6 @@ $table-list-head-link: () !default;
 $c-table-list-thead: () !default;
 $c-table-list-thead: map-merge(
 	(
-		background-color: $white,
 		border-top-left-radius:
 			clay-border-radius-inner(
 				$table-list-border-radius,
@@ -589,7 +658,6 @@ $c-table-list-thead: map-merge(
 $c-table-list-tbody: () !default;
 $c-table-list-tbody: map-merge(
 	(
-		background-color: $white,
 		border-bottom-left-radius:
 			clay-border-radius-inner(
 				$table-list-border-radius,
@@ -607,12 +675,6 @@ $c-table-list-tbody: map-merge(
 // Table List Tfoot
 
 $c-table-list-tfoot: () !default;
-$c-table-list-tfoot: map-merge(
-	(
-		background-color: $white,
-	),
-	$c-table-list-tfoot
-);
 
 // .table.table-list.table-bordered th, .table.table-list.table-bordered td
 
@@ -630,8 +692,8 @@ $c-table-list-caption: () !default;
 
 // .table-list .table-divider
 
-$table-list-divider-padding-x: 0.75rem !default;
-$table-list-divider-padding-y: 0.75rem !default;
+$table-list-divider-padding-x: 1rem !default;
+$table-list-divider-padding-y: 0.5rem !default;
 
 // .table-list .quick-action-menu
 
@@ -709,9 +771,6 @@ $table-list-action-link: map-deep-merge(
 
 // .table-list
 
-// thead, tbody, tfoot: Chrome 87 rendering issue. See https://github.com/liferay/clay/issues/3847.
-// thead table-cell, tbody table-cell, tfoot table-cell: Webkit (Safari 11) rendering issue with responsive-tables. See https://github.com/liferay/clay/issues/950
-
 $c-table-list: () !default;
 $c-table-list: map-merge(
 	(
@@ -729,7 +788,6 @@ $c-table-list: map-merge(
 				$c-table-list-thead,
 				(
 					table-cell: (
-						background-color: $table-list-head-bg,
 						border-bottom-width: 0,
 						font-size: $table-list-head-font-size,
 						font-weight: $table-list-head-font-weight,
@@ -745,8 +803,6 @@ $c-table-list: map-merge(
 				$c-table-list-tbody,
 				(
 					table-cell: (
-						background-color:
-							map-get($c-table-list-tbody, background-color),
 						vertical-align: middle,
 					),
 				)
@@ -756,8 +812,6 @@ $c-table-list: map-merge(
 				$c-table-list-tfoot,
 				(
 					table-cell: (
-						background-color:
-							map-get($c-table-list-tfoot, background-color),
 						vertical-align: middle,
 					),
 				)
@@ -766,16 +820,13 @@ $c-table-list: map-merge(
 		table-divider: (
 			table-cell: (
 				padding-bottom: $table-list-divider-padding-y,
-				padding-left: $table-list-divider-padding-x,
+				padding-left: 1.25rem,
 				padding-right: $table-list-divider-padding-x,
 				padding-top: $table-list-divider-padding-y,
 			),
 		),
 		table-active: (
 			background-color: $table-list-active-bg,
-			table-cell: (
-				background-color: $table-list-active-bg,
-			),
 			quick-action-menu: (
 				background-color: $table-list-quick-action-menu-active-bg,
 			),
@@ -784,8 +835,6 @@ $c-table-list: map-merge(
 			background-color: $table-list-disabled-bg,
 			color: $table-list-disabled-color,
 			table-cell: (
-				background-color: $table-list-disabled-bg,
-				color: $table-list-disabled-color,
 				href: (
 					color: $table-list-disabled-color,
 					pointer-events: $table-list-disabled-pointer-events,
@@ -860,9 +909,6 @@ $c-table-list-table-hover: map-deep-merge(
 			tr: (
 				hover: (
 					background-color: $table-list-hover-bg,
-					table-cell: (
-						background-color: $table-list-hover-bg,
-					),
 					quick-action-menu: (
 						background-color: $table-list-quick-action-menu-hover-bg,
 					),
@@ -872,9 +918,6 @@ $c-table-list-table-hover: map-deep-merge(
 		table-active: (
 			hover: (
 				background-color: $table-list-active-bg,
-				table-cell: (
-					background-color: $table-list-active-bg,
-				),
 				quick-action-menu: (
 					background-color: $table-list-quick-action-menu-hover-bg,
 				),
@@ -884,9 +927,6 @@ $c-table-list-table-hover: map-deep-merge(
 			background-color: $table-list-disabled-bg,
 			hover: (
 				background-color: $table-list-disabled-bg,
-				table-cell: (
-					background-color: $table-list-disabled-bg,
-				),
 			),
 		),
 	),

package/src/scss/variables/_utilities.scss

@@ -751,7 +751,7 @@ $c-prefers-link-underline: map-deep-merge(
 $c-prefers-letter-spacing: () !default;
 $c-prefers-letter-spacing: map-deep-merge(
 	(
-		'.c-prefers-letter-spacing-1': (
+		'.c-prefers-letter-spacing-1, .c-prefers-letter-spacing-1 *': (
 			letter-spacing: 1px !important,
 		),
 	),