@clayui/css 3.76.0 → 3.81.0

package/src/scss/variables/_forms.scss

@@ -435,7 +435,7 @@ $form-control-inset: map-deep-merge(
 );
 
 $form-control-tag-group: () !default;
-$form-control-tag-group: map-deep-merge(
+$form-control-tag-group: map-merge(
 	(
 		align-items: center,
 		color: $secondary,
@@ -451,7 +451,7 @@ $form-control-tag-group: map-deep-merge(
 );
 
 $form-control-tag-group-autofit-row: () !default;
-$form-control-tag-group-autofit-row: map-deep-merge(
+$form-control-tag-group-autofit-row: map-merge(
 	(
 		align-items: center,
 		flex-grow: 1,
@@ -463,7 +463,7 @@ $form-control-tag-group-autofit-row: map-deep-merge(
 );
 
 $form-control-tag-group-autofit-col: () !default;
-$form-control-tag-group-autofit-col: map-deep-merge(
+$form-control-tag-group-autofit-col: map-merge(
 	(
 		padding-left: 0.5rem,
 		padding-right: 0.5rem,
@@ -472,7 +472,7 @@ $form-control-tag-group-autofit-col: map-deep-merge(
 );
 
 $form-control-tag-group-input-group-item: () !default;
-$form-control-tag-group-input-group-item: map-deep-merge(
+$form-control-tag-group-input-group-item: map-merge(
 	(
 		align-items: center,
 	),
@@ -480,7 +480,7 @@ $form-control-tag-group-input-group-item: map-deep-merge(
 );
 
 $form-control-tag-group-inline-item: () !default;
-$form-control-tag-group-inline-item: map-deep-merge(
+$form-control-tag-group-inline-item: map-merge(
 	(
 		height: $form-control-inset-min-height,
 		margin-bottom: $form-control-inset-margin-y,

package/src/scss/variables/_links.scss

@@ -224,13 +224,21 @@ $component-title: map-deep-merge(
 		margin-bottom:
 			calc(
 				(
-						#{$dropdown-action-toggle-size} - (1em * #{$headings-line-height})
+						#{if(
+								variable-exists(dropdown-action-toggle-size),
+								$dropdown-action-toggle-size,
+								1.9375rem
+							)} - (1em * #{$headings-line-height})
 					) / 2
 			),
 		margin-top:
 			calc(
 				(
-						#{$dropdown-action-toggle-size} - (1em * #{$headings-line-height})
+						#{if(
+								variable-exists(dropdown-action-toggle-size),
+								$dropdown-action-toggle-size,
+								1.9375rem
+							)} - (1em * #{$headings-line-height})
 					) / 2
 			),
 	),

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/_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/_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

package/src/scss/variables/_tbar.scss

@@ -311,7 +311,12 @@ $subnav-tbar-light: () !default;
 $subnav-tbar-light: map-deep-merge(
 	(
 		bg-color: $light,
-		color: $navbar-light-color,
+		color:
+			if(
+				variable-exists(navbar-light-color),
+				$navbar-light-color,
+				rgba($black, 0.5)
+			),
 		padding-y: 0.125rem,
 	),
 	$subnav-tbar-light

package/src/scss/variables/_time.scss

@@ -56,9 +56,10 @@ $clay-time-ampm: map-deep-merge(
 );
 
 $clay-time-input-group-text: () !default;
-$clay-time-input-group-text: map-deep-merge(
+$clay-time-input-group-text: map-merge(
 	(
-		bg: transparent,
+		background-color:
+			setter(map-get($clay-time-input-group-text, bg), transparent),
 		border-color: transparent,
 		padding-bottom: 0,
 		padding-left: 0,
@@ -72,7 +73,7 @@ $clay-time-divider-margin-left: null !default;
 $clay-time-divider-margin-right: null !default;
 
 $clay-time-edit: () !default;
-$clay-time-edit: map-deep-merge(
+$clay-time-edit: map-merge(
 	(
 		display: flex,
 		flex-wrap: wrap,
@@ -84,7 +85,7 @@ $clay-time-edit: map-deep-merge(
 );
 
 $clay-time-inner-spin: () !default;
-$clay-time-inner-spin: map-deep-merge(
+$clay-time-inner-spin: map-merge(
 	(
 		border-color: $secondary-d1,
 		border-radius: 8px,

package/src/scss/variables/_toggle-switch.scss

@@ -1,5 +1,9 @@
 $toggle-switch-cursor: $link-cursor !default;
-$toggle-switch-font-weight: $input-label-font-weight !default;
+$toggle-switch-font-weight: if(
+	variable-exists(input-label-font-weight),
+	$input-label-font-weight,
+	null
+) !default;
 $toggle-switch-transition: background-color 100ms ease-in,
 	border-color 100ms ease-in, box-shadow 150ms ease-in-out,
 	color 100ms ease-in, left 100ms ease-in, right 100ms ease-in !default;
@@ -17,22 +21,22 @@ $toggle-switch-bar-height-mobile: $toggle-switch-bar-height !default;
 $toggle-switch-bar-width-mobile: $toggle-switch-bar-width !default;
 // must all be same units--end
 
-$toggle-switch-bar-bg: $input-group-addon-bg !default;
-$toggle-switch-bar-border-color: $input-group-addon-border-color !default;
+$toggle-switch-bar-bg: $gray-200 !default;
+$toggle-switch-bar-border-color: $gray-400 !default;
 $toggle-switch-bar-border-radius: 3px !default;
 $toggle-switch-bar-border-width: 1px !default;
-$toggle-switch-bar-focus-box-shadow: $input-btn-focus-box-shadow !default;
+$toggle-switch-bar-focus-box-shadow: $component-focus-box-shadow !default;
 $toggle-switch-bar-font-size: 0.75rem !default; // 12px
 $toggle-switch-bar-font-size-mobile: $toggle-switch-bar-font-size !default;
-$toggle-switch-bar-icon-color: $input-color !default;
+$toggle-switch-bar-icon-color: $gray-700 !default;
 
-$toggle-switch-button-bg: $input-bg !default;
-$toggle-switch-button-border-color: $input-group-addon-border-color !default;
+$toggle-switch-button-bg: $white !default;
+$toggle-switch-button-border-color: $gray-400 !default;
 $toggle-switch-button-border-radius: 3px 0 0 3px !default;
 $toggle-switch-button-border-width: 1px !default;
 $toggle-switch-button-font-size: $toggle-switch-bar-font-size !default;
 $toggle-switch-button-font-size-mobile: $toggle-switch-button-font-size !default; // null
-$toggle-switch-button-icon-color: $input-color !default;
+$toggle-switch-button-icon-color: $gray-700 !default;
 
 // See https://issues.liferay.com/browse/LPS-147457.
 
@@ -64,13 +68,21 @@ $toggle-switch-disabled-opacity: 0.4 !default;
 
 // Toggle Switch Label
 
-$toggle-switch-label-disabled-color: $input-label-disabled-color !default;
+$toggle-switch-label-disabled-color: if(
+	variable-exists(input-label-disabled-color),
+	$input-label-disabled-color,
+	$gray-600
+) !default;
 
 // Toggle Switch Text
 
 $toggle-switch-text-font-size: 0.75rem !default;
 
-$toggle-switch-text-disabled-color: $input-label-disabled-color !default;
+$toggle-switch-text-disabled-color: if(
+	variable-exists(input-label-disabled-color),
+	$input-label-disabled-color,
+	$gray-600
+) !default;
 
 // .toggle-switch