@clayui/css 3.78.0 → 3.81.0

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

@@ -217,7 +217,7 @@ $alert-indicator: map-deep-merge(
 // .alert-footer
 
 $alert-footer: () !default;
-$alert-footer: map-deep-merge(
+$alert-footer: map-merge(
 	(
 		margin-top: 1.375rem,
 	),

package/src/scss/variables/_application-bar.scss

@@ -2,7 +2,8 @@ $application-bar-size: () !default;
 $application-bar-size: map-deep-merge(
 	(
 		scaling-navbar: true,
-		font-size: $navbar-font-size,
+		font-size:
+			if(variable-exists(navbar-font-size), $navbar-font-size, null),
 		height: 3.5rem,
 		height-mobile: 3rem,
 		btn-monospaced-font-size: 1rem,
@@ -22,18 +23,43 @@ $application-bar-dark: () !default;
 $application-bar-dark: map-deep-merge(
 	(
 		background-color: $dark,
-		color: $navbar-dark-color,
+		color:
+			if(
+				variable-exists(navbar-dark-color),
+				$navbar-dark-color,
+				rgba($white, 0.5)
+			),
 		navbar-nav: (
 			nav-link: (
-				color: $navbar-dark-color,
+				color:
+					if(
+						variable-exists(navbar-dark-color),
+						$navbar-dark-color,
+						rgba($white, 0.5)
+					),
 				hover: (
-					color: $navbar-dark-hover-color,
+					color:
+						if(
+							variable-exists(navbar-dark-hover-color),
+							$navbar-dark-hover-color,
+							rgba($white, 0.75)
+						),
 				),
 				active: (
-					color: $navbar-dark-active-color,
+					color:
+						if(
+							variable-exists(navbar-dark-active-color),
+							$navbar-dark-active-color,
+							$white
+						),
 				),
 				disabled: (
-					color: $navbar-dark-disabled-color,
+					color:
+						if(
+							variable-exists(navbar-dark-disabled-color),
+							$navbar-dark-disabled-color,
+							rgba($white, 0.25)
+						),
 					opacity: 1,
 				),
 			),

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

@@ -1,10 +1,28 @@
+$clay-color-border-color: if(
+	variable-exists(input-border-color),
+	$input-border-color,
+	$gray-400
+) !default;
+$clay-color-padding-x: if(
+	variable-exists(input-padding-x),
+	$input-padding-x,
+	0.75rem
+) !default;
+
+$clay-color-sm-padding-x: if(
+	variable-exists(input-padding-x-sm),
+	$input-padding-x-sm,
+	0.5rem
+) !default;
+
 // Clay Color Input Group Text (.clay-color > .input-group-item > .input-group-text)
 
 $clay-color-input-group-text: () !default;
-$clay-color-input-group-text: map-deep-merge(
+$clay-color-input-group-text: map-merge(
 	(
-		bg: $white,
-		border-color: $input-border-color,
+		background-color:
+			setter(map-get($clay-color-input-group-text, bg), $white),
+		border-color: $clay-color-border-color,
 		padding-left: 0,
 		padding-right: 0,
 	),
@@ -18,11 +36,11 @@ $clay-color-input-group-input: () !default;
 // Clay Color Input Group Inset Item Before (.clay-color > .input-group-item > .input-group-inset-item-before)
 
 $clay-color-input-group-inset-item-before: () !default;
-$clay-color-input-group-inset-item-before: map-deep-merge(
+$clay-color-input-group-inset-item-before: map-merge(
 	(
 		color: $gray-600,
 		font-size: inherit,
-		padding-left: $input-padding-x,
+		padding-left: $clay-color-padding-x,
 		padding-right: 0.5rem,
 	),
 	$clay-color-input-group-inset-item-before
@@ -47,7 +65,7 @@ $clay-color-dropdown-menu: map-deep-merge(
 // Dropdown Menu Form Group
 
 $clay-color-dropdown-menu-form-group: () !default;
-$clay-color-dropdown-menu-form-group: map-deep-merge(
+$clay-color-dropdown-menu-form-group: map-merge(
 	(
 		margin-bottom: 1rem,
 	),
@@ -76,7 +94,7 @@ $clay-color-dropdown-menu-input-group-inset-item-before: map-deep-merge(
 	(
 		color: $gray-600,
 		font-size: 0.875rem,
-		padding-left: $input-padding-x-sm,
+		padding-left: $clay-color-sm-padding-x,
 		padding-right: 0.5rem,
 	),
 	$clay-color-dropdown-menu-input-group-inset-item-before
@@ -102,7 +120,7 @@ $clay-color-dropdown-menu-component-action: map-deep-merge(
 // Clay Color Swatch
 
 $clay-color-swatch: () !default;
-$clay-color-swatch: map-deep-merge(
+$clay-color-swatch: map-merge(
 	(
 		display: flex,
 		flex-wrap: wrap,
@@ -179,7 +197,7 @@ $clay-color-pointer: map-deep-merge(
 // Clay Color Header
 
 $clay-color-header: () !default;
-$clay-color-header: map-deep-merge(
+$clay-color-header: map-merge(
 	(
 		display: flex,
 		justify-content: space-between,
@@ -206,7 +224,7 @@ $clay-color-header-component-title: map-deep-merge(
 // Clay Color Footer
 
 $clay-color-footer: () !default;
-$clay-color-footer: map-deep-merge(
+$clay-color-footer: map-merge(
 	(
 		margin-bottom: 1rem,
 	),
@@ -216,7 +234,7 @@ $clay-color-footer: map-deep-merge(
 // Clay Color Map
 
 $clay-color-map-group: () !default;
-$clay-color-map-group: map-deep-merge(
+$clay-color-map-group: map-merge(
 	(
 		display: flex,
 		margin-top: 0.5rem,
@@ -225,7 +243,7 @@ $clay-color-map-group: map-deep-merge(
 );
 
 $clay-color-map: () !default;
-$clay-color-map: map-deep-merge(
+$clay-color-map: map-merge(
 	(
 		flex-shrink: 0,
 		height: 128px,
@@ -240,6 +258,13 @@ $clay-color-map: map-deep-merge(
 );
 
 $clay-color-map-hsb: () !default;
+$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))},
+	),
+	$clay-color-map-hsb
+);
 
 // Clay Color Map Pointer
 
@@ -248,7 +273,7 @@ $clay-color-map-pointer: () !default;
 // Clay Color Map Values
 
 $clay-color-map-values: () !default;
-$clay-color-map-values: map-deep-merge(
+$clay-color-map-values: map-merge(
 	(
 		flex-grow: 1,
 		flex-shrink: 1,
@@ -274,7 +299,7 @@ $clay-color-map-values-input: map-deep-merge(
 // Clay Color Map Values Input Group Inset Item Before (.clay-color-map-values .input-group-inset-item-before)
 
 $clay-color-map-values-input-group-inset-item-before: () !default;
-$clay-color-map-values-input-group-inset-item-before: map-deep-merge(
+$clay-color-map-values-input-group-inset-item-before: map-merge(
 	(
 		font-weight: $font-weight-semi-bold,
 		padding-left: 10%,
@@ -287,7 +312,7 @@ $clay-color-map-values-input-group-inset-item-before: map-deep-merge(
 // Clay Color Range
 
 $clay-color-range: () !default;
-$clay-color-range: map-deep-merge(
+$clay-color-range: map-merge(
 	(
 		border-radius: 100px,
 		height: 0.5rem,
@@ -314,7 +339,7 @@ $clay-color-range-pointer: map-deep-merge(
 $clay-color-sm-input-group-inset-item-before: () !default;
 $clay-color-sm-input-group-inset-item-before: map-merge(
 	(
-		padding-left: $input-padding-x-sm,
+		padding-left: $clay-color-sm-padding-x,
 	),
 	$clay-color-sm-input-group-inset-item-before
 );