@clayui/css 3.107.0 → 3.108.0

package/src/scss/components/_modals.scss

@@ -9,6 +9,13 @@
 
 .modal {
 	@include clay-css($modal);
+
+	$_media-breakpoint-down: map-get($modal, media-breakpoint-down);
+	$_media-breakpoint-up: map-get($modal, media-breakpoint-up);
+
+	@if ($_media-breakpoint-down) or ($_media-breakpoint-up) {
+		@include clay-generate-media-breakpoints($modal, 'clay-map-to-css');
+	}
 }
 
 .modal-dialog {
@@ -230,6 +237,7 @@
 .modal-footer {
 	> .modal-item-last {
 		margin-left: auto;
+		margin-right: 0;
 	}
 }
 

package/src/scss/components/_tables.scss

@@ -37,6 +37,18 @@ caption {
 	caption-side: bottom;
 }
 
+// Table lg
+
+.table-lg {
+	@include clay-table-variant($c-table-lg);
+}
+
+// Table Md
+
+.table-md {
+	@include clay-table-variant($c-table-md);
+}
+
 // Table Sm
 
 .table-sm {
@@ -49,6 +61,10 @@ caption {
 	@include clay-table-variant($c-table-bordered);
 }
 
+.table-head-bordered {
+	@include clay-table-variant($c-table-head-bordered);
+}
+
 .table-borderless {
 	th,
 	td,
@@ -62,9 +78,12 @@ caption {
 
 .table-striped {
 	tbody tr:nth-of-type(#{$table-striped-order}) {
-		td,
-		th {
-			background-color: $table-accent-bg;
+		&:not(.table-active):not(.table-disabled):not(.table-divider) {
+			&,
+			td,
+			th {
+				background-color: $table-accent-bg;
+			}
 		}
 	}
 }
@@ -176,17 +195,6 @@ td.table-focus {
 	}
 }
 
-// Table Disabled
-
-.table-striped {
-	tbody .table-disabled:nth-of-type(#{$table-striped-order}) {
-		td,
-		th {
-			background-color: $table-disabled-bg;
-		}
-	}
-}
-
 // Dark styles
 
 .table {
@@ -223,7 +231,13 @@ td.table-focus {
 
 	&.table-striped {
 		tbody tr:nth-of-type(#{$table-striped-order}) {
-			background-color: $table-dark-accent-bg;
+			&:not(.table-active):not(.table-disabled):not(.table-divider) {
+				&,
+				th,
+				td {
+					background-color: $table-dark-accent-bg;
+				}
+			}
 		}
 	}
 
@@ -296,9 +310,12 @@ td.table-focus {
 
 .table-list.table-striped {
 	tbody tr:nth-of-type(#{$table-striped-order}) {
-		td,
-		th {
-			background-color: $table-list-accent-bg;
+		&:not(.table-active):not(.table-disabled):not(.table-divider) {
+			&,
+			th,
+			td {
+				background-color: $table-list-accent-bg;
+			}
 		}
 	}
 }
@@ -309,16 +326,6 @@ td.table-focus {
 	@include clay-table-variant($c-table-list-table-hover);
 }
 
-.table-list.table-striped {
-	tbody .table-disabled:nth-of-type(#{$table-striped-order}) {
-		&,
-		td,
-		th {
-			background-color: $table-list-disabled-bg;
-		}
-	}
-}
-
 // Table List Title
 
 .table-list-title {

package/src/scss/mixins/_grid.scss

@@ -219,8 +219,12 @@
 						@include clay-input-group-text-variant($breakpoint-up);
 					} @else if ($mixin == 'clay-dropdown-menu-variant') {
 						@include clay-dropdown-menu-variant($breakpoint-up);
+					} @else if ($mixin == 'clay-map-to-css') {
+						@include clay-map-to-css($breakpoint-up);
 					} @else if ($mixin == 'clay-menubar-vertical-variant') {
 						@include clay-menubar-vertical-variant($breakpoint-up);
+					} @else if ($mixin == 'clay-modal-variant') {
+						@include clay-modal-variant($breakpoint-up);
 					} @else if ($mixin == 'clay-select-variant') {
 						@include clay-select-variant($breakpoint-up);
 					}
@@ -247,10 +251,14 @@
 						);
 					} @else if ($mixin == 'clay-dropdown-menu-variant') {
 						@include clay-dropdown-menu-variant($breakpoint-down);
+					} @else if ($mixin == 'clay-map-to-css') {
+						@include clay-map-to-css($breakpoint-down);
 					} @else if ($mixin == 'clay-menubar-vertical-variant') {
 						@include clay-menubar-vertical-variant(
 							$breakpoint-down
 						);
+					} @else if ($mixin == 'clay-modal-variant') {
+						@include clay-modal-variant($breakpoint-down);
 					} @else if ($mixin == 'clay-select-variant') {
 						@include clay-select-variant($breakpoint-down);
 					}

package/src/scss/mixins/_tables.scss

@@ -58,11 +58,30 @@
 			@include clay-css($map);
 
 			thead {
-				@include clay-css(map-get($map, thead));
+				$_thead: setter(map-get($map, thead), ());
+
+				@include clay-css($_thead);
 
 				th,
 				td {
-					@include clay-css(map-deep-get($map, thead, table-cell));
+					$_thead-table-cell: setter(
+						map-get($_thead, table-cell),
+						()
+					);
+
+					@include clay-css($_thead-table-cell);
+
+					&:first-child {
+						@include clay-css(
+							map-get($_thead-table-cell, table-column-start)
+						);
+					}
+
+					&:last-child {
+						@include clay-css(
+							map-get($_thead-table-cell, table-column-end)
+						);
+					}
 				}
 
 				th {

package/src/scss/variables/_modals.scss

@@ -345,7 +345,7 @@ $modal: map-deep-merge(
 			padding-right: $modal-footer-padding-x,
 			padding-top: $modal-footer-padding-y,
 			'> *': (
-				margin: calc(#{$modal-footer-margin-between} * 0.5),
+				margin: 0 calc(#{$modal-footer-margin-between} * 0.5),
 			),
 		),
 		modal-title: (
@@ -366,6 +366,26 @@ $modal: map-deep-merge(
 			margin-top: -0.2em,
 			vertical-align: middle,
 		),
+		media-breakpoint-down: (
+			sm: (
+				close: (
+					margin-right: -0.5rem,
+				),
+				modal-header: (
+					height: 3rem,
+					padding: 0.5rem 1rem,
+				),
+				modal-title: (
+					font-size: 1.125rem,
+				),
+				modal-body: (
+					padding: 0.5rem 1rem,
+				),
+				modal-footer: (
+					padding: 0.5rem,
+				),
+			),
+		),
 	),
 	$modal
 );

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,7 +76,7 @@ $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-head-height: 56px !default;
 
 $c-table-thead: () !default;
 
@@ -107,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;
@@ -139,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
 );
@@ -240,7 +241,7 @@ $c-table: map-deep-merge(
 						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,
@@ -250,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,
@@ -272,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,
@@ -289,11 +288,13 @@ $c-table: map-deep-merge(
 		tfoot: $c-table-tfoot,
 		caption: $c-table-caption,
 		table-divider: (
-			background-color: $table-divider-bg,
 			table-cell: (
+				background-color: $table-divider-bg,
 				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,
 			),
@@ -323,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,
 			),
@@ -346,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
@@ -450,6 +451,23 @@ $c-td-table-focus: map-deep-merge(
 	$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;
@@ -476,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,
@@ -654,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
 
@@ -782,7 +820,7 @@ $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,
 			),