@clayui/css 3.41.0 → 3.44.1

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

@@ -207,12 +207,284 @@ $card-rounded-circle-inner-border-radius: calc(
 	#{$rounded-circle-border-radius} - #{$card-border-width}
 ) !default;
 
+// .form-check-card
+
+$form-check-card-checked-box-shadow: $input-btn-focus-box-shadow !default;
+
+$form-check-card: () !default;
+$form-check-card: map-deep-merge(
+	(
+		margin-bottom: $card-margin-bottom,
+		margin-top: 0,
+		padding-left: 0,
+		hover: (
+			card: (
+				box-shadow: $form-check-card-checked-box-shadow,
+			),
+		),
+		active: (
+			card: (
+				box-shadow: $form-check-card-checked-box-shadow,
+			),
+		),
+		checked: (
+			card: (
+				box-shadow: $form-check-card-checked-box-shadow,
+			),
+		),
+		card: (
+			margin-bottom: 0,
+		),
+		form-check-input: (
+			margin-left: 0,
+			margin-top: 0,
+			opacity: 0,
+			position: absolute,
+			z-index: 1,
+		),
+		form-check-label: (
+			color: $body-color,
+			display: inline,
+			font-weight: $font-weight-normal,
+			padding-left: 0,
+			position: static,
+		),
+		custom-control: (
+			display: inline,
+			margin-right: 0,
+			position: static,
+			label: (
+				font-weight: $font-weight-normal,
+				padding-left: 0,
+			),
+			custom-control-label: (
+				opacity: 0,
+				position: absolute,
+				z-index: 1,
+				before: (
+					top: 0,
+				),
+				after: (
+					top: 0,
+				),
+			),
+			custom-control-input: (
+				z-index: 2,
+				checked: (
+					card: (
+						box-shadow: $form-check-card-checked-box-shadow,
+					),
+				),
+			),
+		),
+	),
+	$form-check-card
+);
+
+// .form-check-bottom-left .card-horizontal > .card-body,
+// .form-check-middle-left .card-horizontal > .card-body,
+// .form-check-top-left .card-horizontal > .card-body
+
 $checkbox-left-card-padding: 40px !default;
+
+// .form-check-bottom-right .card-horizontal > .card-body,
+// .form-check-middle-right .card-horizontal > .card-body,
+// .form-check-top-right .card-horizontal > .card-body
+
 $checkbox-right-card-padding: $checkbox-left-card-padding !default;
 
+// Form Check Positions
+
 $checkbox-position: 1rem !default;
 
-$form-check-card-checked-box-shadow: $input-btn-focus-box-shadow !default;
+// .form-check-bottom-left
+
+$form-check-bottom-left: () !default;
+$form-check-bottom-left: map-deep-merge(
+	(
+		form-check-input: (
+			bottom: $checkbox-position,
+			left: $checkbox-position,
+			opacity: 1,
+			top: auto,
+			transform: none,
+		),
+		custom-control: (
+			custom-control-input: (
+				bottom: $checkbox-position,
+				left: $checkbox-position,
+				top: auto,
+				transform: none,
+			),
+			custom-control-label: (
+				bottom: $checkbox-position,
+				left: $checkbox-position,
+				opacity: 1,
+				top: auto,
+				transform: none,
+			),
+		),
+	),
+	$form-check-bottom-left
+);
+
+// .form-check-bottom-right
+
+$form-check-bottom-right: () !default;
+$form-check-bottom-right: map-deep-merge(
+	(
+		form-check-input: (
+			bottom: $checkbox-position,
+			left: auto,
+			opacity: 1,
+			right: $checkbox-position,
+			top: auto,
+			transform: none,
+		),
+		custom-control: (
+			custom-control-input: (
+				bottom: $checkbox-position,
+				left: auto,
+				right: $checkbox-position,
+				top: auto,
+				transform: none,
+			),
+			custom-control-label: (
+				bottom: $checkbox-position,
+				left: auto,
+				opacity: 1,
+				right: $checkbox-position,
+				top: auto,
+				transform: none,
+			),
+		),
+	),
+	$form-check-bottom-right
+);
+
+// .form-check-middle-left
+
+$form-check-middle-left: () !default;
+$form-check-middle-left: map-deep-merge(
+	(
+		form-check-input: (
+			left: $checkbox-position,
+			margin-top: 0,
+			opacity: 1,
+			top: 50%,
+			transform: translateY(-50%),
+		),
+		custom-control: (
+			custom-control-input: (
+				left: $checkbox-position,
+				margin-top: 0,
+				top: 50%,
+				transform: translateY(-50%),
+			),
+			custom-control-label: (
+				left: $checkbox-position,
+				margin-top: 0,
+				opacity: 1,
+				top: 50%,
+				transform: translateY(-50%),
+			),
+		),
+	),
+	$form-check-middle-left
+);
+
+// .form-check-middle-right
+
+$form-check-middle-right: () !default;
+$form-check-middle-right: map-deep-merge(
+	(
+		form-check-input: (
+			left: auto,
+			margin-top: 0,
+			opacity: 1,
+			right: $checkbox-position,
+			top: 50%,
+			transform: translateY(-50%),
+		),
+		custom-control: (
+			custom-control-input: (
+				left: auto,
+				margin-top: 0,
+				right: $checkbox-position,
+				top: 50%,
+				transform: translateY(-50%),
+			),
+			custom-control-label: (
+				left: auto,
+				margin-top: 0,
+				opacity: 1,
+				right: $checkbox-position,
+				top: 50%,
+				transform: translateY(-50%),
+			),
+		),
+	),
+	$form-check-middle-right
+);
+
+// .form-check-top-right
+
+$form-check-top-right: () !default;
+$form-check-top-right: map-deep-merge(
+	(
+		form-check-input: (
+			left: auto,
+			opacity: 1,
+			right: $checkbox-position,
+			top: $checkbox-position,
+			transform: none,
+		),
+		custom-control: (
+			custom-control-input: (
+				left: auto,
+				right: $checkbox-position,
+				top: $checkbox-position,
+				transform: none,
+			),
+			custom-control-label: (
+				left: auto,
+				opacity: 1,
+				right: $checkbox-position,
+				top: $checkbox-position,
+				transform: none,
+			),
+		),
+	),
+	$form-check-top-right
+);
+
+// .form-check-top-left
+
+$form-check-top-left: () !default;
+$form-check-top-left: map-deep-merge(
+	(
+		form-check-input: (
+			left: $checkbox-position,
+			opacity: 1,
+			top: $checkbox-position,
+			transform: none,
+		),
+		custom-control: (
+			custom-control-input: (
+				left: $checkbox-position,
+				top: $checkbox-position,
+				transform: none,
+			),
+			custom-control-label: (
+				left: $checkbox-position,
+				opacity: 1,
+				top: $checkbox-position,
+				transform: none,
+			),
+		),
+	),
+	$form-check-top-left
+);
 
 // Card Interactive
 

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(
 	(