@clayui/css 3.88.0 → 3.90.0

package/src/scss/mixins/_breakpoints.scss

@@ -7,33 +7,35 @@
 /// @param {Map} $breakpoints[$grid-breakpoints] - A map that defines the breakpoints
 
 @mixin media-breakpoint-up($name, $breakpoints: null) {
-	$breakpoints: setter(
-		$breakpoints,
-		if(
-			variable-exists(grid-breakpoints),
-			$grid-breakpoints,
+	@if ($name != c-unset) {
+		$breakpoints: setter(
+			$breakpoints,
 			if(
-				variable-exists(cadmin-grid-breakpoints),
-				$cadmin-grid-breakpoints,
-				(
-					xs: 0,
-					sm: 576px,
-					md: 768px,
-					lg: 992px,
-					xl: 1280px,
+				variable-exists(grid-breakpoints),
+				$grid-breakpoints,
+				if(
+					variable-exists(cadmin-grid-breakpoints),
+					$cadmin-grid-breakpoints,
+					(
+						xs: 0,
+						sm: 576px,
+						md: 768px,
+						lg: 992px,
+						xl: 1280px,
+					)
 				)
 			)
-		)
-	);
+		);
 
-	$min: breakpoint-min($name, $breakpoints);
+		$min: breakpoint-min($name, $breakpoints);
 
-	@if $min {
-		@media (min-width: $min) {
+		@if $min {
+			@media (min-width: $min) {
+				@content;
+			}
+		} @else {
 			@content;
 		}
-	} @else {
-		@content;
 	}
 }
 
@@ -42,33 +44,35 @@
 /// @param {Map} $breakpoints[$grid-breakpoints] - A map that defines the breakpoints
 
 @mixin media-breakpoint-down($name, $breakpoints: null) {
-	$breakpoints: setter(
-		$breakpoints,
-		if(
-			variable-exists(grid-breakpoints),
-			$grid-breakpoints,
+	@if ($name != c-unset) {
+		$breakpoints: setter(
+			$breakpoints,
 			if(
-				variable-exists(cadmin-grid-breakpoints),
-				$cadmin-grid-breakpoints,
-				(
-					xs: 0,
-					sm: 576px,
-					md: 768px,
-					lg: 992px,
-					xl: 1280px,
+				variable-exists(grid-breakpoints),
+				$grid-breakpoints,
+				if(
+					variable-exists(cadmin-grid-breakpoints),
+					$cadmin-grid-breakpoints,
+					(
+						xs: 0,
+						sm: 576px,
+						md: 768px,
+						lg: 992px,
+						xl: 1280px,
+					)
 				)
 			)
-		)
-	);
+		);
 
-	$max: breakpoint-max($name, $breakpoints);
+		$max: breakpoint-max($name, $breakpoints);
 
-	@if $max {
-		@media (max-width: $max) {
+		@if $max {
+			@media (max-width: $max) {
+				@content;
+			}
+		} @else {
 			@content;
 		}
-	} @else {
-		@content;
 	}
 }
 

package/src/scss/mixins/_menubar.scss

@@ -46,11 +46,16 @@
 @mixin clay-menubar-vertical-expand($map) {
 	@if (type-of($map) == 'map') {
 		$enabled: setter(map-get($map, enabled), true);
-		$breakpoint-up: setter(map-get($map, breakpoint-up), md);
-		$breakpoint-down: setter(
-			map-get($map, breakpoint-down),
-			clay-breakpoint-prev($breakpoint-up)
-		);
+		$breakpoint-up: map-get($map, breakpoint-up);
+		$breakpoint-down: setter(map-get($map, breakpoint-down), c-unset);
+
+		@if ($breakpoint-up) and ($breakpoint-up != c-unset) {
+			@warn "`breakpoint-up` is deprecated in the mixin `clay-menubar-vertical-expand`, use the key `media-breakpoint-down: (sm: ())` instead.";
+		}
+
+		@if ($breakpoint-down) and ($breakpoint-down != c-unset) {
+			@warn "`breakpoint-down` is deprecated in the mixin `clay-menubar-vertical-expand`, use the key `media-breakpoint-down: (sm: ())` instead.";
+		}
 
 		// .menubar-vertical-expand-{md}
 
@@ -312,7 +317,13 @@
 			}
 
 			.menubar-collapse {
-				@include clay-css(map-get($map, collapse));
+				$_menubar-collapse: setter(map-get($map, collapse), ());
+				$_menubar-collapse: map-deep-merge(
+					setter(map-get($map, menubar-collapse), ()),
+					$_menubar-collapse
+				);
+
+				@include clay-css($_menubar-collapse);
 
 				@include media-breakpoint-down($breakpoint-down) {
 					@include clay-css($collapse-mobile);
@@ -367,6 +378,46 @@
 					}
 				}
 			}
+
+			@if (map-get($map, media-breakpoint-down)) {
+				@each $breakpoint
+					in map-keys(map-get($map, media-breakpoint-down))
+				{
+					$media-breakpoint-down: map-deep-get(
+						$map,
+						media-breakpoint-down,
+						$breakpoint
+					);
+
+					@if ($breakpoint) {
+						@include media-breakpoint-down($breakpoint) {
+							@include clay-menubar-vertical-variant(
+								$media-breakpoint-down
+							);
+						}
+					}
+				}
+			}
+
+			@if (map-get($map, media-breakpoint-up)) {
+				@each $breakpoint
+					in map-keys(map-get($map, media-breakpoint-up))
+				{
+					$media-breakpoint-up: map-deep-get(
+						$map,
+						media-breakpoint-up,
+						$breakpoint
+					);
+
+					@if ($breakpoint) {
+						@include media-breakpoint-up($breakpoint) {
+							@include clay-menubar-vertical-variant(
+								$media-breakpoint-up
+							);
+						}
+					}
+				}
+			}
 		} @else {
 			.menubar-collapse {
 				display: block;
@@ -462,8 +513,16 @@
 
 @mixin clay-menubar-vertical-variant($map) {
 	$enable: setter(map-get($map, enable), true);
-	$breakpoint-up: setter(map-get($map, breakpoint-up), md);
-	$breakpoint-down: clay-breakpoint-prev($breakpoint-up);
+	$breakpoint-up: map-get($map, breakpoint-up);
+	$breakpoint-down: setter(map-get($map, breakpoint-down), c-unset);
+
+	@if ($breakpoint-up) and ($breakpoint-up != c-unset) {
+		@warn "`breakpoint-up` is deprecated in the mixin `clay-menubar-vertical-variant`, use the key `media-breakpoint-down: (sm: ())` instead.";
+	}
+
+	@if ($breakpoint-down) and ($breakpoint-down != c-unset) {
+		@warn "`breakpoint-down` is deprecated in the mixin `clay-menubar-vertical-variant`, use the key `media-breakpoint-down: (sm: ())` instead.";
+	}
 
 	// .menubar-vertical-expand-{md}.menubar-{variant}
 
@@ -855,7 +914,13 @@
 		}
 
 		.menubar-collapse {
-			@include clay-css(map-get($map, collapse));
+			$_menubar-collapse: setter(map-get($map, collapse), ());
+			$_menubar-collapse: map-merge(
+				setter(map-get($map, menubar-collapse), ()),
+				$_menubar-collapse
+			);
+
+			@include clay-css($_menubar-collapse);
 
 			@include media-breakpoint-down($breakpoint-down) {
 				@include clay-css($collapse-mobile);
@@ -863,11 +928,27 @@
 		}
 
 		.menubar-toggler {
+			$_menubar-toggler: setter(map-get($map, menubar-toggler), ());
+
+			@include clay-css($_menubar-toggler);
+
+			.c-inner {
+				@include clay-css(map-get($_menubar-toggler, c-inner));
+			}
+
+			.lexicon-icon {
+				@include clay-css(map-get($_menubar-toggler, lexicon-icon));
+			}
+
 			@include media-breakpoint-down($breakpoint-down) {
 				@include clay-button-variant($toggler-mobile);
 			}
 		}
 
+		.nav-nested {
+			@include clay-css(map-get($map, nav-nested));
+		}
+
 		.nav-nested-margins {
 			> li .nav > li {
 				@include clay-css(map-get($map, nav-nested-margins-item));
@@ -881,11 +962,51 @@
 		}
 
 		.nav-link {
-			@include clay-link($link);
+			$_nav-link: setter(map-get($map, nav-link), ());
+			$_nav-link: map-deep-merge($link, $_nav-link);
+
+			@include clay-link($_nav-link);
 
 			@include media-breakpoint-down($breakpoint-down) {
 				@include clay-link($link-mobile);
 			}
 		}
+
+		@if (map-get($map, media-breakpoint-down)) {
+			@each $breakpoint in map-keys(map-get($map, media-breakpoint-down))
+			{
+				$media-breakpoint-down: map-deep-get(
+					$map,
+					media-breakpoint-down,
+					$breakpoint
+				);
+
+				@if ($breakpoint) {
+					@include media-breakpoint-down($breakpoint) {
+						@include clay-menubar-vertical-variant(
+							$media-breakpoint-down
+						);
+					}
+				}
+			}
+		}
+
+		@if (map-get($map, media-breakpoint-up)) {
+			@each $breakpoint in map-keys(map-get($map, media-breakpoint-up)) {
+				$media-breakpoint-up: map-deep-get(
+					$map,
+					media-breakpoint-up,
+					$breakpoint
+				);
+
+				@if ($breakpoint) {
+					@include media-breakpoint-up($breakpoint) {
+						@include clay-menubar-vertical-variant(
+							$media-breakpoint-up
+						);
+					}
+				}
+			}
+		}
 	}
 }

package/src/scss/variables/_buttons.scss

@@ -27,7 +27,7 @@ $btn-disabled-opacity: $component-disabled-opacity !default;
 $btn-inline-item-font-size: null !default;
 
 $btn-section-font-size: 0.6875rem !default; // 11px
-$btn-section-font-weight: $font-weight-normal !default;
+$btn-section-font-weight: $font-weight-semi-bold !default;
 $btn-section-line-height: 1 !default;
 
 $btn: () !default;

package/src/scss/variables/_c-root.scss

@@ -0,0 +1,3 @@
+/// This map outputs custom properties in the `:root` selector, use the Sass `map-merge` function to add additional custom properties to `:root`.
+
+$c-root: () !default;

package/src/scss/variables/_globals.scss

@@ -104,6 +104,7 @@ $colors: map-merge(
 $primary: $blue !default;
 $primary-d1: clay-darken($primary, 7.5) !default;
 $primary-d2: clay-darken($primary, 10) !default;
+$primary-l0: clay-lighten($primary, 13.92) !default;
 $primary-l1: clay-lighten($primary, 22.94) !default;
 $primary-l2: clay-lighten($primary, 32.94) !default;
 $primary-l3: clay-lighten($primary, 44.9) !default;
@@ -585,16 +586,6 @@ $link: map-deep-merge(
 			color: $link-hover-color,
 			text-decoration: $link-hover-decoration,
 		),
-		inline-item-before: (
-			margin-right: 0.25rem,
-		),
-		inline-item-middle: (
-			margin-left: 0.25rem,
-			margin-right: 0.25rem,
-		),
-		inline-item-after: (
-			margin-left: 0.25rem,
-		),
 	),
 	$link
 );