@clayui/css 3.78.0 → 3.81.0

package/src/scss/cadmin/components/_time.scss

@@ -18,7 +18,7 @@
 	}
 
 	.input-group-text {
-		@include clay-container($cadmin-clay-time-input-group-text);
+		@include clay-css($cadmin-clay-time-input-group-text);
 	}
 
 	.clay-time-ampm {
@@ -32,7 +32,7 @@
 }
 
 .clay-time-edit {
-	@include clay-container($cadmin-clay-time-edit);
+	@include clay-css($cadmin-clay-time-edit);
 
 	&:first-child {
 		margin-left: math-sign(map-get($cadmin-clay-time-edit, padding-left));
@@ -59,7 +59,7 @@
 }
 
 .clay-time-inner-spin {
-	@include clay-container($cadmin-clay-time-inner-spin);
+	@include clay-css($cadmin-clay-time-inner-spin);
 
 	.btn {
 		@include clay-button-variant($cadmin-clay-time-inner-spin-btn);

package/src/scss/cadmin/variables/_alerts.scss

@@ -207,7 +207,7 @@ $cadmin-alert-indicator: map-deep-merge(
 // .alert-footer
 
 $cadmin-alert-footer: () !default;
-$cadmin-alert-footer: map-deep-merge(
+$cadmin-alert-footer: map-merge(
 	(
 		margin-top: 16px,
 	),

package/src/scss/cadmin/variables/_clay-color.scss

@@ -1,9 +1,13 @@
 // Clay Color Input Group Text (.clay-color > .input-group-item > .input-group-text)
 
 $cadmin-clay-color-input-group-text: () !default;
-$cadmin-clay-color-input-group-text: map-deep-merge(
+$cadmin-clay-color-input-group-text: map-merge(
 	(
-		bg: $cadmin-white,
+		background-color:
+			setter(
+				map-get($cadmin-clay-color-input-group-text, bg),
+				$cadmin-white
+			),
 		border-color: $cadmin-input-border-color,
 		padding-left: 0,
 		padding-right: 0,
@@ -18,7 +22,7 @@ $cadmin-clay-color-input-group-input: () !default;
 // Clay Color Input Group Inset Item Before (.clay-color > .input-group-item > .input-group-inset-item-before)
 
 $cadmin-clay-color-input-group-inset-item-before: () !default;
-$cadmin-clay-color-input-group-inset-item-before: map-deep-merge(
+$cadmin-clay-color-input-group-inset-item-before: map-merge(
 	(
 		color: $cadmin-gray-600,
 		font-size: inherit,
@@ -47,7 +51,7 @@ $cadmin-clay-color-dropdown-menu: map-deep-merge(
 // Dropdown Menu Form Group
 
 $cadmin-clay-color-dropdown-menu-form-group: () !default;
-$cadmin-clay-color-dropdown-menu-form-group: map-deep-merge(
+$cadmin-clay-color-dropdown-menu-form-group: map-merge(
 	(
 		margin-bottom: 16px,
 	),
@@ -72,7 +76,7 @@ $cadmin-clay-color-dropdown-menu-input: map-deep-merge(
 // Dropdown Menu Input Group Inset Item Before
 
 $cadmin-clay-color-dropdown-menu-input-group-inset-item-before: () !default;
-$cadmin-clay-color-dropdown-menu-input-group-inset-item-before: map-deep-merge(
+$cadmin-clay-color-dropdown-menu-input-group-inset-item-before: map-merge(
 	(
 		color: $cadmin-gray-600,
 		font-size: 14px,
@@ -105,7 +109,7 @@ $cadmin-clay-color-dropdown-menu-component-action: () !default;
 // Clay Color Swatch
 
 $cadmin-clay-color-swatch: () !default;
-$cadmin-clay-color-swatch: map-deep-merge(
+$cadmin-clay-color-swatch: map-merge(
 	(
 		display: flex,
 		flex-wrap: wrap,
@@ -117,7 +121,7 @@ $cadmin-clay-color-swatch: map-deep-merge(
 );
 
 $cadmin-clay-color-swatch-item: () !default;
-$cadmin-clay-color-swatch-item: map-deep-merge(
+$cadmin-clay-color-swatch-item: map-merge(
 	(
 		display: flex,
 		flex-wrap: wrap,
@@ -182,7 +186,7 @@ $cadmin-clay-color-pointer: map-deep-merge(
 // Clay Color Header
 
 $cadmin-clay-color-header: () !default;
-$cadmin-clay-color-header: map-deep-merge(
+$cadmin-clay-color-header: map-merge(
 	(
 		display: flex,
 		justify-content: space-between,
@@ -209,7 +213,7 @@ $cadmin-clay-color-header-component-title: map-deep-merge(
 // Clay Color Footer
 
 $cadmin-clay-color-footer: () !default;
-$cadmin-clay-color-footer: map-deep-merge(
+$cadmin-clay-color-footer: map-merge(
 	(
 		margin-bottom: 16px,
 	),
@@ -219,7 +223,7 @@ $cadmin-clay-color-footer: map-deep-merge(
 // Clay Color Map
 
 $cadmin-clay-color-map-group: () !default;
-$cadmin-clay-color-map-group: map-deep-merge(
+$cadmin-clay-color-map-group: map-merge(
 	(
 		display: flex,
 		margin-top: 8px,
@@ -228,7 +232,7 @@ $cadmin-clay-color-map-group: map-deep-merge(
 );
 
 $cadmin-clay-color-map: () !default;
-$cadmin-clay-color-map: map-deep-merge(
+$cadmin-clay-color-map: map-merge(
 	(
 		flex-shrink: 0,
 		height: 128px,
@@ -243,6 +247,13 @@ $cadmin-clay-color-map: map-deep-merge(
 );
 
 $cadmin-clay-color-map-hsb: () !default;
+$cadmin-clay-color-map-hsb: map-merge(
+	(
+		background-image: #{linear-gradient(to top, #000, rgba(0, 0, 0, 0)),
+		linear-gradient(to right, #fff, rgba(255, 255, 255, 0))},
+	),
+	$cadmin-clay-color-map-hsb
+);
 
 // Clay Color Map Pointer
 
@@ -251,7 +262,7 @@ $cadmin-clay-color-map-pointer: () !default;
 // Clay Color Map Values
 
 $cadmin-clay-color-map-values: () !default;
-$cadmin-clay-color-map-values: map-deep-merge(
+$cadmin-clay-color-map-values: map-merge(
 	(
 		flex-grow: 1,
 		flex-shrink: 1,
@@ -290,7 +301,7 @@ $cadmin-clay-color-map-values-input-group-inset-item-before: map-deep-merge(
 // Clay Color Range
 
 $cadmin-clay-color-range: () !default;
-$cadmin-clay-color-range: map-deep-merge(
+$cadmin-clay-color-range: map-merge(
 	(
 		border-radius: 100px,
 		height: 8px,

package/src/scss/cadmin/variables/_custom-forms.scss

@@ -192,7 +192,7 @@ $cadmin-custom-control-label-text: map-deep-merge(
 // .custom-control-label-text small, .custom-control-label-text .small
 
 $cadmin-custom-control-label-text-small: () !default;
-$cadmin-custom-control-label-text-small: map-deep-merge(
+$cadmin-custom-control-label-text-small: map-merge(
 	(
 		font-size: $cadmin-custom-control-description-small-font-size,
 	),
@@ -319,7 +319,7 @@ $cadmin-custom-control-input: map-deep-merge(
 // Custom Control Primary
 
 $cadmin-custom-control-primary-label-text: () !default;
-$cadmin-custom-control-primary-label-text: map-deep-merge(
+$cadmin-custom-control-primary-label-text: map-merge(
 	(
 		font-weight: $cadmin-font-weight-semi-bold,
 	),

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

@@ -150,7 +150,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 +159,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 +170,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 +180,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,

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/_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/_time.scss

@@ -54,9 +54,10 @@ $cadmin-clay-time-ampm: map-deep-merge(
 );
 
 $cadmin-clay-time-input-group-text: () !default;
-$cadmin-clay-time-input-group-text: map-deep-merge(
+$cadmin-clay-time-input-group-text: map-merge(
 	(
-		bg: transparent,
+		background-color:
+			setter(map-get($cadmin-clay-time-input-group-text, bg), transparent),
 		border-color: transparent,
 		padding-bottom: 0,
 		padding-left: 0,
@@ -70,7 +71,7 @@ $cadmin-clay-time-divider-margin-left: null !default;
 $cadmin-clay-time-divider-margin-right: null !default;
 
 $cadmin-clay-time-edit: () !default;
-$cadmin-clay-time-edit: map-deep-merge(
+$cadmin-clay-time-edit: map-merge(
 	(
 		display: flex,
 		flex-wrap: wrap,
@@ -82,7 +83,7 @@ $cadmin-clay-time-edit: map-deep-merge(
 );
 
 $cadmin-clay-time-inner-spin: () !default;
-$cadmin-clay-time-inner-spin: map-deep-merge(
+$cadmin-clay-time-inner-spin: map-merge(
 	(
 		border-color: $cadmin-secondary-l2,
 		border-radius: 8px,

package/src/scss/components/_alerts.scss

@@ -9,7 +9,7 @@
 }
 
 .alert-footer {
-	@include clay-container($alert-footer);
+	@include clay-css($alert-footer);
 }
 
 .alert-link,
@@ -106,7 +106,11 @@
 .modal-body {
 	.alert {
 		.close {
-			right: $modal-inner-padding;
+			right: if(
+				variable-exists(modal-inner-padding),
+				$modal-inner-padding,
+				null
+			);
 		}
 	}
 

package/src/scss/components/_buttons.scss

@@ -203,5 +203,9 @@ input[type='button'] {
 
 .btn .loading-animation {
 	font-size: 1em;
-	margin-top: $inline-item-lexicon-icon-margin-top;
+	margin-top: if(
+		variable-exists(inline-item-lexicon-icon-margin-top),
+		$inline-item-lexicon-icon-margin-top,
+		null
+	);
 }

package/src/scss/components/_clay-color.scss

@@ -7,11 +7,11 @@
 		}
 
 		> .input-group-inset-item-before {
-			@include clay-container($clay-color-input-group-inset-item-before);
+			@include clay-css($clay-color-input-group-inset-item-before);
 		}
 
 		> .input-group-text {
-			@include clay-container($clay-color-input-group-text);
+			@include clay-css($clay-color-input-group-text);
 		}
 	}
 }
@@ -36,11 +36,11 @@
 	}
 
 	.form-group {
-		@include clay-container($clay-color-dropdown-menu-form-group);
+		@include clay-css($clay-color-dropdown-menu-form-group);
 	}
 
 	.input-group .input-group-inset-item-before {
-		@include clay-container(
+		@include clay-css(
 			$clay-color-dropdown-menu-input-group-inset-item-before
 		);
 	}
@@ -65,7 +65,7 @@
 // Clay Color Header
 
 .clay-color-header {
-	@include clay-container($clay-color-header);
+	@include clay-css($clay-color-header);
 
 	.component-title {
 		@include clay-title($clay-color-header-component-title);
@@ -75,13 +75,13 @@
 // Clay Color Footer
 
 .clay-color-footer {
-	@include clay-container($clay-color-footer);
+	@include clay-css($clay-color-footer);
 }
 
 // Clay Color Swatch
 
 .clay-color-swatch {
-	@include clay-row($clay-color-swatch);
+	@include clay-css($clay-color-swatch);
 
 	+ .clay-color-swatch {
 		margin-top: 0;
@@ -89,24 +89,21 @@
 }
 
 .clay-color-swatch-item {
-	@include clay-container($clay-color-swatch-item);
+	@include clay-css($clay-color-swatch-item);
 }
 
 // Clay Color Map Group
 
 .clay-color-map-group {
-	@include clay-container($clay-color-map-group);
+	@include clay-css($clay-color-map-group);
 }
 
 .clay-color-map {
-	@include clay-container($clay-color-map);
+	@include clay-css($clay-color-map);
 }
 
 .clay-color-map-hsb {
-	background-image: linear-gradient(to top, #000, rgba(0, 0, 0, 0)),
-		linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
-
-	@include clay-container($clay-color-map-hsb);
+	@include clay-css($clay-color-map-hsb);
 }
 
 .clay-color-map-pointer {
@@ -116,27 +113,25 @@
 // Clay Color Map Values
 
 .clay-color-map-values {
-	@include clay-container($clay-color-map-values);
+	@include clay-css($clay-color-map-values);
 
 	.form-control {
 		@include clay-form-control-variant($clay-color-map-values-input);
 	}
 
 	.input-group .input-group-inset-item-before {
-		@include clay-container(
-			$clay-color-map-values-input-group-inset-item-before
-		);
+		@include clay-css($clay-color-map-values-input-group-inset-item-before);
 	}
 
 	.form-group {
-		@include clay-container($clay-color-map-values-form-group);
+		@include clay-css($clay-color-map-values-form-group);
 	}
 }
 
 // Clay Color Range
 
 .clay-color-range {
-	@include clay-container($clay-color-range);
+	@include clay-css($clay-color-range);
 }
 
 .clay-color-range-hue {

package/src/scss/components/_custom-forms.scss

@@ -4,7 +4,11 @@
 }
 
 .form-file-input {
-	cursor: $input-file-cursor;
+	cursor: if(
+		variable-exists(input-file-cursor),
+		$input-file-cursor,
+		$link-cursor
+	);
 	height: 100%;
 	opacity: 0;
 	overflow: hidden;
@@ -13,7 +17,11 @@
 	z-index: 10;
 
 	&::-webkit-file-upload-button {
-		cursor: $input-file-cursor;
+		cursor: if(
+			variable-exists(input-file-cursor),
+			$input-file-cursor,
+			$link-cursor
+		);
 	}
 
 	&:focus {
@@ -52,10 +60,18 @@
 	}
 
 	&:disabled {
-		cursor: $input-disabled-cursor;
+		cursor: if(
+			variable-exists(input-disabled-cursor),
+			$input-disabled-cursor,
+			$disabled-cursor
+		);
 
 		&::-webkit-file-upload-button {
-			cursor: $input-disabled-cursor;
+			cursor: if(
+				variable-exists(input-disabled-cursor),
+				$input-disabled-cursor,
+				$disabled-cursor
+			);
 		}
 	}
 }
@@ -75,7 +91,15 @@
 }
 
 .custom-control-label {
-	@include clay-container($custom-control-label);
+	@include clay-css($custom-control-label);
+
+	&::before {
+		@include clay-css(map-get($custom-control-label, before));
+	}
+
+	&::after {
+		@include clay-css(map-get($custom-control-label, after));
+	}
 }
 
 label.custom-control-label {
@@ -83,11 +107,19 @@ label.custom-control-label {
 }
 
 .custom-control-label-text {
-	@include clay-container($custom-control-label-text);
+	@include clay-css($custom-control-label-text);
+
+	&::before {
+		@include clay-css(map-get($custom-control-label-text, before));
+	}
+
+	&::after {
+		@include clay-css(map-get($custom-control-label-text, after));
+	}
 
 	small,
 	.small {
-		@include clay-container($custom-control-label-text-small);
+		@include clay-css($custom-control-label-text-small);
 	}
 }
 
@@ -95,7 +127,19 @@ label.custom-control-label {
 
 .custom-control-primary {
 	.custom-control-label-text {
-		@include clay-container($custom-control-primary-label-text);
+		@include clay-css($custom-control-primary-label-text);
+
+		&::before {
+			@include clay-css(
+				map-get($custom-control-primary-label-text, before)
+			);
+		}
+
+		&::after {
+			@include clay-css(
+				map-get($custom-control-primary-label-text, after)
+			);
+		}
 	}
 }
 
@@ -240,8 +284,16 @@ label.custom-control-label {
 				// in IE and (under certain conditions) Edge.
 				// See https://github.com/twbs/bootstrap/issues/19398.
 
-				background-color: $input-bg;
-				color: $input-color;
+				background-color: if(
+					variable-exists(input-bg),
+					$input-bg,
+					$white
+				);
+				color: if(
+					variable-exists(input-color),
+					$input-color,
+					$gray-700
+				);
 			}
 		}
 

package/src/scss/components/_date-picker.scss

@@ -47,19 +47,19 @@
 // Date Picker Calendar
 
 .date-picker-calendar {
-	@include clay-container($date-picker-calendar-container);
+	@include clay-css($date-picker-calendar-container);
 }
 
 .date-picker-calendar-header {
-	@include clay-container($date-picker-calendar-header-container);
+	@include clay-css($date-picker-calendar-header-container);
 }
 
 .date-picker-calendar-body {
-	@include clay-container($date-picker-calendar-body-container);
+	@include clay-css($date-picker-calendar-body-container);
 }
 
 .date-picker-calendar-footer {
-	@include clay-container($date-picker-calendar-footer-container);
+	@include clay-css($date-picker-calendar-footer-container);
 }
 
 .date-picker-calendar-item {

package/src/scss/components/_dropdowns.scss

@@ -45,7 +45,11 @@
 	.custom-control {
 		margin-bottom: 0;
 		margin-right: 0;
-		min-height: $custom-control-indicator-size;
+		min-height: if(
+			variable-exists(custom-control-indicator-size),
+			$custom-control-indicator-size,
+			null
+		);
 	}
 }
 

package/src/scss/components/_forms.scss

@@ -180,14 +180,14 @@ div {
 }
 
 .form-control-tag-group {
-	@include clay-container($form-control-tag-group);
+	@include clay-css($form-control-tag-group);
 
 	.autofit-row {
-		@include clay-container($form-control-tag-group-autofit-row);
+		@include clay-css($form-control-tag-group-autofit-row);
 	}
 
 	.autofit-col {
-		@include clay-container($form-control-tag-group-autofit-col);
+		@include clay-css($form-control-tag-group-autofit-col);
 
 		.form-control-inset {
 			width: auto;
@@ -195,11 +195,11 @@ div {
 	}
 
 	.input-group-item {
-		@include clay-container($form-control-tag-group-input-group-item);
+		@include clay-css($form-control-tag-group-input-group-item);
 	}
 
 	.inline-item {
-		@include clay-container($form-control-tag-group-inline-item);
+		@include clay-css($form-control-tag-group-inline-item);
 	}
 
 	.btn {