@clayui/css 3.107.0 → 3.109.0

package/src/scss/cadmin/variables/_tables.scss

@@ -47,15 +47,16 @@ $cadmin-table-disabled-pointer-events: none !default;
 
 // Table Striped
 
-$cadmin-table-accent-bg: $cadmin-gray-100 !default;
+$cadmin-table-accent-bg: $cadmin-light-l1 !default;
 
 $cadmin-table-striped-order: odd !default;
 
 // Table Cell applies to `th` and `td`
 
-$cadmin-table-cell-gutters: $cadmin-grid-gutter-width * 0.5 !default; // 15px
-$cadmin-table-cell-padding: 12px !default;
-$cadmin-table-cell-padding-sm: 4.8px !default;
+$cadmin-table-cell-gutters: 20px !default;
+$cadmin-table-cell-padding-lg: 17px !default;
+$cadmin-table-cell-padding: 8px 16px !default;
+$cadmin-table-cell-padding-sm: 4px 16px !default;
 
 $cadmin-table-cell-expand-min-width: 200px !default; // 200px
 
@@ -76,7 +77,7 @@ $cadmin-table-head-border-top-width: 0 !default;
 $cadmin-table-head-color: $cadmin-gray-600 !default;
 $cadmin-table-head-font-size: null !default;
 $cadmin-table-head-font-weight: $cadmin-font-weight-semi-bold !default;
-$cadmin-table-head-height: 36px !default;
+$cadmin-table-head-height: 56px !default;
 
 $cadmin-c-table-thead: () !default;
 
@@ -119,11 +120,11 @@ $cadmin-table-data-vertical-align: middle !default;
 
 // Table Divider
 
-$cadmin-table-divider-bg: $cadmin-gray-100 !default;
+$cadmin-table-divider-bg: $cadmin-gray-200 !default;
 $cadmin-table-divider-color: $cadmin-gray-600 !default;
 $cadmin-table-divider-font-size: 12px !default; // 12px
 $cadmin-table-divider-font-weight: $cadmin-font-weight-semi-bold !default;
-$cadmin-table-divider-padding: 7px 12px !default;
+$cadmin-table-divider-padding: 8px 16px 8px $cadmin-table-cell-gutters !default;
 $cadmin-table-divider-text-transform: uppercase !default;
 
 $cadmin-table-quick-action-menu-align-items: flex-start !default;
@@ -155,8 +156,8 @@ $cadmin-c-table-caption: () !default;
 $cadmin-c-table-caption: map-merge(
 	(
 		caption-side: top,
-		padding-left: $cadmin-table-cell-padding,
-		padding-right: $cadmin-table-cell-padding,
+		padding-left: nth($cadmin-table-cell-padding, 2),
+		padding-right: nth($cadmin-table-cell-padding, 2),
 	),
 	$cadmin-c-table-caption
 );
@@ -275,7 +276,7 @@ $cadmin-c-table: map-deep-merge(
 						border-bottom: $cadmin-table-head-border-bottom-width
 							solid $cadmin-table-border-color,
 						border-top-width: $cadmin-table-head-border-top-width,
-						vertical-align: bottom,
+						vertical-align: middle,
 					),
 					th: (
 						href: $cadmin-table-head-link,
@@ -285,9 +286,6 @@ $cadmin-c-table: map-deep-merge(
 		table-column-start: (
 			padding-left: $cadmin-table-cell-gutters,
 		),
-		table-column-end: (
-			padding-right: $cadmin-table-cell-gutters,
-		),
 		th: (
 			background-clip: padding-box,
 			border-top: $cadmin-table-border-width solid
@@ -295,7 +293,7 @@ $cadmin-c-table: map-deep-merge(
 			color: $cadmin-table-head-color,
 			font-size: $cadmin-table-head-font-size,
 			font-weight: $cadmin-table-head-font-weight,
-			height: $cadmin-table-head-height,
+			height: 56px,
 			padding: $cadmin-table-cell-padding,
 			position: relative,
 			vertical-align: top,
@@ -308,6 +306,7 @@ $cadmin-c-table: map-deep-merge(
 			border-right-width: $cadmin-table-data-border-right-width,
 			border-style: $cadmin-table-data-border-style,
 			border-top-width: $cadmin-table-data-border-top-width,
+			height: 56px,
 			padding: $cadmin-table-cell-padding,
 			position: relative,
 			vertical-align: $cadmin-table-data-vertical-align,
@@ -327,11 +326,13 @@ $cadmin-c-table: map-deep-merge(
 		tfoot: $cadmin-c-table-tfoot,
 		caption: $cadmin-c-table-caption,
 		table-divider: (
-			background-color: $cadmin-table-divider-bg,
 			table-cell: (
+				background-color: $cadmin-table-divider-bg,
 				color: $cadmin-table-divider-color,
 				font-size: $cadmin-table-divider-font-size,
 				font-weight: $cadmin-table-divider-font-weight,
+				height: 34px,
+				line-height: 17px,
 				padding: $cadmin-table-divider-padding,
 				text-transform: $cadmin-table-divider-text-transform,
 			),
@@ -359,10 +360,13 @@ $cadmin-c-table: map-deep-merge(
 				color: $cadmin-table-disabled-color,
 			),
 		),
+		table-sort: (
+			color: $cadmin-gray-900,
+		),
 		autofit-col: (
 			justify-content: center,
-			padding-left: $cadmin-table-cell-padding,
-			padding-right: $cadmin-table-cell-padding,
+			padding-left: nth($cadmin-table-cell-padding, 2),
+			padding-right: nth($cadmin-table-cell-padding, 2),
 			first-child: (
 				padding-left: 0,
 			),
@@ -384,8 +388,8 @@ $cadmin-c-table: map-deep-merge(
 		quick-action-menu: (
 			align-items: $cadmin-table-quick-action-menu-align-items,
 			background-color: $cadmin-table-quick-action-menu-bg,
-			padding-bottom: $cadmin-table-cell-padding,
-			padding-top: $cadmin-table-cell-padding,
+			padding-bottom: nth($cadmin-table-cell-padding, 1),
+			padding-top: nth($cadmin-table-cell-padding, 1),
 		),
 	),
 	$cadmin-c-table
@@ -497,12 +501,38 @@ $cadmin-c-td-table-focus: map-deep-merge(
 	$cadmin-c-td-table-focus
 );
 
+// .table-lg
+
+$cadmin-c-table-lg: () !default;
+$cadmin-c-table-lg: map-deep-merge(
+	(
+		table-cell: (
+			padding: $cadmin-table-cell-padding-lg,
+		),
+	),
+	$cadmin-c-table-lg
+);
+
+// .table-md
+
+$cadmin-c-table-md: () !default;
+$cadmin-c-table-md: map-deep-merge(
+	(
+		table-cell: (
+			height: 48px,
+			padding: 6px 16px,
+		),
+	),
+	$cadmin-c-table-md
+);
+
 // .table-sm
 
 $cadmin-c-table-sm: () !default;
 $cadmin-c-table-sm: map-deep-merge(
 	(
 		table-cell: (
+			height: 32px,
 			padding: $cadmin-table-cell-padding-sm,
 		),
 	),
@@ -514,12 +544,6 @@ $cadmin-c-table-sm: map-deep-merge(
 $cadmin-c-table-nested-rows: () !default;
 $cadmin-c-table-nested-rows: map-deep-merge(
 	(
-		table-column-start: (
-			padding-left: 20px,
-		),
-		table-column-end: (
-			padding-right: 20px,
-		),
 		autofit-col: (
 			padding-left: 2px,
 			padding-right: 2px,
@@ -560,6 +584,24 @@ $cadmin-table-dark-hover-color: $cadmin-table-dark-color !default;
 
 $cadmin-table-dark-accent-bg: rgba($cadmin-white, 0.05) !default;
 
+// .table-head-bordered
+
+$cadmin-c-table-head-bordered: () !default;
+$cadmin-c-table-head-bordered: map-deep-merge(
+	(
+		thead: (
+			table-cell: (
+				border-left: $cadmin-table-border-width solid
+					$cadmin-table-border-color,
+				table-column-start: (
+					border-left-width: 0,
+				),
+			),
+		),
+	),
+	$cadmin-c-table-head-bordered
+);
+
 // .table-bordered
 
 $cadmin-table-bordered-border-width: $cadmin-table-border-width !default;
@@ -688,8 +730,8 @@ $cadmin-c-table-list-caption: () !default;
 
 // .table-list .table-divider
 
-$cadmin-table-list-divider-padding-x: 12px !default; // 12px
-$cadmin-table-list-divider-padding-y: 7px !default; // 7px
+$cadmin-table-list-divider-padding-x: 16px !default;
+$cadmin-table-list-divider-padding-y: 8px !default;
 
 // .table-list .quick-action-menu
 
@@ -843,7 +885,7 @@ $cadmin-c-table-list: map-merge(
 		table-divider: (
 			table-cell: (
 				padding-bottom: $cadmin-table-list-divider-padding-y,
-				padding-left: $cadmin-table-list-divider-padding-x,
+				padding-left: $cadmin-table-cell-gutters,
 				padding-right: $cadmin-table-list-divider-padding-x,
 				padding-top: $cadmin-table-list-divider-padding-y,
 			),

package/src/scss/cadmin/variables/_toggle-switch.scss

@@ -2,7 +2,8 @@ $cadmin-toggle-switch-cursor: $cadmin-link-cursor !default;
 $cadmin-toggle-switch-font-weight: $cadmin-input-label-font-weight !default;
 $cadmin-toggle-switch-transition: background-color 100ms ease-in,
 	border-color 100ms ease-in, box-shadow 150ms ease-in-out,
-	color 100ms ease-in, left 100ms ease-in, right 100ms ease-in !default;
+	color 100ms ease-in, left 100ms ease-in, opacity 100ms ease-in,
+	right 100ms ease-in !default;
 
 // must all be same units--start
 $cadmin-toggle-switch-bar-padding: 4px !default; // space between button and bar, can be negative value
@@ -469,3 +470,69 @@ $cadmin-simple-toggle-switch-reverse: map-deep-merge(
 	),
 	$cadmin-simple-toggle-switch-reverse
 );
+
+// .toggle-switch-sm
+
+$cadmin-toggle-switch-sizes: () !default;
+$cadmin-toggle-switch-sizes: map-deep-merge(
+	(
+		toggle-switch-sm: (
+			simple-toggle-switch: (
+				toggle-switch-label: (
+					max-width: calc(100% - 38px),
+				),
+			),
+			toggle-switch-check: (
+				height: 16px,
+				width: 30px,
+				toggle-switch-bar: (
+					height: 16px,
+					line-height: 16px,
+					before: (
+						width: 30px,
+					),
+					after: (
+						bottom: 0,
+						height: 12px,
+						left: 2px,
+						top: 2px,
+						width: 12px,
+					),
+					toggle-switch-handle: (
+						min-width: 30px,
+						max-width: 30px,
+						after: (
+							margin-left: 38px,
+						),
+					),
+					toggle-switch-icon: (
+						font-size: 8px,
+						height: 16px,
+						left: 0,
+						line-height: 16px,
+						top: 0px,
+						width: 16px,
+					),
+					toggle-switch-icon-off: (
+						left: 13px,
+					),
+				),
+				checked: (
+					toggle-switch-bar: (
+						after: (
+							left: 16px,
+						),
+						button-icon: (
+							left: 14px,
+						),
+					),
+				),
+			),
+			toggle-switch-label: (
+				font-size: 12px,
+				max-width: calc(100% - 38px),
+			),
+		),
+	),
+	$cadmin-toggle-switch-sizes
+);

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;
+			}
 		}
 	}
 }
@@ -80,6 +99,7 @@ caption {
 tr.table-focus {
 	@include clay-css($c-tr-table-focus);
 
+	th,
 	td {
 		$_td: setter(map-get($c-tr-table-focus, td), ());
 
@@ -176,17 +196,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 +232,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 +311,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 +327,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 {
@@ -520,6 +528,12 @@ td.table-focus {
 	}
 }
 
+// .table-sort
+
+.table-sort {
+	@include clay-table-variant($c-table-sort);
+}
+
 // Show Quick Action
 
 .show-quick-actions-on-hover {

package/src/scss/components/_toggle-switch.scss

@@ -69,3 +69,35 @@
 .simple-toggle-switch-reverse.simple-toggle-switch {
 	@include clay-toggle-switch-variant($simple-toggle-switch-reverse);
 }
+
+// Toggle Switch Sizes
+
+@each $size, $value in $toggle-switch-sizes {
+	@if not clay-is-map-unset($value) {
+		$selector: if(
+			starts-with($size, 'toggle-switch-'),
+			clay-str-replace($size, 'toggle-switch-', '.toggle-switch-'),
+			$size
+		);
+
+		@if (starts-with($size, '%') or map-get($value, extend)) {
+			#{$selector} {
+				@include clay-toggle-switch-variant($value);
+			}
+		} @else if (starts-with($size, 'toggle-switch-')) {
+			$placeholder: '%clay-#{$size}';
+
+			#{$placeholder} {
+				@include clay-toggle-switch-variant($value);
+			}
+
+			#{$selector} {
+				@extend #{$placeholder} !optional;
+			}
+		} @else {
+			#{$selector} {
+				@include clay-toggle-switch-variant($value);
+			}
+		}
+	}
+}

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

@@ -112,9 +112,9 @@
 
 	'book': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" d="M480 352V32c0-16.6-14.3-32-32-32H128C75 0 32 46.3 32 96v352s0 64 80.2 63.7l351.8.3c21.6-1.3 20.9-30.7 0-31.9l-352-.1c-64.1-.1-63.9-96.1.2-96H448c17.7-.1 32-15.4 32-32zm-64-32H128V64h288v256z" fill="#{$color}"/><path class="lexicon-icon-outline" d="M111.8 416c-20.1.3-22.2 31 0 32H432c23.1-1.6 19.4-31.7 0-32H111.8z" fill="#{$color}"/></svg>',
 
-	'bookmarks-full': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="2" y="0" width="12" height="17"><path class="lexicon-icon-outline" fill-rule="evenodd" clip-rule="evenodd" d="m8 12.658 3.54 2.987c.977.825 2.46.143 2.46-1.145V2c0-1.119-.895-2-2-2H4C2.895 0 2 .881 2 2v12.5a1.491 1.491 0 0 0 2.46 1.145L8 12.658Z" fill="#{$color}"/></mask><g mask="url(#a)"><path class="lexicon-icon-outline" fill="#{$color}" d="M0 0h16v16H0z"/></g></svg>',
+	'bookmarks-full': '<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" fill-rule="evenodd" clip-rule="evenodd" d="m256.001 405.055 113.271 95.586c31.264 26.382 78.729 4.57 78.729-36.641V64c0-35.793-28.654-64-64-64h-256C92.655 0 64 28.207 64 64v400c0 41.211 47.466 63.023 78.73 36.641l113.271-95.586Z" fill="#{$color}"/></svg>',
 
-	'bookmarks': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="2" y="0" width="12" height="17"><path class="lexicon-icon-outline" fill-rule="evenodd" clip-rule="evenodd" d="M7.355 10.566a1 1 0 0 1 1.29 0L12 13.397V2H4v11.397l3.355-2.831ZM8 12.658l3.54 2.987c.977.825 2.46.143 2.46-1.145V2c0-1.119-.895-2-2-2H4C2.895 0 2 .881 2 2v12.5a1.491 1.491 0 0 0 2.46 1.145L8 12.658Z" fill="#{$color}"/></mask><g mask="url(#a)"><path class="lexicon-icon-outline" fill="#{$color}" d="M0 0h16v16H0z"/></g></svg>',
+	'bookmarks': '<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" fill-rule="evenodd" clip-rule="evenodd" d="M235.363 338.109c11.92-10.059 29.355-10.059 41.275 0l107.363 90.599V64h-256v364.708l107.362-90.599Zm20.638 66.946 113.271 95.586c31.264 26.382 78.729 4.57 78.729-36.641V64c0-35.793-28.654-64-64-64h-256C92.655 0 64 28.207 64 64v400c0 41.211 47.466 63.023 78.73 36.641l113.271-95.586Z" fill="#{$color}"/></svg>',
 
 	'books': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline books-1-spine-top" d="M96.1 32h-64C14.4 32 .1 46.3.1 64v32h128V64c0-17.7-14.3-32-32-32z" fill="#{$color}"/><path class="lexicon-icon-outline books-1-spine-bottom" d="M.1 448c0 17.7 14.3 32 32 32h64c17.7 0 32-14.3 32-32v-32H.1v32z" fill="#{$color}"/><path class="lexicon-icon-outline books-1-spine" fill="#{$color}" d="M.1 128h128v256H.1z"/><path class="lexicon-icon-outline books-2-spine-top" d="M256.1 32h-64c-17.7 0-32 14.3-32 32v32h128V64c0-17.7-14.3-32-32-32z" fill="#{$color}"/><path class="lexicon-icon-outline books-2-spine-bottom" d="M160.1 448c0 17.7 14.3 32 32 32h64c17.7 0 32-14.3 32-32v-32h-128v32z" fill="#{$color}"/><path class="lexicon-icon-outline books-2-spine" fill="#{$color}" d="M160.1 128h128v256h-128z"/><path class="lexicon-icon-outline books-3-spine-top" d="m359.2 35.2-31 8.1c-17.1 4.5-27.4 21.9-22.9 39l8.1 31 92.9-24.2-8.1-31c-4.5-17.1-21.9-27.4-39-22.9z" fill="#{$color}"/><path class="lexicon-icon-outline books-3-spine" fill="#{$color}" d="m321.422 144.212 92.909-24.172 64.46 247.756-92.908 24.173z"/><path class="lexicon-icon-outline books-3-spine-bottom" d="M402 453.9c4.5 17.1 21.9 27.4 39 22.9l31-8.1c17.1-4.5 27.4-21.9 22.9-39l-8.1-31-92.9 24.2 8.1 31z" fill="#{$color}"/></svg>',
 
@@ -912,6 +912,8 @@
 
 	'vertical-scroll': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" d="M333.1 365.1c-8.9 0-17.9 3.4-24.7 10.2L288 395.8V116.2l20.4 20.4c13.6 13.6 35.7 13.6 49.3 0 13.6-13.6 13.6-35.7 0-49.3l-77.1-77.1C274.1 3.7 265.3 0 256 0s-18.1 3.7-24.7 10.2l-77.1 77.1c-13.6 13.6-13.6 35.7 0 49.3 6.8 6.8 15.7 10.2 24.7 10.2 8.9 0 17.9-3.4 24.7-10.2l20.4-20.4v279.5l-20.4-20.4c-13.6-13.6-35.7-13.6-49.3 0-13.6 13.6-13.6 35.7 0 49.3l77.1 77.1c.8.8 1.7 1.6 2.5 2.3 5.7 5.5 13.5 8.9 22.1 8.9 8.6 0 16.4-3.4 22.1-8.9.9-.7 1.7-1.5 2.5-2.3l77.1-77.1c13.6-13.6 13.6-35.7 0-49.3-6.7-6.8-15.7-10.2-24.6-10.2z" fill="#{$color}"/></svg>',
 
+	'video-streaming': '<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" d="M423.616 115.2c11.2-7.264 14.464-22.336 6.048-32.672a223.999 223.999 0 0 0-347.296-.032c-8.448 10.336-5.152 25.408 6.016 32.64 11.2 7.296 26.048 3.968 34.784-6.112A175.675 175.675 0 0 1 256.016 48.3a175.679 175.679 0 0 1 132.848 60.724c8.736 10.112 23.552 13.44 34.752 6.176Z" fill="#{$color}"/><path class="lexicon-icon-outline" d="M351.008 138.24c5.888 6.496 4.064 16.512-3.136 21.536-7.232 5.056-17.056 3.2-23.232-3.104a96.167 96.167 0 0 0-70.315-28.801 96.163 96.163 0 0 0-69.269 31.233c-5.952 6.496-15.712 8.704-23.104 3.936-7.36-4.8-9.536-14.72-3.872-21.44a128.006 128.006 0 0 1 95.693-45.571 128 128 0 0 1 97.235 42.179v.032Z" fill="#{$color}"/><path class="lexicon-icon-outline" fill-rule="evenodd" clip-rule="evenodd" d="M64 192h160a31.996 31.996 0 0 1 9.373-22.627 31.996 31.996 0 0 1 45.254 0A31.996 31.996 0 0 1 288 192h160c35.328 0 64 28.704 64 64v192c0 35.296-28.672 64-64 64H64c-35.328 0-64-28.704-64-64V256c0-35.296 28.672-64 64-64Zm272 160-128-80v160l128-80Z" fill="#{$color}"/></svg>',
+
 	'video': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" d="M448 0H64C28.7 0 0 28.7 0 64v384c0 35.3 28.7 64 64 64h384c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64zM192 352V160l160 96-160 96z" fill="#{$color}"/></svg>',
 
 	'view': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" d="M5.1 273.3c127.1 192 374.7 188.6 501.6-.1 7-10.4 7-24.5.1-34.9-128.2-192.5-374.4-187-501.5.2-7 10.3-7.1 24.3-.2 34.8zm58.6-17.5c120.8-137.8 266.3-139.6 384.5 0-118.2 137.7-264.3 135.9-384.5 0zm220.2-91.4c-91.6-26-160.9 74.5-102.8 151.5 57.4 75.2 195.5 24.2 166.5-87.9-46.2 76.3-138.9-18.5-63.7-63.6z" fill="#{$color}"/></svg>',

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,40 @@
 			@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);
+
+					&:hover {
+						@include clay-css(map-get($_thead-table-cell, hover));
+					}
+
+					&: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)
+						);
+					}
+
+					.component-action {
+						@include clay-css(
+							map-get($_thead-table-cell, component-action)
+						);
+					}
 				}
 
 				th {

package/src/scss/mixins/_toggle-switch.scss

@@ -1051,6 +1051,13 @@
 
 		@include clay-css($map);
 
+		.simple-toggle-switch,
+		&.simple-toggle-switch {
+			@include clay-toggle-switch-variant(
+				map-get($map, simple-toggle-switch)
+			);
+		}
+
 		.toggle-switch-check-bar {
 			@include clay-css(map-get($map, toggle-switch-check-bar));
 

package/src/scss/variables/_modals.scss

@@ -57,7 +57,7 @@ $modal-content: map-deep-merge(
 		color: $modal-content-color,
 		display: flex,
 		flex-direction: column,
-		max-height: calc(100vh - #{$modal-dialog-margin-y-sm-up} * 2),
+		max-height: calc(100vh - #{$modal-dialog-margin} * 2),
 		outline: 0,
 		overflow: hidden,
 		pointer-events: auto,
@@ -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,29 @@ $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-body-iframe: (
+					padding: 0,
+				),
+				modal-footer: (
+					padding: 0.5rem,
+				),
+			),
+		),
 	),
 	$modal
 );