@clayui/css 3.78.0 → 3.82.0

package/src/scss/cadmin/components/_alerts.scss

@@ -9,7 +9,7 @@
 }
 
 .alert-footer {
-	@include clay-container($cadmin-alert-footer);
+	@include clay-css($cadmin-alert-footer);
 }
 
 .alert-link,

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

@@ -9,13 +9,11 @@
 		}
 
 		> .input-group-inset-item-before {
-			@include clay-container(
-				$cadmin-clay-color-input-group-inset-item-before
-			);
+			@include clay-css($cadmin-clay-color-input-group-inset-item-before);
 		}
 
 		> .input-group-text {
-			@include clay-container($cadmin-clay-color-input-group-text);
+			@include clay-css($cadmin-clay-color-input-group-text);
 		}
 	}
 }
@@ -42,11 +40,11 @@
 	}
 
 	.form-group {
-		@include clay-container($cadmin-clay-color-dropdown-menu-form-group);
+		@include clay-css($cadmin-clay-color-dropdown-menu-form-group);
 	}
 
 	.input-group .input-group-inset-item-before {
-		@include clay-container(
+		@include clay-css(
 			$cadmin-clay-color-dropdown-menu-input-group-inset-item-before
 		);
 	}
@@ -71,7 +69,7 @@
 // Clay Color Header
 
 .clay-color-header {
-	@include clay-container($cadmin-clay-color-header);
+	@include clay-css($cadmin-clay-color-header);
 
 	.component-title {
 		@include clay-title($cadmin-clay-color-header-component-title);
@@ -81,13 +79,13 @@
 // Clay Color Footer
 
 .clay-color-footer {
-	@include clay-container($cadmin-clay-color-footer);
+	@include clay-css($cadmin-clay-color-footer);
 }
 
 // Clay Color Swatch
 
 .clay-color-swatch {
-	@include clay-row($cadmin-clay-color-swatch);
+	@include clay-css($cadmin-clay-color-swatch);
 
 	+ .clay-color-swatch {
 		margin-top: 0;
@@ -95,24 +93,21 @@
 }
 
 .clay-color-swatch-item {
-	@include clay-container($cadmin-clay-color-swatch-item);
+	@include clay-css($cadmin-clay-color-swatch-item);
 }
 
 // Clay Color Map Group
 
 .clay-color-map-group {
-	@include clay-container($cadmin-clay-color-map-group);
+	@include clay-css($cadmin-clay-color-map-group);
 }
 
 .clay-color-map {
-	@include clay-container($cadmin-clay-color-map);
+	@include clay-css($cadmin-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($cadmin-clay-color-map-hsb);
+	@include clay-css($cadmin-clay-color-map-hsb);
 }
 
 .clay-color-map-pointer {
@@ -122,27 +117,27 @@
 // Clay Color Map Values
 
 .clay-color-map-values {
-	@include clay-container($cadmin-clay-color-map-values);
+	@include clay-css($cadmin-clay-color-map-values);
 
 	.form-control {
 		@include clay-form-control-variant($cadmin-clay-color-map-values-input);
 	}
 
 	.input-group .input-group-inset-item-before {
-		@include clay-container(
+		@include clay-css(
 			$cadmin-clay-color-map-values-input-group-inset-item-before
 		);
 	}
 
 	.form-group {
-		@include clay-container($cadmin-clay-color-map-values-form-group);
+		@include clay-css($cadmin-clay-color-map-values-form-group);
 	}
 }
 
 // Clay Color Range
 
 .clay-color-range {
-	@include clay-container($cadmin-clay-color-range);
+	@include clay-css($cadmin-clay-color-range);
 }
 
 .clay-color-range-hue {

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

@@ -79,7 +79,15 @@
 }
 
 .custom-control-label {
-	@include clay-container($cadmin-custom-control-label);
+	@include clay-css($cadmin-custom-control-label);
+
+	&::before {
+		@include clay-css(map-get($cadmin-custom-control-label, before));
+	}
+
+	&::after {
+		@include clay-css(map-get($cadmin-custom-control-label, after));
+	}
 }
 
 label.custom-control-label {
@@ -87,11 +95,19 @@ label.custom-control-label {
 }
 
 .custom-control-label-text {
-	@include clay-container($cadmin-custom-control-label-text);
+	@include clay-css($cadmin-custom-control-label-text);
+
+	&::before {
+		@include clay-css(map-get($cadmin-custom-control-label-text, before));
+	}
+
+	&::after {
+		@include clay-css(map-get($cadmin-custom-control-label-text, after));
+	}
 
 	small,
 	.small {
-		@include clay-container($cadmin-custom-control-label-text-small);
+		@include clay-css($cadmin-custom-control-label-text-small);
 	}
 }
 
@@ -99,7 +115,19 @@ label.custom-control-label {
 
 .custom-control-primary {
 	.custom-control-label-text {
-		@include clay-container($cadmin-custom-control-primary-label-text);
+		@include clay-css($cadmin-custom-control-primary-label-text);
+
+		&::before {
+			@include clay-css(
+				map-get($cadmin-custom-control-primary-label-text, before)
+			);
+		}
+
+		&::after {
+			@include clay-css(
+				map-get($cadmin-custom-control-primary-label-text, after)
+			);
+		}
 	}
 }
 

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

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

package/src/scss/cadmin/components/_forms.scss

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

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

@@ -493,10 +493,10 @@
 
 .list-group-sm {
 	.list-group-item {
-		@include clay-container($cadmin-list-group-sm-item);
+		@include clay-css($cadmin-list-group-sm-item);
 	}
 
 	.quick-action-menu {
-		@include clay-container($cadmin-list-group-sm-quick-action-menu);
+		@include clay-css($cadmin-list-group-sm-quick-action-menu);
 	}
 }

package/src/scss/cadmin/components/_modals.scss

@@ -482,12 +482,10 @@
 	}
 
 	.modal-content {
-		@include clay-container($cadmin-modal-height-full-modal-content);
+		@include clay-css($cadmin-modal-height-full-modal-content);
 
 		@include media-breakpoint-up(sm, $cadmin-grid-breakpoints) {
-			@include clay-container(
-				$cadmin-modal-height-full-modal-content-sm-up
-			);
+			@include clay-css($cadmin-modal-height-full-modal-content-sm-up);
 		}
 	}
 }

package/src/scss/cadmin/components/_range.scss

@@ -2,15 +2,15 @@
 	padding-bottom: 0.1px;
 
 	.input-group {
-		@include clay-container($cadmin-clay-range-input-group);
+		@include clay-css($cadmin-clay-range-input-group);
 	}
 
 	.input-group-item {
-		@include clay-container($cadmin-clay-range-input-group-item);
+		@include clay-css($cadmin-clay-range-input-group-item);
 	}
 
 	.input-group-text {
-		@include clay-container($cadmin-clay-range-input-group-text);
+		@include clay-css($cadmin-clay-range-input-group-text);
 	}
 
 	&.disabled {

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/components/_utilities.scss

@@ -324,6 +324,28 @@
 	background-color: $cadmin-page-header-bg;
 }
 
+// Clay Gap
+
+@each $breakpoint in map-keys($cadmin-grid-breakpoints) {
+	@include media-breakpoint-up($breakpoint) {
+		$infix: breakpoint-infix($breakpoint, $cadmin-grid-breakpoints);
+
+		@each $size, $length in $cadmin-c-gap {
+			.c-gap#{$infix}-#{$size} {
+				gap: $length;
+			}
+
+			.c-gapx#{$infix}-#{$size} {
+				column-gap: $length;
+			}
+
+			.c-gapy#{$infix}-#{$size} {
+				row-gap: $length;
+			}
+		}
+	}
+}
+
 // Clay Margin and Padding
 
 @each $cadmin-breakpoint in map-keys($cadmin-grid-breakpoints) {

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

@@ -374,9 +374,15 @@ $cadmin-card-interactive-after-highlight: map-deep-merge(
 		position: absolute,
 		right: math-sign($cadmin-card-border-width),
 		transition: height 0.15s ease-out,
-		hover-height: 4px,
-		focus-height: 4px,
-		active-height: 4px,
+		hover: (
+			height: 4px,
+		),
+		focus: (
+			height: 4px,
+		),
+		active: (
+			height: 4px,
+		),
 	),
 	$cadmin-card-interactive-after-highlight
 );
@@ -395,10 +401,17 @@ $cadmin-card-interactive: map-deep-merge(
 		cursor: $cadmin-link-cursor,
 		outline: 0,
 		transition: $cadmin-component-transition,
-		hover-bg: #f7f8f9,
-		hover-text-decoration: none,
-		focus-box-shadow: 0 0 0 2px #FFF#{','} 0 0 0 4px #719aff,
-		active-bg: #f1f2f5,
+		hover: (
+			background-color: #f7f8f9,
+			text-decoration: none,
+		),
+		focus: (
+			box-shadow: #{0 0 0 2px #fff,
+			0 0 0 4px #719aff},
+		),
+		active: (
+			background-color: #f1f2f5,
+		),
 		after-highlight: $cadmin-card-interactive-after-highlight,
 		card-body: $cadmin-card-interactive-card-body,
 	),
@@ -410,9 +423,15 @@ $cadmin-card-interactive: map-deep-merge(
 $cadmin-card-interactive-primary-after-highlight: () !default;
 $cadmin-card-interactive-primary-after-highlight: map-deep-merge(
 	(
-		hover-bg: $cadmin-component-active-bg,
-		focus-bg: $cadmin-component-active-bg,
-		active-bg: $cadmin-component-active-bg,
+		hover: (
+			background-color: $cadmin-component-active-bg,
+		),
+		focus: (
+			background-color: $cadmin-component-active-bg,
+		),
+		active: (
+			background-color: $cadmin-component-active-bg,
+		),
 	),
 	$cadmin-card-interactive-primary-after-highlight
 );
@@ -420,8 +439,12 @@ $cadmin-card-interactive-primary-after-highlight: map-deep-merge(
 $cadmin-card-interactive-primary: () !default;
 $cadmin-card-interactive-primary: map-deep-merge(
 	(
-		focus-bg: $cadmin-gray-100,
-		active-bg: $cadmin-gray-200,
+		focus: (
+			background-color: $cadmin-gray-100,
+		),
+		active: (
+			background-color: $cadmin-gray-200,
+		),
 		after-highlight: $cadmin-card-interactive-primary-after-highlight,
 	),
 	$cadmin-card-interactive-primary
@@ -433,13 +456,19 @@ $cadmin-card-interactive-secondary: () !default;
 $cadmin-card-interactive-secondary: map-deep-merge(
 	(
 		color: $cadmin-gray-900,
-		hover-color: $cadmin-gray-900,
-		hover-bg: $cadmin-white,
-		hover-border-color: transparent,
-		hover-box-shadow: 0 0 0 2px #719aff,
-		focus-border-color: transparent,
-		focus-box-shadow: 0 0 0 2px #719aff,
-		active-bg: $cadmin-white,
+		hover: (
+			background-color: $cadmin-white,
+			border-color: transparent,
+			box-shadow: 0 0 0 2px #719aff,
+			color: $cadmin-gray-900,
+		),
+		focus: (
+			border-color: transparent,
+			box-shadow: 0 0 0 2px #719aff,
+		),
+		active: (
+			background-color: $cadmin-white,
+		),
 	),
 	$cadmin-card-interactive-secondary
 );

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,
@@ -90,10 +94,18 @@ $cadmin-clay-color-dropdown-menu-close: map-deep-merge(
 		color: $cadmin-gray-600,
 		font-size: 16px,
 		opacity: 1,
-		hover-bg: rgba($cadmin-gray-900, 0.03),
-		focus-bg: rgba($cadmin-gray-900, 0.03),
-		active-bg: rgba($cadmin-gray-900, 0.06),
-		disabled-bg: transparent,
+		hover: (
+			background-color: rgba($cadmin-gray-900, 0.03),
+		),
+		focus: (
+			background-color: rgba($cadmin-gray-900, 0.03),
+		),
+		active: (
+			background-color: rgba($cadmin-gray-900, 0.06),
+		),
+		disabled: (
+			background-color: transparent,
+		),
 	),
 	$cadmin-clay-color-dropdown-menu-close
 );
@@ -105,7 +117,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 +129,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,
@@ -160,7 +172,7 @@ $cadmin-clay-color-btn-bordered: map-deep-merge(
 $cadmin-clay-color-pointer: () !default;
 $cadmin-clay-color-pointer: map-deep-merge(
 	(
-		bg: transparent,
+		background-color: transparent,
 		border-radius: 100px,
 		border-color: $cadmin-white,
 		border-style: solid,
@@ -173,8 +185,10 @@ $cadmin-clay-color-pointer: map-deep-merge(
 		position: absolute,
 		transition: box-shadow 0.15s ease-in-out,
 		width: 14px,
-		focus-box-shadow: 0 0 0 2px $cadmin-primary-l1,
-		focus-outline: 0,
+		focus: (
+			box-shadow: 0 0 0 2px $cadmin-primary-l1,
+			outline: 0,
+		),
 	),
 	$cadmin-clay-color-pointer
 );
@@ -182,7 +196,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 +223,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 +233,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 +242,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 +257,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 +272,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 +311,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,
 	),