@clayui/css 3.158.0 → 3.160.0

package/src/scss/cadmin/variables/_navigation-bar.scss

@@ -2,21 +2,28 @@ $cadmin-navigation-bar-size: () !default;
 $cadmin-navigation-bar-size: map-deep-merge(
 	(
 		scaling-navbar: false,
+
 		border-bottom-width: 1px,
 		font-size: $cadmin-navbar-font-size,
 		height: 48px,
-		padding-x: 0,
-		padding-y: 0,
+		padding-x: 0px,
+		padding-y: 0px,
 		link-padding-x: 16px,
-		nav-item-dropdown-margin-top: 0,
+
+		nav-item-dropdown-margin-top: 0px,
+
 		active-border-bottom-width: 4px,
 		active-border-offset-bottom: -8.5px,
+
 		link-height-mobile: 32px,
+
 		collapse-dropdown-item-padding-x-mobile: 16px,
 		collapse-dropdown-item-padding-y-mobile: 13px,
+
 		toggler-link-height: 32px,
 		toggler-link-margin-y: 7.5px,
-		toggler-link-padding-y: 0,
+		toggler-link-padding-y: 0px,
+
 		media-breakpoint-down: (),
 		media-breakpoint-up: (),
 	),
@@ -28,20 +35,24 @@ $cadmin-navigation-bar-base: map-deep-merge(
 	(
 		border-color: transparent,
 		border-style: solid,
+
 		navbar-nav: (
 			nav-link: (
 				border-radius: clay-enable-rounded($cadmin-border-radius),
-				border-width: 0,
+				border-width: 0px,
 				outline: 0,
 				font-size: inherit,
+
 				focus: (
 					box-shadow: $cadmin-component-focus-box-shadow,
 				),
+
 				disabled: (
 					box-shadow: none,
 				),
 			),
 		),
+
 		media-breakpoint-down: (
 			sm: (
 				navbar-expand-md: (
@@ -106,14 +117,14 @@ $cadmin-navigation-bar-base: map-deep-merge(
 									)
 								),
 							left:
-								math-sign(
-									setter(
-										map-get(
-											$cadmin-navigation-bar-size,
-											border-left-width
-										),
-										0
-									)
+								setter(
+									calc(
+										#{map-get(
+												$cadmin-navigation-bar-size,
+												border-left-width
+											)} * -1
+									),
+									0
 								),
 							margin-top:
 								setter(
@@ -156,39 +167,40 @@ $cadmin-navigation-bar-base: map-deep-merge(
 									0
 								),
 							right:
-								math-sign(
-									setter(
-										map-get(
-											$cadmin-navigation-bar-size,
-											border-right-width
-										),
-										0
-									)
+								setter(
+									calc(
+										#{map-get(
+												$cadmin-navigation-bar-size,
+												border-right-width
+											)} * -1
+									),
+									0
 								),
 						),
 					),
+
 					navbar-collapse: (
 						navbar-nav: (
 							dropdown-divider: (
 								margin-left:
-									math-sign(
-										setter(
-											map-get(
-												$cadmin-navigation-bar-size,
-												padding-x
-											),
-											null
-										)
+									setter(
+										calc(
+											#{map-get(
+													$cadmin-navigation-bar-size,
+													padding-x
+												)} * -1
+										),
+										null
 									),
 								margin-right:
-									math-sign(
-										setter(
-											map-get(
-												$cadmin-navigation-bar-size,
-												padding-x
-											),
-											null
-										)
+									setter(
+										calc(
+											#{map-get(
+													$cadmin-navigation-bar-size,
+													padding-x
+												)} * -1
+										),
+										null
 									),
 							),
 							dropdown-item: (
@@ -230,6 +242,7 @@ $cadmin-navigation-bar-base: map-deep-merge(
 				),
 			),
 		),
+
 		media-breakpoint-up: (
 			md: (
 				navbar-expand-md: (
@@ -295,25 +308,31 @@ $cadmin-navigation-bar-light: map-deep-merge(
 	(
 		background-color: $cadmin-white,
 		border-color: $cadmin-gray-200,
+
 		navbar-nav: (
 			nav-link: (
 				color: $cadmin-navbar-light-color,
 				font-weight: $cadmin-font-weight-semi-bold,
+
 				hover: (
 					color: $cadmin-gray-900,
 				),
+
 				focus: (
 					color: $cadmin-gray-900,
 				),
+
 				active: (
 					color: $cadmin-navbar-light-active-color,
 				),
+
 				disabled: (
 					color: $cadmin-gray-600,
 					opacity: $cadmin-component-disabled-opacity,
 				),
 			),
 		),
+
 		media-breakpoint-down: (
 			sm: (
 				navbar-expand-md: (
@@ -322,15 +341,19 @@ $cadmin-navigation-bar-light: map-deep-merge(
 							dropdown-item: (
 								color: $cadmin-navbar-light-color,
 								font-weight: $cadmin-font-weight-semi-bold,
+
 								hover: (
 									color: $cadmin-gray-900,
 								),
+
 								focus: (
 									color: $cadmin-gray-900,
 								),
+
 								active: (
 									color: $cadmin-navbar-light-active-color,
 								),
+
 								disabled: (
 									color: $cadmin-gray-600,
 									opacity: $cadmin-component-disabled-opacity,
@@ -341,6 +364,7 @@ $cadmin-navigation-bar-light: map-deep-merge(
 				),
 			),
 		),
+
 		media-breakpoint-up: (
 			md: (
 				navbar-expand-md: (
@@ -367,31 +391,38 @@ $cadmin-navigation-bar-secondary: map-deep-merge(
 	(
 		background-color: $cadmin-secondary-d1,
 		color: $cadmin-white,
+
 		navbar-nav: (
 			nav-link: (
 				color: $cadmin-secondary-l2,
 				font-weight: $cadmin-font-weight-semi-bold,
+
 				hover: (
 					color: $cadmin-white,
 				),
+
 				focus: (
 					color: $cadmin-white,
 				),
+
 				active: (
 					color: $cadmin-white,
 				),
+
 				disabled: (
 					color: $cadmin-gray-400,
 					opacity: $cadmin-component-disabled-opacity,
 				),
 			),
 		),
+
 		navbar-brand: (
 			color: rgba(255, 255, 255, 0.9),
 			hover: (
 				color: rgba(255, 255, 255, 0.9),
 			),
 		),
+
 		media-breakpoint-down: (
 			sm: (
 				navbar-expand-md: (
@@ -400,15 +431,19 @@ $cadmin-navigation-bar-secondary: map-deep-merge(
 							dropdown-item: (
 								color: $cadmin-secondary-l2,
 								font-weight: $cadmin-font-weight-semi-bold,
+
 								hover: (
 									color: $cadmin-white,
 								),
+
 								focus: (
 									color: $cadmin-white,
 								),
+
 								active: (
 									color: $cadmin-white,
 								),
+
 								disabled: (
 									color: $cadmin-gray-400,
 									opacity: $cadmin-component-disabled-opacity,
@@ -419,6 +454,7 @@ $cadmin-navigation-bar-secondary: map-deep-merge(
 				),
 			),
 		),
+
 		media-breakpoint-up: (),
 	),
 	$cadmin-navigation-bar-secondary

package/src/scss/cadmin/variables/_navs.scss

@@ -15,17 +15,21 @@ $cadmin-nav-link: map-deep-merge(
 		padding-right: $cadmin-nav-link-padding-x,
 		padding-top: $cadmin-nav-link-padding-y,
 		position: relative,
+
 		hover: (
 			text-decoration: none,
 		),
+
 		focus: (
 			text-decoration: none,
 			z-index: 1,
 		),
+
 		disabled: (
 			color: $cadmin-nav-link-disabled-color,
 			box-shadow: none,
 			cursor: $cadmin-nav-link-disabled-cursor,
+
 			active: (
 				pointer-events: none,
 			),
@@ -38,12 +42,15 @@ $cadmin-nav-link-btn-unstyled: () !default;
 $cadmin-nav-link-btn-unstyled: map-deep-merge(
 	(
 		width: 100%,
+
 		focus: (
 			box-shadow: $cadmin-component-focus-box-shadow,
 		),
+
 		disabled: (
 			opacity: 1,
 		),
+
 		c-inner: (
 			width: auto,
 		),
@@ -59,10 +66,12 @@ $cadmin-nav-btn-margin-x: 4px !default; // 4px
 
 // @deprecated after v3.4.0 use the Sass map `$cadmin-nav-btn` instead
 
-$cadmin-nav-btn-margin-y: (
-		($cadmin-line-height-base * $cadmin-font-size-base) +
-			($cadmin-nav-link-padding-y * 2) - $cadmin-nav-item-monospaced-size
-	) * 0.5 !default;
+$cadmin-nav-btn-margin-y: calc(
+	(
+			#{$cadmin-line-height-base} * #{$cadmin-font-size-base} + #{$cadmin-nav-link-padding-y} *
+				2 - #{$cadmin-nav-item-monospaced-size}
+		) * 0.5
+) !default;
 
 // @deprecated after v3.4.0 use the Sass map `$cadmin-nav-btn` instead
 
@@ -70,7 +79,7 @@ $cadmin-nav-btn-padding-x: $cadmin-btn-padding-x-sm !default;
 
 // @deprecated after v3.4.0 use the Sass map `$cadmin-nav-btn` instead
 
-$cadmin-nav-btn-padding-y: 0 !default;
+$cadmin-nav-btn-padding-y: 0px !default;
 
 $cadmin-nav-btn: () !default;
 $cadmin-nav-btn: map-deep-merge(
@@ -86,24 +95,29 @@ $cadmin-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($cadmin-nav-btn-padding-x),
-			margin-right: math-sign($cadmin-nav-btn-padding-x),
-			margin-top: math-sign($cadmin-btn-border-width),
+			margin-bottom: 0px,
+			margin-left: calc(#{$cadmin-nav-btn-padding-x} * -1),
+			margin-right: calc(#{$cadmin-nav-btn-padding-x} * -1),
+			margin-top: calc(#{$cadmin-btn-border-width} * -1),
 		),
+
 		btn-link: (
-			margin-left: 0,
-			margin-right: 0,
+			margin-left: 0px,
+			margin-right: 0px,
 		),
+
 		lexicon-icon: (
-			margin-top: 0,
+			margin-top: 0px,
 		),
 	),
 	$cadmin-nav-btn
@@ -112,10 +126,11 @@ $cadmin-nav-btn: map-deep-merge(
 $cadmin-nav-btn-monospaced: () !default;
 $cadmin-nav-btn-monospaced: map-deep-merge(
 	(
-		padding: 0,
+		padding: 0px,
+
 		c-inner: (
-			margin-left: math-sign($cadmin-btn-border-width),
-			margin-right: math-sign($cadmin-btn-border-width),
+			margin-left: calc(#{$cadmin-btn-border-width} * -1),
+			margin-right: calc(#{$cadmin-btn-border-width} * -1),
 		),
 	),
 	$cadmin-nav-btn-monospaced
@@ -130,9 +145,10 @@ $cadmin-nav-link-monospaced: map-deep-merge(
 		justify-content: center,
 		margin: $cadmin-nav-btn-margin-y $cadmin-nav-btn-margin-x,
 		min-width: $cadmin-nav-item-monospaced-size,
-		padding: 0,
+		padding: 0px,
+
 		lexicon-icon: (
-			margin-top: 0,
+			margin-top: 0px,
 		),
 	),
 	$cadmin-nav-link-monospaced
@@ -151,7 +167,7 @@ $cadmin-nav-item: map-deep-merge(
 // .nav-divider
 
 $cadmin-nav-divider-color: $cadmin-gray-600 !default;
-$cadmin-nav-divider-margin-y: $cadmin-spacer * 0.5 !default;
+$cadmin-nav-divider-margin-y: calc(#{$cadmin-spacer} * 0.5) !default;
 
 $cadmin-nav-divider: () !default;
 $cadmin-nav-divider: map-deep-merge(
@@ -159,12 +175,13 @@ $cadmin-nav-divider: map-deep-merge(
 		margin-left: 8px,
 		padding-left: 8px,
 		position: relative,
+
 		before: (
 			background-color: $cadmin-nav-divider-color,
 			content: '',
 			display: block,
 			height: 16px,
-			left: 0,
+			left: 0px,
 			margin-top: -8px,
 			position: absolute,
 			top: 50%,
@@ -181,6 +198,7 @@ $cadmin-nav-divider-end: map-deep-merge(
 		margin-right: 8px,
 		padding-right: 8px,
 		position: relative,
+
 		after: (
 			background-color: $cadmin-nav-divider-color,
 			content: '',
@@ -188,7 +206,7 @@ $cadmin-nav-divider-end: map-deep-merge(
 			height: 16px,
 			margin-top: -8px,
 			position: absolute,
-			right: 0,
+			right: 0px,
 			top: 50%,
 			width: 1px,
 			z-index: 2,
@@ -214,10 +232,10 @@ $cadmin-nav-text-truncate: map-deep-merge(
 
 // .nav .nav-form
 
-$cadmin-nav-form-padding-bottom: 0 !default;
+$cadmin-nav-form-padding-bottom: 0px !default;
 $cadmin-nav-form-padding-left: $cadmin-nav-link-padding-x !default;
 $cadmin-nav-form-padding-right: $cadmin-nav-link-padding-x !default;
-$cadmin-nav-form-padding-top: 0 !default;
+$cadmin-nav-form-padding-top: 0px !default;
 
 $cadmin-nav-form: () !default;
 $cadmin-nav-form: map-merge(
@@ -239,8 +257,8 @@ $cadmin-nav: map-deep-merge(
 		flex-wrap: wrap,
 		font-size: $cadmin-nav-font-size,
 		list-style: none,
-		margin-bottom: 0,
-		padding-left: 0,
+		margin-bottom: 0px,
+		padding-left: 0px,
 	),
 	$cadmin-nav
 );
@@ -256,6 +274,7 @@ $cadmin-nav-stacked: () !default;
 $cadmin-nav-stacked: map-deep-merge(
 	(
 		display: block,
+
 		nav-form: (
 			padding-bottom: $cadmin-nav-stacked-nav-form-padding-bottom,
 			padding-left: $cadmin-nav-stacked-nav-form-padding-left,
@@ -272,22 +291,25 @@ $cadmin-nav-unstyled: () !default;
 $cadmin-nav-unstyled: map-deep-merge(
 	(
 		flex-wrap: nowrap,
+
 		nav-link: (
 			line-height: $cadmin-nav-item-monospaced-size,
-			padding-bottom: 0,
+			padding-bottom: 0px,
 			padding-left: 4px,
 			padding-right: 4px,
-			padding-top: 0,
+			padding-top: 0px,
 		),
+
 		nav-link-monospaced: (
-			margin: 0 4px,
+			margin: 0px 4px,
 		),
+
 		nav-btn: (
-			margin: 0 4px,
-			padding-bottom: 0,
+			margin: 0px 4px,
+			padding-bottom: 0px,
 			padding-left: 4px,
 			padding-right: 4px,
-			padding-top: 0,
+			padding-top: 0px,
 		),
 	),
 	$cadmin-nav-unstyled
@@ -305,8 +327,9 @@ $cadmin-nav-tabs-font-size: 14px !default; // 14px
 // Nav Tabs Link
 
 $cadmin-nav-tabs-border-color: $cadmin-gray-400 !default;
+$cadmin-nav-tabs-border-radius: $cadmin-border-radius $cadmin-border-radius 0px
+	0px !default;
 $cadmin-nav-tabs-border-width: $cadmin-border-width !default;
-$cadmin-nav-tabs-border-radius: $cadmin-border-radius $cadmin-border-radius 0 0 !default;
 
 $cadmin-nav-tabs-link-color: $cadmin-gray-600 !default;
 $cadmin-nav-tabs-link-padding-x: null !default;
@@ -319,9 +342,9 @@ $cadmin-nav-tabs-link-active-border-color: $cadmin-gray-400 $cadmin-gray-400
 	$cadmin-nav-tabs-link-active-bg !default;
 $cadmin-nav-tabs-link-active-color: $cadmin-gray-900 !default;
 
-$cadmin-nav-tabs-link-show-color: $cadmin-nav-tabs-link-active-color !default;
 $cadmin-nav-tabs-link-show-bg: $cadmin-white !default;
 $cadmin-nav-tabs-link-show-border-color: $cadmin-nav-tabs-link-active-border-color !default;
+$cadmin-nav-tabs-link-show-color: $cadmin-nav-tabs-link-active-color !default;
 
 // .nav-tabs .nav-link[aria-expanded="true"]
 
@@ -350,29 +373,36 @@ $cadmin-nav-tabs-link: map-deep-merge(
 		padding-top: $cadmin-nav-tabs-link-padding-y,
 		transition: box-shadow 0.15s ease-in-out,
 		white-space: nowrap,
+
 		hover: (
 			border-color: $cadmin-nav-tabs-link-hover-border-color,
 		),
+
 		focus: (
 			border-color: $cadmin-nav-tabs-link-hover-border-color,
 			box-shadow: $cadmin-component-focus-box-shadow,
 			outline: 0,
 		),
+
 		active: (
 			background-color: $cadmin-nav-tabs-link-active-bg,
 			border-color: $cadmin-nav-tabs-link-active-border-color,
 			color: $cadmin-nav-tabs-link-active-color,
 		),
+
 		show: $cadmin-nav-tabs-link-show,
+
 		disabled: (
 			background-color: transparent,
 			border-color: transparent,
 			box-shadow: none,
 			color: $cadmin-nav-link-disabled-color,
 		),
+
 		inline-item-after: (
 			margin-left: 4px,
 		),
+
 		inline-item-before: (
 			margin-right: 4px,
 		),
@@ -390,9 +420,11 @@ $cadmin-nav-tabs: map-deep-merge(
 		padding-right: 24px,
 		padding-top: 7px,
 		font-size: $cadmin-nav-tabs-font-size,
+
 		nav-item: (
-			margin-bottom: math-sign($cadmin-nav-tabs-border-width),
+			margin-bottom: calc(#{$cadmin-nav-tabs-border-width} * -1),
 		),
+
 		nav-link: $cadmin-nav-tabs-link,
 	),
 	$cadmin-nav-tabs