@clayui/css 3.76.0 → 3.81.0

package/src/scss/cadmin/variables/_navigation-bar.scss

@@ -17,6 +17,8 @@ $cadmin-navigation-bar-size: map-deep-merge(
 		toggler-link-height: 32px,
 		toggler-link-margin-y: 7.5px,
 		toggler-link-padding-y: 0,
+		media-breakpoint-down: (),
+		media-breakpoint-up: (),
 	),
 	$cadmin-navigation-bar-size
 );
@@ -38,8 +40,250 @@ $cadmin-navigation-bar-base: map-deep-merge(
 				),
 			),
 		),
-		media-breakpoint-down: (),
-		media-breakpoint-up: (),
+		media-breakpoint-down: (
+			sm: (
+				navbar-expand-md: (
+					navbar-collapse-absolute: (
+						navbar-collapse: (
+							border-color:
+								setter(
+									map-get(
+										$cadmin-navigation-bar-size,
+										border-color
+									),
+									transparent
+								),
+							border-style:
+								setter(
+									map-get(
+										$cadmin-navigation-bar-size,
+										border-style
+									),
+									solid
+								),
+							border-bottom-width:
+								setter(
+									map-get(
+										$cadmin-navigation-bar-size,
+										border-bottom-width
+									),
+									1px
+								),
+							border-left-width:
+								setter(
+									map-get(
+										$cadmin-navigation-bar-size,
+										border-left-width
+									),
+									0
+								),
+							border-right-width:
+								setter(
+									map-get(
+										$cadmin-navigation-bar-size,
+										border-right-width
+									),
+									0
+								),
+							border-top-width:
+								setter(
+									map-get(
+										$cadmin-navigation-bar-size,
+										border-top-width
+									),
+									0
+								),
+							box-shadow:
+								clay-enable-shadows(
+									setter(
+										map-get(
+											$cadmin-navigation-bar-size,
+											box-shadow
+										),
+										null
+									)
+								),
+							left:
+								math-sign(
+									setter(
+										map-get(
+											$cadmin-navigation-bar-size,
+											border-left-width
+										),
+										0
+									)
+								),
+							margin-top:
+								setter(
+									map-get(
+										$cadmin-navigation-bar-size,
+										border-bottom-width
+									),
+									1px
+								),
+							padding-bottom:
+								setter(
+									map-get(
+										$cadmin-navigation-bar-size,
+										padding-y
+									),
+									0
+								),
+							padding-left:
+								setter(
+									map-get(
+										$cadmin-navigation-bar-size,
+										padding-x
+									),
+									0
+								),
+							padding-right:
+								setter(
+									map-get(
+										$cadmin-navigation-bar-size,
+										padding-x
+									),
+									0
+								),
+							padding-top:
+								setter(
+									map-get(
+										$cadmin-navigation-bar-size,
+										padding-y
+									),
+									0
+								),
+							right:
+								math-sign(
+									setter(
+										map-get(
+											$cadmin-navigation-bar-size,
+											border-right-width
+										),
+										0
+									)
+								),
+						),
+					),
+					navbar-collapse: (
+						navbar-nav: (
+							dropdown-divider: (
+								margin-left:
+									math-sign(
+										setter(
+											map-get(
+												$cadmin-navigation-bar-size,
+												padding-x
+											),
+											null
+										)
+									),
+								margin-right:
+									math-sign(
+										setter(
+											map-get(
+												$cadmin-navigation-bar-size,
+												padding-x
+											),
+											null
+										)
+									),
+							),
+							dropdown-item: (
+								padding-bottom:
+									setter(
+										map-get(
+											$cadmin-navigation-bar-size,
+											collapse-dropdown-item-padding-y-mobile
+										),
+										11.5px
+									),
+								padding-left:
+									setter(
+										map-get(
+											$cadmin-navigation-bar-size,
+											collapse-dropdown-item-padding-x-mobile
+										),
+										16px
+									),
+								padding-right:
+									setter(
+										map-get(
+											$cadmin-navigation-bar-size,
+											collapse-dropdown-item-padding-x-mobile
+										),
+										16px
+									),
+								padding-top:
+									setter(
+										map-get(
+											$cadmin-navigation-bar-size,
+											collapse-dropdown-item-padding-y-mobile
+										),
+										11.5px
+									),
+							),
+						),
+					),
+				),
+			),
+		),
+		media-breakpoint-up: (
+			md: (
+				navbar-expand-md: (
+					navbar-underline: (
+						navbar-nav: (
+							nav-link: (
+								active-class: (
+									after: (
+										bottom:
+											setter(
+												map-get(
+													$cadmin-navigation-bar-size,
+													active-border-offset-bottom
+												),
+												-1px
+											),
+										height:
+											setter(
+												map-get(
+													$cadmin-navigation-bar-size,
+													active-border-bottom-width
+												),
+												4px
+											),
+										left:
+											setter(
+												map-get(
+													$cadmin-navigation-bar-size,
+													active-border-offset-x
+												),
+												null
+											),
+										right:
+											setter(
+												map-get(
+													$cadmin-navigation-bar-size,
+													active-border-offset-x
+												),
+												null
+											),
+										top:
+											setter(
+												map-get(
+													$cadmin-navigation-bar-size,
+													active-border-offset-top
+												),
+												null
+											),
+									),
+								),
+							),
+						),
+					),
+				),
+			),
+		),
 	),
 	$cadmin-navigation-bar-base
 );

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 {

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);
 		}
 	}
 }