@clayui/css 3.81.0 → 3.82.0

package/src/scss/mixins/_tbar.scss

@@ -122,7 +122,8 @@
 			)
 		);
 
-		$item: setter(map-get($map, item), ());
+		$item: setter(map-get($map, tbar-item), ());
+		$item: map-merge($item, setter(map-get($map, item), ()));
 		$item: map-merge(
 			$item,
 			(
@@ -154,8 +155,9 @@
 			)
 		);
 
-		$btn: setter(map-get($map, btn), ());
-		$btn: map-merge(
+		$btn: setter(map-get($map, tbar-btn), ());
+		$btn: map-deep-merge($btn, setter(map-get($map, btn), ()));
+		$btn: map-deep-merge(
 			$btn,
 			(
 				height:
@@ -218,7 +220,11 @@
 			)
 		);
 
-		$btn-c-inner: setter(map-get($map, btn-c-inner), ());
+		$btn-c-inner: setter(map-get($btn, c-inner), ());
+		$btn-c-inner: map-merge(
+			$btn-c-inner,
+			setter(map-get($map, btn-c-inner), ())
+		);
 		$btn-c-inner: map-merge(
 			(
 				enabled: $enable-c-inner,
@@ -230,8 +236,12 @@
 			$btn-c-inner
 		);
 
-		$btn-monospaced: setter(map-get($map, btn-monospaced), ());
-		$btn-monospaced: map-merge(
+		$btn-monospaced: setter(map-get($map, tbar-btn-monospaced), ());
+		$btn-monospaced: map-deep-merge(
+			$btn-monospaced,
+			setter(map-get($map, btn-monospaced), ())
+		);
+		$btn-monospaced: map-deep-merge(
 			$btn-monospaced,
 			(
 				border-radius:
@@ -289,9 +299,10 @@
 			)
 		);
 
-		$btn-monospaced-c-inner: setter(
-			map-get($map, btn-monospaced-c-inner),
-			()
+		$btn-monospaced-c-inner: setter(map-get($btn-monospaced, c-inner), ());
+		$btn-monospaced-c-inner: map-merge(
+			$btn-monospaced-c-inner,
+			setter(map-get($map, btn-monospaced-c-inner), ())
 		);
 		$btn-monospaced-c-inner: map-merge(
 			(
@@ -301,8 +312,9 @@
 			$btn-monospaced-c-inner
 		);
 
-		$link: setter(map-get($map, link), ());
-		$link: map-merge(
+		$link: setter(map-get($map, tbar-link), ());
+		$link: map-deep-merge($link, setter(map-get($map, link), ()));
+		$link: map-deep-merge(
 			$link,
 			(
 				margin-bottom:
@@ -348,7 +360,11 @@
 			)
 		);
 
-		$link-c-inner: setter(map-get($map, link-c-inner), ());
+		$link-c-inner: setter(map-get($link, c-inner), ());
+		$link-c-inner: map-merge(
+			$link-c-inner,
+			setter(map-get($map, link-c-inner), ())
+		);
 		$link-c-inner: map-merge(
 			(
 				enabled: $enable-c-inner,
@@ -360,8 +376,12 @@
 			$link-c-inner
 		);
 
-		$link-monospaced: setter(map-get($map, link-monospaced), ());
-		$link-monospaced: map-merge(
+		$link-monospaced: setter(map-get($map, tbar-link-monospaced), ());
+		$link-monospaced: map-deep-merge(
+			$link-monospaced,
+			setter(map-get($map, link-monospaced), ())
+		);
+		$link-monospaced: map-deep-merge(
 			(
 				border-radius:
 					setter(
@@ -418,9 +438,13 @@
 		);
 
 		$link-monospaced-c-inner: setter(
-			map-get($map, link-monospaced-c-inner),
+			map-get($link-monospaced, c-inner),
 			()
 		);
+		$link-monospaced-c-inner: map-merge(
+			$link-monospaced-c-inner,
+			setter(map-get($map, link-monospaced-c-inner), ())
+		);
 		$link-monospaced-c-inner: map-merge(
 			(
 				enabled: $enable-c-inner,
@@ -429,7 +453,8 @@
 			$link-monospaced-c-inner
 		);
 
-		$section: setter(map-get($map, section), ());
+		$section: setter(map-get($map, tbar-section), ());
+		$section: map-merge($section, setter(map-get($map, section), ()));
 		$section: map-merge(
 			$section,
 			(
@@ -456,23 +481,66 @@
 		}
 
 		.tbar-nav {
-			@include clay-css(map-get($map, nav));
+			$tbar-nav: setter(map-get($map, tbar-nav), ());
+			$tbar-nav: map-merge($tbar-nav, setter(map-get($map, nav), ()));
+
+			@include clay-css($tbar-nav);
 		}
 
 		.tbar-item {
 			@include clay-css($item);
 		}
 
-		.tbar-divider-before::before {
-			@include clay-css(map-get($map, divider-before));
+		.tbar-divider-before {
+			$tbar-divider-before: setter(
+				map-get($map, tbar-divider-before),
+				()
+			);
+
+			@include clay-css($tbar-divider-before);
+
+			&::before {
+				$before: setter(map-get($tbar-divider-before, before), ());
+				$before: map-merge(
+					$before,
+					setter(map-get($map, divider-before), ())
+				);
+
+				@include clay-css($before);
+			}
+
+			&::after {
+				@include clay-css(map-get($tbar-divider-before, after));
+			}
 		}
 
-		.tbar-divider-after::after {
-			@include clay-css(map-get($map, divider-after));
+		.tbar-divider-after {
+			$tbar-divider-after: setter(map-get($map, tbar-divider-after), ());
+
+			@include clay-css($tbar-divider-after);
+
+			&::before {
+				@include clay-css(map-get($tbar-divider-after, before));
+			}
+
+			&::after {
+				$after: setter(map-get($tbar-divider-after, after), ());
+				$after: map-merge(
+					$after,
+					setter(map-get($map, divider-after), ())
+				);
+
+				@include clay-css($after);
+			}
 		}
 
 		.tbar-item-expand {
-			@include clay-css(map-get($map, item-expand));
+			$tbar-item-expand: setter(map-get($map, tbar-item-expand), ());
+			$tbar-item-expand: map-merge(
+				$tbar-item-expand,
+				setter(map-get($map, item-expand), ())
+			);
+			@include clay-css($tbar-item-expand);
 		}
 
 		.tbar-btn {
@@ -540,7 +608,13 @@
 		}
 
 		.tbar-label {
-			@include clay-label-size(map-get($map, tbar-label-size));
+			$tbar-label: setter(map-get($map, tbar-label), ());
+			$tbar-label: map-merge(
+				$tbar-label,
+				setter(map-get($map, tbar-label-size), ())
+			);
+
+			@include clay-label-size($tbar-label);
 		}
 	}
 }
@@ -558,8 +632,24 @@
 @mixin clay-tbar-inline-down($map) {
 	@if (type-of($map) == 'map') {
 		$breakpoint-down: map-get($map, breakpoint-down);
-		$item-padding-left: map-get($map, item-padding-left);
-		$item-padding-right: map-get($map, item-padding-right);
+
+		$tbar-item: setter(map-get($map, tbar-item), ());
+		$tbar-item: map-merge(
+			$tbar-item,
+			(
+				display: setter(map-get($tbar-item, display), inline),
+				padding-left:
+					setter(
+						map-get($tbar-item, padding-left),
+						map-get($map, item-padding-left)
+					),
+				padding-right:
+					setter(
+						map-get($tbar-item, padding-right),
+						map-get($map, item-padding-right)
+					),
+			)
+		);
 
 		@if ($breakpoint-down) {
 			@include media-breakpoint-down($breakpoint-down) {
@@ -577,9 +667,7 @@
 				}
 
 				.tbar-item {
-					display: inline;
-					padding-left: $item-padding-left;
-					padding-right: $item-padding-right;
+					@include clay-css($tbar-item);
 				}
 			}
 		}

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

@@ -109,10 +109,14 @@ $clay-color-dropdown-menu-close: () !default;
 $clay-color-dropdown-menu-component-action: () !default;
 $clay-color-dropdown-menu-component-action: map-deep-merge(
 	(
-		hover-bg: transparent,
-		hover-color: $black,
-		focus-box-shadow: $component-focus-box-shadow,
-		focus-color: $black,
+		hover: (
+			background-color: transparent,
+			color: $black,
+		),
+		focus: (
+			box-shadow: $component-focus-box-shadow,
+			color: $black,
+		),
 	),
 	$clay-color-dropdown-menu-component-action
 );
@@ -175,7 +179,7 @@ $clay-color-btn-bordered: map-deep-merge(
 $clay-color-pointer: () !default;
 $clay-color-pointer: map-deep-merge(
 	(
-		bg: transparent,
+		background-color: setter(map-get($clay-color-pointer, bg), transparent),
 		border-radius: 100px,
 		border-color: $white,
 		border-style: solid,
@@ -188,8 +192,10 @@ $clay-color-pointer: map-deep-merge(
 		position: absolute,
 		transition: box-shadow 0.15s ease-in-out,
 		width: 0.875rem,
-		focus-box-shadow: $component-focus-box-shadow,
-		focus-outline: 0,
+		focus: (
+			box-shadow: $component-focus-box-shadow,
+			outline: 0,
+		),
 	),
 	$clay-color-pointer
 );

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

@@ -31,12 +31,18 @@ $date-picker-nav-btn: map-deep-merge(
 	(
 		color: $gray-600,
 		transition: $component-transition,
-		hover-bg: $gray-200,
-		focus-box-shadow: $component-focus-box-shadow,
-		disabled-bg: transparent,
-		disabled-box-shadow: none,
-		disabled-color: $gray-600,
-		disabled-opacity: $component-disabled-opacity,
+		hover: (
+			background-color: $gray-200,
+		),
+		focus: (
+			box-shadow: $input-btn-focus-box-shadow,
+		),
+		disabled: (
+			background-color: transparent,
+			box-shadow: none,
+			color: $gray-600,
+			opacity: $component-disabled-opacity,
+		),
 	),
 	$date-picker-nav-btn
 );
@@ -169,7 +175,8 @@ $date-picker-calendar-item: () !default;
 $date-picker-calendar-item: map-deep-merge(
 	(
 		align-items: center,
-		bg: transparent,
+		background-color:
+			setter(map-get($date-picker-calendar-item, bg) transparent),
 		border-width: 0px,
 		disabled-cursor: $disabled-cursor,
 		display: inline-flex,
@@ -200,14 +207,22 @@ $date-picker-date: map-deep-merge(
 		color: $gray-600,
 		cursor: $link-cursor,
 		position: relative,
-		hover-bg: $gray-200,
-		focus-box-shadow: $component-focus-box-shadow,
-		focus-outline: 0,
-		active-bg: $component-active-bg,
-		active-color: $component-active-color,
-		disabled-bg: transparent,
-		disabled-box-shadow: none,
-		disabled-opacity: $component-disabled-opacity,
+		hover: (
+			background-color: $gray-200,
+		),
+		focus: (
+			box-shadow: $input-btn-focus-box-shadow,
+			outline: 0,
+		),
+		active: (
+			background-color: $component-active-bg,
+			color: $component-active-color,
+		),
+		disabled: (
+			background-color: transparent,
+			box-shadow: none,
+			opacity: $component-disabled-opacity,
+		),
 	),
 	$date-picker-date
 );
@@ -216,7 +231,9 @@ $date-picker-previous-month-date: () !default;
 $date-picker-previous-month-date: map-deep-merge(
 	(
 		opacity: 0.65,
-		focus-opacity: 1,
+		focus: (
+			opacity: 1,
+		),
 		active: (
 			background-color: $primary-l1,
 			color: $primary-l3,
@@ -229,7 +246,9 @@ $date-picker-next-month-date: () !default;
 $date-picker-next-month-date: map-deep-merge(
 	(
 		opacity: 0.65,
-		focus-opacity: 1,
+		focus: (
+			opacity: 1,
+		),
 		active: (
 			background-color: $primary-l1,
 			color: $primary-l3,
@@ -243,7 +262,8 @@ $date-picker-next-month-date: map-deep-merge(
 $date-picker-input-group-text: () !default;
 $date-picker-input-group-text: map-deep-merge(
 	(
-		bg: transparent,
+		background-color:
+			setter(map-get($date-picker-input-group-text, bg) transparent),
 		border-color: transparent,
 		min-width: 2rem,
 		padding-left: 0.25rem,

package/src/scss/variables/_forms.scss

@@ -2069,9 +2069,13 @@ $input-group-stacked-sm-down: () !default;
 $input-group-stacked-sm-down: map-deep-merge(
 	(
 		breakpoint: sm,
-		item-margin-bottom: 0.5rem,
-		item-margin-left: 0,
-		shrink-margin-right: 0.5rem,
+		input-group-item: (
+			margin-bottom: 0.5rem,
+			margin-left: 0,
+		),
+		input-group-item-shrink: (
+			margin-right: 0.5rem,
+		),
 	),
 	$input-group-stacked-sm-down
 );

package/src/scss/variables/_modals.scss

@@ -262,14 +262,22 @@ $modal-height-full-modal-content-sm-up: map-merge(
 $modal-success: () !default;
 $modal-success: map-deep-merge(
 	(
-		header-bg: theme-color-level(success, -10),
-		header-border-color: theme-color-level(success, -9),
-		header-color: theme-color-level(success, 6),
-		header-close: (
+		modal-header: (
+			background-color: theme-color-level(success, -10),
+			border-color: theme-color-level(success, -9),
 			color: theme-color-level(success, 6),
-			hover-color: inherit,
-			focus-color: inherit,
-			disabled-color: inherit,
+			close: (
+				color: theme-color-level(success, 6),
+				hover: (
+					color: inherit,
+				),
+				focus: (
+					color: inherit,
+				),
+				disabled: (
+					color: inherit,
+				),
+			),
 		),
 	),
 	$modal-success
@@ -280,14 +288,22 @@ $modal-success: map-deep-merge(
 $modal-info: () !default;
 $modal-info: map-deep-merge(
 	(
-		header-bg: theme-color-level(info, -10),
-		header-border-color: theme-color-level(info, -9),
-		header-color: theme-color-level(info, 6),
-		header-close: (
+		modal-header: (
+			background-color: theme-color-level(info, -10),
+			border-color: theme-color-level(info, -9),
 			color: theme-color-level(info, 6),
-			hover-color: inherit,
-			focus-color: inherit,
-			disabled-color: inherit,
+			close: (
+				color: theme-color-level(info, 6),
+				hover: (
+					color: inherit,
+				),
+				focus: (
+					color: inherit,
+				),
+				disabled: (
+					color: inherit,
+				),
+			),
 		),
 	),
 	$modal-info
@@ -298,14 +314,22 @@ $modal-info: map-deep-merge(
 $modal-warning: () !default;
 $modal-warning: map-deep-merge(
 	(
-		header-bg: theme-color-level(warning, -10),
-		header-border-color: theme-color-level(warning, -9),
-		header-color: theme-color-level(warning, 6),
-		header-close: (
+		modal-header: (
+			background-color: theme-color-level(warning, -10),
+			border-color: theme-color-level(warning, -9),
 			color: theme-color-level(warning, 6),
-			hover-color: inherit,
-			focus-color: inherit,
-			disabled-color: inherit,
+			close: (
+				color: theme-color-level(warning, 6),
+				hover: (
+					color: inherit,
+				),
+				focus: (
+					color: inherit,
+				),
+				disabled: (
+					color: inherit,
+				),
+			),
 		),
 	),
 	$modal-warning
@@ -316,14 +340,22 @@ $modal-warning: map-deep-merge(
 $modal-danger: () !default;
 $modal-danger: map-deep-merge(
 	(
-		header-bg: theme-color-level(danger, -10),
-		header-border-color: theme-color-level(danger, -9),
-		header-color: theme-color-level(danger, 6),
-		header-close: (
+		modal-header: (
+			background-color: theme-color-level(danger, -10),
+			border-color: theme-color-level(danger, -9),
 			color: theme-color-level(danger, 6),
-			hover-color: inherit,
-			focus-color: inherit,
-			disabled-color: inherit,
+			close: (
+				color: theme-color-level(danger, 6),
+				hover: (
+					color: inherit,
+				),
+				focus: (
+					color: inherit,
+				),
+				disabled: (
+					color: inherit,
+				),
+			),
 		),
 	),
 	$modal-danger

package/src/scss/variables/_panels.scss

@@ -114,11 +114,11 @@ $panel-group-sm: () !default;
 $panel-group-sm: map-deep-merge(
 	(
 		font-size: 0.875rem,
-		header: (
+		panel-header: (
 			padding-bottom: 0.5rem,
 			padding-top: 0.5rem,
 		),
-		title: (
+		panel-title: (
 			font-size: 0.875rem,
 		),
 		collapse-icon: (
@@ -150,7 +150,7 @@ $panel-group-flush-panel-unstyled: () !default;
 $panel-group-flush-panel-unstyled: map-deep-merge(
 	(
 		margin-bottom: 1.5rem,
-		body: (
+		panel-body: (
 			margin-bottom: 0,
 		),
 	),
@@ -165,12 +165,12 @@ $panel-secondary: () !default;
 $panel-secondary: map-deep-merge(
 	(
 		border-color: rgba($black, 0.125),
-		header: (
+		panel-header: (
 			background-color: $gray-100,
 			border-color: rgba($black, 0.125),
 			link: $panel-secondary-header-link,
 		),
-		footer: (
+		panel-footer: (
 			background-color: $gray-100,
 			border-color: rgba($black, 0.125),
 		),
@@ -189,7 +189,7 @@ $panel-unstyled: map-deep-merge(
 		border-radius: 0px,
 		border-width: 0px,
 		margin-bottom: 1.5rem,
-		header: (
+		panel-header: (
 			border-color: $gray-500,
 			border-radius: 0px,
 			border-style: solid,
@@ -203,10 +203,10 @@ $panel-unstyled: map-deep-merge(
 		collapse-icon: (
 			right: 0,
 		),
-		body: (
+		panel-body: (
 			padding: 1rem 0 0.1px 0,
 		),
-		footer: (
+		panel-footer: (
 			padding: 1rem 0 0.1px 0,
 		),
 	),

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

@@ -66,20 +66,36 @@ $progress-palette: () !default;
 $progress-palette: map-deep-merge(
 	(
 		success: (
-			bar-bg: $progress-bar-success-bg,
-			group-feedback-color: $progress-group-feedback-success-color,
+			progress-bar: (
+				background-color: $progress-bar-success-bg,
+			),
+			progress-group-feedback: (
+				color: $progress-group-feedback-success-color,
+			),
 		),
 		info: (
-			bar-bg: $progress-bar-info-bg,
-			group-feedback-color: $progress-group-feedback-info-color,
+			progress-bar: (
+				background-color: $progress-bar-info-bg,
+			),
+			progress-group-feedback: (
+				color: $progress-group-feedback-info-color,
+			),
 		),
 		warning: (
-			bar-bg: $progress-bar-warning-bg,
-			group-feedback-color: $progress-group-feedback-warning-color,
+			progress-bar: (
+				background-color: $progress-bar-warning-bg,
+			),
+			progress-group-feedback: (
+				color: $progress-group-feedback-warning-color,
+			),
 		),
 		danger: (
-			bar-bg: $progress-bar-danger-bg,
-			group-feedback-color: $progress-group-feedback-danger-color,
+			progress-bar: (
+				background-color: $progress-bar-danger-bg,
+			),
+			progress-group-feedback: (
+				color: $progress-group-feedback-danger-color,
+			),
 		),
 	),
 	$progress-palette