@clayui/css 3.159.0 → 3.161.0

package/src/scss/mixins/_navbar.scss

@@ -95,7 +95,13 @@
 		$padding-y: if($padding-y == 0 or $padding-y == null, 0px, $padding-y);
 		$link-height: setter(
 			map-get($map, link-height),
-			'#{$height} - #{$border-bottom-width} - #{$border-top-width} - #{$padding-y} * 2'
+			calc(
+				#{$height} -
+					#{$border-bottom-width} -
+					#{$border-top-width} -
+					#{$padding-y} *
+					2
+			)
 		);
 
 		$link-margin-x: map-get($map, link-margin-x);
@@ -203,7 +209,8 @@
 								#{$border-top-width} -
 								#{$padding-y} *
 								2 -
-								(#{$brand-font-size} * #{$_line-height-base})
+								#{$brand-font-size} *
+								#{$_line-height-base}
 						) *
 						0.5
 				)
@@ -223,7 +230,13 @@
 		$min-height-mobile: map-get($map, min-height-mobile);
 		$link-height-mobile: setter(
 			map-get($map, link-height-mobile),
-			'#{$height-mobile} - #{$border-bottom-width} - #{$border-top-width} - #{$padding-y} * 2'
+			calc(
+				#{$height-mobile} -
+					#{$border-bottom-width} -
+					#{$border-top-width} -
+					#{$padding-y} *
+					2
+			)
 		);
 		$link-margin-x-mobile: setter(
 			map-get($map, link-margin-x-mobile),
@@ -252,7 +265,8 @@
 			calc(
 				(
 						#{$link-height-mobile} -
-							(#{$font-size-mobile} * #{$_line-height-base})
+							#{$font-size-mobile} *
+							#{$_line-height-base}
 					) *
 					0.5
 			)
@@ -411,7 +425,10 @@
 			map-get($map, toggler-link-line-height),
 			$_line-height-base
 		);
-		$toggler-link-margin-x: setter(map-get($map, toggler-link-margin-x), 0);
+		$toggler-link-margin-x: setter(
+			map-get($map, toggler-link-margin-x),
+			0px
+		);
 		$toggler-link-margin-y: map-get($map, toggler-link-margin-y);
 		$toggler-link-padding-x: setter(
 			map-get($map, toggler-link-padding-x),
@@ -503,10 +520,26 @@
 
 				@if ($enable-c-inner) {
 					.c-inner {
-						margin-bottom: math-sign($toggler-padding-y);
-						margin-left: math-sign($toggler-padding-x);
-						margin-right: math-sign($toggler-padding-x);
-						margin-top: math-sign($toggler-padding-y);
+						margin-bottom: if(
+							$toggler-padding-y,
+							calc(#{$toggler-padding-y} * -1),
+							null
+						);
+						margin-left: if(
+							$toggler-padding-x,
+							calc(#{$toggler-padding-x} * -1),
+							null
+						);
+						margin-right: if(
+							$toggler-padding-x,
+							calc(#{$toggler-padding-x} * -1),
+							null
+						);
+						margin-top: if(
+							$toggler-padding-y,
+							calc(#{$toggler-padding-y} * -1),
+							null
+						);
 					}
 				}
 			}
@@ -526,10 +559,26 @@
 
 				@if ($enable-c-inner) {
 					.c-inner {
-						margin-bottom: math-sign($toggler-link-padding-y);
-						margin-left: math-sign($toggler-link-padding-x);
-						margin-right: math-sign($toggler-link-padding-x);
-						margin-top: math-sign($toggler-link-padding-y);
+						margin-bottom: if(
+							$toggler-link-padding-y,
+							calc(#{$toggler-link-padding-y} * -1),
+							null
+						);
+						margin-left: if(
+							$toggler-link-padding-x,
+							calc(#{$toggler-link-padding-x} * -1),
+							null
+						);
+						margin-right: if(
+							$toggler-link-padding-x,
+							calc(#{$toggler-link-padding-x} * -1),
+							null
+						);
+						margin-top: if(
+							$toggler-link-padding-y,
+							calc(#{$toggler-link-padding-y} * -1),
+							null
+						);
 					}
 				}
 			}
@@ -545,10 +594,26 @@
 
 				@if ($enable-c-inner) {
 					.c-inner {
-						margin-bottom: math-sign($brand-padding-y-mobile);
-						margin-left: math-sign($brand-padding-x-mobile);
-						margin-right: math-sign($brand-padding-x-mobile);
-						margin-top: math-sign($brand-padding-y-mobile);
+						margin-bottom: if(
+							$brand-padding-y-mobile,
+							calc(#{$brand-padding-y-mobile} * -1),
+							null
+						);
+						margin-left: if(
+							$brand-padding-x-mobile,
+							calc(#{$brand-padding-x-mobile} * -1),
+							null
+						);
+						margin-right: if(
+							$brand-padding-x-mobile,
+							calc(#{$brand-padding-x-mobile} * -1),
+							null
+						);
+						margin-top: if(
+							$brand-padding-y-mobile,
+							calc(#{$brand-padding-y-mobile} * -1),
+							null
+						);
 					}
 				}
 			}
@@ -576,10 +641,26 @@
 
 					@if ($enable-c-inner) {
 						.c-inner {
-							margin-bottom: math-sign($btn-padding-y-mobile);
-							margin-left: math-sign($btn-padding-x-mobile);
-							margin-right: math-sign($btn-padding-x-mobile);
-							margin-top: math-sign($btn-padding-y-mobile);
+							margin-bottom: if(
+								$btn-padding-y-mobile,
+								calc(#{$btn-padding-y-mobile} * -1),
+								null
+							);
+							margin-left: if(
+								$btn-padding-x-mobile,
+								calc(#{$btn-padding-x-mobile} * -1),
+								null
+							);
+							margin-right: if(
+								$btn-padding-x-mobile,
+								calc(#{$btn-padding-x-mobile} * -1),
+								null
+							);
+							margin-top: if(
+								$btn-padding-y-mobile,
+								calc(#{$btn-padding-y-mobile} * -1),
+								null
+							);
 						}
 					}
 				}
@@ -616,10 +697,26 @@
 
 					@if ($enable-c-inner) {
 						.c-inner {
-							margin-bottom: math-sign($link-padding-y-mobile);
-							margin-left: math-sign($link-padding-x-mobile);
-							margin-right: math-sign($link-padding-x-mobile);
-							margin-top: math-sign($link-padding-y-mobile);
+							margin-bottom: if(
+								$link-padding-y-mobile,
+								calc(#{$link-padding-y-mobile} * -1),
+								null
+							);
+							margin-left: if(
+								$link-padding-x-mobile,
+								calc(#{$link-padding-x-mobile} * -1),
+								null
+							);
+							margin-right: if(
+								$link-padding-x-mobile,
+								calc(#{$link-padding-x-mobile} * -1),
+								null
+							);
+							margin-top: if(
+								$link-padding-y-mobile,
+								calc(#{$link-padding-y-mobile} * -1),
+								null
+							);
 						}
 					}
 				}
@@ -735,17 +832,37 @@
 
 											@if ($enable-c-inner) {
 												.c-inner {
-													margin-bottom: math-sign(
-														$brand-padding-y
+													margin-bottom: if(
+														$brand-padding-y,
+														calc(
+															#{$brand-padding-y} *
+																-1
+														),
+														null
 													);
-													margin-left: math-sign(
-														$brand-padding-x
+													margin-left: if(
+														$brand-padding-x,
+														calc(
+															#{$brand-padding-x} *
+																-1
+														),
+														null
 													);
-													margin-right: math-sign(
-														$brand-padding-x
+													margin-right: if(
+														$brand-padding-x,
+														calc(
+															#{$brand-padding-x} *
+																-1
+														),
+														null
 													);
-													margin-top: math-sign(
-														$brand-padding-y
+													margin-top: if(
+														$brand-padding-y,
+														calc(
+															#{$brand-padding-y} *
+																-1
+														),
+														null
 													);
 												}
 											}
@@ -790,17 +907,37 @@
 
 											@if ($enable-c-inner) {
 												.c-inner {
-													margin-bottom: math-sign(
-														$btn-padding-y
+													margin-bottom: if(
+														$btn-padding-y,
+														calc(
+															#{$btn-padding-y} *
+																-1
+														),
+														null
 													);
-													margin-left: math-sign(
-														$btn-padding-x
+													margin-left: if(
+														$btn-padding-x,
+														calc(
+															#{$btn-padding-x} *
+																-1
+														),
+														null
 													);
-													margin-right: math-sign(
-														$btn-padding-x
+													margin-right: if(
+														$btn-padding-x,
+														calc(
+															#{$btn-padding-x} *
+																-1
+														),
+														null
 													);
-													margin-top: math-sign(
-														$btn-padding-y
+													margin-top: if(
+														$btn-padding-y,
+														calc(
+															#{$btn-padding-y} *
+																-1
+														),
+														null
 													);
 												}
 											}
@@ -844,17 +981,37 @@
 
 											@if ($enable-c-inner) {
 												.c-inner {
-													margin-bottom: math-sign(
-														$link-padding-y
+													margin-bottom: if(
+														$link-padding-y,
+														calc(
+															#{$link-padding-y} *
+																-1
+														),
+														null
 													);
-													margin-left: math-sign(
-														$link-padding-x
+													margin-left: if(
+														$link-padding-x,
+														calc(
+															#{$link-padding-x} *
+																-1
+														),
+														null
 													);
-													margin-right: math-sign(
-														$link-padding-x
+													margin-right: if(
+														$link-padding-x,
+														calc(
+															#{$link-padding-x} *
+																-1
+														),
+														null
 													);
-													margin-top: math-sign(
-														$link-padding-y
+													margin-top: if(
+														$link-padding-y,
+														calc(
+															#{$link-padding-y} *
+																-1
+														),
+														null
 													);
 												}
 											}
@@ -1552,6 +1709,37 @@
 
 		$underline-active-bg: map-get($map, underline-active-bg);
 
+		$base: map-remove(
+			$base,
+			'bg',
+			'brand-bg',
+			'brand-color',
+			'brand-hover-bg',
+			'brand-hover-color',
+			'btn-font-weight',
+			'link-active-bg',
+			'link-active-color',
+			'link-bg',
+			'link-border-radius',
+			'link-color',
+			'link-disabled-bg',
+			'link-disabled-box-shadow',
+			'link-disabled-color',
+			'link-disabled-opacity',
+			'link-disabled-pointer-events',
+			'link-focus-bg',
+			'link-focus-box-shadow',
+			'link-focus-color',
+			'link-font-weight',
+			'link-hover-bg',
+			'link-hover-color',
+			'link-outline',
+			'link-transition',
+			'toggler-color',
+			'toggler-font-weight',
+			'underline-active-bg'
+		);
+
 		@if ($enabled) {
 			@if (length($base) != 0) {
 				@include clay-css($base);

package/src/scss/mixins/_panels.scss

@@ -158,6 +158,11 @@
 			)
 		);
 
+		$_hpb: map-get($header, padding-bottom);
+		$_hpl: map-get($header, padding-left);
+		$_hpr: map-get($header, padding-right);
+		$_hpt: map-get($header, padding-top);
+
 		$old-header-c-inner: setter(map-get($map, header-c-inner), ());
 		$header-c-inner: setter(map-get($header, c-inner), ());
 		$header-c-inner: map-merge(
@@ -172,10 +177,10 @@
 							null
 						)
 					),
-				margin-bottom: math-sign(map-get($header, padding-bottom)),
-				margin-left: math-sign(map-get($header, padding-left)),
-				margin-right: math-sign(map-get($header, padding-right)),
-				margin-top: math-sign(map-get($header, padding-top)),
+				margin-bottom: if($_hpb, calc(#{$_hpb} * -1), null),
+				margin-left: if($_hpl, calc(#{$_hpl} * -1), null),
+				margin-right: if($_hpr, calc(#{$_hpr} * -1), null),
+				margin-top: if($_hpt, calc(#{$_hpt} * -1), null),
 			),
 			$header-c-inner
 		);
@@ -307,6 +312,45 @@
 			)
 		);
 
+		$base: map-remove(
+			$base,
+			'bg',
+			'body-margin-bottom',
+			'body-margin-left',
+			'body-margin-right',
+			'body-margin-top',
+			'body-padding-bottom',
+			'body-padding-left',
+			'body-padding-right',
+			'body-padding-top',
+			'collapse-icon-bottom',
+			'collapse-icon-font-size',
+			'collapse-icon-left',
+			'collapse-icon-right',
+			'collapse-icon-top',
+			'footer-bg',
+			'footer-border-color',
+			'footer-color',
+			'header-bg',
+			'header-border-color',
+			'header-border-style',
+			'header-border-width',
+			'header-collapsed-border-color',
+			'header-color',
+			'header-margin-bottom',
+			'header-margin-left',
+			'header-margin-right',
+			'header-margin-top',
+			'header-padding-bottom',
+			'header-padding-left',
+			'header-padding-right',
+			'header-padding-top',
+			'header-transition',
+			'title-font-size',
+			'title-font-weight',
+			'title-text-transform'
+		);
+
 		@if ($enabled) {
 			@if (length($base) != 0) {
 				@include clay-css($base);

package/src/scss/mixins/_stickers.scss

@@ -216,6 +216,14 @@
 			);
 		}
 
+		$base: map-remove(
+			$base,
+			'bg',
+			'size',
+			'inline-item-font-size',
+			'outside-offset'
+		);
+
 		@if ($enabled) {
 			@if (length($base) != 0) {
 				@include clay-css($base);

package/src/scss/mixins/_tbar.scss

@@ -220,6 +220,11 @@
 			)
 		);
 
+		$_bpb: map-get($btn, padding-bottom);
+		$_bpl: map-get($btn, padding-left);
+		$_bpr: map-get($btn, padding-right);
+		$_bpt: map-get($btn, padding-top);
+
 		$btn-c-inner: setter(map-get($btn, c-inner), ());
 		$btn-c-inner: map-merge(
 			$btn-c-inner,
@@ -228,10 +233,10 @@
 		$btn-c-inner: map-merge(
 			(
 				enabled: $enable-c-inner,
-				margin-bottom: math-sign(map-get($btn, padding-bottom)),
-				margin-left: math-sign(map-get($btn, padding-left)),
-				margin-right: math-sign(map-get($btn, padding-right)),
-				margin-top: math-sign(map-get($btn, padding-top)),
+				margin-bottom: if($_bpb, calc(#{$_bpb} * -1), null),
+				margin-left: if($_bpl, calc(#{$_bpl} * -1), null),
+				margin-right: if($_bpr, calc(#{$_bpr} * -1), null),
+				margin-top: if($_bpt, calc(#{$_bpt} * -1), null),
 			),
 			$btn-c-inner
 		);
@@ -299,6 +304,8 @@
 			)
 		);
 
+		$_bmp: map-get($btn-monospaced, padding);
+
 		$btn-monospaced-c-inner: setter(map-get($btn-monospaced, c-inner), ());
 		$btn-monospaced-c-inner: map-merge(
 			$btn-monospaced-c-inner,
@@ -307,7 +314,7 @@
 		$btn-monospaced-c-inner: map-merge(
 			(
 				enabled: $enable-c-inner,
-				margin: math-sign(map-get($btn-monospaced, padding)),
+				margin: if($_bmp, calc(#{$_bmp} * -1), null),
 			),
 			$btn-monospaced-c-inner
 		);
@@ -360,6 +367,11 @@
 			)
 		);
 
+		$_lpb: map-get($link, padding-bottom);
+		$_lpl: map-get($link, padding-left);
+		$_lpr: map-get($link, padding-right);
+		$_lpt: map-get($link, padding-top);
+
 		$link-c-inner: setter(map-get($link, c-inner), ());
 		$link-c-inner: map-merge(
 			$link-c-inner,
@@ -368,10 +380,10 @@
 		$link-c-inner: map-merge(
 			(
 				enabled: $enable-c-inner,
-				margin-bottom: math-sign(map-get($link, padding-bottom)),
-				margin-left: math-sign(map-get($link, padding-left)),
-				margin-right: math-sign(map-get($link, padding-right)),
-				margin-top: math-sign(map-get($link, padding-top)),
+				margin-bottom: if($_lpb, calc(#{$_lpb} * -1), null),
+				margin-left: if($_lpl, calc(#{$_lpl} * -1), null),
+				margin-right: if($_lpr, calc(#{$_lpr} * -1), null),
+				margin-top: if($_lpt, calc(#{$_lpt} * -1), null),
 			),
 			$link-c-inner
 		);
@@ -437,6 +449,8 @@
 			$link-monospaced
 		);
 
+		$_lmp: map-get($link-monospaced, padding);
+
 		$link-monospaced-c-inner: setter(
 			map-get($link-monospaced, c-inner),
 			()
@@ -448,7 +462,7 @@
 		$link-monospaced-c-inner: map-merge(
 			(
 				enabled: $enable-c-inner,
-				margin: math-sign(map-get($link-monospaced, padding)),
+				margin: if($_lmp, calc(#{$_lmp} * -1), null),
 			),
 			$link-monospaced-c-inner
 		);
@@ -466,6 +480,45 @@
 			)
 		);
 
+		$base: map-remove(
+			$base,
+			'bg',
+			'bg-color',
+			'btn-font-size',
+			'btn-font-weight',
+			'btn-height',
+			'btn-line-height',
+			'btn-margin-x',
+			'btn-margin-y',
+			'btn-monospaced-border-radius',
+			'btn-monospaced-border-width',
+			'btn-monospaced-font-size',
+			'btn-monospaced-margin-x',
+			'btn-monospaced-margin-y',
+			'btn-monospaced-padding',
+			'btn-monospaced-size',
+			'btn-padding-x',
+			'btn-padding-y',
+			'item-justify-content',
+			'item-padding-x',
+			'item-padding-y',
+			'link-margin-x',
+			'link-margin-y',
+			'link-monospaced-border-radius',
+			'link-monospaced-border-width',
+			'link-monospaced-font-size',
+			'link-monospaced-margin-x',
+			'link-monospaced-margin-y',
+			'link-monospaced-padding',
+			'link-monospaced-size',
+			'link-padding-x',
+			'link-padding-y',
+			'padding-x',
+			'padding-y',
+			'section-text-align',
+			'strong-font-weight'
+		);
+
 		@if (length($base) != 0) {
 			@include clay-css($base);
 		}
@@ -727,6 +780,8 @@
 			)
 		);
 
+		$map: map-remove($map, 'item-padding-left', 'item-padding-right');
+
 		@if ($breakpoint-down) {
 			@include media-breakpoint-down($breakpoint-down) {
 				display: block;