@clayui/css 3.78.0 → 3.82.0

package/src/scss/variables/_list-group.scss

@@ -323,7 +323,7 @@ $list-group-notification-item-primary: map-deep-merge(
 // List Group Sm
 
 $list-group-sm-item: () !default;
-$list-group-sm-item: map-deep-merge(
+$list-group-sm-item: map-merge(
 	(
 		padding-bottom: 0.40625rem,
 		padding-top: 0.40625rem,
@@ -332,7 +332,7 @@ $list-group-sm-item: map-deep-merge(
 );
 
 $list-group-sm-quick-action-menu: () !default;
-$list-group-sm-quick-action-menu: map-deep-merge(
+$list-group-sm-quick-action-menu: map-merge(
 	(
 		margin-bottom: -0.40625rem,
 		margin-top: -0.40625rem,

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

@@ -14,7 +14,8 @@ $management-bar-size: map-deep-merge(
 	(
 		scaling-navbar: true,
 		border-bottom-width: 0.0625rem,
-		font-size: $navbar-font-size,
+		font-size:
+			if(variable-exists(navbar-font-size), $navbar-font-size, null),
 		height: 4rem,
 		min-height: 4rem,
 		padding-x: 0,
@@ -41,15 +42,35 @@ $management-bar-light: map-deep-merge(
 		background-color: $light,
 		navbar-nav: (
 			nav-link: (
-				color: $navbar-light-color,
+				color:
+					if(
+						variable-exists(navbar-light-color),
+						$navbar-light-color,
+						rgba($black, 0.5)
+					),
 				hover: (
-					color: $navbar-light-hover-color,
+					color:
+						if(
+							variable-exists(navbar-light-hover-color),
+							$navbar-light-hover-color,
+							rgba($black, 0.7)
+						),
 				),
 				active: (
-					color: $navbar-light-active-color,
+					color:
+						if(
+							variable-exists(navbar-light-active-color),
+							$navbar-light-active-color,
+							rgba($black, 0.9)
+						),
 				),
 				disabled: (
-					color: $navbar-light-disabled-color,
+					color:
+						if(
+							variable-exists(navbar-light-disabled-color),
+							$navbar-light-disabled-color,
+							rgba($black, 0.3)
+						),
 					opacity: 1,
 				),
 			),
@@ -65,18 +86,43 @@ $management-bar-primary: map-deep-merge(
 	(
 		background-color: $primary-l3,
 		border-color: $primary,
-		color: $navbar-light-color,
+		color:
+			if(
+				variable-exists(navbar-light-color),
+				$navbar-light-color,
+				rgba($black, 0.5)
+			),
 		navbar-nav: (
 			nav-link: (
-				color: $navbar-light-color,
+				color:
+					if(
+						variable-exists(navbar-light-color),
+						$navbar-light-color,
+						rgba($black, 0.5)
+					),
 				hover: (
-					color: $navbar-light-hover-color,
+					color:
+						if(
+							variable-exists(navbar-light-hover-color),
+							$navbar-light-hover-color,
+							rgba($black, 0.7)
+						),
 				),
 				active: (
-					color: $navbar-light-active-color,
+					color:
+						if(
+							variable-exists(navbar-light-active-color),
+							$navbar-light-active-color,
+							rgba($black, 0.9)
+						),
 				),
 				disabled: (
-					color: $navbar-light-disabled-color,
+					color:
+						if(
+							variable-exists(navbar-light-disabled-color),
+							$navbar-light-disabled-color,
+							rgba($black, 0.3)
+						),
 					opacity: 1,
 				),
 			),

package/src/scss/variables/_modals.scss

@@ -262,14 +262,22 @@ $modal-height-full-modal-content-sm-up: map-merge(
 $modal-success: () !default;
 $modal-success: map-deep-merge(
 	(
-		header-bg: theme-color-level(success, -10),
-		header-border-color: theme-color-level(success, -9),
-		header-color: theme-color-level(success, 6),
-		header-close: (
+		modal-header: (
+			background-color: theme-color-level(success, -10),
+			border-color: theme-color-level(success, -9),
 			color: theme-color-level(success, 6),
-			hover-color: inherit,
-			focus-color: inherit,
-			disabled-color: inherit,
+			close: (
+				color: theme-color-level(success, 6),
+				hover: (
+					color: inherit,
+				),
+				focus: (
+					color: inherit,
+				),
+				disabled: (
+					color: inherit,
+				),
+			),
 		),
 	),
 	$modal-success
@@ -280,14 +288,22 @@ $modal-success: map-deep-merge(
 $modal-info: () !default;
 $modal-info: map-deep-merge(
 	(
-		header-bg: theme-color-level(info, -10),
-		header-border-color: theme-color-level(info, -9),
-		header-color: theme-color-level(info, 6),
-		header-close: (
+		modal-header: (
+			background-color: theme-color-level(info, -10),
+			border-color: theme-color-level(info, -9),
 			color: theme-color-level(info, 6),
-			hover-color: inherit,
-			focus-color: inherit,
-			disabled-color: inherit,
+			close: (
+				color: theme-color-level(info, 6),
+				hover: (
+					color: inherit,
+				),
+				focus: (
+					color: inherit,
+				),
+				disabled: (
+					color: inherit,
+				),
+			),
 		),
 	),
 	$modal-info
@@ -298,14 +314,22 @@ $modal-info: map-deep-merge(
 $modal-warning: () !default;
 $modal-warning: map-deep-merge(
 	(
-		header-bg: theme-color-level(warning, -10),
-		header-border-color: theme-color-level(warning, -9),
-		header-color: theme-color-level(warning, 6),
-		header-close: (
+		modal-header: (
+			background-color: theme-color-level(warning, -10),
+			border-color: theme-color-level(warning, -9),
 			color: theme-color-level(warning, 6),
-			hover-color: inherit,
-			focus-color: inherit,
-			disabled-color: inherit,
+			close: (
+				color: theme-color-level(warning, 6),
+				hover: (
+					color: inherit,
+				),
+				focus: (
+					color: inherit,
+				),
+				disabled: (
+					color: inherit,
+				),
+			),
 		),
 	),
 	$modal-warning
@@ -316,14 +340,22 @@ $modal-warning: map-deep-merge(
 $modal-danger: () !default;
 $modal-danger: map-deep-merge(
 	(
-		header-bg: theme-color-level(danger, -10),
-		header-border-color: theme-color-level(danger, -9),
-		header-color: theme-color-level(danger, 6),
-		header-close: (
+		modal-header: (
+			background-color: theme-color-level(danger, -10),
+			border-color: theme-color-level(danger, -9),
 			color: theme-color-level(danger, 6),
-			hover-color: inherit,
-			focus-color: inherit,
-			disabled-color: inherit,
+			close: (
+				color: theme-color-level(danger, 6),
+				hover: (
+					color: inherit,
+				),
+				focus: (
+					color: inherit,
+				),
+				disabled: (
+					color: inherit,
+				),
+			),
 		),
 	),
 	$modal-danger

package/src/scss/variables/_multi-step-nav.scss

@@ -69,7 +69,11 @@ $multi-step-icon-complete-bg-size: $multi-step-icon-font-size !default;
 $multi-step-divider-complete-bg: $multi-step-icon-complete-bg !default;
 $multi-step-dropdown-indicator-complete-icon: clay-icon(
 	check,
-	$dropdown-link-active-color
+	if(
+		variable-exists(dropdown-link-active-color),
+		$dropdown-link-active-color,
+		$component-active-color
+	)
 ) !default;
 $multi-step-dropdown-indicator-complete-width: 0.875rem !default;
 

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

@@ -3,7 +3,8 @@ $navigation-bar-size: map-deep-merge(
 	(
 		scaling-navbar: false,
 		border-bottom-width: 0.0625rem,
-		font-size: $navbar-font-size,
+		font-size:
+			if(variable-exists(navbar-font-size), $navbar-font-size, null),
 		height: 3rem,
 		padding-x: 0,
 		padding-y: 0,
@@ -33,15 +34,35 @@ $navigation-bar-light: map-deep-merge(
 		background-color: $light,
 		navbar-nav: (
 			nav-link: (
-				color: $navbar-light-color,
+				color:
+					if(
+						variable-exists(navbar-light-color),
+						$navbar-light-color,
+						rgba($black, 0.5)
+					),
 				hover: (
-					color: $navbar-light-hover-color,
+					color:
+						if(
+							variable-exists(navbar-light-hover-color),
+							$navbar-light-hover-color,
+							rgba($black, 0.7)
+						),
 				),
 				active: (
-					color: $navbar-light-active-color,
+					color:
+						if(
+							variable-exists(navbar-light-active-color),
+							$navbar-light-active-color,
+							rgba($black, 0.9)
+						),
 				),
 				disabled: (
-					color: $navbar-light-disabled-color,
+					color:
+						if(
+							variable-exists(navbar-light-disabled-color),
+							$navbar-light-disabled-color,
+							rgba($black, 0.3)
+						),
 					opacity: 1,
 				),
 			),
@@ -52,15 +73,41 @@ $navigation-bar-light: map-deep-merge(
 					navbar-collapse: (
 						navbar-nav: (
 							dropdown-item: (
-								color: $navbar-light-color,
+								color:
+									if(
+										variable-exists(navbar-light-color),
+										$navbar-light-color,
+										rgba($black, 0.5)
+									),
 								hover: (
-									color: $navbar-light-hover-color,
+									color:
+										if(
+											variable-exists(
+												navbar-light-hover-color
+											),
+											$navbar-light-hover-color,
+											rgba($black, 0.7)
+										),
 								),
 								active: (
-									color: $navbar-light-active-color,
+									color:
+										if(
+											variable-exists(
+												navbar-light-active-color
+											),
+											$navbar-light-active-color,
+											rgba($black, 0.9)
+										),
 								),
 								disabled: (
-									color: $navbar-light-disabled-color,
+									color:
+										if(
+											variable-exists(
+												navbar-light-disabled-color
+											),
+											$navbar-light-disabled-color,
+											rgba($black, 0.3)
+										),
 									opacity: 1,
 								),
 							),

package/src/scss/variables/_panels.scss

@@ -114,11 +114,11 @@ $panel-group-sm: () !default;
 $panel-group-sm: map-deep-merge(
 	(
 		font-size: 0.875rem,
-		header: (
+		panel-header: (
 			padding-bottom: 0.5rem,
 			padding-top: 0.5rem,
 		),
-		title: (
+		panel-title: (
 			font-size: 0.875rem,
 		),
 		collapse-icon: (
@@ -150,7 +150,7 @@ $panel-group-flush-panel-unstyled: () !default;
 $panel-group-flush-panel-unstyled: map-deep-merge(
 	(
 		margin-bottom: 1.5rem,
-		body: (
+		panel-body: (
 			margin-bottom: 0,
 		),
 	),
@@ -165,12 +165,12 @@ $panel-secondary: () !default;
 $panel-secondary: map-deep-merge(
 	(
 		border-color: rgba($black, 0.125),
-		header: (
+		panel-header: (
 			background-color: $gray-100,
 			border-color: rgba($black, 0.125),
 			link: $panel-secondary-header-link,
 		),
-		footer: (
+		panel-footer: (
 			background-color: $gray-100,
 			border-color: rgba($black, 0.125),
 		),
@@ -189,7 +189,7 @@ $panel-unstyled: map-deep-merge(
 		border-radius: 0px,
 		border-width: 0px,
 		margin-bottom: 1.5rem,
-		header: (
+		panel-header: (
 			border-color: $gray-500,
 			border-radius: 0px,
 			border-style: solid,
@@ -203,10 +203,10 @@ $panel-unstyled: map-deep-merge(
 		collapse-icon: (
 			right: 0,
 		),
-		body: (
+		panel-body: (
 			padding: 1rem 0 0.1px 0,
 		),
-		footer: (
+		panel-footer: (
 			padding: 1rem 0 0.1px 0,
 		),
 	),

package/src/scss/variables/_progress-bars.scss

@@ -66,20 +66,36 @@ $progress-palette: () !default;
 $progress-palette: map-deep-merge(
 	(
 		success: (
-			bar-bg: $progress-bar-success-bg,
-			group-feedback-color: $progress-group-feedback-success-color,
+			progress-bar: (
+				background-color: $progress-bar-success-bg,
+			),
+			progress-group-feedback: (
+				color: $progress-group-feedback-success-color,
+			),
 		),
 		info: (
-			bar-bg: $progress-bar-info-bg,
-			group-feedback-color: $progress-group-feedback-info-color,
+			progress-bar: (
+				background-color: $progress-bar-info-bg,
+			),
+			progress-group-feedback: (
+				color: $progress-group-feedback-info-color,
+			),
 		),
 		warning: (
-			bar-bg: $progress-bar-warning-bg,
-			group-feedback-color: $progress-group-feedback-warning-color,
+			progress-bar: (
+				background-color: $progress-bar-warning-bg,
+			),
+			progress-group-feedback: (
+				color: $progress-group-feedback-warning-color,
+			),
 		),
 		danger: (
-			bar-bg: $progress-bar-danger-bg,
-			group-feedback-color: $progress-group-feedback-danger-color,
+			progress-bar: (
+				background-color: $progress-bar-danger-bg,
+			),
+			progress-group-feedback: (
+				color: $progress-group-feedback-danger-color,
+			),
 		),
 	),
 	$progress-palette

package/src/scss/variables/_range.scss

@@ -1,7 +1,7 @@
 $clay-range-disabled-color: $gray-600 !default;
 
 $clay-range-input-group: () !default;
-$clay-range-input-group: map-deep-merge(
+$clay-range-input-group: map-merge(
 	(
 		align-items: center,
 	),
@@ -9,7 +9,7 @@ $clay-range-input-group: map-deep-merge(
 );
 
 $clay-range-input-group-item: () !default;
-$clay-range-input-group-item: map-deep-merge(
+$clay-range-input-group-item: map-merge(
 	(
 		flex-direction: column,
 	),
@@ -17,9 +17,10 @@ $clay-range-input-group-item: map-deep-merge(
 );
 
 $clay-range-input-group-text: () !default;
-$clay-range-input-group-text: map-deep-merge(
+$clay-range-input-group-text: map-merge(
 	(
-		bg: transparent,
+		background-color:
+			setter(map-get($clay-range-input-group-text, bg), transparent),
 		border-width: 0px,
 		color: $body-color,
 		font-size: 0.875rem,
@@ -119,7 +120,7 @@ $clay-range-input: map-deep-merge(
 		form-control-range: (
 			appearance: none,
 			background-color: transparent,
-			height: $input-height,
+			height: if(variable-exists(input-height), $input-height, 2.375rem),
 			margin: 0,
 			padding: 0,
 			position: relative,

package/src/scss/variables/_reorder.scss

@@ -14,8 +14,10 @@ $clay-reorder-input-inset: map-deep-merge(
 		margin-bottom: 0,
 		margin-top: 0,
 		overflow: auto,
-		padding-bottom: $input-padding-y,
-		padding-top: $input-padding-y,
+		padding-bottom:
+			if(variable-exists(input-padding-y), $input-padding-y, 0.375rem),
+		padding-top:
+			if(variable-exists(input-padding-y), $input-padding-y, 0.375rem),
 		width: 100%,
 		focus: (
 			background-color: transparent,
@@ -41,9 +43,20 @@ $clay-reorder-underlay: map-deep-merge(
 $clay-reorder-underlay-focus: () !default;
 $clay-reorder-underlay-focus: map-deep-merge(
 	(
-		background-color: $input-focus-bg,
-		border-color: $input-focus-border-color,
-		box-shadow: $input-focus-box-shadow,
+		background-color:
+			if(variable-exists(input-focus-bg), $input-focus-bg, $white),
+		border-color:
+			if(
+				variable-exists(input-focus-border-color),
+				$input-focus-border-color,
+				$gray-700
+			),
+		box-shadow:
+			if(
+				variable-exists(input-focus-box-shadow),
+				$input-focus-box-shadow,
+				$component-focus-box-shadow
+			),
 	),
 	$clay-reorder-underlay-focus
 );

package/src/scss/variables/_sidebar.scss

@@ -73,7 +73,7 @@ $sidebar-list-group-autofit-col-padding-y: 1rem !default; // 16px
 
 $sidebar-list-group-sticker-size: () !default;
 $sidebar-list-group-sticker-size: map-deep-merge(
-	$sticker-sm,
+	if(variable-exists(sticker-sm), $sticker-sm, ()),
 	$sidebar-list-group-sticker-size
 );
 
@@ -86,15 +86,35 @@ $sidebar-light-navigation-bar: map-deep-merge(
 		border-color: $gray-300,
 		navbar-nav: (
 			nav-link: (
-				color: $navbar-light-color,
+				color:
+					if(
+						variable-exists(navbar-light-color),
+						$navbar-light-color,
+						rgba($black, 0.5)
+					),
 				hover: (
-					color: $navbar-light-hover-color,
+					color:
+						if(
+							variable-exists(navbar-light-hover-color),
+							$navbar-light-hover-color,
+							rgba($black, 0.7)
+						),
 				),
 				active: (
-					color: $navbar-light-active-color,
+					color:
+						if(
+							variable-exists(navbar-light-active-color),
+							$navbar-light-active-color,
+							rgba($black, 0.9)
+						),
 				),
 				disabled: (
-					color: $navbar-light-disabled-color,
+					color:
+						if(
+							variable-exists(navbar-light-disabled-color),
+							$navbar-light-disabled-color,
+							rgba($black, 0.3)
+						),
 				),
 			),
 		),

package/src/scss/variables/_stickers.scss

@@ -4,7 +4,7 @@ $sticker-border-color: null !default;
 $sticker-border-radius: $border-radius !default;
 $sticker-border-style: null !default;
 $sticker-border-width: null !default;
-$sticker-color: $label-color !default;
+$sticker-color: $gray-900 !default;
 $sticker-font-size: 0.875rem !default; // 14px
 $sticker-font-weight: $font-weight-semi-bold !default;
 $sticker-size: 2rem !default; // 32px