@clayui/css 3.64.0 → 3.68.0

package/src/scss/mixins/_pagination.scss

@@ -111,39 +111,35 @@
 
 			> a,
 			> button {
-				@include clay-link(setter(map-deep-get($map, link), ()));
+				@include clay-link(map-get($map, link));
 			}
 
 			&.active {
 				> a,
 				> button {
-					@include clay-link(
-						setter(map-deep-get($map, link, active-class), ())
-					);
+					@include clay-link(map-deep-get($map, link, active-class));
 				}
 			}
 
 			&.disabled {
 				> a,
 				> button {
-					@include clay-link(
-						setter(map-deep-get($map, link, disabled), ())
-					);
+					@include clay-link(map-deep-get($map, link, disabled));
 				}
 			}
 
 			.dropdown-menu {
 				@include clay-dropdown-menu-variant(
-					setter(map-deep-get($map, dropdown-menu), ())
+					map-get($map, dropdown-menu)
 				);
 			}
 
 			.lexicon-icon {
-				@include clay-css(map-deep-get($map, lexicon-icon));
+				@include clay-css(map-get($map, lexicon-icon));
 			}
 
 			+ .pagination-results {
-				@include clay-css(map-deep-get($map, pagination-results));
+				@include clay-css(map-get($map, pagination-results));
 			}
 
 			@if (map-get($map, media-breakpoint-down)) {
@@ -162,10 +158,7 @@
 						> a,
 						> button {
 							@include clay-link(
-								setter(
-									map-deep-get($media-breakpoint-down, link),
-									()
-								)
+								map-get($media-breakpoint-down, link)
 							);
 						}
 
@@ -173,13 +166,10 @@
 							> a,
 							> button {
 								@include clay-link(
-									setter(
-										map-deep-get(
-											$media-breakpoint-down,
-											link,
-											active-class
-										),
-										()
+									map-deep-get(
+										$media-breakpoint-down,
+										link,
+										active-class
 									)
 								);
 							}
@@ -189,13 +179,10 @@
 							> a,
 							> button {
 								@include clay-link(
-									setter(
-										map-deep-get(
-											$media-breakpoint-down,
-											link,
-											disabled
-										),
-										()
+									map-deep-get(
+										$media-breakpoint-down,
+										link,
+										disabled
 									)
 								);
 							}
@@ -203,28 +190,19 @@
 
 						.dropdown-menu {
 							@include clay-dropdown-menu-variant(
-								setter(
-									map-deep-get(
-										$media-breakpoint-down,
-										dropdown-menu
-									),
-									()
-								)
+								map-get($media-breakpoint-down, dropdown-menu)
 							);
 						}
 
 						.lexicon-icon {
 							@include clay-css(
-								map-deep-get(
-									$media-breakpoint-down,
-									lexicon-icon
-								)
+								map-get($media-breakpoint-down, lexicon-icon)
 							);
 						}
 
 						+ .pagination-results {
 							@include clay-css(
-								map-deep-get(
+								map-get(
 									$media-breakpoint-down,
 									pagination-results
 								)
@@ -317,7 +295,7 @@
 			}
 
 			.page-link {
-				@include clay-link(setter(map-get($map, page-link), ()));
+				@include clay-link(map-get($map, page-link));
 			}
 
 			.page-item:first-child .page-link,
@@ -334,10 +312,7 @@
 				&.active {
 					.page-link {
 						@include clay-link(
-							setter(
-								map-deep-get($map, page-link, active-class),
-								()
-							)
+							map-deep-get($map, page-link, active-class)
 						);
 					}
 				}
@@ -345,21 +320,19 @@
 				&.disabled {
 					.page-link {
 						@include clay-link(
-							setter(map-deep-get($map, page-link, disabled), ())
+							map-deep-get($map, page-link, disabled)
 						);
 					}
 				}
 			}
 
 			.pagination {
-				@include clay-pagination-variant(
-					map-deep-get($map, pagination)
-				);
+				@include clay-pagination-variant(map-get($map, pagination));
 			}
 
 			.pagination-items-per-page {
 				@include clay-pagination-items-per-page-variant(
-					map-deep-get($map, pagination-items-per-page)
+					map-get($map, pagination-items-per-page)
 				);
 			}
 
@@ -378,16 +351,13 @@
 
 						.page-item {
 							@include clay-css(
-								map-deep-get($media-breakpoint-down, page-item)
+								map-get($media-breakpoint-down, page-item)
 							);
 						}
 
 						.page-link {
 							@include clay-link(
-								setter(
-									map-get($media-breakpoint-down, page-link),
-									()
-								)
+								map-get($media-breakpoint-down, page-link)
 							);
 						}
 
@@ -409,13 +379,10 @@
 							&.active {
 								.page-link {
 									@include clay-link(
-										setter(
-											map-deep-get(
-												$media-breakpoint-down,
-												page-link,
-												active
-											),
-											()
+										map-deep-get(
+											$media-breakpoint-down,
+											page-link,
+											active
 										)
 									);
 								}
@@ -424,13 +391,10 @@
 							&.disabled {
 								.page-link {
 									@include clay-link(
-										setter(
-											map-deep-get(
-												$media-breakpoint-down,
-												page-link,
-												disabled
-											),
-											()
+										map-deep-get(
+											$media-breakpoint-down,
+											page-link,
+											disabled
 										)
 									);
 								}
@@ -439,13 +403,13 @@
 
 						.pagination {
 							@include clay-pagination-variant(
-								map-deep-get($media-breakpoint-down, pagination)
+								map-get($media-breakpoint-down, pagination)
 							);
 						}
 
 						.pagination-items-per-page {
 							@include clay-pagination-items-per-page-variant(
-								map-deep-get(
+								map-get(
 									$media-breakpoint-down,
 									pagination-items-per-page
 								)

package/src/scss/mixins/_sheet.scss

@@ -31,10 +31,6 @@
 		)
 	);
 
-	$btn-group-mobile: setter(map-get($mobile, btn-group), ());
-
-	$btn-group-item-mobile: setter(map-get($mobile, btn-group-item), ());
-
 	@if ($enabled) {
 		@include media-breakpoint-down($breakpoint-down) {
 			@include clay-css($mobile);
@@ -44,11 +40,11 @@
 			}
 
 			.btn-group {
-				@include clay-css($btn-group-mobile);
+				@include clay-css(map-get($mobile, btn-group));
 			}
 
 			.btn-group-item {
-				@include clay-css($btn-group-item-mobile);
+				@include clay-css(map-get($mobile, btn-group-item));
 			}
 		}
 	}

package/src/scss/mixins/_stickers.scss

@@ -222,58 +222,49 @@
 
 				.lexicon-icon {
 					@include clay-css(
-						setter(
-							map-deep-get($map, inline-item, lexicon-icon),
-							()
-						)
+						map-deep-get($map, inline-item, lexicon-icon)
 					);
 				}
 			}
 
 			.lexicon-icon {
-				@include clay-css(setter(map-get($map, lexicon-icon), ()));
+				@include clay-css(map-get($map, lexicon-icon));
 			}
 
 			.sticker-img {
-				@include clay-css(setter(map-get($map, sticker-img), ()));
+				@include clay-css(map-get($map, sticker-img));
 			}
 
 			.sticker-overlay {
-				@include clay-css(setter(map-get($map, sticker-overlay), ()));
+				@include clay-css(map-get($map, sticker-overlay));
 			}
 
 			&.rounded {
-				@include clay-css(setter(map-get($map, rounded), ()));
+				@include clay-css(map-get($map, rounded));
 
 				.sticker-overlay {
 					@include clay-css(
-						setter(map-deep-get($map, rounded, sticker-overlay), ())
+						map-deep-get($map, rounded, sticker-overlay)
 					);
 				}
 			}
 
 			&.rounded-circle {
-				@include clay-css(setter(map-get($map, rounded-circle), ()));
+				@include clay-css(map-get($map, rounded-circle));
 
 				.sticker-overlay {
 					@include clay-css(
-						setter(
-							map-deep-get($map, rounded-circle, sticker-overlay),
-							()
-						)
+						map-deep-get($map, rounded-circle, sticker-overlay)
 					);
 				}
 			}
 
 			&.rounded-0 {
-				@include clay-css(setter(map-get($map, rounded-0), ()));
+				@include clay-css(map-get($map, rounded-0));
 
 				.sticker-overlay {
 					@include clay-css(
-						setter(
-							map-deep-get($map, rounded-0, sticker-overlay),
-							()
-						)
+						map-deep-get($map, rounded-0, sticker-overlay)
 					);
 				}
 			}

package/src/scss/mixins/_tbar.scss

@@ -105,8 +105,6 @@
 		)
 	);
 
-	$nav: setter(map-get($map, nav), ());
-
 	$item: setter(map-get($map, item), ());
 	$item: map-merge(
 		$item,
@@ -139,12 +137,6 @@
 		)
 	);
 
-	$item-expand: setter(map-get($map, item-expand), ());
-
-	$divider-before: setter(map-get($map, divider-before), ());
-
-	$divider-after: setter(map-get($map, divider-after), ());
-
 	$btn: setter(map-get($map, btn), ());
 	$btn: map-merge(
 		$btn,
@@ -410,18 +402,6 @@
 		)
 	);
 
-	$component-action: setter(map-get($map, component-action), ());
-
-	$component-link: setter(map-get($map, component-link), ());
-
-	$component-title: setter(map-get($map, component-title), ());
-
-	$component-text: setter(map-get($map, component-text), ());
-
-	$component-label: setter(map-get($map, component-label), ());
-
-	$tbar-label-size: setter(map-get($map, tbar-label-size), ());
-
 	@include clay-css($base);
 
 	strong {
@@ -429,15 +409,15 @@
 	}
 
 	.component-action {
-		@include clay-link($component-action);
+		@include clay-link(map-get($map, component-action));
 	}
 
 	.component-link {
-		@include clay-link($component-link);
+		@include clay-link(map-get($map, component-link));
 	}
 
 	.tbar-nav {
-		@include clay-css($nav);
+		@include clay-css(map-get($map, nav));
 	}
 
 	.tbar-item {
@@ -445,15 +425,15 @@
 	}
 
 	.tbar-divider-before::before {
-		@include clay-css($divider-before);
+		@include clay-css(map-get($map, divider-before));
 	}
 
 	.tbar-divider-after::after {
-		@include clay-css($divider-after);
+		@include clay-css(map-get($map, divider-after));
 	}
 
 	.tbar-item-expand {
-		@include clay-css($item-expand);
+		@include clay-css(map-get($map, item-expand));
 	}
 
 	.tbar-btn {
@@ -509,19 +489,19 @@
 	}
 
 	.component-title {
-		@include clay-text-typography($component-title);
+		@include clay-text-typography(map-get($map, component-title));
 	}
 
 	.component-text {
-		@include clay-text-typography($component-text);
+		@include clay-text-typography(map-get($map, component-text));
 	}
 
 	.component-label {
-		@include clay-label-variant($component-label);
+		@include clay-label-variant(map-get($map, component-label));
 	}
 
 	.tbar-label {
-		@include clay-label-size($tbar-label-size);
+		@include clay-label-size(map-get($map, tbar-label-size));
 	}
 }
 

package/src/scss/mixins/_utilities.scss

@@ -29,9 +29,9 @@
 	resize: $direction;
 }
 
-// * REUSE-Snippet-Begin
-// * SPDX-License-Identifier: APLv2
-// * SPDX-FileCopyrightText: © 2018 A11Y Project <https://a11yproject.com/posts/how-to-hide-content/>
+// * SPDX-SnippetBegin
+// * SPDX-License-Identifier: Apache-2.0
+// * SPDX-SnippetCopyrightText: © 2018 A11Y Project <https://a11yproject.com/posts/how-to-hide-content/>
 // *
 
 /// A Bootstrap 4 mixin that generates styles to only display content to screen readers.
@@ -48,11 +48,11 @@
 	width: 1px;
 }
 
-// * REUSE-Snippet-End
+// * SPDX-SnippetEnd
 
-// * REUSE-Snippet-Begin
+// * SPDX-SnippetBegin
 // * SPDX-License-Identifier: MIT
-// * SPDX-FileCopyrightText: © 2018 HTML5 Boilerplate <https://github.com/h5bp/main.css>
+// * SPDX-SnippetCopyrightText: © 2018 HTML5 Boilerplate <https://github.com/h5bp/main.css>
 // *
 
 /// A Bootstrap 4 mixin to display `.sr-only` content when focused. Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
@@ -69,7 +69,7 @@
 	}
 }
 
-// * REUSE-Snippet-End
+// * SPDX-SnippetEnd
 
 /// A Bootstrap 4 mixin for generating `width` and `height` properties.
 /// @deprecated

package/src/scss/variables/_alerts.scss

@@ -182,6 +182,8 @@ $alert-indicator: () !default;
 $alert-indicator: map-deep-merge(
 	(
 		font-size: $alert-indicator-font-size,
+		line-height: 1,
+		vertical-align: 8%,
 		lead: (
 			margin-left: $alert-lead-spacer-x,
 		),
@@ -397,6 +399,7 @@ $alert-notification-sm-down: map-merge(
 $alert-autofit-row: () !default;
 $alert-autofit-row: map-deep-merge(
 	(
+		align-items: baseline,
 		margin-left: -0.5rem,
 		margin-right: -0.5rem,
 		width: auto,

package/src/scss/variables/_dropdowns.scss

@@ -217,16 +217,16 @@ $dropdown-item-base: map-deep-merge(
 			line-height: calc(#{$dropdown-font-size} * #{$line-height-base}),
 		),
 		'&.autofit-row': (
-			padding-left: 1rem,
-			padding-right: 1rem,
+			padding-left: calc(#{$dropdown-item-padding-x} - 0.25rem),
+			padding-right: calc(#{$dropdown-item-padding-x} - 0.25rem),
 			autofit-col: (
 				padding-left: 0.25rem,
 				padding-right: 0.25rem,
 			),
 		),
 		autofit-row: (
-			margin-left: 0.25rem,
-			margin-right: 0.25rem,
+			margin-left: -0.25rem,
+			margin-right: -0.25rem,
 			width: auto,
 			autofit-col: (
 				padding-left: 0.25rem,

package/src/scss/variables/_forms.scss

@@ -116,7 +116,9 @@ $input-plaintext-color: $body-color !default;
 
 /// @deprecated with no replacement
 
-$input-height-border: $input-border-top-width + $input-border-bottom-width !default;
+$input-height-border: calc(
+	#{$input-border-top-width} + #{$input-border-bottom-width}
+) !default;
 
 /// @deprecated with no replacement
 

package/src/scss/variables/_globals.scss

@@ -35,7 +35,7 @@ $enable-grid-classes: true !default;
 $enable-pointer-cursor-for-buttons: true !default;
 $enable-print-styles: true !default;
 $enable-responsive-font-sizes: false !default;
-$enable-validation-icons: true !default;
+$enable-validation-icons: false !default;
 $enable-deprecation-messages: true !default;
 
 // Deprecated, no longer affects any compiled CSS

package/src/scss/variables/_modals.scss

@@ -19,8 +19,9 @@ $modal-content-border-color: rgba($black, 0.2) !default;
 $modal-content-border-width: $border-width !default;
 
 $modal-content-border-radius: $border-radius-lg !default;
-$modal-content-inner-border-radius: $modal-content-border-radius -
-	$modal-content-border-width !default;
+$modal-content-inner-border-radius: calc(
+	#{$modal-content-border-radius} - #{$modal-content-border-width}
+) !default;
 
 $modal-content-box-shadow-xs: 0 0.25rem 0.5rem rgba($black, 0.5) !default;
 $modal-content-box-shadow-sm-up: 0 0.5rem 1rem rgba($black, 0.5) !default;

package/src/scss/variables/_popovers.scss

@@ -3,7 +3,9 @@ $popover-border-color: rgba($black, 0.2) !default;
 $popover-border-width: $border-width !default;
 
 $popover-border-radius: $border-radius-lg !default;
-$popover-inner-border-radius: $popover-border-radius - $popover-border-width !default;
+$popover-inner-border-radius: calc(
+	#{$popover-border-radius} - #{$popover-border-width}
+) !default;
 
 $popover-box-shadow: 0 0.25rem 0.5rem rgba($black, 0.2) !default;
 $popover-font-size: $font-size-sm !default;

package/src/scss/variables/_utilities.scss

@@ -1,6 +1,28 @@
 $bg-checkered-fg: $gray-200 !default;
+
+// .inline-scroller
+
 $inline-scroller-max-height: 125px !default;
 
+$inline-scroller: () !default;
+$inline-scroller: map-deep-merge(
+	(
+		-webkit-overflow-scrolling: touch,
+		list-style: none,
+		margin: 0,
+		max-height: $inline-scroller-max-height,
+		overflow: auto,
+		padding: 0,
+		focus: (
+			outline: 0,
+		),
+		focus-visible: (
+			box-shadow: $component-focus-box-shadow,
+		)
+	),
+	$inline-scroller
+);
+
 // Autofit Row
 
 $autofit-col-expand-min-width: 3.125rem !default; // 50px