@clayui/css 3.158.0 → 3.160.0

package/src/scss/variables/_menubar.scss

@@ -4,82 +4,97 @@ $menubar-primary: map-deep-merge(
 		nav-item: (
 			position: relative,
 		),
+
 		nav-link: (
-			border-radius: 0,
+			border-radius: 0rem,
 			color: $gray-900,
 			line-height: 24px,
 			transition: #{color 0.15s ease-in-out,
 			background-color 0.15s ease-in-out,
 			border-color 0.15s ease-in-out,
 			box-shadow 0.15s ease-in-out},
+
 			before: (
-				bottom: 0,
+				bottom: 0rem,
 				content: '',
 				display: block,
-				left: 0,
+				left: 0rem,
 				position: absolute,
-				top: 0,
+				top: 0rem,
 				transition: $transition-base,
 			),
+
 			hover: (
 				background-color: $primary-l3,
 				color: $gray-900,
-				letter-spacing: 0,
+				letter-spacing: 0rem,
+
 				before: (
 					background: $secondary-l0,
 					width: 0.125rem,
 				),
 			),
+
 			focus: (
 				background-color: c-unset,
 				box-shadow: none,
 				color: $gray-900,
 				outline: 0,
+
 				after: (
-					bottom: 0,
+					bottom: 0rem,
 					box-shadow: $component-focus-inset-box-shadow,
 					content: '',
 					display: block,
-					left: 0,
+					left: 0rem,
 					pointer-events: none,
 					position: absolute,
-					right: 0,
-					top: 0,
+					right: 0rem,
+					top: 0rem,
 				),
 			),
+
 			active-class: (
 				background-color: $primary-l3,
 				color: $gray-900,
 				font-weight: $font-weight-semi-bold,
+
 				before: (
 					background-color: $primary,
 					width: 0.375rem,
 				),
+
 				focus: (
 					before: (
 						display: none,
 					),
 				),
 			),
+
 			disabled: (
 				background-color: transparent,
 				box-shadow: none,
 				font-weight: $font-weight-normal,
+
 				before: (
 					content: none,
 				),
+
 				after: (
 					content: none,
 				),
 			),
+
 			show: (
 				background-color: c-unset,
 				box-shadow: c-unset,
 				color: $gray-900,
+
 				before: (
 					background-color: transparent,
-					width: 0,
+					width: 0rem,
 				),
+
 				hover: (
 					before: (
 						background-color: $secondary-l0,
@@ -87,32 +102,39 @@ $menubar-primary: map-deep-merge(
 					),
 				),
 			),
+
 			autofit-row: (
 				align-items: center,
 				margin-left: -0.25rem,
 				margin-right: -0.25rem,
+
 				autofit-col: (
 					padding-left: 0.25rem,
 					padding-right: 0.25rem,
 				),
 			),
+
 			collapse-icon: (
 				font-size: 0.75rem,
 				font-weight: $font-weight-semi-bold,
 				text-transform: uppercase,
+
 				collapse-icon-closed: (
 					font-size: 0.875rem,
 					top: calc(22px - (1em / 2)),
 				),
+
 				collapse-icon-open: (
 					font-size: 0.875rem,
 					top: calc(22px - (1em / 2)),
 				),
 			),
 		),
+
 		menubar-actions-1: (
 			padding-right: 4rem,
 		),
+
 		menubar-action: (
 			position: absolute,
 			top: 0.625rem,
@@ -128,13 +150,16 @@ $menubar-vertical-expand-md: () !default;
 $menubar-vertical-expand-md: map-deep-merge(
 	(
 		max-width: 15.625rem,
+
 		menubar-collapse: (
 			display: block,
 		),
+
 		media-breakpoint-down: (
 			sm: (
 				margin-bottom: 1rem,
 				max-width: none,
+
 				menubar-collapse: (
 					border-color: transparent,
 					border-style: solid,
@@ -144,17 +169,21 @@ $menubar-vertical-expand-md: map-deep-merge(
 					top: 100%,
 					z-index: $zindex-menubar-vertical-expand-md-collapse-mobile,
 				),
+
 				nav-nested: (
 					margin-bottom: 0.5rem,
 					margin-top: 0.5rem,
 				),
+
 				nav-nested-margins: (
 					margin-bottom: 0.5rem,
 					margin-top: 0.5rem,
 				),
+
 				nav-nested-margins-item: (
-					margin-left: 0,
+					margin-left: 0rem,
 				),
+
 				menubar-toggler: (
 					align-items: center,
 					border-color: transparent,
@@ -164,13 +193,15 @@ $menubar-vertical-expand-md: map-deep-merge(
 					height: 2rem,
 					padding-left: 0.5rem,
 					padding-right: 0.5rem,
+
 					c-inner: (
 						margin-left: -0.5rem,
 						margin-right: -0.5rem,
 						max-width: none,
 					),
+
 					lexicon-icon: (
-						margin-top: 0,
+						margin-top: 0rem,
 					),
 				),
 			),
@@ -184,45 +215,56 @@ $menubar-vertical-transparent-md: map-deep-merge(
 	(
 		nav-link: (
 			color: $gray-600,
+
 			hover: (
 				color: clay-darken($gray-600, 15),
 			),
+
 			active: (
 				color: rgba($black, 0.9),
 			),
+
 			show: (
 				color: c-unset,
 			),
+
 			disabled: (
 				color: rgba($black, 0.3),
 			),
 		),
+
 		media-breakpoint-down: (
 			sm: (
 				nav-link: (
 					border-radius: clay-enable-rounded(0),
 					color: $gray-900,
+
 					hover: (
 						background-color: $gray-100,
 						color: clay-darken($gray-900, 5%),
 					),
+
 					active: (
 						background-color: $component-active-bg,
 						color: $component-active-color,
 					),
+
 					active-class: (
 						font-weight: $font-weight-semi-bold,
 					),
+
 					disabled: (
 						background-color: transparent,
 						color: $gray-600,
 					),
+
 					show: (
 						background-color: c-unset,
 						color: c-unset,
 						font-weight: c-unset,
 					),
 				),
+
 				menubar-collapse: (
 					background-color: $white,
 					border-color: $gray-300,
@@ -230,6 +272,7 @@ $menubar-vertical-transparent-md: map-deep-merge(
 					box-shadow:
 						clay-enable-shadows(0 1px 5px -1px rgba(0, 0, 0, 0.3)),
 				),
+
 				menubar-toggler: (
 					text-decoration: none,
 				),
@@ -273,16 +316,19 @@ $menubar-vertical-decorated-md-nav-link-after-active: () !default;
 $menubar-vertical-decorated-md-nav-link-after-active: map-deep-merge(
 	(
 		background-color: $primary-l2,
-		bottom: 0,
+		bottom: 0rem,
 		content: '',
 		display: block,
 		left:
-			math-sign(map-get($menubar-vertical-decorated-md-nav, padding-left)) - map-get(
-				$menubar-vertical-decorated-md-nav,
-				border-left-width
+			calc(
+				#{map-get($menubar-vertical-decorated-md-nav, padding-left)} * -1 -
+					#{map-get(
+						$menubar-vertical-decorated-md-nav,
+						border-left-width
+					)}
 			),
 		position: absolute,
-		top: 0,
+		top: 0rem,
 		width: map-get($menubar-vertical-decorated-md-nav, border-left-width),
 	),
 	$menubar-vertical-decorated-md-nav-link-after-active
@@ -294,13 +340,16 @@ $menubar-vertical-expand-lg: () !default;
 $menubar-vertical-expand-lg: map-deep-merge(
 	(
 		max-width: 15.625rem,
+
 		menubar-collapse: (
 			display: block,
 		),
+
 		media-breakpoint-down: (
 			md: (
 				margin-bottom: 1rem,
 				max-width: none,
+
 				menubar-collapse: (
 					border-color: transparent,
 					border-style: solid,
@@ -310,17 +359,21 @@ $menubar-vertical-expand-lg: map-deep-merge(
 					top: 100%,
 					z-index: $zindex-menubar-vertical-expand-md-collapse-mobile,
 				),
+
 				nav-nested: (
 					margin-bottom: 0.5rem,
 					margin-top: 0.5rem,
 				),
+
 				nav-nested-margins: (
 					margin-bottom: 0.5rem,
 					margin-top: 0.5rem,
 				),
+
 				nav-nested-margins-item: (
-					margin-left: 0,
+					margin-left: 0rem,
 				),
+
 				menubar-toggler: (
 					align-items: center,
 					border-color: transparent,
@@ -330,13 +383,15 @@ $menubar-vertical-expand-lg: map-deep-merge(
 					height: 2rem,
 					padding-left: 0.5rem,
 					padding-right: 0.5rem,
+
 					c-inner: (
 						margin-left: -0.5rem,
 						margin-right: -0.5rem,
 						max-width: none,
 					),
+
 					lexicon-icon: (
-						margin-top: 0,
+						margin-top: 0rem,
 					),
 				),
 			),
@@ -350,45 +405,56 @@ $menubar-vertical-transparent-lg: map-deep-merge(
 	(
 		nav-link: (
 			color: $gray-600,
+
 			hover: (
 				color: clay-darken($gray-600, 15),
 			),
+
 			active: (
 				color: rgba($black, 0.9),
 			),
+
 			show: (
 				color: c-unset,
 			),
+
 			disabled: (
 				color: rgba($black, 0.3),
 			),
 		),
+
 		media-breakpoint-down: (
 			md: (
 				nav-link: (
 					border-radius: clay-enable-rounded(0),
 					color: $gray-900,
+
 					hover: (
 						background-color: $gray-100,
 						color: clay-darken($gray-900, 5%),
 					),
+
 					active: (
 						background-color: $component-active-bg,
 						color: $component-active-color,
 					),
+
 					active-class: (
 						font-weight: $font-weight-semi-bold,
 					),
+
 					disabled: (
 						background-color: transparent,
 						color: $gray-600,
 					),
+
 					show: (
 						background-color: c-unset,
 						color: c-unset,
 						font-weight: c-unset,
 					),
 				),
+
 				menubar-collapse: (
 					background-color: $white,
 					border-color: $gray-300,
@@ -396,6 +462,7 @@ $menubar-vertical-transparent-lg: map-deep-merge(
 					box-shadow:
 						clay-enable-shadows(0 1px 5px -1px rgba(0, 0, 0, 0.3)),
 				),
+
 				menubar-toggler: (
 					text-decoration: none,
 				),