@clayui/css 3.38.0 → 3.41.0

package/src/scss/functions/_polyfills.scss

@@ -0,0 +1,17 @@
+////
+/// @group polyfills
+////
+
+/// A function that uses `/` as a division operation if the function `div()` does not exist. Dart Sass 1.33.0 changed `/` from a division operation to a list separator. Clay CSS will default to to using `/` as a division operation unless `@use 'sass:math' as *;` is declared to load the math module.
+/// @param {Number} $numerator - The number to divide or dividend
+/// @param {Number} $denominator - The number that divides the $numerator or divisor
+
+@function clay-div($numerator, $denominator) {
+	$division-function: if(
+		function-exists(div),
+		div($numerator, $denominator),
+		$numerator / $denominator
+	);
+
+	@return $division-function;
+}

package/src/scss/functions/_type-conversion-functions.scss

@@ -88,7 +88,7 @@
 			$result: $result * 10 + map-get($numbers, $character);
 		} @else {
 			$digits: $digits * 10;
-			$result: $result + map-get($numbers, $character) / $digits;
+			$result: $result + clay-div(map-get($numbers, $character), $digits);
 		}
 	}
 
@@ -177,7 +177,8 @@
 			);
 		} @else {
 			@if index('e' '.' ' ' ',' ']' '}', $token) {
-				@return $pointer, if($result != null, $result / $runs, $result);
+				@return $pointer,
+					if($result != null, clay-div($result, $runs), $result);
 			}
 
 			@return throw('Unexpected token `#{$token}`.', $pointer);
@@ -186,7 +187,7 @@
 		$pointer: $pointer + 1;
 	}
 
-	@return $pointer, if($result != null, $result / $runs, $result);
+	@return $pointer, if($result != null, clay-div($result, $runs), $result);
 }
 
 /// Parses a JSON encoded number to find the exponent part
@@ -258,7 +259,7 @@
 		}
 	} @else {
 		@for $i from $n to 0 {
-			$ret: $ret / $x;
+			$ret: clay-div($ret, $x);
 		}
 	}
 

package/src/scss/mixins/_alerts.scss

@@ -106,9 +106,29 @@
 			@include clay-css($hr);
 		}
 
+		&.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),
+						()
+					)
+				);
+			}
+		}
+
 		.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);
 			}
@@ -130,6 +150,11 @@
 			@include clay-close($close);
 		}
 
+		.container,
+		.container-fluid {
+			@include clay-css(setter(map-get($map, container-fluid), ()));
+		}
+
 		.lead {
 			@include clay-css($lead);
 		}

package/src/scss/mixins/_aspect-ratio.scss

@@ -10,7 +10,7 @@
 /// - Add @link to documentation
 
 @mixin clay-aspect-ratio($width: 1, $height: 1) {
-	padding-bottom: percentage($height / $width);
+	padding-bottom: calc(#{$height} / #{$width} * 100%);
 }
 
 /// A mixin that helps style a custom `aspect-ratio-item` component.

package/src/scss/mixins/_buttons.scss

@@ -13,21 +13,123 @@
 /// A mixin to create button variants, use this instead of `clay-button-size()`. You can base your variant off Bootstrap's `.btn` class or create your own base class (e.g., `<button class="btn my-custom-btn-primary"></button>` or `<button class="my-custom-btn my-custom-btn-primary"></button>`).
 /// @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
-/// breakpoint-down: {String, Null}, // The Bootstrap 4 Breakpoint {xs | sm | md | lg | xl}
-/// See Mixin `clay-css` for available keys to pass into the base selector
-/// hover: {Map | Null}, // See Mixin `clay-css` for available keys
-/// focus: {Map | Null}, // See Mixin `clay-css` for available keys
-/// disabled: {Map | Null}, // See Mixin `clay-css` for available keys
-/// active: {Map | Null}, // See Mixin `clay-css` for available keys
-/// active-class: {Map | Null}, // See Mixin `clay-css` for available keys
-/// active-focus: {Map | Null}, // See Mixin `clay-css` for available keys
-/// lexicon-icon: {Map | Null}, // See Mixin `clay-css` for available keys
-/// inline-item: {Map | Null}, // See Mixin `clay-css` for available keys
-/// section: {Map | Null}, // See Mixin `clay-css` for available keys
-/// mobile: {Map | Null}, // See Mixin `clay-css` for available keys
-/// loading-animation: {String | Null}, // The placeholder name 'loading-animation' or 'loading-animation-light'
-/// c-inner: {Map | Null}, // Pass parameters to `clay-css` mixin
+/// (
+/// 	enabled: {Bool}, // Set to false to prevent mixin styles from being output. Default: true
+/// 	breakpoint-down: {String}, // The Bootstrap 4 Breakpoint {xs | sm | md | lg | xl}
+/// 	loading-animation: {String}, // The placeholder name 'loading-animation' or 'loading-animation-light'
+/// 	mobile: (
+/// 		c-inner: (
+/// 		),
+/// 	),
+/// 	hover: (
+/// 		// .btn:hover
+/// 		inline-item: (
+/// 			// .btn:hover .inline-item
+/// 		),
+/// 		inline-item:-before (
+/// 			// .btn:hover .inline-item-before
+/// 		),
+/// 		inline-item-middle: (
+/// 			// .btn:hover .inline-item-middle
+/// 		),
+/// 		inline-item-after: (
+/// 			// .btn:hover .inline-item-after
+/// 		),
+/// 	),
+/// 	focus: (
+/// 		// .btn:focus, .btn.focus
+/// 		inline-item: (
+/// 			// .btn:focus .inline-item
+/// 		),
+/// 		inline-item:-before (
+/// 			// .btn:focus .inline-item-before
+/// 		),
+/// 		inline-item-middle: (
+/// 			// .btn:focus .inline-item-middle
+/// 		),
+/// 		inline-item-after: (
+/// 			// .btn:focus .inline-item-after
+/// 		),
+/// 	),
+/// 	active: (
+/// 		// .btn:active
+/// 		focus: (
+/// 			// .btn:active:focus
+/// 		),
+/// 		inline-item: (
+/// 			// .btn:active .inline-item
+/// 		),
+/// 		inline-item:-before (
+/// 			// .btn:active .inline-item-before
+/// 		),
+/// 		inline-item-middle: (
+/// 			// .btn:active .inline-item-middle
+/// 		),
+/// 		inline-item-after: (
+/// 			// .btn:active .inline-item-after
+/// 		),
+/// 	),
+/// 	active-class: (
+/// 		// .btn.active
+/// 		inline-item: (
+/// 			// .btn.active .inline-item
+/// 		),
+/// 		inline-item:-before (
+/// 			// .btn.active .inline-item-before
+/// 		),
+/// 		inline-item-middle: (
+/// 			// .btn.active .inline-item-middle
+/// 		),
+/// 		inline-item-after: (
+/// 			// .btn.active .inline-item-after
+/// 		),
+/// 	),
+/// 	disabled: (
+/// 		// .btn:disabled, .btn.disabled
+/// 		focus: (
+/// 			// .btn:disabled:focus, .btn.disabled:focus
+/// 		),
+/// 		active: (
+/// 			// .btn:disabled:active, .btn.disabled:active
+/// 		),
+/// 		inline-item: (
+/// 			// .btn:disabled .inline-item, .btn.disabled .inline-item
+/// 		),
+/// 		inline-item:-before (
+/// 			// .btn:disabled .inline-item-before, .btn.disabled .inline-item-before
+/// 		),
+/// 		inline-item-middle: (
+/// 			// .btn:disabled .inline-item-middle, .btn.disabled .inline-item-middle
+/// 		),
+/// 		inline-item-after: (
+/// 			// .btn:disabled .inline-item-after, .btn.disabled .inline-item-after
+/// 		),
+/// 	),
+/// 	c-inner: (
+/// 		// .btn .c-inner
+/// 	),
+/// 	lexicon-icon: (
+/// 		// .btn .lexicon-icon
+/// 	),
+/// 	inline-item: (
+/// 		// .btn .inline-item
+/// 	),
+/// 	inline-item-before: (
+/// 		// .btn .inline-item-before
+/// 	),
+/// 	inline-item-middle: (
+/// 		// .btn .inline-item-middle
+/// 		inline-item-middle: (
+/// 			// .btn .inline-item-middle + .inline-item-middle
+/// 		),
+/// 	),
+/// 	inline-item-after: (
+/// 		// .btn .inline-item-after
+/// 	),
+/// 	btn-section: (
+/// 		// .btn .btn-section
+/// 	),
+/// )
 /// -=-=-=-=-=- Deprecated -=-=-=-=-=-
 /// bg: {Color | String | Null}, // deprecated after 3.9.0
 /// hover-bg: {Color | String | Null}, // deprecated after 3.9.0
@@ -57,6 +159,7 @@
 /// active-opacity: {Number | String | Null}, // deprecated after 3.9.0
 /// active-z-index: {Number | String | Null}, // deprecated after 3.9.0
 /// active-focus-box-shadow: {String | List}, // deprecated after 3.9.0, Default: $focus-box-shadow
+/// active-focus: {Map | Null}, // deprecated after 3.39.0
 /// lexicon-icon-font-size: {Number | String | Null}, // deprecated after 3.9.0
 /// lexicon-icon-margin-bottom: {Number | String | Null}, // deprecated after 3.9.0
 /// lexicon-icon-margin-right: {Number | String | Null}, // deprecated after 3.9.0
@@ -66,6 +169,7 @@
 /// section-font-size: {Number | String | Null}, // deprecated after 3.9.0
 /// section-font-weight: {Number | String | Null}, // deprecated after 3.9.0
 /// section-line-height: {Number | String | Null}, // deprecated after 3.9.0
+/// section: {Map | Null}, // deprecated after 3.39.0
 /// font-size-mobile: {Number | String | Null}, // deprecated after 3.9.0
 /// height-mobile: {Number | String | Null}, // deprecated after 3.9.0
 /// padding-bottom-mobile: {Number | String | Null}, // deprecated after 3.9.0
@@ -410,11 +514,55 @@
 
 		&:hover {
 			@include clay-css($hover);
+
+			.inline-item {
+				@include clay-css(setter(map-get($hover, inline-item), ()));
+			}
+
+			.inline-item-before {
+				@include clay-css(
+					setter(map-get($hover, inline-item-before), ())
+				);
+			}
+
+			.inline-item-middle {
+				@include clay-css(
+					setter(map-get($hover, inline-item-middle), ())
+				);
+			}
+
+			.inline-item-after {
+				@include clay-css(
+					setter(map-get($hover, inline-item-after), ())
+				);
+			}
 		}
 
 		&:focus,
 		&.focus {
 			@include clay-css($focus);
+
+			.inline-item {
+				@include clay-css(setter(map-get($focus, inline-item), ()));
+			}
+
+			.inline-item-before {
+				@include clay-css(
+					setter(map-get($focus, inline-item-before), ())
+				);
+			}
+
+			.inline-item-middle {
+				@include clay-css(
+					setter(map-get($focus, inline-item-middle), ())
+				);
+			}
+
+			.inline-item-after {
+				@include clay-css(
+					setter(map-get($focus, inline-item-after), ())
+				);
+			}
 		}
 
 		&:active {
@@ -423,6 +571,28 @@
 			&:focus {
 				@include clay-css($active-focus);
 			}
+
+			.inline-item {
+				@include clay-css(setter(map-get($active, inline-item), ()));
+			}
+
+			.inline-item-before {
+				@include clay-css(
+					setter(map-get($active, inline-item-before), ())
+				);
+			}
+
+			.inline-item-middle {
+				@include clay-css(
+					setter(map-get($active, inline-item-middle), ())
+				);
+			}
+
+			.inline-item-after {
+				@include clay-css(
+					setter(map-get($active, inline-item-after), ())
+				);
+			}
 		}
 
 		&[aria-expanded='true'],
@@ -434,6 +604,30 @@
 			&::after {
 				@include clay-css($active-class-after);
 			}
+
+			.inline-item {
+				@include clay-css(
+					setter(map-get($active-class, inline-item), ())
+				);
+			}
+
+			.inline-item-before {
+				@include clay-css(
+					setter(map-get($active-class, inline-item-before), ())
+				);
+			}
+
+			.inline-item-middle {
+				@include clay-css(
+					setter(map-get($active-class, inline-item-middle), ())
+				);
+			}
+
+			.inline-item-after {
+				@include clay-css(
+					setter(map-get($active-class, inline-item-after), ())
+				);
+			}
 		}
 
 		&:disabled,
@@ -447,6 +641,28 @@
 			&:active {
 				@include clay-css($disabled-active);
 			}
+
+			.inline-item {
+				@include clay-css(setter(map-get($disabled, inline-item), ()));
+			}
+
+			.inline-item-before {
+				@include clay-css(
+					setter(map-get($disabled, inline-item-before), ())
+				);
+			}
+
+			.inline-item-middle {
+				@include clay-css(
+					setter(map-get($disabled, inline-item-middle), ())
+				);
+			}
+
+			.inline-item-after {
+				@include clay-css(
+					setter(map-get($disabled, inline-item-after), ())
+				);
+			}
 		}
 
 		@if (map-get($c-inner, enabled)) {
@@ -463,6 +679,31 @@
 			@include clay-css($inline-item);
 		}
 
+		.inline-item-before {
+			@include clay-css(setter(map-get($map, inline-item-before), ()));
+		}
+
+		.inline-item-middle {
+			@include clay-css(setter(map-get($map, inline-item-middle), ()));
+
+			+ .inline-item-middle {
+				@include clay-css(
+					setter(
+						map-deep-get(
+							$map,
+							inline-item-middle,
+							inline-item-middle
+						),
+						()
+					)
+				);
+			}
+		}
+
+		.inline-item-after {
+			@include clay-css(setter(map-get($map, inline-item-after), ()));
+		}
+
 		.btn-section {
 			@include clay-css($section);
 		}