@clayui/css 3.57.0 → 3.59.0

package/src/scss/components/_tables.scss

@@ -28,123 +28,7 @@ caption {
 }
 
 .table {
-	border-spacing: 0;
-	color: $table-color;
-	font-size: $table-font-size;
-	margin-bottom: $table-margin-bottom;
-	width: 100%;
-
-	thead {
-		// Chrome 87 rendering issue. See https://github.com/liferay/clay/issues/3847.
-
-		@include clay-css($c-table-thead);
-
-		td,
-		th {
-			// Webkit (Safari 11) rendering issue with responsive-tables. See https://github.com/liferay/clay/issues/950
-
-			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;
-		}
-
-		th a {
-			@include clay-link($table-head-link);
-		}
-	}
-
-	th {
-		background-clip: padding-box;
-		border-top: $table-border-width solid $table-border-color;
-		color: $table-head-color;
-		font-size: $table-head-font-size;
-		font-weight: $table-head-font-weight;
-		height: $table-head-height;
-		padding: $table-cell-padding;
-		position: relative;
-		vertical-align: top;
-	}
-
-	td {
-		background-clip: padding-box;
-		border-bottom-width: $table-data-border-bottom-width;
-		border-left-width: $table-data-border-left-width;
-		border-right-width: $table-data-border-right-width;
-		border-top-width: $table-data-border-top-width;
-
-		border-color: $table-data-border-color;
-		border-style: $table-data-border-style;
-		padding: $table-cell-padding;
-		position: relative;
-		vertical-align: $table-data-vertical-align;
-	}
-
-	td:first-child,
-	th:first-child,
-	.table-cell-start {
-		padding-left: $table-cell-gutters;
-	}
-
-	td:last-child,
-	th:last-child,
-	.table-cell-end {
-		padding-right: $table-cell-gutters;
-	}
-
-	tbody {
-		// Chrome 87 rendering issue. See https://github.com/liferay/clay/issues/3847.
-
-		@include clay-css($c-table-tbody);
-
-		td,
-		th {
-			// Webkit (Safari 11) rendering issue with responsive-tables. See https://github.com/liferay/clay/issues/950
-
-			background-color: map-get($c-table-tbody, background-color);
-		}
-	}
-
-	tbody + tbody {
-		border-top: calc(2 * #{$table-border-width}) solid $table-border-color;
-	}
-
-	tfoot {
-		// Chrome 87 rendering issue. See https://github.com/liferay/clay/issues/3847.
-
-		@include clay-css($c-table-tfoot);
-
-		td,
-		th {
-			// Webkit (Safari 11) rendering issue with responsive-tables. See https://github.com/liferay/clay/issues/950
-
-			background-color: map-get($c-table-tfoot, background-color);
-		}
-	}
-
-	caption {
-		@include clay-css($c-table-caption);
-	}
-
-	.autofit-col {
-		justify-content: center;
-		padding-left: $table-cell-padding;
-		padding-right: $table-cell-padding;
-
-		&:first-child {
-			padding-left: 0;
-		}
-
-		&:last-child {
-			padding-right: 0;
-		}
-	}
-
-	.custom-control,
-	.form-check {
-		margin-bottom: 0;
-	}
+	@include clay-table-variant($c-table);
 }
 
 // Table Caption
@@ -156,37 +40,13 @@ caption {
 // Table Sm
 
 .table-sm {
-	th,
-	td {
-		padding: $table-cell-padding-sm;
-	}
+	@include clay-table-variant($c-table-sm);
 }
 
 // Table Bordered
 
 .table-bordered {
-	border: $table-border-width solid $table-border-color;
-
-	thead {
-		td,
-		th {
-			border-bottom-width: calc(2 * #{$table-border-width});
-
-			@if (
-				$table-head-border-top-width ==
-					0 and
-					$table-head-border-top-width
-			) {
-				border-top-width: $table-border-width;
-			}
-		}
-	}
-
-	td,
-	th {
-		border: $table-border-width solid $table-border-color;
-		border-width: $table-bordered-border-width;
-	}
+	@include clay-table-variant($c-table-bordered);
 }
 
 .table-borderless {
@@ -212,16 +72,7 @@ caption {
 // Table Hover
 
 .table-hover {
-	tbody tr {
-		&:hover {
-			&,
-			td,
-			th {
-				color: $table-hover-color;
-				background-color: $table-hover-bg;
-			}
-		}
-	}
+	@include clay-table-variant($c-table-hover);
 }
 
 // Table Row Backgrounds
@@ -263,40 +114,8 @@ caption {
 	}
 }
 
-// Table Active
-
-@include table-row-variant(active, $table-active-bg);
-
 // 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(#{$table-striped-order}) {
 		td,
@@ -402,173 +221,13 @@ caption {
 // Table List Skin
 
 .table-list {
-	@include clay-css($c-table-list);
-
-	thead:first-child,
-	tbody:first-child,
-	tfoot:first-child,
-	caption:first-child + thead {
-		tr:first-child {
-			th,
-			td {
-				border-top-width: 0;
-			}
-
-			th:first-child,
-			td:first-child,
-			.table-cell-start {
-				@include clay-css(
-					map-deep-get(
-						$c-table-list,
-						table-row-start,
-						table-cell-start
-					)
-				);
-			}
-
-			th:last-child,
-			td:last-child,
-			.table-cell-end {
-				@include clay-css(
-					map-deep-get($c-table-list, table-row-start, table-cell-end)
-				);
-			}
-		}
-	}
-
-	caption {
-		@include clay-css($c-table-list-caption);
-	}
-
-	thead,
-	tbody,
-	tfoot {
-		td,
-		th {
-			@include clay-css($c-table-list-cell);
-		}
-
-		&:last-child {
-			tr:last-child {
-				th:first-child,
-				td:first-child,
-				.table-cell-start {
-					@include clay-css(
-						map-deep-get(
-							$c-table-list,
-							table-row-end,
-							table-cell-start
-						)
-					);
-				}
-
-				th:last-child,
-				td:last-child,
-				.table-cell-end {
-					@include clay-css(
-						map-deep-get(
-							$c-table-list,
-							table-row-end,
-							table-cell-end
-						)
-					);
-				}
-			}
-		}
-	}
-
-	thead {
-		// Chrome 87 rendering issue. See https://github.com/liferay/clay/issues/3847.
-
-		@include clay-css($c-table-list-thead);
-
-		td,
-		th {
-			// Webkit (Safari 11) rendering issue with responsive-tables. See https://github.com/liferay/clay/issues/950
-
-			background-color: $table-list-head-bg;
-			font-size: $table-list-head-font-size;
-			font-weight: $table-list-head-font-weight;
-			height: $table-list-head-height;
-			vertical-align: $table-list-head-vertical-alignment;
-		}
-
-		th a {
-			@include clay-link($table-list-head-link);
-		}
-	}
-
-	tbody {
-		// Chrome 87 rendering issue. See https://github.com/liferay/clay/issues/3847.
-
-		@include clay-css($c-table-list-tbody);
-
-		td,
-		th {
-			// Webkit (Safari 11) rendering issue with responsive-tables. See https://github.com/liferay/clay/issues/950
-
-			background-color: map-get($c-table-list-tbody, background-color);
-			vertical-align: middle;
-		}
-	}
-
-	tfoot {
-		// Chrome 87 rendering issue. See https://github.com/liferay/clay/issues/3847.
-
-		@include clay-css($c-table-list-tfoot);
-
-		td,
-		th {
-			background-color: map-get($c-table-list-tfoot, background-color);
-			vertical-align: middle;
-		}
-	}
-
-	.table-row-start {
-		.table-cell-start {
-			@include clay-css(
-				map-deep-get($c-table-list, table-row-start, table-cell-start)
-			);
-		}
-
-		.table-cell-end {
-			@include clay-css(
-				map-deep-get($c-table-list, table-row-start, table-cell-end)
-			);
-		}
-	}
-
-	.table-row-end {
-		.table-cell-start {
-			@include clay-css(
-				map-deep-get($c-table-list, table-row-end, table-cell-start)
-			);
-		}
-
-		.table-cell-end {
-			@include clay-css(
-				map-deep-get($c-table-list, table-row-end, table-cell-end)
-			);
-		}
-	}
+	@include clay-table-variant($c-table-list);
 }
 
 // Table List Bordered
 
-.table-list.table-bordered {
-	thead,
-	tbody,
-	tfoot {
-		th,
-		td {
-			@include clay-css($c-table-list-bordered-cell);
-		}
-	}
-
-	th:first-child,
-	td:first-child {
-		border-left-width: 0;
-	}
+.table.table-list.table-bordered {
+	@include clay-table-variant($c-table-list-table-bordered);
 }
 
 // Table List Striped
@@ -585,68 +244,7 @@ caption {
 // Table List Hover
 
 .table-list.table-hover {
-	tbody tr {
-		&:hover {
-			&,
-			td,
-			th {
-				background-color: $table-list-hover-bg;
-			}
-		}
-	}
-}
-
-// Table List Active
-
-.table-list.table-hover {
-	.table-active {
-		&:hover {
-			&,
-			> th,
-			> td {
-				background-color: $table-list-active-bg;
-			}
-		}
-	}
-}
-
-.table-list .table-active {
-	&,
-	> th,
-	> td {
-		background-color: $table-list-active-bg;
-	}
-}
-
-// Table List Disabled
-
-.table-list .table-disabled {
-	background-color: $table-list-disabled-bg;
-	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;
-	}
+	@include clay-table-variant($c-table-list-table-hover);
 }
 
 .table-list.table-striped {
@@ -716,28 +314,6 @@ caption {
 	}
 }
 
-.table .table-divider {
-	td,
-	th {
-		background-color: $table-divider-bg;
-		color: $table-divider-color;
-		font-size: $table-divider-font-size;
-		font-weight: $table-divider-font-weight;
-		padding: $table-divider-padding;
-		text-transform: $table-divider-text-transform;
-	}
-}
-
-.table-list .table-divider {
-	td,
-	th {
-		padding-bottom: $table-list-divider-padding-y;
-		padding-left: $table-list-divider-padding-x;
-		padding-right: $table-list-divider-padding-x;
-		padding-top: $table-list-divider-padding-y;
-	}
-}
-
 // Table Vertical Align
 
 .table-valign-bottom {
@@ -886,15 +462,6 @@ caption {
 	}
 }
 
-.table {
-	.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;
-	}
-}
-
 .table-striped {
 	tbody tr:nth-of-type(#{$table-striped-order}) {
 		.quick-action-menu {
@@ -909,39 +476,6 @@ caption {
 	}
 }
 
-.table-hover {
-	tbody tr {
-		&:hover {
-			.quick-action-menu {
-				background-color: $table-quick-action-menu-hover-bg;
-			}
-		}
-	}
-
-	tbody .table-active {
-		&:hover {
-			.quick-action-menu {
-				background-color: $table-quick-action-menu-active-bg;
-			}
-		}
-	}
-}
-
-.table-active {
-	.quick-action-menu {
-		background-color: $table-quick-action-menu-active-bg;
-	}
-}
-
-.table-list {
-	.quick-action-menu {
-		align-items: $table-list-quick-action-menu-align-items;
-		background-color: $table-list-quick-action-menu-bg;
-		bottom: 0;
-		top: 0;
-	}
-}
-
 .table-list.table-striped {
 	tbody tr:nth-of-type(#{$table-striped-order}) {
 		.quick-action-menu {
@@ -956,30 +490,6 @@ caption {
 	}
 }
 
-.table-list.table-hover {
-	tbody tr {
-		&:hover {
-			.quick-action-menu {
-				background-color: $table-list-quick-action-menu-hover-bg;
-			}
-		}
-	}
-
-	tbody .table-active {
-		&:hover {
-			.quick-action-menu {
-				background-color: $table-list-quick-action-menu-active-bg;
-			}
-		}
-	}
-}
-
-.table-list .table-active {
-	.quick-action-menu {
-		background-color: $table-list-quick-action-menu-active-bg;
-	}
-}
-
 // Table Column Utilities
 
 .table-column-text-start,

package/src/scss/components/_treeview.scss

@@ -37,6 +37,23 @@
 
 	.component-text {
 		@include clay-css(map-get($treeview, component-text));
+
+		> .autofit-row {
+			@include clay-css(
+				map-deep-get($treeview, component-text, autofit-row)
+			);
+
+			> .autofit-col {
+				@include clay-css(
+					map-deep-get(
+						$treeview,
+						component-text,
+						autofit-row,
+						autofit-col
+					)
+				);
+			}
+		}
 	}
 
 	&.show-component-expander-on-hover {
@@ -99,6 +116,38 @@
 			);
 		}
 	}
+
+	.quick-action-item {
+		@include clay-css(map-get($treeview, quick-action-item));
+	}
+
+	.autofit-row {
+		@include clay-css(map-get($treeview, autofit-row));
+	}
+
+	&.show-quick-actions-on-hover {
+		.treeview-link {
+			&:not(:hover):not(:focus):not(.focus) {
+				.quick-action-item {
+					display: none;
+				}
+			}
+
+			&:disabled,
+			&.disabled {
+				.quick-action-item {
+					display: none;
+				}
+			}
+
+			.quick-action-item {
+				&:disabled,
+				&.disabled {
+					display: none;
+				}
+			}
+		}
+	}
 }
 
 .treeview-group {
@@ -134,22 +183,6 @@
 		);
 	}
 
-	&.hover,
-	&:hover,
-	&.focus,
-	&:focus {
-		.component-action {
-			display: flex;
-		}
-	}
-
-	&:disabled,
-	&.disabled {
-		.component-action {
-			display: none;
-		}
-	}
-
 	&.show,
 	&[aria-expanded='true'] {
 		.component-expander {
@@ -162,6 +195,17 @@
 			}
 		}
 	}
+
+	> .autofit-row,
+	.c-inner > .autofit-row {
+		@include clay-css(map-deep-get($treeview, treeview-link, autofit-row));
+
+		> .autofit-col {
+			@include clay-css(
+				map-deep-get($treeview, treeview-link, autofit-row, autofit-col)
+			);
+		}
+	}
 }
 
 .treeview-nested-margins {

package/src/scss/functions/_lx-icons-generated.scss

@@ -430,6 +430,10 @@
 
 	'zh-tw': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#C0CFD8" d="M0 64h512v384H0z"/><path fill="#E03232" d="M16 80h480v352H16z"/><path fill="#0035A0" d="M16 80h192v160H16z"/><circle fill="#FFF" cx="112" cy="160" r="32"/></svg>',
 
+	'folder-lock-line': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" d="M144 207.821c0-42.013 64-42.363 64 0v48.063h-64v-48.063Z" fill="#{$color}"/><path class="lexicon-icon-outline" fill-rule="evenodd" clip-rule="evenodd" d="M82.216 479.998c.014 11.039 5.74 21.782 16.004 27.709 15.14 8.744 34.494 3.713 43.463-11.298L409.336 48.431c9.162-15.336 4-35.205-11.467-44.138-15.14-8.744-34.494-3.713-43.463 11.299l-47.069 78.78L241.1 44.664C230 36.362 216.5 31.86 202.7 31.86H64c-35.3 0-64 28.709-64 64.02v320.099c0 35.31 28.7 64.019 64 64.019h18.216Zm52.096-96.029L224 233.855v-26.036c0-63.717-96-64.067-96 0v48.063h-9.594C104.297 255.882 96 267.386 96 281.49v76.871c0 14.104 8.297 25.608 22.406 25.608h15.906Z" fill="#{$color}"/><path class="lexicon-icon-outline" d="M448 479.998H220.847L430.373 127.89H448c35.3 0 64 28.709 64 64.02v224.069c0 35.31-28.7 64.019-64 64.019Z" fill="#{$color}"/></svg>',
+
+	'folder-lock': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" d="M208 175.906c0-42.35-64-42-64 0v48.049h64v-48.049Zm-16 144.096h-32v-48.049h32v48.049Z" fill="#{$color}"/><path class="lexicon-icon-outline" fill-rule="evenodd" clip-rule="evenodd" d="M352 96h96c35.3 0 64 28.7 64 64v224c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V64C0 28.7 28.7 0 64 0h138.7c13.8 0 27.3 4.5 38.4 12.8L352 96ZM224 223.953h6.406c14.094 0 25.594 11.5 25.594 25.6V326.4c0 14.1-11.5 25.6-25.594 25.6h-112C104.297 352 96 340.5 96 326.4v-76.847c0-14.1 8.297-25.6 22.406-25.6H128v-48.049c0-64.047 96-63.697 96 0v48.049Z" fill="#{$color}"/></svg>',
+
 	'folder': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" d="M448 128h-96L241.1 44.8C230 36.5 216.5 32 202.7 32H64C28.7 32 0 60.7 0 96v320c0 35.3 28.7 64 64 64h384c35.3 0 64-28.7 64-64V192c0-35.3-28.7-64-64-64z" fill="#{$color}"/></svg>',
 
 	'font-family': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline font-family-capital-a" d="M264.4 375.1 175.6 126c-15.3-40.4-69.5-39.4-84.8 0l-89 249.2c-11.7 34.4 38.6 53.1 52.1 17.8l20.5-62.7h117.4l20.5 62.6c14.1 36.5 63.6 15.4 52.1-17.8zM88.6 286.7l43.9-134.4h1.1l43.9 134.4H88.6z" fill="#{$color}"/><path class="lexicon-icon-outline font-family-lowercase-a" d="M316.1 229.9c-8.5 34.1 46.5 36.9 49.9 12.4 5.8-37.3 100.5-52.5 90.3 25.1C176.5 251 345 517.6 456.4 374c-6.9 47.6 55.6 44.7 55.6 11.2V247c.1-96.9-170.5-108.8-195.9-17.1zm43.5 110.7c.8-33.3 32-39.8 96.9-36.1 5.5 88-96.9 82.2-96.9 36.1z" fill="#{$color}"/></svg>',