@clayui/css 3.78.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/_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
@@ -91,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
 );
@@ -102,7 +124,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,
@@ -157,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,
@@ -170,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
 );
@@ -179,7 +203,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 +230,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 +240,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 +249,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 +264,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 +279,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 +305,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 +318,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 +345,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
 );