@clayui/css 3.39.0 → 3.42.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

@@ -218,26 +218,30 @@ $alert-dismissible: map-deep-merge(
 
 // Alert Fluid
 
+/// @deprecated use the Sass map `$alert-fluid` instead
+
 $alert-fluid-border-bottom-width: 1px !default;
+
+/// @deprecated use the Sass map `$alert-fluid` instead
+
 $alert-fluid-border-left-width: 0 !default;
+
+/// @deprecated use the Sass map `$alert-fluid` instead
+
 $alert-fluid-border-right-width: 0 !default;
+
+/// @deprecated use the Sass map `$alert-fluid` instead
+
 $alert-fluid-border-top-width: 0 !default;
 
+/// @deprecated use the Sass map `$alert-fluid` instead
+
 $alert-fluid-border-width: $alert-fluid-border-top-width
 	$alert-fluid-border-right-width $alert-fluid-border-bottom-width
 	$alert-fluid-border-left-width !default;
 $alert-fluid-margin-bottom: 0 !default;
 
-$alert-fluid: () !default;
-$alert-fluid: map-merge(
-	(
-		border-radius: 0,
-		border-width: $alert-fluid-border-width,
-		margin-bottom: $alert-fluid-margin-bottom,
-		padding: 0,
-	),
-	$alert-fluid
-);
+/// @deprecated use the Sass map `$alert-fluid` instead
 
 $alert-fluid-container: () !default;
 $alert-fluid-container: map-merge(
@@ -250,6 +254,8 @@ $alert-fluid-container: map-merge(
 	$alert-fluid-container
 );
 
+/// @deprecated use the Sass map `$alert-fluid` instead
+
 $alert-fluid-dismissible-container: () !default;
 $alert-fluid-dismissible-container: map-merge(
 	(
@@ -267,6 +273,8 @@ $alert-fluid-dismissible-container: map-merge(
 
 // .alert-fluid .close
 
+/// @deprecated use the Sass map `$alert-fluid` instead
+
 $alert-fluid-close: () !default;
 $alert-fluid-close: map-deep-merge(
 	(
@@ -275,6 +283,22 @@ $alert-fluid-close: map-deep-merge(
 	$alert-fluid-close
 );
 
+$alert-fluid: () !default;
+$alert-fluid: map-deep-merge(
+	(
+		border-radius: 0,
+		border-width: $alert-fluid-border-width,
+		margin-bottom: $alert-fluid-margin-bottom,
+		padding: 0,
+		alert-dismissible: (
+			container-fluid: $alert-fluid-dismissible-container,
+		),
+		container-fluid: $alert-fluid-container,
+		close: $alert-fluid-close,
+	),
+	$alert-fluid
+);
+
 // .alert-notifications-absolute
 
 $alert-notifications-absolute-bottom: null !default;

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

@@ -37,10 +37,14 @@ $breadcrumb-link: map-deep-merge(
 		display: block,
 		text-decoration: $breadcrumb-link-text-decoration,
 		text-transform: $breadcrumb-text-transform,
-		hover-color: $breadcrumb-link-hover-color,
-		hover-text-decoration: $breadcrumb-link-hover-text-decoration,
-		focus-color: $breadcrumb-link-hover-color,
-		focus-text-decoration: $breadcrumb-link-hover-text-decoration,
+		hover: (
+			color: $breadcrumb-link-hover-color,
+			text-decoration: $breadcrumb-link-hover-text-decoration,
+		),
+		focus: (
+			color: $breadcrumb-link-hover-color,
+			text-decoration: $breadcrumb-link-hover-text-decoration,
+		),
 	),
 	$breadcrumb-link
 );

package/src/scss/variables/_cards.scss

@@ -327,13 +327,51 @@ $card-interactive-secondary: map-deep-merge(
 $card-type-asset: () !default;
 $card-type-asset: map-deep-merge(
 	(
+		aspect-ratio: (
+			border-color: $card-border-color,
+			border-style: solid,
+			border-width: 0 0 0.0625rem 0,
+			horizontal: 16,
+			vertical: 9,
+			custom-control: (
+				label: (
+					bottom: 0,
+					cursor: $link-cursor,
+					left: 0,
+					position: absolute,
+					right: 0,
+					top: 0,
+				),
+			),
+		),
 		card-type-asset-icon: (
+			width: 22.225%,
+			inline-item: (
+				bottom: 0,
+				left: 0,
+				position: absolute,
+				right: 0,
+				top: 0,
+			),
+			lexicon-icon: (
+				height: 100%,
+				width: 100%,
+			),
 			sticker: (
+				border-radius: 50%,
 				display: block,
+				font-size: 2vw,
 				padding-bottom: 100%,
 				width: 100%,
 			),
 		),
+		card-row: (
+			align-items: flex-start,
+		),
+		dropdown-action: (
+			margin-right: -0.5rem,
+			margin-top: -0.1875rem,
+		),
 	),
 	$card-type-asset
 );
@@ -347,7 +385,7 @@ $image-card: () !default;
 $file-card: () !default;
 $file-card: map-deep-merge(
 	(
-		asset-icon: (
+		card-type-asset-icon: (
 			color: $gray-600,
 		),
 	),
@@ -385,7 +423,7 @@ $product-card: map-deep-merge(
 $user-card: () !default;
 $user-card: map-deep-merge(
 	(
-		asset-icon: (
+		card-type-asset-icon: (
 			max-width: 80px,
 			min-width: 48px,
 			width: 30%,