@clayui/css 3.127.0 → 3.130.0

package/src/scss/components/_input-groups.scss

@@ -245,7 +245,8 @@
 			}
 		}
 
-		.btn-monospaced {
+		.btn-monospaced,
+		.input-group-inset-icon {
 			@include clay-button-variant(
 				$input-group-inset-item-btn-monospaced
 			);
@@ -260,6 +261,16 @@
 		}
 	}
 
+	.input-group-inset-icon {
+		align-items: center;
+		display: flex;
+		justify-content: center;
+
+		.lexicon-icon {
+			margin-top: 0;
+		}
+	}
+
 	.input-group-item .input-group-inset-before.form-control {
 		@include border-left-radius(0);
 		@include border-right-radius($input-border-radius);

package/src/scss/components/_type.scss

@@ -130,11 +130,15 @@ mark.clay-dark,
 
 // Lists
 
-.list-unstyled {
+%list-unstyled {
 	list-style: none;
 	padding-left: 0;
 }
 
+.list-unstyled {
+	@extend %list-unstyled;
+}
+
 // Inline turns list items into inline-block
 
 .list-inline {

package/src/scss/components/_utilities-functional-important.scss

@@ -855,4 +855,12 @@
 
 .c-prefers-reduced-motion {
 	@include clay-css($c-prefers-reduced-motion);
+
+	.loading-animation-squares {
+		@extend %loading-animation !optional;
+
+		@include clay-map-to-css(
+			map-get($c-prefers-reduced-motion, '.loading-animation-squares')
+		);
+	}
 }

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

@@ -780,6 +780,8 @@
 
 	'select': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline select-border" d="M448 64v384H64V64h384M64 0C28.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-64H64z" fill="#{$color}"/><path class="lexicon-icon-outline select-caret-up" fill="#{$color}" d="M414.5 224H278.8l67.9-67.9z"/><path class="lexicon-icon-outline select-caret-down" fill="#{$color}" d="M278.8 288h135.7l-67.8 67.9z"/><path class="lexicon-icon-outline select-s" d="M104.8 306.8c14.2 20.2 94.7 49.1 96.9-3.6C205 259 89.5 268.5 91.5 193.3c6-77.3 100-83.3 143.7-35.9-6.2 8.6-20.2 26.4-20.2 26.4-43.2-35.8-84.9-17.7-83.6 7.5C129 237 238 215 242.2 300.1c2.8 92.4-135.7 76.4-160.7 34.9l23.3-28.2z" fill="#{$color}"/></svg>',
 
+	'send': '<svg class="lexicon-icon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" fill-rule="evenodd" clip-rule="evenodd" d="M15.343 9.148c.876-.427.876-1.869 0-2.296L1.488.098C.78-.246 0 .356 0 1.246v3.377c0 .951.736 1.74 1.684 1.806l4.65.326h.638c.592 0 1.073.557 1.073 1.245 0 .688-.48 1.245-1.073 1.245h-.637l-4.65.326A1.81 1.81 0 0 0 0 11.377v3.377c0 .89.781 1.492 1.488 1.148l13.855-6.754Z" fill="#{$color}"/></svg>',
+
 	'seo': '<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" d="M111.994 152.002c0-13.276 10.734-24.001 23.999-24.001 13.265 0 23.999 10.725 23.999 24.001v128.001c0 13.275-10.734 24-23.999 24-13.265 0-23.999-10.725-23.999-24V152.002Zm143.993 96.001c0-13.276 10.734-24.001 23.999-24.001 13.265 0 23.999 10.725 23.999 24.001v32c0 13.275-10.734 24-23.999 24-13.265 0-23.999-10.725-23.999-24v-32Z" fill="#{$color}"/><path class="lexicon-icon-outline" clip-rule="evenodd" d="M499.207 455.48 377.713 333.378C523.706 92.276 229.62-102.426 59.529 59.375-105.563 245.277 101.127 519.98 332.915 378.38l121.494 118.8c35.098 38.6 79.996-6.4 44.798-41.7ZM206.221 63.575c191.891 0 198.091 289.003 0 289.003-192.89 0-187.39-289.003 0-289.003Z" fill="#{$color}"/><path class="lexicon-icon-outline" d="M183.991 200.002c0-13.275 10.734-24 23.999-24 13.265 0 23.999 10.725 23.999 24v80.001c0 13.275-10.734 24-23.999 24-13.265 0-23.999-10.725-23.999-24v-80.001Z" fill="#{$color}"/></svg>',
 
 	'separator': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline separator-content-2" d="M416 448H96c-17.7 0-32-14.3-32-32v-32c0-17.7 14.3-32 32-32h320c17.7 0 32 14.3 32 32v32c0 17.7-14.3 32-32 32z" fill="#{$color}"/><path class="lexicon-icon-outline separator-divider" d="M464 272H48c-21.2 0-20.5-32 0-32h416c20.8 0 21.8 32 0 32z" fill="#{$color}"/><path class="lexicon-icon-outline separator-content-1" d="M416 160H96c-17.7 0-32-14.3-32-32V96c0-17.7 14.3-32 32-32h320c17.7 0 32 14.3 32 32v32c0 17.7-14.3 32-32 32z" fill="#{$color}"/></svg>',
@@ -832,6 +834,8 @@
 
 	'special-character': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" d="M255.87 32C35.55 43.31 12.72 299.8 151.6 384H96.29c-43.54 0-42.58 64 0 64h127.99v-78.07c0-12.64-7.49-24.01-19.08-29.07C90.01 293.65 105.82 101.28 256.58 96c144.34 3.53 171.57 193.26 50.77 244.86-11.58 5.06-19.08 16.43-19.08 29.07V448h127.99c41.84 0 42.8-64 0-64h-55.31C501.05 301.56 474.7 38.92 255.87 32z" fill="#{$color}"/></svg>',
 
+	'speed': '<svg class="lexicon-icon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline lx-speed-outline" d="M12.985 6.67A5.962 5.962 0 0 1 14 10.003c0 .702-.121 1.375-.343 2H2.342a5.973 5.973 0 0 1-.342-2c0-3.308 2.694-6 6-6 .604 0 1.188.09 1.738.257l1.55-1.55A7.951 7.951 0 0 0 8 2.004c-4.41 0-8 3.587-8 8 0 .97.174 1.902.492 2.765.297.803 1.065 1.235 1.815 1.235h11.385c.75 0 1.518-.432 1.815-1.235A7.961 7.961 0 0 0 16 10.004a7.958 7.958 0 0 0-1.58-4.768L12.985 6.67Z" fill="#{$color}"/><path class="lexicon-icon-outline lx-speed-dial" d="M6.92 10.162a1.316 1.316 0 0 1 .076-2.078l5.908-4.243a.206.206 0 0 1 .285.291L8.815 9.944a1.316 1.316 0 0 1-1.896.218Z" fill="#{$color}"/></svg>',
+
 	'square-hole-multi': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline lx-square-hole-multi-square-1" d="M460 0H148c-28.6 0-52 23.4-52 52v12h320c17.7 0 32 14.3 32 32v320h12c28.6 0 52-23.4 52-52V52c0-28.6-23.4-52-52-52z" fill="#{$color}"/><path class="lexicon-icon-outline lx-square-hole-multi-square-2" d="M364 96H52c-28.6 0-52 23.4-52 52v312c0 28.6 23.4 52 52 52h312c28.6 0 52-23.4 52-52V148c0-28.6-23.4-52-52-52zm-78 286H130V226h156v156z" fill="#{$color}"/></svg>',
 
 	'square-hole': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" d="M448 0H64A64 64 0 0 0 0 64v384a64 64 0 0 0 64 64h384a64 64 0 0 0 64-64V64a64 64 0 0 0-64-64Zm-96 352H160V160h192Z" fill="#{$color}"/></svg>',
@@ -954,6 +958,8 @@
 
 	'vocabulary': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline lx-vocabulary-a" d="M145.689 252.622c15.808 7.903 35.029 1.497 42.933-14.31L195.777 224h120.446l7.155 14.311c5.607 11.214 16.908 17.697 28.646 17.696 4.81 0 9.694-1.089 14.287-3.386 15.807-7.903 22.214-27.125 14.311-42.932l-96-192a32 32 0 0 0-57.244 0l-96 192c-7.903 15.808-1.496 35.029 14.311 42.933zM256 103.554 284.223 160h-56.446L256 103.554z" fill="#{$color}"/><path class="lexicon-icon-outline lx-vocabulary-b" d="M160 352v-64c0-17.673-14.327-32-32-32H0v256h160c17.673 0 32-14.327 32-32v-96c0-17.673-14.327-32-32-32zm-64-32v32H64v-32h32zm32 128H64v-32h64v32z" fill="#{$color}"/><path class="lexicon-icon-outline lx-vocabulary-c" d="M478.736 448.025c-16.4.646-18.544.48-20.266.344-2.576-.202-5.14-.369-10.47-.369-35.29 0-64-28.71-64-64s28.71-64 64-64c15.178 0 28.193 1.474 28.295 1.485 17.567 2.04 33.444-10.526 35.49-28.08 2.046-17.554-10.526-33.443-28.08-35.49-.67-.078-16.652-1.915-35.705-1.915-70.58 0-128 57.42-128 128s57.42 128 128 128c3.255 0 4.229.076 5.46.173 2.357.185 4.5.325 8.43.325 3.96 0 9.737-.143 19.374-.523 17.659-.698 31.409-15.58 30.71-33.239-.697-17.66-15.608-31.434-33.238-30.71z" fill="#{$color}"/></svg>',
 
+	'voice': '<svg class="lexicon-icon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" fill-rule="evenodd" clip-rule="evenodd" d="M14.139 1.922a.9.9 0 0 0-1.353 1.187c.765.872 1.21 2.267 1.225 3.753.015 1.486-.403 2.886-1.15 3.768a.9.9 0 0 0 1.374 1.163c1.107-1.307 1.594-3.174 1.576-4.95-.018-1.774-.542-3.633-1.672-4.921Zm-8.537 9.265a8.667 8.667 0 0 0-2.5.354c-1.047.314-1.992.837-2.7 1.571-.506.525-.047 1.279.681 1.279h.476c.253 0 .494-.1.698-.25.013-.01.025-.02.039-.029.808-.577 1.999-.928 3.3-.925 1.301.004 2.497.362 3.31.944l.021.015c.202.147.44.245.69.245h.486c.73 0 1.187-.758.676-1.281-.709-.725-1.65-1.246-2.692-1.56a8.714 8.714 0 0 0-2.485-.363ZM2.352 6.79c0 1.041.447 1.973 1.152 2.596.566.5 1.298.802 2.098.802a3.15 3.15 0 0 0 2.089-.795A3.455 3.455 0 0 0 8.85 6.79c0-1.877-1.454-3.398-3.25-3.398-1.794 0-3.25 1.521-3.25 3.398Zm4.5 0c0 .857-.643 1.398-1.25 1.398s-1.25-.54-1.25-1.398c0-.857.643-1.398 1.25-1.398s1.25.54 1.25 1.398Zm2.947-2.915a.75.75 0 0 1 1.06-.027c.832.79 1.22 1.935 1.234 3.029.013 1.093-.348 2.247-1.164 3.05a.75.75 0 1 1-1.052-1.07c.462-.455.725-1.18.716-1.962-.01-.781-.29-1.507-.766-1.96a.75.75 0 0 1-.028-1.06Z" fill="#{$color}"/></svg>',
+
 	'warehouse': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline lx-warehouse-square-1" d="M176 215c0-18.2 14.3-33 32-33h32c17.7 0 32 14.8 32 33v33c0 18.2-14.3 33-32 33h-32c-17.7 0-32-14.8-32-33v-33z" fill="#{$color}"/><path class="lexicon-icon-outline lx-warehouse-square-2" d="M240 347.1c0-18.2-14.3-33-32-33h-32c-17.7 0-32 14.8-32 33v33c0 18.2 14.3 33 32 33h32c17.7 0 32-14.8 32-33v-33z" fill="#{$color}"/><path class="lexicon-icon-outline lx-warehouse-square-3" d="M336 314.1c17.7 0 32 14.8 32 33v33c0 18.2-14.3 33-32 33h-32c-17.7 0-32-14.8-32-33v-33c0-18.2 14.3-33 32-33h32z" fill="#{$color}"/><path class="lexicon-icon-outline lx-warehouse-border" d="M217.6 13.5c22.8-17.6 54-17.6 76.8 0l192 148.6c16.1 12.5 25.6 32.1 25.6 52.9v297.3H0V215c0-20.8 9.5-40.4 25.6-52.9l192-148.6zM448 215 256 66.3 64 215v231.2h384V215z" clip-rule="evenodd" fill-rule="evenodd" fill="#{$color}"/></svg>',
 
 	'warning-full': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" d="m506.3 409.3-214-353.7c-16.8-30.6-55.8-32.6-72.6 0L5.7 409.3C-8 436.5 5 480 42 480h428c36 0 52.5-43.5 36.3-70.7zM224 392c0-42.5 64-42 64 0 0 41.5-64 42.5-64 0zm64-104c0 42.5-64 40.5-64 0V184c0-43 64-43.5 64 0v104z" fill="#{$color}"/></svg>',

package/src/scss/mixins/_alerts.scss

@@ -152,87 +152,143 @@
 		);
 
 		@if ($enabled) {
-			@include clay-css($base);
+			@if (length($base) != 0) {
+				@include clay-css($base);
+			}
+
+			$_first-child: map-get($map, first-child);
 
-			&:first-child {
-				@include clay-css(map-get($map, first-child));
+			@if ($_first-child) {
+				&:first-child {
+					@include clay-css($_first-child);
+				}
 			}
 
-			&:last-child {
-				@include clay-css(map-get($map, last-child));
+			$_last-child: map-get($map, last-child);
+
+			@if ($_last-child) {
+				&:last-child {
+					@include clay-css($_last-child);
+				}
 			}
 
-			hr {
-				@include clay-css(map-get($map, hr));
+			$_hr: map-get($map, hr);
+
+			@if ($_hr) {
+				hr {
+					@include clay-css($_hr);
+				}
 			}
 
-			&.alert-dismissible {
-				@include clay-css(setter(map-get($map, alert-dismissible), ()));
+			$_alert-dismissible: map-get($map, alert-dismissible);
 
-				.container,
-				.container-fluid {
-					@include clay-css(
-						setter(
-							map-deep-get(
-								$map,
-								alert-dismissible,
-								container-fluid
-							),
-							()
-						)
+			@if ($_alert-dismissible) {
+				&.alert-dismissible {
+					@include clay-css($_alert-dismissible);
+
+					$_container-fluid: map-get(
+						$_alert-dismissible,
+						container-fluid
 					);
+
+					@if ($_container-fluid) {
+					}
+					.container,
+					.container-fluid {
+						@include clay-css($_container-fluid);
+					}
 				}
 			}
 
-			.alert-indicator {
-				@include clay-css($alert-indicator);
+			@if (length($alert-indicator) != 0) {
+				.alert-indicator {
+					@include clay-css($alert-indicator);
 
-				.lexicon-icon {
-					@include clay-css(map-get($alert-indicator, lexicon-icon));
-				}
+					$_lexicon-icon: map-get($alert-indicator, lexicon-icon);
+
+					@if ($_lexicon-icon) {
+						.lexicon-icon {
+							@include clay-css(
+								map-get($alert-indicator, lexicon-icon)
+							);
+						}
+					}
+
+					$_lead: map-get($alert-indicator, lead);
 
-				+ .lead {
-					@include clay-css(map-get($alert-indicator, lead));
+					@if ($_lead) {
+						+ .lead {
+							@include clay-css(map-get($alert-indicator, lead));
+						}
+					}
 				}
 			}
 
-			.alert-btn {
-				@include clay-button-variant(map-get($map, alert-btn));
+			$_alert-btn: map-get($map, alert-btn);
+
+			@if ($_alert-btn) {
+				.alert-btn {
+					@include clay-button-variant($_alert-btn);
+				}
 			}
 
-			.btn-group {
-				@include clay-container(map-get($map, btn-group));
+			$_btn-group: map-get($map, btn-group);
+
+			@if ($_btn-group) {
+				.btn-group {
+					@include clay-container($_btn-group);
+				}
 			}
 
-			.btn-group-item {
-				@include clay-container(map-get($map, btn-group-item));
+			$_btn-group-item: map-get($map, btn-group-item);
+
+			@if ($_btn-group-item) {
+				.btn-group-item {
+					@include clay-container($_btn-group-item);
+				}
 			}
 
-			.close {
-				@include clay-close($close);
+			@if (length($close) != 0) {
+				.close {
+					@include clay-close($close);
+				}
 			}
 
-			.container,
-			.container-fluid {
-				@include clay-css(setter(map-get($map, container-fluid), ()));
+			$_container-fluid: map-get($map, container-fluid);
+
+			@if ($_container-fluid) {
+				.container,
+				.container-fluid {
+					@include clay-css($_container-fluid);
+				}
 			}
 
-			.lead {
-				@include clay-css($lead);
+			@if (length($lead) != 0) {
+				.lead {
+					@include clay-css($lead);
+				}
 			}
 
-			.alert-link {
-				@include clay-link($alert-link);
+			@if (length($alert-link) != 0) {
+				.alert-link {
+					@include clay-link($alert-link);
+				}
 			}
 
-			.component-title {
-				@include clay-text-typography(map-get($map, component-title));
+			$_compontent-title: map-get($map, compontent-title);
+
+			@if ($_compontent-title) {
+				.component-title {
+					@include clay-text-typography($_component-title);
+				}
 			}
 
-			.component-subtitle {
-				@include clay-text-typography(
-					map-get($map, component-subtitle)
-				);
+			$_component-subtitle: map-get($map, component-subtitle);
+
+			@if ($_component-subtitle) {
+				.component-subtitle {
+					@include clay-text-typography($_component-subtitle);
+				}
 			}
 
 			@each $key, $properties in map-get($map, custom-selectors) {

package/src/scss/mixins/_badges.scss

@@ -178,64 +178,106 @@
 		$badge-item-expand: setter(map-get($map, badge-item-expand), ());
 
 		@if ($enabled) {
-			@include clay-css($base);
+			@if (length($base) != 0) {
+				@include clay-css($base);
+			}
 
 			// Empty badges collapse automatically
 
-			&:empty {
-				@include clay-css(map-get($map, empty));
-			}
+			$_empty: map-get($map, empty);
 
-			&[href],
-			&[type] {
-				@include clay-link($href);
+			@if ($_empty) {
+				&:empty {
+					@include clay-css(map-get($map, empty));
+				}
 			}
 
-			a {
-				@include clay-link($link);
+			@if (length($href) != 0) {
+				&[href],
+				&[type] {
+					@include clay-link($href);
+				}
 			}
 
-			.badge-item {
-				@include clay-css($badge-item);
-
+			@if (length($link) != 0) {
 				a {
-					@include clay-link(map-get($badge-item, link));
+					@include clay-link($link);
 				}
+			}
 
-				.btn-unstyled {
-					@include clay-button-variant(
-						map-get($badge-item, btn-unstyled)
-					);
-				}
+			@if (length($badge-item) != 0) {
+				.badge-item {
+					@include clay-css($badge-item);
 
-				.close {
-					@include clay-close(map-get($badge-item, close));
-				}
+					$_link: map-get($badge-item, link);
+
+					@if ($_link) {
+						a {
+							@include clay-link($_link);
+						}
+					}
+
+					$_btn-unstyled: map-get($badge-item, btn-unstyled);
 
-				.lexicon-icon {
-					@include clay-css(map-get($badge-item, lexicon-icon));
+					@if ($_btn-unstyled) {
+						.btn-unstyled {
+							@include clay-button-variant($_btn-unstyled);
+						}
+					}
+
+					$_close: map-get($badge-item, close);
+
+					@if ($_close) {
+						.close {
+							@include clay-close($_close);
+						}
+					}
+
+					$_lexicon-icon: map-get($badge-item, lexicon-icon);
+
+					@if ($_lexicon-icon) {
+						.lexicon-icon {
+							@include clay-css($_lexicon-icon);
+						}
+					}
 				}
 			}
 
-			.badge-item-expand {
-				@include clay-css($badge-item-expand);
+			@if (length($badge-item-expand) != 0) {
+				.badge-item-expand {
+					@include clay-css($badge-item-expand);
 
-				a {
-					@include clay-link(map-get($badge-item-expand, link));
+					$_link: map-get($badge-item-expand, link);
+
+					@if ($_link) {
+						a {
+							@include clay-link($_link);
+						}
+					}
 				}
 			}
 
-			.badge-item-before {
-				@include clay-css(map-get($map, badge-item-before));
+			$_badge-item-before: map-get($map, badge-item-before);
+
+			@if ($_badge-item-before) {
+				.badge-item-before {
+					@include clay-css($_badge-item-before);
+				}
 			}
 
-			.badge-item-after {
-				@include clay-css(map-get($map, badge-item-after));
+			$_badge-item-after: map-get($map, badge-item-after);
+
+			@if ($_badge-item-after) {
+				.badge-item-after {
+					@include clay-css($_badge-item-after);
+				}
 			}
 
 			@if (map-get($c-inner, enabled)) {
-				> .c-inner {
-					@include clay-css($c-inner);
+				@if (length($c-inner) != 0) {
+					> .c-inner {
+						@include clay-css($c-inner);
+					}
 				}
 			}
 		}