@clayui/css 3.65.1 → 3.69.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

@@ -30,7 +30,7 @@
 }
 
 // * SPDX-SnippetBegin
-// * SPDX-License-Identifier: APLv2
+// * SPDX-License-Identifier: Apache-2.0
 // * SPDX-SnippetCopyrightText: © 2018 A11Y Project <https://a11yproject.com/posts/how-to-hide-content/>
 // *
 

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/_menubar.scss

@@ -74,7 +74,7 @@ $menubar-vertical-transparent-md: map-deep-merge(
 				color: rgba($black, 0.9),
 			),
 			show: (
-				color: $c-unset,
+				color: c-unset,
 			),
 			disabled: (
 				color: rgba($black, 0.3),
@@ -99,9 +99,9 @@ $menubar-vertical-transparent-md: map-deep-merge(
 				color: $gray-600,
 			),
 			show: (
-				background-color: $c-unset,
-				color: $c-unset,
-				font-weight: $c-unset,
+				background-color: c-unset,
+				color: c-unset,
+				font-weight: c-unset,
 			),
 		),
 		collapse-mobile: (
@@ -241,7 +241,7 @@ $menubar-vertical-transparent-lg: map-deep-merge(
 				color: rgba($black, 0.9),
 			),
 			show: (
-				color: $c-unset,
+				color: c-unset,
 			),
 			disabled: (
 				color: rgba($black, 0.3),
@@ -266,9 +266,9 @@ $menubar-vertical-transparent-lg: map-deep-merge(
 				color: $gray-600,
 			),
 			show: (
-				background-color: $c-unset,
-				color: $c-unset,
-				font-weight: $c-unset,
+				background-color: c-unset,
+				color: c-unset,
+				font-weight: c-unset,
 			),
 		),
 		collapse-mobile: (

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;