@clayui/css 3.40.0 → 3.43.0

package/src/scss/mixins/_tooltip.scss

@@ -0,0 +1,70 @@
+////
+/// @group tooltip
+////
+
+/// A mixin to help create `.tooltip` variants.
+/// @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
+/// 	// .tooltip
+/// 	show: (
+/// 		// .tooltip.show
+/// 	),
+/// 	arrow: (
+/// 		// .tooltip .arrow
+/// 		before: (
+/// 			// .tooltip .arrow::before
+/// 		),
+/// 		after: (
+/// 			// .tooltip .arrow::after
+/// 		),
+/// 	),
+/// 	tooltip-inner: (
+/// 		// .tooltip .tooltip-inner
+/// 	),
+/// )
+
+@mixin clay-tooltip-variant($map) {
+	@if (type-of($map) == 'map') {
+		$enabled: setter(map-get($map, enabled), true);
+
+		@if ($enabled) {
+			@include clay-css($map);
+
+			&.show {
+				@include clay-css(map-get($map, show));
+			}
+
+			.arrow {
+				@include clay-css(map-get($map, arrow));
+
+				&::before {
+					@include clay-css(map-deep-get($map, arrow, before));
+				}
+
+				&::after {
+					@include clay-css(map-deep-get($map, arrow, after));
+				}
+			}
+
+			.tooltip-arrow {
+				@include clay-css(map-get($map, tooltip-arrow));
+
+				&::before {
+					@include clay-css(
+						map-deep-get($map, tooltip-arrow, before)
+					);
+				}
+
+				&::after {
+					@include clay-css(map-deep-get($map, tooltip-arrow, after));
+				}
+			}
+
+			.tooltip-inner {
+				@include clay-css(map-get($map, tooltip-inner));
+			}
+		}
+	}
+}

package/src/scss/variables/_alerts.scss

@@ -135,6 +135,7 @@ $alert: map-deep-merge(
 		margin-bottom: $alert-margin-bottom,
 		padding: $alert-padding-y $alert-padding-x,
 		position: relative,
+		white-space: normal,
 		word-wrap: break-word,
 		alert-btn: $alert-btn,
 		btn-group: $alert-btn-group,

package/src/scss/variables/_application-bar.scss

@@ -21,13 +21,25 @@ $application-bar-base: () !default;
 $application-bar-dark: () !default;
 $application-bar-dark: map-deep-merge(
 	(
-		bg: $dark,
+		background-color: $dark,
 		color: $navbar-dark-color,
-		link-color: $navbar-dark-color,
-		link-hover-color: $navbar-dark-hover-color,
-		link-active-color: $navbar-dark-active-color,
-		link-disabled-color: $navbar-dark-disabled-color,
-		link-disabled-opacity: 1,
+		navbar-nav: (
+			nav-link: (
+				color: $navbar-dark-color,
+				hover: (
+					color: $navbar-dark-hover-color,
+				),
+				active: (
+					color: $navbar-dark-active-color,
+				),
+				disabled: (
+					color: $navbar-dark-disabled-color,
+					opacity: 1,
+				),
+			),
+		),
+		media-breakpoint-down: (),
+		media-breakpoint-up: (),
 	),
 	$application-bar-dark
 );

package/src/scss/variables/_buttons.scss

@@ -185,7 +185,18 @@ $btn-sm: map-deep-merge(
 	$btn-sm
 );
 
-// Button Monospaced
+// Button Sizes
+
+$btn-sizes: () !default;
+$btn-sizes: map-deep-merge(
+	(
+		btn-lg: $btn-lg,
+		btn-sm: $btn-sm,
+	),
+	$btn-sizes
+);
+
+// .btn-monospaced
 
 $btn-monospaced-padding-x: 0 !default;
 $btn-monospaced-padding-y: 0 !default;
@@ -228,7 +239,7 @@ $btn-monospaced: map-deep-merge(
 	$btn-monospaced
 );
 
-// Button Monospaced Lg
+// .btn-monospaced.btn-lg
 
 $btn-monospaced-padding-x-lg: null !default;
 $btn-monospaced-padding-y-lg: null !default;
@@ -253,7 +264,7 @@ $btn-monospaced-lg: map-deep-merge(
 	$btn-monospaced-lg
 );
 
-// Button Monospaced Sm
+// .btn-monospaced.btn-sm
 
 $btn-monospaced-padding-x-sm: null !default;
 $btn-monospaced-padding-y-sm: null !default;
@@ -278,6 +289,18 @@ $btn-monospaced-sm: map-deep-merge(
 	$btn-monospaced-sm
 );
 
+// Button Monospaced Sizes
+
+$btn-monospaced-sizes: () !default;
+$btn-monospaced-sizes: map-deep-merge(
+	(
+		btn-monospaced: $btn-monospaced,
+		btn-monospaced-lg: $btn-monospaced-lg,
+		btn-monospaced-sm: $btn-monospaced-sm,
+	),
+	$btn-monospaced-sizes
+);
+
 // Button Block
 
 $btn-block-spacing-y: 0.5rem !default;

package/src/scss/variables/_dropdowns.scss

@@ -180,7 +180,6 @@ $dropdown-item-base: map-deep-merge(
 		position: relative,
 		text-align: inherit,
 		transition: none,
-		white-space: normal,
 		width: 100%,
 		word-wrap: break-word,
 		hover: (
@@ -218,6 +217,23 @@ $dropdown-item-base: map-deep-merge(
 		c-kbd-inline: (
 			line-height: $dropdown-font-size * $line-height-base,
 		),
+		'&.autofit-row': (
+			padding-left: 1rem,
+			padding-right: 1rem,
+			autofit-col: (
+				padding-left: 0.25rem,
+				padding-right: 0.25rem,
+			),
+		),
+		autofit-row: (
+			margin-left: 0.25rem,
+			margin-right: 0.25rem,
+			width: auto,
+			autofit-col: (
+				padding-left: 0.25rem,
+				padding-right: 0.25rem,
+			),
+		),
 	),
 	$dropdown-item-base
 );
@@ -736,7 +752,18 @@ $dropdown-full-wide-header-spacer-y: 20px !default;
 
 $dropdown-wide-width: 500px !default;
 
-// Dropdown Menu Width
+// .dropdown-menu-width-shrink
+
+$dropdown-menu-width-shrink: () !default;
+$dropdown-menu-width-shrink: map-deep-merge(
+	(
+		min-width: 0,
+		white-space: nowrap,
+	),
+	$dropdown-menu-width-shrink
+);
+
+// .dropdown-menu-width-full
 
 $dropdown-menu-width-full: () !default;
 $dropdown-menu-width-full: map-merge(
@@ -750,6 +777,8 @@ $dropdown-menu-width-full: map-merge(
 	$dropdown-menu-width-full
 );
 
+// .dropdown-menu-width-sm
+
 $dropdown-menu-width-sm: () !default;
 $dropdown-menu-width-sm: map-merge(
 	(