@clayui/css 3.45.0 → 3.48.0

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

@@ -619,12 +619,6 @@
 	}
 }
 
-// Text
-
-.text-monospace {
-	font-family: $font-family-monospace !important;
-}
-
 // Text Alignment
 
 .text-justify {
@@ -681,34 +675,60 @@
 
 // Font Weight and Italics
 
-.font-weight-light {
-	font-weight: $font-weight-light !important;
+.font-weight-lighter,
+.text-weight-lighter {
+	font-weight: $font-weight-lighter !important;
 }
 
-.font-weight-lighter {
-	font-weight: $font-weight-lighter !important;
+.font-weight-light,
+.text-weight-light {
+	font-weight: $font-weight-light !important;
 }
 
-.font-weight-normal {
+.font-weight-normal,
+.text-weight-normal {
 	font-weight: $font-weight-normal !important;
 }
 
-.font-weight-semi-bold {
+.font-weight-semi-bold,
+.text-weight-semi-bold {
 	font-weight: $font-weight-semi-bold !important;
 }
 
-.font-weight-bold {
+.font-weight-bold,
+.text-weight-bold {
 	font-weight: $font-weight-bold !important;
 }
 
-.font-weight-bolder {
+.font-weight-bolder,
+.text-weight-bolder {
 	font-weight: $font-weight-bolder !important;
 }
 
-.font-italic {
+.font-italic,
+.text-italic {
 	font-style: italic !important;
 }
 
+.font-monospace,
+.text-monospace {
+	font-family: $font-family-monospace !important;
+}
+
+// Font Sizes
+
+@each $selector, $value in $font-sizes {
+	$selector: if(
+		starts-with($selector, '.') or starts-with($selector, '#'),
+		$selector,
+		str-insert($selector, '.', 1)
+	);
+
+	#{$selector} {
+		@include clay-css($value);
+	}
+}
+
 // Contextual Colors
 
 .text-white {

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

@@ -296,6 +296,8 @@
 
 	'expand': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" d="M64 128v-25.4l88 88c25.5 25.5 64.5-12.8 38.6-38.6l-88-88H128c42.6 0 42.6-64 0-64H32C16.4 0 0 14.4 0 32v96c0 42.7 64 42.6 64 0zm384 0v-25.4l-88 88c-25.5 25.5-64.5-12.8-38.6-38.6l88-88H384c-42.6 0-42.6-64 0-64h96c15.6 0 32 14.4 32 32v96c0 42.7-64 42.6-64 0zM64 384v25.4l88-88c25.5-25.5 64.5 12.8 38.6 38.6l-88 88H128c42.6 0 42.6 64 0 64H32c-15.6 0-32-14.4-32-32v-96c0-42.7 64-42.6 64 0zm384 0v25.4l-88-88c-25.5-25.5-64.5 12.8-38.6 38.6l88 88H384c-42.6 0-42.6 64 0 64h96c15.6 0 32-14.4 32-32v-96c0-42.7-64-42.6-64 0z" fill="#{$color}"/></svg>',
 
+	'export': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline export-base" d="M448 256.3v191.8H64V256.3c0-41.6-64-41.6-64 0v191.8C0 483.2 28.8 512 64 512h384c35.2 0 64-28.8 64-63.9V256.3c0-44.8-64-41.6-64 0z" fill="#{$color}"/><path class="lexicon-icon-outline export-dash" d="M320 384.1H192c-41.6 0-41.6-63.9 0-63.9h128c41.6 0 44.8 63.9 0 63.9z" fill="#{$color}"/><path class="lexicon-icon-outline export-arrow-up" d="m233.6 10.1-64 63.9c-28.8 28.8 12.8 67.1 38.4 44.8l16-16v121.5c0 41.6 64 41.6 64 0V102.8l16 16c28.8 22.4 64-19.2 38.4-44.8l-64-63.9c-6.4-6.4-25.6-19.1-44.8 0z" fill="#{$color}"/></svg>',
+
 	'fieldset': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline lx-fieldset-bracket-start" d="M128 64c0-17.7-14.3-32-32-32H64C28.7 32 0 60.7 0 96v320c0 35.3 28.7 64 64 64h32c17.7 0 32-14.3 32-32s-14.3-32-32-32H64V96h32c17.7 0 32-14.3 32-32z" fill="#{$color}"/><path class="lexicon-icon-outline lx-fieldset-bracket-end" d="M512 416c0 35.3-28.7 64-64 64h-32c-17.7 0-32-14.3-32-32s14.3-32 32-32h32V96h-32c-17.7 0-32-14.3-32-32s14.3-32 32-32h32c35.3 0 64 28.7 64 64v320z" fill="#{$color}"/><path class="lexicon-icon-outline lx-fieldset-line-1-dot" d="M128 224c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32z" fill="#{$color}"/><path class="lexicon-icon-outline lx-fieldset-line-1-line" d="M224 160h160c17.7 0 32 14.3 32 32s-14.3 32-32 32H224c-17.7 0-32-14.3-32-32s14.3-32 32-32z" fill="#{$color}"/><path class="lexicon-icon-outline lx-fieldset-line-2-dot" d="M384 288H224c-17.7 0-32 14.3-32 32s14.3 32 32 32h160c17.7 0 32-14.3 32-32s-14.3-32-32-32z" fill="#{$color}"/><path class="lexicon-icon-outline lx-fieldset-line-2-line" d="M128 352c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32z" fill="#{$color}"/></svg>',
 
 	'file-script': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline file-script-border" d="M320 64v64c0 17.7 14.3 32 32 32h64v288H96V64h224zm5.5-64H96C60.7 0 32 28.7 32 64v384c0 35.3 28.7 64 64 64h320c35.3 0 64-28.7 64-64V154.5c0-33.5-18-44.5-63.5-90S360 0 325.5 0z" fill="#{$color}"/><path class="lexicon-icon-outline file-script-forward-slash" d="m212.2 409.2 69.1-187.5c7.7-20.7 37.7-7.7 30.1 10.9l-69.1 187.5C234 440 205 428 212.2 409.2z" fill="#{$color}"/><path class="lexicon-icon-outline file-script-angle-bracket-open" d="m160 320 35.9-35.9-22.6-22.6-35.9 35.9c-12.5 12.5-12.5 32.8 0 45.3l35.9 35.9 22.6-22.6-35.9-36z" fill="#{$color}"/><path class="lexicon-icon-outline file-script-angle-bracket-close" d="M355.9 320 320 284.1l22.6-22.6 35.9 35.9c12.5 12.5 12.5 32.8 0 45.3l-35.9 35.9-22.6-22.7 35.9-35.9z" fill="#{$color}"/></svg>',

package/src/scss/mixins/_alerts.scss

@@ -1,3 +1,7 @@
+////
+/// @group Alerts
+////
+
 /// This is Bootstrap 4's Alert Variant Mixin.
 /// @deprecated use the mixin `clay-alert-variant` instead
 /// @param {Color} $background
@@ -22,153 +26,216 @@
 /// A mixin to create alert variants.
 /// @param {Map} $map - A map of `key: value` pairs. The keys and value types are listed below:
 /// @example
-/// enabled: {Bool}, // Set to false to prevent mixin styles from being output. Default: true
-/// hr: {Map | Null}, // See mixin `clay-css`
-/// alert-btn: {Map | Null}, // See mixin `clay-button-variant`
-/// btn-group: {Map | Null}, // See mixin `clay-container`
-/// btn-group-item: {Map | Null}, // See mixin `clay-container`
-/// close: {Map | Null}, // See mixin `clay-close`
-/// lead: {Map | Null}, // See mixin `clay-css`
-/// alert-link: {Map | Null}, // See mixin `clay-link`
-/// component-title: {Map | Null}, // See mixin `clay-text-typography`
-/// component-subtitle: {Map | Null}, // See mixin `clay-text-typography`
+/// (
+/// 	enabled: {Bool}, // Set to false to prevent mixin styles from being output. Default: true
+/// 	// .alert
+/// 	first-child: (
+/// 		// .alert:first-child
+/// 	),
+/// 	last-child: (
+/// 		// .alert:last-child
+/// 	),
+/// 	hr: (
+/// 		// .alert hr
+/// 	),
+/// 	alert-dismissible: (
+/// 		// .alert.alert-dismissible
+/// 		container-fluid: (
+/// 			// .alert.alert-dismissible .container, .alert.alert-dismissible .container-fluid
+/// 		),
+/// 	),
+/// 	alert-indicator: (
+/// 		// .alert .alert-indicator
+/// 		lexicon-icon: (
+/// 			// .alert .alert-indicator .lexicon-icon
+/// 		),
+/// 		lead: (
+/// 			// .alert .alert-indicator + .lead
+/// 		),
+/// 	),
+/// 	alert-btn: (
+/// 		// .alert .alert-btn
+/// 	),
+/// 	btn-group: (
+/// 		// .alert .btn-group
+/// 	),
+/// 	btn-group-item: (
+/// 		// .alert .btn-group-item
+/// 	),
+/// 	close: (
+/// 		// .alert .close
+/// 	),
+/// 	container-fluid: (
+/// 		// .alert .container, .alert .container-fluid
+/// 	),
+/// 	lead: (
+/// 		// .alert .lead
+/// 	),
+/// 	alert-link: (
+/// 		// .alert .alert-link
+/// 	),
+/// 	component-title: (
+/// 		// .alert .component-title
+/// 	),
+/// 	component-subtitle: (
+/// 		// .alert .component-subtitle
+/// 	),
+/// )
 
 @mixin clay-alert-variant($map) {
-	$enabled: setter(map-get($map, enabled), true);
+	@if (type-of($map) == 'map') {
+		$enabled: setter(map-get($map, enabled), true);
 
-	$base: map-merge(
-		$map,
-		(
-			background-color:
-				setter(map-get($map, bg), map-get($map, background-color)),
-		)
-	);
+		$base: map-merge(
+			$map,
+			(
+				background-color:
+					setter(map-get($map, bg), map-get($map, background-color)),
+			)
+		);
 
-	$hr: setter(map-get($map, hr), ());
+		$hr: setter(map-get($map, hr), ());
 
-	$alert-indicator: setter(map-get($map, alert-indicator), ());
+		$alert-indicator: setter(map-get($map, alert-indicator), ());
 
-	$alert-indicator-lead: setter(map-get($alert-indicator, lead), ());
+		$alert-indicator-lead: setter(map-get($alert-indicator, lead), ());
 
-	$alert-btn: setter(map-get($map, alert-btn), ());
+		$alert-btn: setter(map-get($map, alert-btn), ());
 
-	$btn-group: setter(map-get($map, btn-group), ());
+		$btn-group: setter(map-get($map, btn-group), ());
 
-	$btn-group-item: setter(map-get($map, btn-group-item), ());
+		$btn-group-item: setter(map-get($map, btn-group-item), ());
 
-	$close: setter(map-get($map, close), ());
-	$close: map-deep-merge(
-		$close,
-		(
-			color: setter(map-get($map, close-color), map-get($close, color)),
-			hover: (
+		$close: setter(map-get($map, close), ());
+		$close: map-deep-merge(
+			$close,
+			(
 				color:
-					setter(
-						map-get($map, close-hover-color),
-						map-deep-get($close, hover, color)
-					),
-			),
-		)
-	);
-
-	$lead: setter(map-get($map, lead), ());
-	$lead: map-deep-merge(
-		$lead,
-		(
-			color: setter(map-get($map, lead-color), map-get($lead, color)),
-		)
-	);
-
-	$alert-link: setter(map-get($map, alert-link), ());
-	$alert-link: map-deep-merge(
-		$alert-link,
-		(
-			color:
-				setter(map-get($map, link-color), map-get($alert-link, color)),
-			hover: (
+					setter(map-get($map, close-color), map-get($close, color)),
+				hover: (
+					color:
+						setter(
+							map-get($map, close-hover-color),
+							map-deep-get($close, hover, color)
+						),
+				),
+			)
+		);
+
+		$lead: setter(map-get($map, lead), ());
+		$lead: map-deep-merge(
+			$lead,
+			(
+				color: setter(map-get($map, lead-color), map-get($lead, color)),
+			)
+		);
+
+		$alert-link: setter(map-get($map, alert-link), ());
+		$alert-link: map-deep-merge(
+			$alert-link,
+			(
 				color:
 					setter(
-						map-get($map, link-hover-color),
-						map-deep-get($alert-link, hover, color)
+						map-get($map, link-color),
+						map-get($alert-link, color)
 					),
-			),
-		)
-	);
+				hover: (
+					color:
+						setter(
+							map-get($map, link-hover-color),
+							map-deep-get($alert-link, hover, color)
+						),
+				),
+			)
+		);
 
-	$component-title: setter(map-get($map, component-title), ());
+		$component-title: setter(map-get($map, component-title), ());
 
-	$component-subtitle: setter(map-get($map, component-subtitle), ());
+		$component-subtitle: setter(map-get($map, component-subtitle), ());
 
-	@if ($enabled) {
-		@include clay-css($base);
-
-		hr {
-			@include clay-css($hr);
-		}
+		@if ($enabled) {
+			@include clay-css($base);
 
-		&.alert-dismissible {
-			@include clay-css(setter(map-get($map, alert-dismissible), ()));
+			&:first-child {
+				@include clay-css(map-get($map, first-child));
+			}
 
-			.container,
-			.container-fluid {
-				@include clay-css(
-					setter(
-						map-deep-get($map, alert-dismissible, container-fluid),
-						()
-					)
-				);
+			&:last-child {
+				@include clay-css(map-get($map, last-child));
 			}
-		}
 
-		.alert-indicator {
-			@include clay-css($alert-indicator);
+			hr {
+				@include clay-css($hr);
+			}
 
-			.lexicon-icon {
-				@include clay-css(
-					setter(map-get($alert-indicator, lexicon-icon), ())
-				);
+			&.alert-dismissible {
+				@include clay-css(setter(map-get($map, alert-dismissible), ()));
+
+				.container,
+				.container-fluid {
+					@include clay-css(
+						setter(
+							map-deep-get(
+								$map,
+								alert-dismissible,
+								container-fluid
+							),
+							()
+						)
+					);
+				}
 			}
 
-			+ .lead {
-				@include clay-css($alert-indicator-lead);
+			.alert-indicator {
+				@include clay-css($alert-indicator);
+
+				.lexicon-icon {
+					@include clay-css(
+						setter(map-get($alert-indicator, lexicon-icon), ())
+					);
+				}
+
+				+ .lead {
+					@include clay-css($alert-indicator-lead);
+				}
 			}
-		}
 
-		.alert-btn {
-			@include clay-button-variant($alert-btn);
-		}
+			.alert-btn {
+				@include clay-button-variant($alert-btn);
+			}
 
-		.btn-group {
-			@include clay-container($btn-group);
-		}
+			.btn-group {
+				@include clay-container($btn-group);
+			}
 
-		.btn-group-item {
-			@include clay-container($btn-group-item);
-		}
+			.btn-group-item {
+				@include clay-container($btn-group-item);
+			}
 
-		.close {
-			@include clay-close($close);
-		}
+			.close {
+				@include clay-close($close);
+			}
 
-		.container,
-		.container-fluid {
-			@include clay-css(setter(map-get($map, container-fluid), ()));
-		}
+			.container,
+			.container-fluid {
+				@include clay-css(setter(map-get($map, container-fluid), ()));
+			}
 
-		.lead {
-			@include clay-css($lead);
-		}
+			.lead {
+				@include clay-css($lead);
+			}
 
-		.alert-link {
-			@include clay-link($alert-link);
-		}
+			.alert-link {
+				@include clay-link($alert-link);
+			}
 
-		.component-title {
-			@include clay-text-typography($component-title);
-		}
+			.component-title {
+				@include clay-text-typography($component-title);
+			}
 
-		.component-subtitle {
-			@include clay-text-typography($component-subtitle);
+			.component-subtitle {
+				@include clay-text-typography($component-subtitle);
+			}
 		}
 	}
 }

package/src/scss/mixins/_buttons.scss

@@ -844,6 +844,10 @@
 
 			.inline-item {
 				@include clay-css($inline-item);
+
+				.lexicon-icon {
+					@include clay-css(map-get($inline-item, lexicon-icon));
+				}
 			}
 
 			.inline-item-before {

package/src/scss/mixins/_cards.scss

@@ -5,33 +5,30 @@
 /// A mixin that styles a Card Section (e.g., `.card-header`, `.card-body`, `.card-footer` or `.card-row`). This mixin is used by `clay-card-variant`.
 /// @param {Map} $map - A map of key-value pairs. The keys are defined in the mixin. Example below:
 /// @example
-/// enabled: {Bool},  // Set to false to prevent mixin styles from being output. Default: true
-/// bg: {Color | String | Null},
-/// border-color: {Color | String | List | Null},
-/// border-radius: {Number | String | List | Null},
-/// border-style: {String | List | Null},
-/// border-width: {Number | String | List | Null},
-/// display: {String | Null},
-/// flex-basis: {Number | String | Null},
-/// flex-direction: {String | Null},
-/// flex-grow: {Number | String | Null},
-/// flex-shrink: {Number | String | Null},
-/// flex-wrap: {String | Null},
-/// margin-bottom: {Number | String | Null},
-/// margin-left: {Number | String | Null},
-/// margin-right: {Number | String | Null},
-/// margin-top: {Number | String | Null},
-/// padding-bottom: {Number | String | Null},
-/// padding-left: {Number | String | Null},
-/// padding-right: {Number | String | Null},
-/// padding-top: {Number | String | Null},
-/// text-align: {String | Null},
-/// width: {Number | String | Null},
+/// (
+/// 	enabled: {Bool}, // Set to false to prevent mixin styles from being output. Default: true
+/// 	// .card-section
+/// 	before: (
+/// 		// .card-section::before
+/// 	),
+/// 	after: (
+/// 		// .card-section::after
+/// 	),
+/// 	first-child: (
+/// 		// .card-section:first-child
+/// 	),
+/// 	last-child: (
+/// 		// .card-section:last-child
+/// 	),
+/// 	autofit-col: (
+/// 		// .card-section .autofit-col
+/// 	),
+///
+/// )
+/// -=-=-=-=-=- Deprecated -=-=-=-=-=-
+/// bg: {Color | String | Null}, // deprecated after 3.9.0
 /// autofit-col-padding-left: {Number | String | Null},
 /// autofit-col-padding-right: {Number | String | Null},
-/// @todo
-/// - Add @example
-/// - Add @link to documentation
 
 @mixin clay-card-section-variant($map) {
 	@if (type-of($map) == 'map') {
@@ -65,6 +62,22 @@
 		@if ($enabled) {
 			@include clay-css($base);
 
+			&::before {
+				@include clay-css(map-get($map, before));
+			}
+
+			&::after {
+				@include clay-css(map-get($map, after));
+			}
+
+			&:first-child {
+				@include clay-css(map-get($map, first-child));
+			}
+
+			&:last-child {
+				@include clay-css(map-get($map, last-child));
+			}
+
 			.autofit-col {
 				@include clay-css($autofit-col);
 			}
@@ -187,6 +200,15 @@
 /// 	aspect-ratio-item-bottom-left: (
 /// 		// .card .aspect-ratio-item-bottom-left
 /// 	),
+/// 	hr: (
+/// 		// .card > hr
+/// 		before: (
+/// 			// .card > hr::before
+/// 		),
+/// 		after: (
+/// 			// .card > hr::after
+/// 		),
+/// 	),
 /// 	sticker: (
 /// 		// .card .sticker
 /// 	),
@@ -844,6 +866,18 @@
 				@include clay-css(map-get($map, aspect-ratio-item-bottom-left));
 			}
 
+			> hr {
+				@include clay-css(map-get($map, hr));
+
+				&::before {
+					@include clay-css(map-deep-get($map, hr, before));
+				}
+
+				&::after {
+					@include clay-css(map-deep-get($map, hr, after));
+				}
+			}
+
 			.sticker {
 				@include clay-sticker-variant(
 					setter(map-get($map, sticker), ())

package/src/scss/mixins/_dropdown-menu.scss

@@ -20,6 +20,15 @@
 /// 	show: (
 /// 		// .dropdown-menu.show
 /// 	),
+/// 	dropdown-item: (
+/// 		// .dropdown-menu .dropdown-item
+/// 	),
+/// 	alert: (
+/// 		// .dropdown-menu .alert
+/// 	),
+/// 	alert-fluid: (
+/// 		// .dropdown-menu .alert-fluid
+/// 	),
 /// )
 /// -=-=-=-=-=- Deprecated -=-=-=-=-=-
 /// bg: {Color | String | Null}, // deprecated after 3.9.0
@@ -95,6 +104,14 @@
 					map-deep-get($map, dropdown-item)
 				);
 			}
+
+			.alert {
+				@include clay-alert-variant(map-get($map, alert));
+			}
+
+			.alert-fluid {
+				@include clay-alert-variant(map-get($map, alert-fluid));
+			}
 		}
 	}
 }

package/src/scss/mixins/_grid.scss

@@ -176,6 +176,35 @@
 	}
 }
 
+/// A mixin that generates media-breakpoint-{up|down} styles from a Sass map.
+/// @param {Map} $map - A map of `key: value` pairs that is passed to the `clay-css` mixin
+
+@mixin clay-generate-media-breakpoints($map) {
+	@if (map-get($map, media-breakpoint-up)) {
+		$media-breakpoint-up: map-get($map, media-breakpoint-up);
+
+		@each $breakpoint in map-keys($media-breakpoint-up) {
+			$breakpoint-up: map-get($map, $breakpoint);
+
+			@include media-breakpoint-up($breakpoint) {
+				@include clay-css($breakpoint-up);
+			}
+		}
+	}
+
+	@if (map-get($map, media-breakpoint-down)) {
+		$media-breakpoint-down: map-get($map, media-breakpoint-down);
+
+		@each $breakpoint in map-keys($map) {
+			$breakpoint-down: map-get($map, $breakpoint);
+
+			@include media-breakpoint-down($breakpoint) {
+				@include clay-css($breakpoint-down);
+			}
+		}
+	}
+}
+
 /// A Bootstrap 4 mixin that generates the correct number of grid classes given any value of `$grid-columns`. This mixin is deprecated. This has been inlined into `components/_grid.scss`.
 /// @deprecated
 /// @param {Number} $columns[$grid-columns]

package/src/scss/mixins/_links.scss

@@ -870,10 +870,30 @@
 			$link: setter(map-get($map, link), ());
 			$link: map-merge($link, $clay-link);
 
+			$href: setter(map-get($map, href), ());
+			$href: map-deep-merge($href, $link);
+
 			@include clay-css($map);
 
-			a {
-				@include clay-link($link);
+			&::before {
+				@include clay-css(map-get($map, before));
+			}
+
+			&::after {
+				@include clay-css(map-get($map, after));
+			}
+
+			&:first-child {
+				@include clay-css(map-get($map, first-child));
+			}
+
+			&:last-child {
+				@include clay-css(map-get($map, last-child));
+			}
+
+			&[href],
+			[href] {
+				@include clay-link($href);
 			}
 		}
 	}