@clayui/css 3.78.0 → 3.82.0

package/src/scss/cadmin/variables/_date-picker.scss

@@ -31,15 +31,23 @@ $cadmin-date-picker-nav-btn: map-deep-merge(
 	(
 		color: $cadmin-gray-600,
 		transition: $cadmin-component-transition,
-		hover-bg: $cadmin-gray-200,
-		hover-color: $cadmin-gray-900,
-		focus-bg: $cadmin-gray-200,
-		focus-box-shadow: $cadmin-component-focus-box-shadow,
-		focus-color: $cadmin-gray-900,
-		active-bg: $cadmin-gray-200,
-		disabled-bg: transparent,
-		disabled-box-shadow: none,
-		disabled-color: $cadmin-gray-500,
+		hover: (
+			background-color: $cadmin-gray-200,
+			color: $cadmin-gray-900,
+		),
+		focus: (
+			background-color: $cadmin-gray-200,
+			box-shadow: $cadmin-component-focus-box-shadow,
+			color: $cadmin-gray-900,
+		),
+		active: (
+			background-color: $cadmin-gray-200,
+		),
+		disabled: (
+			background-color: transparent,
+			box-shadow: none,
+			color: $cadmin-gray-500,
+		),
 	),
 	$cadmin-date-picker-nav-btn
 );
@@ -150,7 +158,7 @@ $cadmin-date-picker-day: map-deep-merge(
 // Date Picker Calendar
 
 $cadmin-date-picker-calendar-container: () !default;
-$cadmin-date-picker-calendar-container: map-deep-merge(
+$cadmin-date-picker-calendar-container: map-merge(
 	(
 		float: left,
 		min-width: 100%,
@@ -159,7 +167,7 @@ $cadmin-date-picker-calendar-container: map-deep-merge(
 );
 
 $cadmin-date-picker-calendar-header-container: () !default;
-$cadmin-date-picker-calendar-header-container: map-deep-merge(
+$cadmin-date-picker-calendar-header-container: map-merge(
 	(
 		padding-bottom: 16px,
 		padding-left: 16px,
@@ -170,7 +178,7 @@ $cadmin-date-picker-calendar-header-container: map-deep-merge(
 );
 
 $cadmin-date-picker-calendar-body-container: () !default;
-$cadmin-date-picker-calendar-body-container: map-deep-merge(
+$cadmin-date-picker-calendar-body-container: map-merge(
 	(
 		padding-left: 16px,
 		padding-right: 16px,
@@ -180,7 +188,7 @@ $cadmin-date-picker-calendar-body-container: map-deep-merge(
 );
 
 $cadmin-date-picker-calendar-footer-container: () !default;
-$cadmin-date-picker-calendar-footer-container: map-deep-merge(
+$cadmin-date-picker-calendar-footer-container: map-merge(
 	(
 		border-color: $cadmin-gray-400,
 		border-style: solid,
@@ -199,7 +207,8 @@ $cadmin-date-picker-calendar-item: () !default;
 $cadmin-date-picker-calendar-item: map-deep-merge(
 	(
 		align-items: center,
-		bg: transparent,
+		background-color:
+			setter(map-get($cadmin-date-picker-calendar-item, bg) transparent),
 		border-width: 0,
 		disabled-cursor: $cadmin-disabled-cursor,
 		display: inline-flex,
@@ -230,17 +239,25 @@ $cadmin-date-picker-date: map-deep-merge(
 		color: $cadmin-gray-600,
 		cursor: $cadmin-link-cursor,
 		position: relative,
-		hover-bg: $cadmin-gray-200,
-		hover-color: $cadmin-gray-900,
-		focus-bg: $cadmin-gray-200,
-		focus-box-shadow: $cadmin-component-focus-box-shadow,
-		focus-color: $cadmin-gray-900,
-		focus-outline: 0,
-		active-bg: $cadmin-component-active-bg,
-		active-color: $cadmin-component-active-color,
-		disabled-bg: transparent,
-		disabled-box-shadow: none,
-		disabled-color: $cadmin-gray-500,
+		hover: (
+			background-color: $cadmin-gray-200,
+			color: $cadmin-gray-900,
+		),
+		focus: (
+			background-color: $cadmin-gray-200,
+			box-shadow: $cadmin-component-focus-box-shadow,
+			color: $cadmin-gray-900,
+			outline: 0,
+		),
+		active: (
+			background-color: $cadmin-component-active-bg,
+			color: $cadmin-component-active-color,
+		),
+		disabled: (
+			background-color: transparent,
+			box-shadow: none,
+			color: $cadmin-gray-500,
+		),
 	),
 	$cadmin-date-picker-date
 );
@@ -266,7 +283,10 @@ $cadmin-date-picker-next-month-date: map-deep-merge(
 $cadmin-date-picker-input-group-text: () !default;
 $cadmin-date-picker-input-group-text: map-deep-merge(
 	(
-		bg: transparent,
+		background-color:
+			setter(
+				map-get($cadmin-date-picker-input-group-text, bg) transparent
+			),
 		border-color: transparent,
 		min-width: 32px,
 		padding-left: 4px,

package/src/scss/cadmin/variables/_forms.scss

@@ -388,7 +388,7 @@ $cadmin-form-control-inset: map-deep-merge(
 );
 
 $cadmin-form-control-tag-group: () !default;
-$cadmin-form-control-tag-group: map-deep-merge(
+$cadmin-form-control-tag-group: map-merge(
 	(
 		align-items: center,
 		color: $cadmin-secondary,
@@ -404,7 +404,7 @@ $cadmin-form-control-tag-group: map-deep-merge(
 );
 
 $cadmin-form-control-tag-group-autofit-row: () !default;
-$cadmin-form-control-tag-group-autofit-row: map-deep-merge(
+$cadmin-form-control-tag-group-autofit-row: map-merge(
 	(
 		align-items: center,
 		flex-grow: 1,
@@ -416,7 +416,7 @@ $cadmin-form-control-tag-group-autofit-row: map-deep-merge(
 );
 
 $cadmin-form-control-tag-group-autofit-col: () !default;
-$cadmin-form-control-tag-group-autofit-col: map-deep-merge(
+$cadmin-form-control-tag-group-autofit-col: map-merge(
 	(
 		padding-left: 8px,
 		padding-right: 8px,
@@ -425,7 +425,7 @@ $cadmin-form-control-tag-group-autofit-col: map-deep-merge(
 );
 
 $cadmin-form-control-tag-group-input-group-item: () !default;
-$cadmin-form-control-tag-group-input-group-item: map-deep-merge(
+$cadmin-form-control-tag-group-input-group-item: map-merge(
 	(
 		align-items: center,
 	),
@@ -433,7 +433,7 @@ $cadmin-form-control-tag-group-input-group-item: map-deep-merge(
 );
 
 $cadmin-form-control-tag-group-inline-item: () !default;
-$cadmin-form-control-tag-group-inline-item: map-deep-merge(
+$cadmin-form-control-tag-group-inline-item: map-merge(
 	(
 		height: $cadmin-form-control-inset-min-height,
 		margin-bottom: $cadmin-form-control-inset-margin-y,

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

@@ -243,7 +243,7 @@ $cadmin-list-group-notification-item-primary: map-deep-merge(
 // List Group Sm
 
 $cadmin-list-group-sm-item: () !default;
-$cadmin-list-group-sm-item: map-deep-merge(
+$cadmin-list-group-sm-item: map-merge(
 	(
 		padding-bottom: 6.5px,
 		padding-top: 6.5px,
@@ -252,7 +252,7 @@ $cadmin-list-group-sm-item: map-deep-merge(
 );
 
 $cadmin-list-group-sm-quick-action-menu: () !default;
-$cadmin-list-group-sm-quick-action-menu: map-deep-merge(
+$cadmin-list-group-sm-quick-action-menu: map-merge(
 	(
 		margin-bottom: -6.5px,
 		margin-top: -6.5px,

package/src/scss/cadmin/variables/_modals.scss

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

package/src/scss/cadmin/variables/_range.scss

@@ -1,7 +1,7 @@
 $cadmin-clay-range-disabled-color: $cadmin-gray-500 !default;
 
 $cadmin-clay-range-input-group: () !default;
-$cadmin-clay-range-input-group: map-deep-merge(
+$cadmin-clay-range-input-group: map-merge(
 	(
 		align-items: center,
 	),
@@ -9,7 +9,7 @@ $cadmin-clay-range-input-group: map-deep-merge(
 );
 
 $cadmin-clay-range-input-group-item: () !default;
-$cadmin-clay-range-input-group-item: map-deep-merge(
+$cadmin-clay-range-input-group-item: map-merge(
 	(
 		flex-direction: column,
 	),
@@ -17,9 +17,13 @@ $cadmin-clay-range-input-group-item: map-deep-merge(
 );
 
 $cadmin-clay-range-input-group-text: () !default;
-$cadmin-clay-range-input-group-text: map-deep-merge(
+$cadmin-clay-range-input-group-text: map-merge(
 	(
-		bg: transparent,
+		background-color:
+			setter(
+				map-get($cadmin-clay-range-input-group-text, bg),
+				transparent
+			),
 		border-width: 0,
 		color: $cadmin-gray-500,
 		font-size: 14px,

package/src/scss/cadmin/variables/_sheets.scss

@@ -125,11 +125,15 @@ $cadmin-sheet-subtitle-link: map-deep-merge(
 		color: $cadmin-sheet-subtitle-link-color,
 		text-decoration: $cadmin-sheet-subtitle-link-text-decoration,
 		transition: box-shadow 0.15s ease-in-out,
-		hover-color: $cadmin-sheet-subtitle-link-hover-color,
-		hover-text-decoration: $cadmin-sheet-subtitle-link-hover-text-decoration,
-		focus-box-shadow: #{0 0 0 4px $cadmin-white,
-		0 0 0 6px $cadmin-primary-l1},
-		focus-outline: 0,
+		hover: (
+			color: $cadmin-sheet-subtitle-link-hover-color,
+			text-decoration: $cadmin-sheet-subtitle-link-hover-text-decoration,
+		),
+		focus: (
+			box-shadow: #{0 0 0 4px $cadmin-white,
+			0 0 0 6px $cadmin-primary-l1},
+			outline: 0,
+		),
 	),
 	$cadmin-sheet-subtitle-link
 );