@clayui/css 3.106.1 → 3.108.0

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

@@ -360,6 +360,8 @@
 
 	'en-au': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#B0BEC9" d="M0 64h512v384H0z"/><path fill="#0035A0" d="M16 80h480v352H16z"/><path fill="#FFF" d="M88 80h48v192H88z"/><path fill="#FFF" d="M16 152h192v48H16z"/><path fill="#FFF" d="M16 152h192v48H16z"/><path fill="#E03232" d="M96 80h32v192H96z"/><path fill="#E03232" d="M16 160h192v32H16z"/><path fill="#E03232" d="M27.3 80H16v11.3L196.7 272H208v-11.3z"/><path fill="#E03232" d="M208 91.3V80h-11.3L16 260.7V272h11.3z"/><path fill="#FFF" d="M384 272h16v16h-16zM96 336h32v32H96zM288 112h32v32h-32zM272 240h32v32h-32zM400 176h32v32h-32z"/></svg>',
 
+	'en-ca': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#B0BEC9" d="M0 64h512v384H0z"/><path fill="#E03232" d="M16 80h112v352H16zM384 80h112v352H384z"/><path fill="#FFF" d="M128 80h256v352H128z"/><path fill="#E03232" d="M301.9 300.3c0 3.6 4.1 13.4 4.1 13.4s-34.2-5.7-37.1-6.2-5.5-.5-5.4 5.5l2.4 18.2h-8.4l1.9-18.2c0-6-2.6-6-5.5-5.5l-37.1 6.4s4-9.7 4-13.4c0-4.7-10.1-11.4-21.1-21-11-9.7-18.6-14.6-18.6-15.7 0-1 7.8-.8 7.8-6.6 0-5.7-7.4-27.3-7.4-27.3s15.4 6 19.6 5.9c4.2 0 10.7-8.4 10.7-14.4 0 0 20.1 25.4 24.3 23.5 4.2-1.8-7.7-51.8-7.7-51.8s12 10.9 16.1 9.6c4.2-1.3 15.9-31.3 15.9-31.3s.1-.4.4-.4c.2 0 .4.4.4.4s11.8 29.9 16 31.1c4.2 1.3 16.1-9.7 16.1-9.7s-11.6 50-7.4 51.9c4.2 1.8 24.2-23.8 24.2-23.8 0 6 6.6 14.4 10.7 14.4 4.2-.1 19.5-6.1 19.5-6.1s-7.3 21.6-7.2 27.4c0 5.8 7.8 5.5 7.8 6.5s-7.6 6-18.5 15.8c-10.5 10-20.5 16.6-20.5 21.4z"/></svg>',
+
 	'en-gb': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#B0BEC9" d="M0 64h512v384H0z"/><path fill="#0035A0" d="M16 80h480v352H16z"/><path fill="#FFF" d="M208 80h96v352h-96z"/><path fill="#FFF" d="M16 208h480v96H16z"/><path fill="#FFF" d="M256 315.5 414.8 432H496v-59.5L337.2 256 496 139.5V80h-81.2L256 196.5 97.2 80H16v59.5L174.8 256 16 372.5V432h81.2z"/><path fill="#E03232" d="M256 295.7 441.9 432H496v-39.7L310.1 256 496 119.7V80h-54.1L256 216.3 70.1 80H16v39.7L201.9 256 16 392.3V432h54.1z"/><path fill="#E03232" d="M496 224H288V80h-64v144H16v64h208v144h64V288h208z"/></svg>',
 
 	'en-us': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#C0CFD8" d="M0 64h512v384H0z"/><path fill="#E03232" d="M16 80h480v32H16z"/><path fill="#FFF" d="M16 112h480v32H16z"/><path fill="#E03232" d="M16 144h480v32H16z"/><path fill="#FFF" d="M16 176h480v32H16z"/><path fill="#E03232" d="M16 208h480v32H16z"/><path fill="#FFF" d="M16 240h480v32H16z"/><path fill="#E03232" d="M16 272h480v32H16z"/><path fill="#FFF" d="M16 304h480v32H16z"/><path fill="#E03232" d="M16 336h480v32H16z"/><path fill="#FFF" d="M16 368h480v32H16z"/><path fill="#E03232" d="M16 400h480v32H16z"/><path fill="#66A1CC" d="M16 80h256v192H16z"/><path fill="#0035A0" d="M16 80h256v192H16z"/></svg>',
@@ -884,6 +886,8 @@
 
 	'truck': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" d="M510.4 270.5c3.1-14.3 1.3-24-3.2-36.1L452.6 98.9c-7-17.4-30.2-35.6-52.5-36.1h-48c-.7-15.7-12.2-31-33.3-31H30.3C9.4 31.8-.4 48.5.2 64.8H0V349c0 22.8 16.1 34.9 32.1 35.3v.4c0 114.3 158.6 127.7 187.5 31.7h104.3c29.6 93.2 187.2 86 187.2-31.7 0-20.2-5.1-36.9-13.1-50.8l12.4-63.4zM351.9 126.9h43l26 64.7H352v-64.7zM96.2 384.4c0-43.1 64.1-43.4 64.1 0 0 43.6-64.1 42.2-64.1 0zm344.5-92.8c-46.2-11.6-100.6 8.7-116.8 60.6H219.3c-21.1-68-107.3-81.7-155.1-41.3v-215h224.4v94.8c0 35.6 28.9 64.5 64.5 64.5h95.2l-.7 2.9m-64.9 126.3c0-43.1 64.1-43.4 64.1 0 .1 43.6-64.1 42.2-64.1 0z" fill="#{$color}"/></svg>',
 
+	'twitter-x': '<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" d="M304.158 216.797 490.663 0h-44.196L284.525 188.242 155.182 0H6l195.592 284.655L6 512h44.198l171.016-198.79L357.809 512h149.182L304.147 216.797h.011Zm-60.536 70.366-19.818-28.345L66.124 33.272h67.885L261.26 215.295l19.817 28.345 165.411 236.601h-67.886l-134.98-193.067v-.011Z" fill="#{$color}"/></svg>',
+
 	'twitter': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" d="M512.015 97.213c-18.842 8.368-39.089 14.015-60.332 16.531 21.68-12.991 38.358-33.589 46.2-58.108-20.306 12.026-42.776 20.774-66.71 25.485-19.164-20.423-46.462-33.179-76.688-33.179-58.02 0-105.039 47.048-105.039 105.039 0 8.222.936 16.238 2.721 23.934-87.308-4.389-164.698-46.2-216.516-109.749-9.041 15.508-14.22 33.559-14.22 52.812 0 36.457 18.55 68.612 46.727 87.425a104.651 104.651 0 0 1-47.575-13.137v1.317c0 50.91 36.222 93.336 84.266 102.99a105.153 105.153 0 0 1-27.679 3.687c-6.759 0-13.343-.673-19.779-1.901 13.371 41.723 52.169 72.123 98.135 72.942-35.959 28.176-81.252 44.971-130.465 44.971-8.486 0-16.853-.498-25.046-1.464 46.493 29.815 101.704 47.195 161.041 47.195 193.226 0 298.879-160.075 298.879-298.879 0-4.565-.117-9.07-.293-13.576 20.481-14.776 38.3-33.267 52.374-54.334z" fill="#{$color}"/></svg>',
 
 	'underline': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" d="M128 448h256v32H128v-32zm256-192V64h-64v192c0 85.6-128 85.6-128 0V64h-64v192c0 170.7 256 170.7 256 0z" 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,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/_badges.scss

@@ -494,15 +494,85 @@ $badge-palette: map-deep-merge(
 		danger: $badge-danger,
 		light: $badge-light,
 		dark: $badge-dark,
-		badge-beta: (
+		'.badge-translucent.badge-primary': (
+			background-color: rgba($primary-d1, 0.04),
+			border-color: transparent,
+			color: $primary-d1,
+		),
+		'.badge-translucent.badge-info, .badge-beta': (
 			background-color: rgba($info-d1, 0.04),
+			border-color: transparent,
 			color: $info-d1,
-			text-transform: uppercase,
 		),
-		badge-beta-dark: (
+		'.badge-translucent.badge-success': (
+			background-color: rgba($success-d1, 0.04),
+			border-color: transparent,
+			color: $success-d1,
+		),
+		'.badge-translucent.badge-warning': (
+			background-color: rgba($warning-d1, 0.04),
+			border-color: transparent,
+			color: $warning-d1,
+		),
+		'.badge-translucent.badge-danger': (
+			background-color: rgba($danger-d1, 0.04),
+			border-color: transparent,
+			color: $danger-d1,
+		),
+		'%clay-dark-badge-translucent-primary': (
+			background-color: rgba($primary-l2, 0.04),
+			border-color: transparent,
+			color: $primary-l1,
+		),
+		'.clay-dark .badge-translucent.badge-primary': (
+			extend: '%clay-dark-badge-translucent-primary',
+		),
+		'.clay-dark.badge-translucent.badge-primary': (
+			extend: '%clay-dark-badge-translucent-primary',
+		),
+		'%clay-dark-badge-translucent-info': (
 			background-color: rgba($info-l2, 0.04),
+			border-color: transparent,
 			color: $info-l1,
-			text-transform: uppercase,
+		),
+		'.clay-dark .badge-translucent.badge-info, .badge-beta-dark': (
+			extend: '%clay-dark-badge-translucent-info',
+		),
+		'.clay-dark.badge-translucent.badge-info': (
+			extend: '%clay-dark-badge-translucent-info',
+		),
+		'%clay-dark-badge-translucent-success': (
+			background-color: rgba($success-l2, 0.04),
+			border-color: transparent,
+			color: $success-l1,
+		),
+		'.clay-dark .badge-translucent.badge-success': (
+			extend: '%clay-dark-badge-translucent-success',
+		),
+		'.clay-dark.badge-translucent.badge-success': (
+			extend: '%clay-dark-badge-translucent-success',
+		),
+		'%clay-dark-badge-translucent-warning': (
+			background-color: rgba($warning-l2, 0.04),
+			border-color: transparent,
+			color: $warning-l1,
+		),
+		'.clay-dark .badge-translucent.badge-warning': (
+			extend: '%clay-dark-badge-translucent-warning',
+		),
+		'.clay-dark.badge-translucent.badge-warning': (
+			extend: '%clay-dark-badge-translucent-warning',
+		),
+		'%clay-dark-badge-translucent-danger': (
+			background-color: rgba($danger-l2, 0.04),
+			border-color: transparent,
+			color: $danger-l1,
+		),
+		'.clay-dark .badge-translucent.badge-danger': (
+			extend: '%clay-dark-badge-translucent-danger',
+		),
+		'.clay-dark.badge-translucent.badge-danger': (
+			extend: '%clay-dark-badge-translucent-danger',
 		),
 	),
 	$badge-palette

package/src/scss/variables/_buttons.scss

@@ -898,10 +898,48 @@ $btn-palette: map-deep-merge(
 		light: $btn-light,
 		dark: $btn-dark,
 		link: $btn-link,
-		btn-beta: (
+		'.btn-translucent': (
+			extend: '%clay-btn-xs',
+			border-radius: $rounded-pill,
+		),
+		'.btn-translucent.btn-primary': (
+			background-color: rgba($primary-d1, 0.04),
+			border-color: transparent,
+			color: $primary-d1,
+			hover: (
+				background-color: rgba($primary-d1, 0.06),
+				color: $primary-d1,
+			),
+			focus: (
+				background-color: rgba($primary-d1, 0.06),
+				color: $primary-d1,
+			),
+			active: (
+				background-color: rgba($primary-d1, 0.08),
+				color: $primary-d1,
+			),
+		),
+		'.btn-translucent.btn-secondary': (
+			background-color: rgba($dark-l2, 0.04),
+			border-color: transparent,
+			color: $secondary,
+			hover: (
+				background-color: rgba($dark-l2, 0.06),
+				color: $secondary,
+			),
+			focus: (
+				background-color: rgba($dark-l2, 0.06),
+				color: $secondary,
+			),
+			active: (
+				background-color: rgba($dark-l2, 0.08),
+				color: $secondary,
+			),
+		),
+		'.btn-translucent.btn-info, .btn-beta': (
 			background-color: rgba($info-d1, 0.04),
+			border-color: transparent,
 			color: $info-d1,
-			text-transform: uppercase,
 			hover: (
 				background-color: rgba($info-d1, 0.06),
 				color: $info-d1,
@@ -910,12 +948,89 @@ $btn-palette: map-deep-merge(
 				background-color: rgba($info-d1, 0.06),
 				color: $info-d1,
 			),
+			active: (
+				background-color: rgba($info-d1, 0.08),
+				color: $info-d1,
+			),
+		),
+		'.btn-translucent.btn-success': (
+			background-color: rgba($success-d1, 0.04),
+			border-color: transparent,
+			color: $success-d1,
+			hover: (
+				background-color: rgba($success-d1, 0.06),
+				color: $success-d1,
+			),
+			focus: (
+				background-color: rgba($success-d1, 0.06),
+				color: $success-d1,
+			),
+			active: (
+				background-color: rgba($success-d1, 0.08),
+				color: $success-d1,
+			),
+		),
+		'.btn-translucent.btn-warning': (
+			background-color: rgba($warning-d1, 0.04),
+			border-color: transparent,
+			color: $warning-d1,
+			hover: (
+				background-color: rgba($warning-d1, 0.06),
+				color: $warning-d1,
+			),
+			focus: (
+				background-color: rgba($warning-d1, 0.06),
+				color: $warning-d1,
+			),
+			active: (
+				background-color: rgba($warning-d1, 0.08),
+				color: $warning-d1,
+			),
+		),
+		'.btn-translucent.btn-danger': (
+			background-color: rgba($danger-d1, 0.04),
+			border-color: transparent,
+			color: $danger-d1,
+			hover: (
+				background-color: rgba($danger-d1, 0.06),
+				color: $danger-d1,
+			),
+			focus: (
+				background-color: rgba($danger-d1, 0.06),
+				color: $danger-d1,
+			),
+			active: (
+				background-color: rgba($danger-d1, 0.08),
+				color: $danger-d1,
+			),
 		),
-		btn-beta-dark: (
+		'%clay-dark-btn-translucent-primary': (
+			background-color: rgba($primary-l2, 0.04),
+			border-color: transparent,
+			color: $primary-l1,
+			hover: (
+				background-color: rgba($primary-l2, 0.06),
+				color: $primary-l1,
+			),
+			focus: (
+				background-color: rgba($primary-l2, 0.06),
+				color: $primary-l1,
+			),
+			active: (
+				background-color: rgba($primary-l2, 0.08),
+				color: $primary-l1,
+			),
+		),
+		'.clay-dark .btn-translucent.btn-primary': (
+			extend: '%clay-dark-btn-translucent-primary',
+		),
+		'.clay-dark.btn-translucent.btn-primary': (
+			extend: '%clay-dark-btn-translucent-primary',
+		),
+		'%clay-dark-btn-translucent-info': (
 			background-color: rgba($info-l2, 0.04),
 			border-color: transparent,
 			color: $info-l1,
-			text-transform: uppercase,
 			hover: (
 				background-color: rgba($info-l2, 0.06),
 				color: $info-l1,
@@ -924,6 +1039,85 @@ $btn-palette: map-deep-merge(
 				background-color: rgba($info-l2, 0.06),
 				color: $info-l1,
 			),
+			active: (
+				background-color: rgba($info-l2, 0.08),
+				color: $info-l1,
+			),
+		),
+		'.clay-dark .btn-translucent.btn-info, .btn-beta-dark': (
+			extend: '%clay-dark-btn-translucent-info',
+		),
+		'.clay-dark.btn-translucent.btn-info': (
+			extend: '%clay-dark-btn-translucent-info',
+		),
+		'%clay-dark-btn-translucent-success': (
+			background-color: rgba($success-l2, 0.04),
+			border-color: transparent,
+			color: $success-l1,
+			hover: (
+				background-color: rgba($success-l2, 0.06),
+				color: $success-l1,
+			),
+			focus: (
+				background-color: rgba($success-l2, 0.06),
+				color: $success-l1,
+			),
+			active: (
+				background-color: rgba($success-l2, 0.08),
+				color: $success-l1,
+			),
+		),
+		'.clay-dark .btn-translucent.btn-success': (
+			extend: '%clay-dark-btn-translucent-success',
+		),
+		'.clay-dark.btn-translucent.btn-success': (
+			extend: '%clay-dark-btn-translucent-success',
+		),
+		'%clay-dark-btn-translucent-warning': (
+			background-color: rgba($warning-l2, 0.04),
+			border-color: transparent,
+			color: $warning-l1,
+			hover: (
+				background-color: rgba($warning-l2, 0.06),
+				color: $warning-l1,
+			),
+			focus: (
+				background-color: rgba($warning-l2, 0.06),
+				color: $warning-l1,
+			),
+			active: (
+				background-color: rgba($warning-l2, 0.08),
+				color: $warning-l1,
+			),
+		),
+		'.clay-dark .btn-translucent.btn-warning': (
+			extend: '%clay-dark-btn-translucent-warning',
+		),
+		'.clay-dark.btn-translucent.btn-warning': (
+			extend: '%clay-dark-btn-translucent-warning',
+		),
+		'%clay-dark-btn-translucent-danger': (
+			background-color: rgba($danger-l2, 0.04),
+			border-color: transparent,
+			color: $danger-l1,
+			hover: (
+				background-color: rgba($danger-l2, 0.06),
+				color: $danger-l1,
+			),
+			focus: (
+				background-color: rgba($danger-l2, 0.06),
+				color: $danger-l1,
+			),
+			active: (
+				background-color: rgba($danger-l2, 0.08),
+				color: $danger-l1,
+			),
+		),
+		'.clay-dark .btn-translucent.btn-danger': (
+			extend: '%clay-dark-btn-translucent-danger',
+		),
+		'.clay-dark.btn-translucent.btn-danger': (
+			extend: '%clay-dark-btn-translucent-danger',
 		),
 	),
 	$btn-palette

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
 );