@clayui/css 3.78.0 → 3.82.0

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 {

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

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

package/src/scss/components/_modals.scss

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

package/src/scss/components/_panels.scss

@@ -68,8 +68,16 @@
 	}
 
 	.collapse-icon {
-		padding-left: $collapse-icon-padding-left;
-		padding-right: $collapse-icon-padding-right;
+		padding-left: if(
+			variable-exists(collapse-icon-padding-left),
+			$collapse-icon-padding-left,
+			null
+		);
+		padding-right: if(
+			variable-exists(collapse-icon-padding-right),
+			$collapse-icon-padding-right,
+			2.28125rem
+		);
 	}
 }
 
@@ -201,27 +209,63 @@
 	> .panel-group-fluid,
 	> .panel-group-fluid-first,
 	> .panel-group-fluid-last {
-		margin-left: math-sign($card-spacer-x);
-		margin-right: math-sign($card-spacer-x);
+		margin-left: math-sign(
+			if(variable-exists(card-spacer-x), $card-spacer-x, 1.25rem)
+		);
+		margin-right: math-sign(
+			if(variable-exists(card-spacer-x), $card-spacer-x, 1.25rem)
+		);
 	}
 }
 
 .sheet {
 	> .panel-group-fluid {
-		margin-left: math-sign($sheet-padding-left);
-		margin-right: math-sign($sheet-padding-right);
+		margin-left: math-sign(
+			if(variable-exists(sheet-padding-left), $sheet-padding-left, 1.5rem)
+		);
+		margin-right: math-sign(
+			if(
+				variable-exists(sheet-padding-right),
+				$sheet-padding-right,
+				1.5rem
+			)
+		);
 	}
 
 	> .panel-group-fluid-first {
-		margin-left: math-sign($sheet-padding-left);
-		margin-right: math-sign($sheet-padding-right);
-		margin-top: math-sign($sheet-padding-top);
+		margin-left: math-sign(
+			if(variable-exists(sheet-padding-left), $sheet-padding-left, 1.5rem)
+		);
+		margin-right: math-sign(
+			if(
+				variable-exists(sheet-padding-right),
+				$sheet-padding-right,
+				1.5rem
+			)
+		);
+		margin-top: math-sign(
+			if(variable-exists(sheet-padding-top), $sheet-padding-top, 1.5rem)
+		);
 	}
 
 	> .panel-group-fluid-last {
-		margin-bottom: math-sign($sheet-padding-bottom);
-		margin-left: math-sign($sheet-padding-left);
-		margin-right: math-sign($sheet-padding-right);
+		margin-bottom: math-sign(
+			if(
+				variable-exists(sheet-padding-bottom),
+				$sheet-padding-bottom,
+				0.0625rem
+			)
+		);
+		margin-left: math-sign(
+			if(variable-exists(sheet-padding-left), $sheet-padding-left, 1.5rem)
+		);
+		margin-right: math-sign(
+			if(
+				variable-exists(sheet-padding-right),
+				$sheet-padding-right,
+				1.5rem
+			)
+		);
 	}
 }
 

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

@@ -124,11 +124,38 @@
 @each $color, $value in $progress-palette {
 	.progress-#{$color} {
 		.progress-bar {
-			background-color: map-get($value, bar-bg);
+			$progress-bar: setter(map-get($value, progress-bar), ());
+			$progress-bar: map-merge(
+				$progress-bar,
+				(
+					background-color:
+						setter(
+							map-get($progress-bar, background-color),
+							map-get($value, bar-bg)
+						),
+				)
+			);
+
+			@include clay-css($progress-bar);
 		}
 
 		.progress-group-feedback {
-			color: map-get($value, group-feedback-color);
+			$progress-group-feedback: setter(
+				map-get($value, progress-group-feedback),
+				()
+			);
+			$progress-group-feedback: map-merge(
+				$progress-group-feedback,
+				(
+					color:
+						setter(
+							map-get($progress-group-feedback, color),
+							map-get($value, group-feedback-color)
+						),
+				)
+			);
+
+			@include clay-css($progress-group-feedback);
 		}
 	}
 }

package/src/scss/components/_range.scss

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

package/src/scss/components/_sheets.scss

@@ -95,7 +95,9 @@
 
 	> .card-page:last-child,
 	.card-page-last {
-		margin-bottom: math-sign($card-margin-bottom);
+		margin-bottom: math-sign(
+			if(variable-exists(card-margin-bottom), $card-margin-bottom, 1.5rem)
+		);
 	}
 
 	&::after {

package/src/scss/components/_time.scss

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

package/src/scss/components/_timelines.scss

@@ -69,7 +69,13 @@
 
 	.panel {
 		.timeline-increment {
-			margin-left: math-sign($panel-border-left-width);
+			margin-left: math-sign(
+				if(
+					variable-exists(panel-border-left-width),
+					$panel-border-left-width,
+					1px
+				)
+			);
 		}
 	}
 }

package/src/scss/components/_utilities.scss

@@ -324,6 +324,28 @@
 	background-color: $page-header-bg;
 }
 
+// Clay Gap
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+	@include media-breakpoint-up($breakpoint) {
+		$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+		@each $size, $length in $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 $breakpoint in map-keys($grid-breakpoints) {

package/src/scss/mixins/_globals.scss

@@ -119,6 +119,7 @@
 			'font-style',
 			'font-variant',
 			'font-weight',
+			'gap',
 			'grid',
 			'grid-area',
 			'grid-auto-columns',
@@ -199,6 +200,7 @@
 			'position',
 			'resize',
 			'right',
+			'row-gap',
 			'scroll-behavior',
 			'scrollbar-width',
 			'table-layout',

package/src/scss/mixins/_input-groups.scss

@@ -27,7 +27,7 @@
 	$breakpoint: setter(map-get($map, breakpoint), md);
 	$breakpoint-down: clay-breakpoint-prev($breakpoint);
 
-	$item: setter(map-get($map, item), ());
+	$item: setter(map-get($map, input-group-item), map-get($map, item), ());
 	$item: map-merge(
 		$item,
 		(
@@ -55,7 +55,11 @@
 		)
 	);
 
-	$item-shrink: setter(map-get($map, item-shrink), ());
+	$item-shrink: setter(
+		map-get($map, input-group-item-shrink),
+		map-get($map, item-shrink),
+		()
+	);
 	$item-shrink: map-merge(
 		$item-shrink,
 		(

package/src/scss/mixins/_modals.scss

@@ -24,7 +24,7 @@
 	@if (type-of($map) == 'map') {
 		$enabled: setter(map-get($map, enabled), true);
 
-		$header: setter(map-get($map, header), ());
+		$header: setter(map-get($map, modal-header), map-get($map, header), ());
 		$header: map-merge(
 			$header,
 			(
@@ -46,7 +46,11 @@
 			)
 		);
 
-		$header-close: setter(map-get($map, header-close), ());
+		$header-close: setter(
+			map-deep-get($map, header, close),
+			map-get($map, header-close),
+			()
+		);
 		$header-close: map-merge(
 			$header-close,
 			(
@@ -75,7 +79,7 @@
 			)
 		);
 
-		$body: setter(map-get($map, body), ());
+		$body: setter(map-get($map, modal-body), map-get($map, body), ());
 		$body: map-merge(
 			$body,
 			(
@@ -88,7 +92,7 @@
 			)
 		);
 
-		$footer: setter(map-get($map, footer), ());
+		$footer: setter(map-get($map, modal-footer), map-get($map, footer), ());
 		$footer: map-merge(
 			$footer,
 			(

package/src/scss/mixins/_panels.scss

@@ -67,7 +67,7 @@
 			)
 		);
 
-		$header: setter(map-get($map, header), ());
+		$header: setter(map-get($map, panel-header), map-get($map, header), ());
 		$header: map-merge(
 			$header,
 			(
@@ -184,7 +184,7 @@
 		$header-link: setter(map-get($header, link), ());
 		$header-link: map-deep-merge($header-link, $old-header-link);
 
-		$title: setter(map-get($map, title), ());
+		$title: setter(map-get($map, panel-title), map-get($map, title), ());
 		$title: map-merge(
 			$title,
 			(
@@ -238,7 +238,7 @@
 			)
 		);
 
-		$body: setter(map-get($map, body), ());
+		$body: setter(map-get($map, panel-body), map-get($map, body), ());
 		$body: map-merge(
 			$body,
 			(
@@ -285,7 +285,7 @@
 			)
 		);
 
-		$footer: setter(map-get($map, footer), ());
+		$footer: setter(map-get($map, panel-footer), map-get($map, footer), ());
 		$footer: map-merge(
 			$footer,
 			(