@clayui/css 3.44.0 → 3.46.0

package/src/scss/mixins/_buttons.scss

@@ -635,25 +635,19 @@
 				}
 
 				.inline-item {
-					@include clay-css(setter(map-get($hover, inline-item), ()));
+					@include clay-css(map-get($hover, inline-item));
 				}
 
 				.inline-item-before {
-					@include clay-css(
-						setter(map-get($hover, inline-item-before), ())
-					);
+					@include clay-css(map-get($hover, inline-item-before));
 				}
 
 				.inline-item-middle {
-					@include clay-css(
-						setter(map-get($hover, inline-item-middle), ())
-					);
+					@include clay-css(map-get($hover, inline-item-middle));
 				}
 
 				.inline-item-after {
-					@include clay-css(
-						setter(map-get($hover, inline-item-after), ())
-					);
+					@include clay-css(map-get($hover, inline-item-after));
 				}
 			}
 
@@ -670,25 +664,19 @@
 				}
 
 				.inline-item {
-					@include clay-css(setter(map-get($focus, inline-item), ()));
+					@include clay-css(map-get($focus, inline-item));
 				}
 
 				.inline-item-before {
-					@include clay-css(
-						setter(map-get($focus, inline-item-before), ())
-					);
+					@include clay-css(map-get($focus, inline-item-before));
 				}
 
 				.inline-item-middle {
-					@include clay-css(
-						setter(map-get($focus, inline-item-middle), ())
-					);
+					@include clay-css(map-get($focus, inline-item-middle));
 				}
 
 				.inline-item-after {
-					@include clay-css(
-						setter(map-get($focus, inline-item-after), ())
-					);
+					@include clay-css(map-get($focus, inline-item-after));
 				}
 			}
 
@@ -720,27 +708,19 @@
 				}
 
 				.inline-item {
-					@include clay-css(
-						setter(map-get($active, inline-item), ())
-					);
+					@include clay-css(map-get($active, inline-item));
 				}
 
 				.inline-item-before {
-					@include clay-css(
-						setter(map-get($active, inline-item-before), ())
-					);
+					@include clay-css(map-get($active, inline-item-before));
 				}
 
 				.inline-item-middle {
-					@include clay-css(
-						setter(map-get($active, inline-item-middle), ())
-					);
+					@include clay-css(map-get($active, inline-item-middle));
 				}
 
 				.inline-item-after {
-					@include clay-css(
-						setter(map-get($active, inline-item-after), ())
-					);
+					@include clay-css(map-get($active, inline-item-after));
 				}
 			}
 
@@ -756,26 +736,24 @@
 				}
 
 				.inline-item {
-					@include clay-css(
-						setter(map-get($active-class, inline-item), ())
-					);
+					@include clay-css(map-get($active-class, inline-item));
 				}
 
 				.inline-item-before {
 					@include clay-css(
-						setter(map-get($active-class, inline-item-before), ())
+						map-get($active-class, inline-item-before)
 					);
 				}
 
 				.inline-item-middle {
 					@include clay-css(
-						setter(map-get($active-class, inline-item-middle), ())
+						map-get($active-class, inline-item-middle)
 					);
 				}
 
 				.inline-item-after {
 					@include clay-css(
-						setter(map-get($active-class, inline-item-after), ())
+						map-get($active-class, inline-item-after)
 					);
 				}
 			}
@@ -825,27 +803,19 @@
 				}
 
 				.inline-item {
-					@include clay-css(
-						setter(map-get($disabled, inline-item), ())
-					);
+					@include clay-css(map-get($disabled, inline-item));
 				}
 
 				.inline-item-before {
-					@include clay-css(
-						setter(map-get($disabled, inline-item-before), ())
-					);
+					@include clay-css(map-get($disabled, inline-item-before));
 				}
 
 				.inline-item-middle {
-					@include clay-css(
-						setter(map-get($disabled, inline-item-middle), ())
-					);
+					@include clay-css(map-get($disabled, inline-item-middle));
 				}
 
 				.inline-item-after {
-					@include clay-css(
-						setter(map-get($disabled, inline-item-after), ())
-					);
+					@include clay-css(map-get($disabled, inline-item-after));
 				}
 			}
 
@@ -874,35 +844,32 @@
 
 			.inline-item {
 				@include clay-css($inline-item);
+
+				.lexicon-icon {
+					@include clay-css(map-get($inline-item, lexicon-icon));
+				}
 			}
 
 			.inline-item-before {
-				@include clay-css(
-					setter(map-get($map, inline-item-before), ())
-				);
+				@include clay-css(map-get($map, inline-item-before));
 			}
 
 			.inline-item-middle {
-				@include clay-css(
-					setter(map-get($map, inline-item-middle), ())
-				);
+				@include clay-css(map-get($map, inline-item-middle));
 
 				+ .inline-item-middle {
 					@include clay-css(
-						setter(
-							map-deep-get(
-								$map,
-								inline-item-middle,
-								inline-item-middle
-							),
-							()
+						map-deep-get(
+							$map,
+							inline-item-middle,
+							inline-item-middle
 						)
 					);
 				}
 			}
 
 			.inline-item-after {
-				@include clay-css(setter(map-get($map, inline-item-after), ()));
+				@include clay-css(map-get($map, inline-item-after));
 			}
 
 			.btn-section {

package/src/scss/mixins/_cards.scss

@@ -769,6 +769,14 @@
 				setter(map-get($map, after-highlight), ())
 			);
 
+			&::before {
+				@include clay-css(map-get($map, before));
+			}
+
+			&::after {
+				@include clay-css(map-get($map, after));
+			}
+
 			&.form-check-card {
 				@include clay-form-check-card-variant(
 					map-get($map, form-check-card)

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/variables/_aspect-ratio.scss

@@ -0,0 +1,26 @@
+$aspect-ratio-sizes: () !default;
+$aspect-ratio-sizes: map-deep-merge(
+	(
+		aspect-ratio-3-to-2: (
+			height: 2,
+			width: 3,
+		),
+		aspect-ratio-4-to-3: (
+			height: 3,
+			width: 4,
+		),
+		aspect-ratio-8-to-3: (
+			height: 3,
+			width: 8,
+		),
+		aspect-ratio-8-to-5: (
+			height: 5,
+			width: 8,
+		),
+		aspect-ratio-16-to-9: (
+			height: 9,
+			width: 16,
+		),
+	),
+	$aspect-ratio-sizes
+);

package/src/scss/variables/_buttons.scss

@@ -92,6 +92,9 @@ $btn: map-deep-merge(
 		),
 		inline-item: (
 			font-size: $btn-inline-item-font-size,
+			lexicon-icon: (
+				margin-top: 0,
+			),
 		),
 		btn-section: (
 			display: block,
@@ -226,6 +229,9 @@ $btn-monospaced: map-deep-merge(
 			height: $btn-monospaced-size-mobile,
 			width: $btn-monospaced-size-mobile,
 		),
+		lexicon-icon: (
+			margin-top: 0,
+		),
 		c-inner: (
 			align-items: center,
 			display: flex,

package/src/scss/variables/_forms.scss

@@ -310,10 +310,11 @@ $form-control-label-size: () !default;
 $form-control-label-size: map-deep-merge(
 	(
 		border-width: 0.0625rem,
-		height: 1.25rem,
+		height: auto,
 		margin-bottom: 0.25rem,
 		margin-right: 0.5rem,
 		margin-top: 0.25rem,
+		min-height: 1.25rem,
 	),
 	$form-control-label-size
 );
@@ -322,7 +323,7 @@ $form-control-label-size: map-deep-merge(
 
 $form-control-tag-group-padding-y: (
 		$input-height - $input-border-bottom-width - $input-border-top-width -
-			map-get($form-control-label-size, height) -
+			map-get($form-control-label-size, min-height) -
 			(map-get($form-control-label-size, margin-bottom)) -
 			(map-get($form-control-label-size, margin-top))
 	) * 0.5 !default;

package/src/scss/variables/_globals.scss

@@ -368,26 +368,134 @@ $font-weight-base: $font-weight-normal !default;
 
 $line-height-base: 1.5 !default;
 
-$h1-font-size: $font-size-base * 2.5 !default;
-$h2-font-size: $font-size-base * 2 !default;
-$h3-font-size: $font-size-base * 1.75 !default;
-$h4-font-size: $font-size-base * 1.5 !default;
-$h5-font-size: $font-size-base * 1.25 !default;
-$h6-font-size: $font-size-base !default;
+// h1, .h1
 
+$h1-font-size: $font-size-base * 2.5 !default;
 $h1-font-size-mobile: null !default;
+
+$h1: () !default;
+$h1: map-deep-merge(
+	(
+		font-size: $h1-font-size,
+		media-breakpoint-down: (
+			sm: (
+				font-size: $h1-font-size-mobile,
+			),
+		),
+	),
+	$h1
+);
+
+// h2, .h2
+
+$h2-font-size: $font-size-base * 2 !default;
 $h2-font-size-mobile: null !default;
+
+$h2: () !default;
+$h2: map-deep-merge(
+	(
+		font-size: $h2-font-size,
+		media-breakpoint-down: (
+			sm: (
+				font-size: $h2-font-size-mobile,
+			),
+		),
+	),
+	$h2
+);
+
+// h3, .h3
+
+$h3-font-size: $font-size-base * 1.75 !default;
 $h3-font-size-mobile: null !default;
+
+$h3: () !default;
+$h3: map-deep-merge(
+	(
+		font-size: $h3-font-size,
+		media-breakpoint-down: (
+			sm: (
+				font-size: $h3-font-size-mobile,
+			),
+		),
+	),
+	$h3
+);
+
+// h4, .h4
+
+$h4-font-size: $font-size-base * 1.5 !default;
 $h4-font-size-mobile: null !default;
+
+$h4: () !default;
+$h4: map-deep-merge(
+	(
+		font-size: $h4-font-size,
+		media-breakpoint-down: (
+			sm: (
+				font-size: $h4-font-size-mobile,
+			),
+		),
+	),
+	$h4
+);
+
+// h5, .h5
+
+$h5-font-size: $font-size-base * 1.25 !default;
 $h5-font-size-mobile: null !default;
+
+$h5: () !default;
+$h5: map-deep-merge(
+	(
+		font-size: $h5-font-size,
+		media-breakpoint-down: (
+			sm: (
+				font-size: $h5-font-size-mobile,
+			),
+		),
+	),
+	$h5
+);
+
+// h6, .h6
+
+$h6-font-size: $font-size-base !default;
 $h6-font-size-mobile: null !default;
 
+$h6: () !default;
+$h6: map-deep-merge(
+	(
+		font-size: $h6-font-size,
+		media-breakpoint-down: (
+			sm: (
+				font-size: $h6-font-size-mobile,
+			),
+		),
+	),
+	$h6
+);
+
+// Headings h1-h6
+
 $headings-margin-bottom: $spacer * 0.5 !default;
 $headings-font-family: null !default;
 $headings-font-weight: 500 !default;
 $headings-line-height: 1.2 !default;
 $headings-color: null !default;
 
+$headings: () !default;
+$headings: map-deep-merge(
+	(
+		color: $headings-color,
+		font-family: $headings-font-family,
+		font-weight: $headings-font-weight,
+		line-height: $headings-line-height,
+		margin-bottom: $headings-margin-bottom,
+	),
+	$headings
+);
+
 // Body
 
 $body-bg: $white !default;
@@ -454,16 +562,69 @@ $emphasized-link-hover-darken-percentage: 15% !default;
 
 $paragraph-margin-bottom: 1rem !default;
 
-$display1-size: 6rem !default;
-$display2-size: 5.5rem !default;
-$display3-size: 4.5rem !default;
-$display4-size: 3.5rem !default;
+// Display
+
+$display-line-height: $headings-line-height !default;
+
+// .display-1
 
+$display1-size: 6rem !default;
 $display1-weight: 300 !default;
+
+$display-1: () !default;
+$display-1: map-deep-merge(
+	(
+		font-size: $display1-size,
+		font-weight: $display1-weight,
+		line-height: $display-line-height,
+	),
+	$display-1
+);
+
+// .display-2
+
+$display2-size: 5.5rem !default;
 $display2-weight: 300 !default;
+
+$display-2: () !default;
+$display-2: map-deep-merge(
+	(
+		font-size: $display2-size,
+		font-weight: $display2-weight,
+		line-height: $display-line-height,
+	),
+	$display-2
+);
+
+// .display-3
+
+$display3-size: 4.5rem !default;
 $display3-weight: 300 !default;
+
+$display-3: () !default;
+$display-3: map-deep-merge(
+	(
+		font-size: $display3-size,
+		font-weight: $display3-weight,
+		line-height: $display-line-height,
+	),
+	$display-3
+);
+
+// .display-4
+
+$display4-size: 3.5rem !default;
 $display4-weight: 300 !default;
-$display-line-height: $headings-line-height !default;
+
+$display-4: () !default;
+$display-4: map-deep-merge(
+	(
+		font-size: $display4-size,
+		font-weight: $display4-weight,
+		line-height: $display-line-height,
+	),
+	$display-4
+);
 
 $lead-font-size: $font-size-base * 1.25 !default;
 $lead-font-weight: 300 !default;

package/src/scss/variables/_links.scss

@@ -285,3 +285,20 @@ $component-action: map-deep-merge(
 	),
 	$component-action
 );
+
+$component-text: () !default;
+
+$component-icon: () !default;
+$component-icon: map-deep-merge(
+	(
+		align-items: center,
+		display: inline-flex,
+		height: 32px,
+		justify-content: center,
+		width: 32px,
+		lexicon-icon: (
+			margin-top: 0,
+		),
+	),
+	$component-icon
+);