@clayui/css 3.159.0 → 3.160.0

package/src/scss/variables/_navs.scss

@@ -19,16 +19,20 @@ $nav-link: map-deep-merge(
 		padding-top: $nav-link-padding-y,
 		position: relative,
 		user-select: none,
+
 		hover: (
 			text-decoration: none,
 		),
+
 		focus: (
 			text-decoration: none,
 			z-index: 1,
 		),
+
 		disabled: (
 			color: $nav-link-disabled-color,
 			cursor: $nav-link-disabled-cursor,
+
 			active: (
 				pointer-events: none,
 			),
@@ -44,6 +48,7 @@ $nav-link-btn-unstyled: map-deep-merge(
 	(
 		width: 100%,
 		disabled-opacity: 1,
+
 		c-inner: (
 			width: auto,
 		),
@@ -74,7 +79,7 @@ $nav-btn-padding-x: 0.5rem !default;
 
 /// @deprecated after v3.4.0 use the Sass map `$nav-btn` instead
 
-$nav-btn-padding-y: 0 !default;
+$nav-btn-padding-y: 0rem !default;
 
 $nav-btn: () !default;
 $nav-btn: map-deep-merge(
@@ -90,31 +95,36 @@ $nav-btn: map-deep-merge(
 		position: relative,
 		text-align: center,
 		width: auto,
+
 		focus: (
 			z-index: 1,
 		),
+
 		disabled: (
 			opacity: 1,
 		),
+
 		c-inner: (
-			margin-bottom: 0,
-			margin-left: math-sign($nav-btn-padding-x),
-			margin-right: math-sign($nav-btn-padding-x),
+			margin-bottom: 0rem,
+			margin-left: calc(#{$nav-btn-padding-x} * -1),
+			margin-right: calc(#{$nav-btn-padding-x} * -1),
 			margin-top:
-				math-sign(
-					if(
-						variable-exists(btn-border-width),
-						$btn-border-width,
-						$border-width
-					)
+				calc(
+					#{if(
+							variable-exists(btn-border-width),
+							$btn-border-width,
+							$border-width
+						)} * -1
 				),
 		),
+
 		btn-link: (
-			margin-left: 0,
-			margin-right: 0,
+			margin-left: 0rem,
+			margin-right: 0rem,
 		),
+
 		lexicon-icon: (
-			margin-top: 0,
+			margin-top: 0rem,
 		),
 	),
 	$nav-btn
@@ -125,23 +135,24 @@ $nav-btn: map-deep-merge(
 $nav-btn-monospaced: () !default;
 $nav-btn-monospaced: map-deep-merge(
 	(
-		padding: 0,
+		padding: 0rem,
+
 		c-inner: (
 			margin-left:
-				math-sign(
-					if(
-						variable-exists(btn-border-width),
-						$btn-border-width,
-						$border-width
-					)
+				calc(
+					#{if(
+							variable-exists(btn-border-width),
+							$btn-border-width,
+							$border-width
+						)} * -1
 				),
 			margin-right:
-				math-sign(
-					if(
-						variable-exists(btn-border-width),
-						$btn-border-width,
-						$border-width
-					)
+				calc(
+					#{if(
+							variable-exists(btn-border-width),
+							$btn-border-width,
+							$border-width
+						)} * -1
 				),
 		),
 	),
@@ -159,9 +170,10 @@ $nav-link-monospaced: map-deep-merge(
 		justify-content: center,
 		margin: $nav-btn-margin-y $nav-btn-margin-x,
 		min-width: $nav-item-monospaced-size,
-		padding: 0,
+		padding: 0rem,
+
 		lexicon-icon: (
-			margin-top: 0,
+			margin-top: 0rem,
 		),
 	),
 	$nav-link-monospaced
@@ -188,12 +200,13 @@ $nav-divider: map-deep-merge(
 		margin-left: 0.5rem,
 		padding-left: 0.5rem,
 		position: relative,
+
 		before: (
 			background-color: $nav-divider-color,
 			content: '',
 			display: block,
 			height: 1rem,
-			left: 0,
+			left: 0rem,
 			margin-top: -0.5rem,
 			position: absolute,
 			top: 50%,
@@ -210,6 +223,7 @@ $nav-divider-end: map-deep-merge(
 		margin-right: 0.5rem,
 		padding-right: 0.5rem,
 		position: relative,
+
 		after: (
 			background-color: $nav-divider-color,
 			content: '',
@@ -217,7 +231,7 @@ $nav-divider-end: map-deep-merge(
 			height: 1rem,
 			margin-top: -0.5rem,
 			position: absolute,
-			right: 0,
+			right: 0rem,
 			top: 50%,
 			width: 1px,
 			z-index: 2,
@@ -243,10 +257,10 @@ $nav-text-truncate: map-merge(
 
 // .nav .nav-form
 
-$nav-form-padding-bottom: 0 !default;
+$nav-form-padding-bottom: 0rem !default;
 $nav-form-padding-left: $nav-link-padding-x !default;
 $nav-form-padding-right: $nav-link-padding-x !default;
-$nav-form-padding-top: 0 !default;
+$nav-form-padding-top: 0rem !default;
 
 // .nav
 
@@ -257,8 +271,9 @@ $nav: map-deep-merge(
 		flex-wrap: wrap,
 		font-size: $nav-font-size,
 		list-style: none,
-		margin-bottom: 0,
-		padding-left: 0,
+		margin-bottom: 0rem,
+		padding-left: 0rem,
+
 		nav-form: (
 			padding-bottom: $nav-form-padding-bottom,
 			padding-left: $nav-form-padding-left,
@@ -292,6 +307,7 @@ $nav-justified: map-deep-merge(
 			flex-grow: 1,
 			text-align: center,
 		),
+
 		nav-link: (
 			text-align: center,
 			width: 100%,
@@ -311,6 +327,7 @@ $nav-stacked: () !default;
 $nav-stacked: map-deep-merge(
 	(
 		display: block,
+
 		nav-form: (
 			padding-bottom: $nav-stacked-nav-form-padding-bottom,
 			padding-left: $nav-stacked-nav-form-padding-left,
@@ -327,22 +344,25 @@ $nav-unstyled: () !default;
 $nav-unstyled: map-deep-merge(
 	(
 		flex-wrap: nowrap,
+
 		nav-link: (
 			line-height: $nav-item-monospaced-size,
-			padding-bottom: 0,
+			padding-bottom: 0rem,
 			padding-left: 4px,
 			padding-right: 4px,
-			padding-top: 0,
+			padding-top: 0rem,
 		),
+
 		nav-link-monospaced: (
-			margin: 0 4px,
+			margin: 0px 4px,
 		),
+
 		nav-btn: (
-			margin: 0 4px,
-			padding-bottom: 0,
+			margin: 0px 4px,
+			padding-bottom: 0rem,
 			padding-left: 4px,
 			padding-right: 4px,
-			padding-top: 0,
+			padding-top: 0rem,
 		),
 	),
 	$nav-unstyled
@@ -365,8 +385,8 @@ $nav-tabs-font-size: null !default;
 // Nav Tabs Link
 
 $nav-tabs-border-color: $gray-300 !default;
+$nav-tabs-border-radius: $border-radius $border-radius 0rem 0rem !default;
 $nav-tabs-border-width: $border-width !default;
-$nav-tabs-border-radius: $border-radius $border-radius 0 0 !default;
 
 $nav-tabs-link-color: null !default;
 $nav-tabs-link-padding-x: null !default;
@@ -378,8 +398,8 @@ $nav-tabs-link-active-bg: $white !default;
 $nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg !default;
 $nav-tabs-link-active-color: $gray-700 !default;
 
-$nav-tabs-link-show-color: $nav-tabs-link-active-color !default;
 $nav-tabs-link-show-bg: $nav-tabs-link-active-bg !default;
+$nav-tabs-link-show-color: $nav-tabs-link-active-color !default;
 $nav-tabs-link-show-border-color: $nav-tabs-link-active-border-color !default;
 
 // .nav-tabs .nav-link[aria-expanded="true"]
@@ -407,26 +427,33 @@ $nav-tabs-link: map-deep-merge(
 		padding-right: $nav-tabs-link-padding-x,
 		padding-top: $nav-tabs-link-padding-y,
 		white-space: nowrap,
+
 		hover: (
 			border-color: $nav-tabs-link-hover-border-color,
 		),
+
 		focus: (
 			border-color: $nav-tabs-link-hover-border-color,
 		),
+
 		active: (
 			background-color: $nav-tabs-link-active-bg,
 			border-color: $nav-tabs-link-active-border-color,
 			color: $nav-tabs-link-active-color,
 		),
+
 		show: $nav-tabs-link-show,
+
 		disabled: (
 			background-color: transparent,
 			border-color: transparent,
 			color: $nav-link-disabled-color,
 		),
+
 		inline-item-after: (
 			margin-left: 0.25rem,
 		),
+
 		inline-item-before: (
 			margin-right: 0.25rem,
 		),
@@ -447,15 +474,19 @@ $nav-tabs: map-deep-merge(
 	(
 		border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color,
 		font-size: $nav-tabs-font-size,
+
 		nav-item: (
-			margin-bottom: math-sign($nav-tabs-border-width),
+			margin-bottom: calc(#{$nav-tabs-border-width} * -1),
 		),
+
 		nav-link: $nav-tabs-link,
+
 		dropdown-menu: (
 			border-top-left-radius: clay-enable-rounded(0),
 			border-top-right-radius: clay-enable-rounded(0),
-			margin-top: math-sign($nav-tabs-border-width),
+			margin-top: calc(#{$nav-tabs-border-width} * -1),
 		),
+
 		tab-content: (
 			tab-pane: (
 				background-color: $nav-tabs-tab-pane-bg,
@@ -472,6 +503,7 @@ $nav-tabs-light: () !default;
 $nav-tabs-light: map-deep-merge(
 	(
 		background-color: $gray-100,
+
 		tab-content: (
 			tab-pane: (
 				background-color: transparent,

package/src/scss/variables/_pagination.scss

@@ -63,8 +63,8 @@ $pagination-link-cursor: pointer !default;
 
 $pagination-link-transition: null !default;
 
-$pagination-link-first-border-radius: $border-radius 0 0 $border-radius !default;
-$pagination-link-last-border-radius: 0 $border-radius $border-radius 0 !default;
+$pagination-link-first-border-radius: $border-radius 0rem 0rem $border-radius !default;
+$pagination-link-last-border-radius: 0rem $border-radius $border-radius 0rem !default;
 
 $pagination-margin-bottom: 0.5rem !default;
 
@@ -128,6 +128,7 @@ $pagination-link-disabled: map-deep-merge(
 		opacity: $pagination-disabled-opacity,
 		pointer-events: $pagination-disabled-pointer-events,
 		z-index: $zindex-pagination-link-disabled,
+
 		active: (
 			pointer-events: none,
 		),
@@ -150,20 +151,26 @@ $pagination-link: map-deep-merge(
 		height: $pagination-item-height,
 		justify-content: center,
 		line-height: $pagination-line-height,
-		margin-left: 0,
+		margin-left: 0rem,
 		padding-bottom: $pagination-padding-y,
 		padding-left: $pagination-padding-x,
 		padding-right: $pagination-padding-x,
 		padding-top: $pagination-padding-y,
 		position: relative,
 		transition: $pagination-link-transition,
+
 		hover: $pagination-link-hover,
+
 		focus: $pagination-link-focus,
+
 		active: $pagination-link-active,
+
 		active-class: $pagination-link-active,
+
 		disabled: $pagination-link-disabled,
+
 		lexicon-icon: (
-			margin-top: 0,
+			margin-top: 0rem,
 		),
 	),
 	$pagination-link
@@ -200,7 +207,7 @@ $pagination: map-deep-merge(
 		font-size: $pagination-font-size,
 		list-style: none,
 		margin-bottom: $pagination-margin-bottom,
-		padding-left: 0,
+		padding-left: 0rem,
 	),
 	$pagination
 );
@@ -213,10 +220,12 @@ $pagination-bar: map-deep-merge(
 		align-items: center,
 		display: flex,
 		flex-wrap: wrap,
+
 		media-breakpoint-down: (
 			sm: (
 				flex-direction: column,
 				justify-content: center,
+
 				pagination: (
 					margin-top: $pagination-margin-top-mobile,
 				),
@@ -348,10 +357,15 @@ $pagination-items-per-page-link: map-deep-merge(
 		padding-top: $pagination-padding-y,
 		text-decoration: none,
 		transition: $pagination-items-per-page-transition,
+
 		hover: $pagination-items-per-page-link-hover,
+
 		focus: $pagination-items-per-page-link-focus,
+
 		active: $pagination-items-per-page-link-active,
+
 		disabled: $pagination-items-per-page-link-disabled,
+
 		lexicon-icon: (
 			margin-left: $pagination-items-per-page-lexicon-icon-margin-left,
 			margin-top: $pagination-items-per-page-lexicon-icon-margin-top,
@@ -368,6 +382,7 @@ $pagination-items-per-page: map-deep-merge(
 		font-size: $pagination-items-per-page-font-size,
 		margin-bottom: $pagination-margin-bottom,
 		link: $pagination-items-per-page-link,
+
 		media-breakpoint-down: (
 			sm: (
 				pagination-results: (
@@ -429,14 +444,17 @@ $pagination-sm: map-deep-merge(
 			padding-left: $pagination-padding-x-sm,
 			padding-top: $pagination-padding-y-sm,
 		),
+
 		page-link-first: (
 			border-bottom-left-radius: $pagination-link-border-radius-sm,
 			border-top-left-radius: $pagination-link-border-radius-sm,
 		),
+
 		page-link-last: (
 			border-bottom-right-radius: $pagination-link-border-radius-sm,
 			border-top-right-radius: $pagination-link-border-radius-sm,
 		),
+
 		pagination-items-per-page: (
 			border-radius:
 				clay-enable-rounded($pagination-link-border-radius-sm),
@@ -449,12 +467,14 @@ $pagination-sm: map-deep-merge(
 				padding-right: $pagination-padding-x,
 				padding-top: $pagination-padding-y-sm,
 			),
+
 			lexicon-icon: (
 				margin-left:
 					$pagination-items-per-page-lexicon-icon-margin-left-sm,
 				margin-right:
 					$pagination-items-per-page-lexicon-icon-margin-top-sm,
 			),
+
 			pagination-results: (
 				font-size: $pagination-font-size-sm,
 				line-height: $pagination-line-height-sm,
@@ -491,14 +511,17 @@ $pagination-lg: map-deep-merge(
 			padding-right: $pagination-padding-x-lg,
 			padding-top: $pagination-padding-y-lg,
 		),
+
 		page-link-first: (
 			border-bottom-left-radius: $pagination-link-border-radius-lg,
 			border-top-left-radius: $pagination-link-border-radius-lg,
 		),
+
 		page-link-last: (
 			border-bottom-right-radius: $pagination-link-border-radius-lg,
 			border-top-right-radius: $pagination-link-border-radius-lg,
 		),
+
 		pagination-items-per-page: (
 			border-radius:
 				clay-enable-rounded($pagination-link-border-radius-lg),
@@ -508,12 +531,14 @@ $pagination-lg: map-deep-merge(
 				line-height: $pagination-line-height-lg,
 				padding: $pagination-padding-y-lg $pagination-padding-x,
 			),
+
 			lexicon-icon: (
 				margin-left:
 					$pagination-items-per-page-lexicon-icon-margin-left-lg,
 				margin-right:
 					$pagination-items-per-page-lexicon-icon-margin-top-lg,
 			),
+
 			pagination-results: (
 				font-size: $pagination-font-size-lg,
 				line-height: $pagination-line-height-lg,