@clayui/css 3.158.0 → 3.160.0

package/src/scss/mixins/_grid.scss

@@ -97,6 +97,19 @@
 			)
 		);
 
+		$base: map-remove(
+			$base,
+			'bg',
+			'bg-image',
+			'bg-position',
+			'bg-size',
+			'breakpoint-up',
+			'padding-bottom-mobile',
+			'padding-left-mobile',
+			'padding-right-mobile',
+			'padding-top-mobile'
+		);
+
 		@if ($enabled) {
 			@include clay-css($base);
 
@@ -288,8 +301,8 @@
 	$breakpoints: $grid-breakpoints
 ) {
 	%grid-column {
-		padding-left: $gutter * 0.5;
-		padding-right: $gutter * 0.5;
+		padding-left: calc(#{$gutter} * 0.5);
+		padding-right: calc(#{$gutter} * 0.5);
 		position: relative;
 		width: 100%;
 	}
@@ -362,8 +375,8 @@
 @mixin make-container($gutter: $grid-gutter-width) {
 	margin-left: auto;
 	margin-right: auto;
-	padding-left: $gutter * 0.5;
-	padding-right: $gutter * 0.5;
+	padding-left: calc(#{$gutter} * 0.5);
+	padding-right: calc(#{$gutter} * 0.5);
 	width: 100%;
 }
 
@@ -390,8 +403,8 @@
 @mixin make-row($gutter: $grid-gutter-width) {
 	display: flex;
 	flex-wrap: wrap;
-	margin-left: math-sign($gutter * 0.5);
-	margin-right: math-sign($gutter * 0.5);
+	margin-left: calc(#{$gutter} * -0.5);
+	margin-right: calc(#{$gutter} * -0.5);
 }
 
 /// A Bootstrap 4 mixin. This mixin is deprecated, not used in Bootstrap 4.
@@ -399,8 +412,8 @@
 /// @param {Number} $gutter[$grid-gutter-width]
 
 @mixin make-col-ready($gutter: $grid-gutter-width) {
-	padding-left: $gutter * 0.5;
-	padding-right: $gutter * 0.5;
+	padding-left: calc(#{$gutter} * 0.5);
+	padding-right: calc(#{$gutter} * 0.5);
 	position: relative;
 	width: 100%;
 }

package/src/scss/mixins/_highlight.scss

@@ -100,6 +100,20 @@
 			)
 		);
 
+		$base: map-remove(
+			$base,
+			'active-bg',
+			'active-height',
+			'active-opacity',
+			'bg',
+			'focus-bg',
+			'focus-height',
+			'focus-opacity',
+			'hover-bg',
+			'hover-height',
+			'hover-opacity'
+		);
+
 		@if ($enabled) {
 			&::after {
 				@include clay-css($base);

package/src/scss/mixins/_input-groups.scss

@@ -87,6 +87,19 @@
 		)
 	);
 
+	$map: map-remove(
+		$map,
+		'breakpoint',
+		'item-margin-bottom',
+		'item-margin-left',
+		'item-margin-right',
+		'item-margin-top',
+		'shrink-margin-bottom',
+		'shrink-margin-left',
+		'shrink-margin-right',
+		'shrink-margin-top'
+	);
+
 	@if ($enabled) {
 		@include media-breakpoint-down($breakpoint-down) {
 			@if (length($map) != 0) {
@@ -169,6 +182,8 @@
 			)
 		);
 
+		$base: map-remove($base, 'bg');
+
 		@if ($enabled) {
 			@if (length($base) != 0) {
 				@include clay-css($base);

package/src/scss/mixins/_labels.scss

@@ -174,6 +174,11 @@
 			)
 		);
 
+		$_pb: map-get($base, padding-bottom);
+		$_pl: map-get($base, padding-left);
+		$_pr: map-get($base, padding-right);
+		$_pt: map-get($base, padding-top);
+
 		$c-inner: setter(map-get($map, c-inner), ());
 		$c-inner: map-deep-merge(
 			$c-inner,
@@ -191,26 +196,39 @@
 				margin-bottom:
 					setter(
 						map-get($c-inner, margin-bottom),
-						math-sign(map-get($base, padding-bottom))
+						if($_pb, calc(#{$_pb} * -1), null)
 					),
 				margin-left:
 					setter(
 						map-get($c-inner, margin-left),
-						math-sign(map-get($base, padding-left))
+						if($_pl, calc(#{$_pl} * -1), null)
 					),
 				margin-right:
 					setter(
 						map-get($c-inner, margin-right),
-						math-sign(map-get($base, padding-right))
+						if($_pr, calc(#{$_pr} * -1), null)
 					),
 				margin-top:
 					setter(
 						map-get($c-inner, margin-top),
-						math-sign(map-get($base, padding-top))
+						if($_pt, calc(#{$_pt} * -1), null)
 					),
 			)
 		);
 
+		$base: map-remove(
+			$base,
+			'item-spacer-x',
+			'item-spacer-y',
+			'lexicon-icon-height',
+			'lexicon-icon-margin-top',
+			'lexicon-icon-width',
+			'padding-x',
+			'padding-y',
+			'sticker-border-radius',
+			'sticker-size'
+		);
+
 		@if ($enabled) {
 			@if (length($base) != 0) {
 				@include clay-css($base);
@@ -652,6 +670,11 @@
 			)
 		);
 
+		$_pb: map-get($map, padding-bottom);
+		$_pl: map-get($map, padding-left);
+		$_pr: map-get($map, padding-right);
+		$_pt: map-get($map, padding-top);
+
 		$c-inner: setter(map-get($map, c-inner), ());
 		$c-inner: map-deep-merge(
 			$c-inner,
@@ -671,29 +694,60 @@
 				margin-bottom:
 					setter(
 						map-get($c-inner, margin-bottom),
-						math-sign(map-get($map, padding-bottom))
+						if($_pb, calc(#{$_pb} * -1), null)
 					),
 				margin-left:
 					setter(
 						map-get($c-inner, margin-left),
-						math-sign(map-get($map, padding-left))
+						if($_pl, calc(#{$_pl} * -1), null)
 					),
 				margin-right:
 					setter(
 						map-get($c-inner, margin-right),
-						math-sign(map-get($map, padding-right))
+						if($_pr, calc(#{$_pr} * -1), null)
 					),
 				margin-top:
 					setter(
 						map-get($c-inner, margin-top),
-						math-sign(map-get($map, padding-top))
+						if($_pt, calc(#{$_pt} * -1), null)
 					),
 			)
 		);
 
+		$base: map-remove(
+			$base,
+			'bg',
+			'disabled-bg',
+			'disabled-border-color',
+			'disabled-box-shadow',
+			'disabled-color',
+			'focus-bg',
+			'focus-border-color',
+			'focus-box-shadow',
+			'focus-color',
+			'focus-outline',
+			'focus-text-decoration',
+			'hover-bg',
+			'hover-border-color',
+			'hover-color',
+			'hover-text-decoration',
+			'item-spacer-x',
+			'item-spacer-y',
+			'lexicon-icon-height',
+			'lexicon-icon-margin-top',
+			'lexicon-icon-width',
+			'link-hover-color',
+			'link-hover-text-decoration',
+			'link-text-decoration',
+			'padding-x',
+			'padding-y',
+			'sticker-border-radius',
+			'sticker-size'
+		);
+
 		@if ($enabled) {
-			@if (length($map) != 0) {
-				@include clay-css($map);
+			@if (length($base) != 0) {
+				@include clay-css($base);
 			}
 
 			@if (length($disabled) != 0) {

package/src/scss/mixins/_links.scss

@@ -528,6 +528,11 @@
 			)
 		);
 
+		$_pb: map-get($map, padding-bottom);
+		$_pl: map-get($map, padding-left);
+		$_pr: map-get($map, padding-right);
+		$_pt: map-get($map, padding-top);
+
 		$c-inner: setter(map-get($map, c-inner), ());
 		$c-inner: map-merge(
 			(
@@ -541,14 +546,60 @@
 							true
 						)
 					),
-				margin-bottom: math-sign(map-get($map, padding-bottom)),
-				margin-left: math-sign(map-get($map, padding-left)),
-				margin-right: math-sign(map-get($map, padding-right)),
-				margin-top: math-sign(map-get($map, padding-top)),
+				margin-bottom: if($_pb, calc(#{$_pb} * -1), null),
+				margin-left: if($_pl, calc(#{$_pl} * -1), null),
+				margin-right: if($_pr, calc(#{$_pr} * -1), null),
+				margin-top: if($_pt, calc(#{$_pt} * -1), null),
 			),
 			$c-inner
 		);
 
+		$base: map-remove(
+			$base,
+			'active-bg',
+			'active-border-color',
+			'active-class-bg',
+			'active-class-border-color',
+			'active-class-color',
+			'active-class-font-weight',
+			'active-class-z-index',
+			'active-color',
+			'active-font-weight',
+			'active-z-index',
+			'bg',
+			'btn-focus-box-shadow',
+			'btn-focus-outline',
+			'disabled-active-pointer-events',
+			'disabled-bg',
+			'disabled-border-color',
+			'disabled-box-shadow',
+			'disabled-color',
+			'disabled-cursor',
+			'disabled-opacity',
+			'disabled-pointer-events',
+			'disabled-text-decoration',
+			'focus-bg',
+			'focus-border-color',
+			'focus-border-radius',
+			'focus-box-shadow',
+			'focus-color',
+			'focus-opacity',
+			'focus-outline',
+			'focus-text-decoration',
+			'focus-z-index',
+			'hover-bg',
+			'hover-border-color',
+			'hover-color',
+			'hover-opacity',
+			'hover-text-decoration',
+			'hover-z-index',
+			'lexicon-icon-font-size',
+			'lexicon-icon-margin-bottom',
+			'lexicon-icon-margin-left',
+			'lexicon-icon-margin-right',
+			'lexicon-icon-margin-top'
+		);
+
 		@if ($enabled) {
 			@if (length($base) != 0) {
 				@include clay-css($base);

package/src/scss/mixins/_list-group.scss

@@ -285,22 +285,26 @@
 		// Box shadows are used for borders, determined by border variables above
 
 		$box-shadow-bottom: inset
-			0 -#{$border-bottom-width}
+			0
+			calc(#{$border-bottom-width} * -1)
 			#{$border-bottom-color};
 		$box-shadow-left: inset #{$border-left-width} 0 #{$border-left-color};
-		$box-shadow-right: inset -#{$border-right-width}
+		$box-shadow-right: inset
+			calc(#{$border-right-width} * -1)
 			0
 			#{$border-right-color};
 		$box-shadow-top: inset 0 #{$border-top-width} #{$border-top-color};
 
 		$active-box-shadow-bottom: inset
-			0 -#{$border-bottom-width}
+			0
+			calc(#{$border-bottom-width} * -1)
 			#{$active-border-bottom-color};
 		$active-box-shadow-left: inset
 			#{$border-left-width}
 			0
 			#{$active-border-left-color};
-		$active-box-shadow-right: inset -#{$border-right-width}
+		$active-box-shadow-right: inset
+			calc(#{$border-right-width} * -1)
 			0
 			#{$active-border-right-color};
 		$active-box-shadow-top: inset

package/src/scss/mixins/_menubar.scss

@@ -266,6 +266,11 @@
 			)
 		);
 
+		$_pb: map-get($toggler-mobile, padding-bottom);
+		$_pl: map-get($toggler-mobile, padding-left);
+		$_pr: map-get($toggler-mobile, padding-right);
+		$_pt: map-get($toggler-mobile, padding-top);
+
 		$_toggler-mobile-c-inner: setter(map-get($toggler-mobile, c-inner), ());
 		$_toggler-mobile-c-inner: map-merge(
 			$_toggler-mobile-c-inner,
@@ -282,22 +287,22 @@
 					),
 				margin-bottom:
 					setter(
-						math-sign(map-get($toggler-mobile, padding-bottom)),
+						if($_pb, calc(#{$_pb} * -1), null),
 						map-get($_toggler-mobile-c-inner, margin-bottom)
 					),
 				margin-left:
 					setter(
-						math-sign(map-get($toggler-mobile, padding-left)),
+						if($_pl, calc(#{$_pl} * -1), null),
 						map-get($_toggler-mobile-c-inner, margin-left)
 					),
 				margin-right:
 					setter(
-						math-sign(map-get($toggler-mobile, padding-right)),
+						if($_pr, calc(#{$_pr} * -1), null),
 						map-get($_toggler-mobile-c-inner, margin-right)
 					),
 				margin-top:
 					setter(
-						math-sign(map-get($toggler-mobile, padding-top)),
+						if($_pt, calc(#{$_pt} * -1), null),
 						map-get($_toggler-mobile-c-inner, margin-top)
 					),
 			)
@@ -309,6 +314,38 @@
 			$_old-toggler-c-inner
 		);
 
+		$map: map-remove(
+			$map,
+			'border-color-mobile',
+			'border-style-mobile',
+			'border-width-mobile',
+			'breakpoint-down',
+			'breakpoint-up',
+			'collapse-border-color-mobile',
+			'collapse-border-style-mobile',
+			'collapse-border-width-mobile',
+			'collapse-inner-spacer-y-mobile',
+			'collapse-left-mobile',
+			'collapse-margin-top-mobile',
+			'collapse-max-width-mobile',
+			'collapse-right-mobile',
+			'collapse-z-index-mobile',
+			'margin-bottom-mobile',
+			'margin-left-mobile',
+			'margin-right-mobile',
+			'margin-top-mobile',
+			'max-width-mobile',
+			'min-height-mobile',
+			'padding-x-mobile',
+			'padding-y-mobile',
+			'toggler-border-color-mobile',
+			'toggler-border-style-mobile',
+			'toggler-border-width-mobile',
+			'toggler-height-mobile',
+			'toggler-padding-x-mobile',
+			'toggler-padding-y-mobile'
+		);
+
 		@if ($enabled) {
 			@include clay-css($map);
 
@@ -900,6 +937,45 @@
 		)
 	);
 
+	$map: map-remove(
+		$map,
+		'bg',
+		'bg-mobile',
+		'border-color-mobile',
+		'border-style-mobile',
+		'breakpoint-down',
+		'breakpoint-up',
+		'collapse-bg-mobile',
+		'collapse-border-color-mobile',
+		'collapse-border-radius-mobile',
+		'collapse-border-style-mobile',
+		'collapse-box-shadow-mobile',
+		'link-active-bg',
+		'link-active-bg-mobile',
+		'link-active-class-font-weight',
+		'link-active-color',
+		'link-active-color-mobile',
+		'link-active-font-weight-mobile',
+		'link-bg',
+		'link-border-radius',
+		'link-border-radius-mobile',
+		'link-color',
+		'link-color-mobile',
+		'link-disabled-bg',
+		'link-disabled-bg-mobile',
+		'link-disabled-color',
+		'link-disabled-color-mobile',
+		'link-hover-bg',
+		'link-hover-bg-mobile',
+		'link-hover-color',
+		'link-hover-color-mobile',
+		'toggler-border-color-mobile',
+		'toggler-border-style-mobile',
+		'toggler-color-mobile',
+		'toggler-font-size-mobile',
+		'toggler-font-weight-mobile'
+	);
+
 	@if ($enable) {
 		@if (length($map) != 0) {
 			@include clay-css($map);

package/src/scss/mixins/_modals.scss

@@ -111,24 +111,16 @@
 
 		$map: map-remove(
 			$map,
-			enabled,
-			modal-header,
-			header,
-			header-bg,
-			header-border-color,
-			header-color,
-			header-close,
-			header-close-color,
-			btn-focus-box-shadow,
-			btn-focus-outline,
-			modal-body,
-			body,
-			body-bg,
-			body-color,
-			modal-footer,
-			footer,
-			footer-bg,
-			footer-border-color
+			'header-bg',
+			'header-border-color',
+			'header-color',
+			'header-close-color',
+			'btn-focus-box-shadow',
+			'btn-focus-outline',
+			'body-bg',
+			'body-color',
+			'footer-bg',
+			'footer-border-color'
 		);
 
 		@if ($enabled) {

package/src/scss/mixins/_nav.scss

@@ -212,6 +212,25 @@
 			)
 		);
 
+		$base: map-remove(
+			$base,
+			'bg',
+			'link-active-bg',
+			'link-active-color',
+			'link-active-font-weight',
+			'link-bg',
+			'link-border-radius',
+			'link-color',
+			'link-disabled-bg',
+			'link-disabled-color',
+			'link-disabled-opacity',
+			'link-focus-bg',
+			'link-focus-color',
+			'link-font-weight',
+			'link-hover-bg',
+			'link-hover-color'
+		);
+
 		@if ($enabled) {
 			@if (length($base) != 0) {
 				@include clay-css($base);