@clayui/css 3.158.0 → 3.160.0

package/src/scss/cadmin/variables/_menubar.scss

@@ -4,82 +4,97 @@ $cadmin-menubar-primary: map-deep-merge(
 		nav-item: (
 			position: relative,
 		),
+
 		nav-link: (
-			border-radius: 0,
+			border-radius: 0px,
 			color: $cadmin-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: 0px,
 				content: '',
 				display: block,
-				left: 0,
+				left: 0px,
 				position: absolute,
-				top: 0,
+				top: 0px,
 				transition: $cadmin-transition-base,
 			),
+
 			hover: (
 				background-color: $cadmin-primary-l3,
 				color: $cadmin-gray-900,
-				letter-spacing: 0,
+				letter-spacing: 0px,
+
 				before: (
 					background: $cadmin-secondary-l0,
 					width: 2px,
 				),
 			),
+
 			focus: (
 				background-color: c-unset,
 				box-shadow: none,
 				color: $cadmin-gray-900,
 				outline: 0,
+
 				after: (
-					bottom: 0,
+					bottom: 0px,
 					box-shadow: $cadmin-component-focus-inset-box-shadow,
 					content: '',
 					display: block,
-					left: 0,
+					left: 0px,
 					pointer-events: none,
 					position: absolute,
-					right: 0,
-					top: 0,
+					right: 0px,
+					top: 0px,
 				),
 			),
+
 			active-class: (
 				background-color: $cadmin-primary-l3,
 				color: $cadmin-gray-900,
 				font-weight: $cadmin-font-weight-semi-bold,
+
 				before: (
 					background-color: $cadmin-primary,
 					width: 6px,
 				),
+
 				focus: (
 					before: (
 						display: none,
 					),
 				),
 			),
+
 			disabled: (
 				background-color: transparent,
 				box-shadow: none,
 				font-weight: $cadmin-font-weight-normal,
+
 				before: (
 					content: none,
 				),
+
 				after: (
 					content: none,
 				),
 			),
+
 			show: (
 				background-color: c-unset,
 				box-shadow: c-unset,
 				color: $cadmin-gray-900,
+
 				before: (
 					background-color: transparent,
-					width: 0,
+					width: 0px,
 				),
+
 				hover: (
 					before: (
 						background-color: $cadmin-secondary-l0,
@@ -87,32 +102,39 @@ $cadmin-menubar-primary: map-deep-merge(
 					),
 				),
 			),
+
 			autofit-row: (
 				align-items: center,
 				margin-left: -4px,
 				margin-right: -4px,
+
 				autofit-col: (
 					padding-left: 4px,
 					padding-right: 4px,
 				),
 			),
+
 			collapse-icon: (
 				font-size: 12px,
 				font-weight: $cadmin-font-weight-semi-bold,
 				text-transform: uppercase,
+
 				collapse-icon-closed: (
 					font-size: 14px,
 					top: calc(22px - (1em / 2)),
 				),
+
 				collapse-icon-open: (
 					font-size: 14px,
 					top: calc(22px - (1em / 2)),
 				),
 			),
 		),
+
 		menubar-actions-1: (
 			padding-right: 64px,
 		),
+
 		menubar-action: (
 			position: absolute,
 			top: 10px,
@@ -128,13 +150,16 @@ $cadmin-menubar-vertical-expand-md: () !default;
 $cadmin-menubar-vertical-expand-md: map-deep-merge(
 	(
 		max-width: 250px,
+
 		menubar-collapse: (
 			display: block,
 		),
+
 		media-breakpoint-down: (
 			sm: (
 				margin-bottom: 16px,
 				max-width: none,
+
 				menubar-collapse: (
 					border-color: transparent,
 					border-style: solid,
@@ -145,17 +170,21 @@ $cadmin-menubar-vertical-expand-md: map-deep-merge(
 					z-index:
 						$cadmin-zindex-menubar-vertical-expand-md-collapse-mobile,
 				),
+
 				nav-nested: (
 					margin-bottom: 8px,
 					margin-top: 8px,
 				),
+
 				nav-nested-margins: (
 					margin-bottom: 8px,
 					margin-top: 8px,
 				),
+
 				nav-nested-margins-item: (
-					margin-left: 0,
+					margin-left: 0px,
 				),
+
 				menubar-toggler: (
 					align-items: center,
 					border-color: transparent,
@@ -165,13 +194,15 @@ $cadmin-menubar-vertical-expand-md: map-deep-merge(
 					height: 32px,
 					padding-left: 8px,
 					padding-right: 8px,
+
 					c-inner: (
 						margin-left: -8px,
 						margin-right: -8px,
 						max-width: none,
 					),
+
 					lexicon-icon: (
-						margin-top: 0,
+						margin-top: 0px,
 					),
 				),
 			),
@@ -193,72 +224,86 @@ $cadmin-menubar-vertical-transparent-md: map-deep-merge(
 			background-color 0.15s ease-in-out,
 			border-color 0.15s ease-in-out,
 			box-shadow 0.15s ease-in-out},
+
 			before: (
-				border-radius: $cadmin-border-radius 0 0 $cadmin-border-radius,
-				bottom: 0,
+				border-radius: $cadmin-border-radius 0px 0px
+					$cadmin-border-radius,
+				bottom: 0px,
 				content: '',
 				display: block,
-				left: 0,
+				left: 0px,
 				position: absolute,
-				top: 0,
+				top: 0px,
 			),
+
 			hover: (
 				background-color: rgba($cadmin-gray-900, 0.04),
 				color: $cadmin-gray-900,
 				font-weight: $cadmin-font-weight-semi-bold,
-				letter-spacing: 0,
+				letter-spacing: 0px,
+
 				before: (
 					background: $cadmin-secondary-l0,
 					width: 3px,
 				),
 			),
+
 			focus: (
 				background-color: c-unset,
 				color: $cadmin-gray-900,
 				outline: 0,
+
 				after: (
 					border-radius: $cadmin-border-radius,
-					bottom: 0,
+					bottom: 0px,
 					box-shadow: $cadmin-component-focus-box-shadow,
 					content: '',
 					display: block,
-					left: 0,
+					left: 0px,
 					pointer-events: none,
 					position: absolute,
-					right: 0,
-					top: 0,
+					right: 0px,
+					top: 0px,
 				),
 			),
+
 			active-class: (
 				background-color: rgba($cadmin-primary, 0.06),
 				color: $cadmin-gray-900,
 				font-weight: $cadmin-font-weight-semi-bold,
-				letter-spacing: 0,
+				letter-spacing: 0px,
+
 				before: (
 					background-color: $cadmin-primary-l0,
 					width: 4px,
 				),
 			),
+
 			disabled: (
 				background-color: transparent,
 				box-shadow: none,
 				color: rgba($cadmin-black, 0.3),
 				font-weight: $cadmin-font-weight-normal,
 				letter-spacing: 0.32px,
+
 				before: (
 					content: none,
 				),
+
 				after: (
 					content: none,
 				),
 			),
+
 			show: (
 				background-color: transparent,
 				color: $cadmin-gray-900,
 				font-weight: $cadmin-font-weight-semi-bold,
+
 				before: (
 					background-color: transparent,
 				),
+
 				hover: (
 					before: (
 						background-color: $cadmin-secondary-l0,
@@ -267,42 +312,51 @@ $cadmin-menubar-vertical-transparent-md: map-deep-merge(
 				),
 			),
 		),
+
 		media-breakpoint-down: (
 			sm: (
 				nav-link: (
 					border-radius: clay-enable-rounded(0),
 					color: $cadmin-gray-900,
-					margin-bottom: 0,
+					margin-bottom: 0px,
+
 					before: (
 						content: none,
 					),
+
 					hover: (
 						background-color: rgba($cadmin-gray-900, 0.04),
 						box-shadow: none,
 						color: $cadmin-gray-900,
 					),
+
 					focus: (
 						background-color: transparent,
+
 						after: (
 							box-shadow: $cadmin-component-focus-inset-box-shadow,
 						),
 					),
+
 					active-class: (
 						background-color: rgba($cadmin-primary, 0.06),
 						box-shadow: none,
 						color: $cadmin-gray-900,
 						font-weight: $cadmin-font-weight-semi-bold,
 					),
+
 					disabled: (
 						background-color: transparent,
 						color: $cadmin-gray-600,
 					),
+
 					show: (
 						background-color: c-unset,
 						color: c-unset,
 						font-weight: c-unset,
 					),
 				),
+
 				menubar-collapse: (
 					background-color: $cadmin-white,
 					border-color: $cadmin-gray-300,
@@ -310,12 +364,14 @@ $cadmin-menubar-vertical-transparent-md: map-deep-merge(
 					box-shadow:
 						clay-enable-shadows(0 1px 5px -1px rgba(0, 0, 0, 0.3)),
 				),
+
 				menubar-toggler: (
 					color: $cadmin-gray-600,
 					font-size: 14px,
 					font-weight: $cadmin-font-weight-semi-bold,
 					text-decoration: none,
 					transition: box-shadow 0.15s ease-in-out,
+
 					focus: (
 						box-shadow:
 							clay-enable-shadows(
@@ -323,6 +379,7 @@ $cadmin-menubar-vertical-transparent-md: map-deep-merge(
 							),
 						outline: 0,
 					),
+
 					disabled: (
 						box-shadow: clay-enable-shadows(none),
 					),
@@ -367,18 +424,21 @@ $cadmin-menubar-vertical-decorated-md-nav-link-after-active: () !default;
 $cadmin-menubar-vertical-decorated-md-nav-link-after-active: map-deep-merge(
 	(
 		background-color: $cadmin-primary-l2,
-		bottom: 0,
+		bottom: 0px,
 		content: '',
 		display: block,
 		left:
-			math-sign(
-				map-get($cadmin-menubar-vertical-decorated-md-nav, padding-left)
-			) - map-get(
-				$cadmin-menubar-vertical-decorated-md-nav,
-				border-left-width
+			calc(
+				#{map-get(
+						$cadmin-menubar-vertical-decorated-md-nav,
+						padding-left
+					)} * -1 - #{map-get(
+						$cadmin-menubar-vertical-decorated-md-nav,
+						border-left-width
+					)}
 			),
 		position: absolute,
-		top: 0,
+		top: 0px,
 		width:
 			map-get(
 				$cadmin-menubar-vertical-decorated-md-nav,
@@ -394,13 +454,16 @@ $cadmin-menubar-vertical-expand-lg: () !default;
 $cadmin-menubar-vertical-expand-lg: map-deep-merge(
 	(
 		max-width: 250px,
+
 		menubar-collapse: (
 			display: block,
 		),
+
 		media-breakpoint-down: (
 			md: (
 				margin-bottom: 16px,
 				max-width: none,
+
 				menubar-collapse: (
 					border-color: transparent,
 					border-style: solid,
@@ -411,17 +474,21 @@ $cadmin-menubar-vertical-expand-lg: map-deep-merge(
 					z-index:
 						$cadmin-zindex-menubar-vertical-expand-md-collapse-mobile,
 				),
+
 				nav-nested: (
 					margin-bottom: 8px,
 					margin-top: 8px,
 				),
+
 				nav-nested-margins: (
 					margin-bottom: 8px,
 					margin-top: 8px,
 				),
+
 				nav-nested-margins-item: (
-					margin-left: 0,
+					margin-left: 0px,
 				),
+
 				menubar-toggler: (
 					align-items: center,
 					border-color: transparent,
@@ -431,13 +498,15 @@ $cadmin-menubar-vertical-expand-lg: map-deep-merge(
 					height: 32px,
 					padding-left: 8px,
 					padding-right: 8px,
+
 					c-inner: (
 						margin-left: -8px,
 						margin-right: -8px,
 						max-width: none,
 					),
+
 					lexicon-icon: (
-						margin-top: 0,
+						margin-top: 0px,
 					),
 				),
 			),
@@ -458,70 +527,84 @@ $cadmin-menubar-vertical-transparent-lg: map-deep-merge(
 			background-color 0.15s ease-in-out,
 			border-color 0.15s ease-in-out,
 			box-shadow 0.15s ease-in-out},
+
 			before: (
-				border-radius: $cadmin-border-radius 0 0 $cadmin-border-radius,
-				bottom: 0,
+				border-radius: $cadmin-border-radius 0px 0px
+					$cadmin-border-radius,
+				bottom: 0px,
 				content: '',
 				display: block,
-				left: 0,
+				left: 0px,
 				position: absolute,
-				top: 0,
+				top: 0px,
 			),
+
 			hover: (
 				background-color: rgba($cadmin-gray-900, 0.04),
 				color: $cadmin-gray-900,
 				font-weight: $cadmin-font-weight-semi-bold,
-				letter-spacing: 0,
+				letter-spacing: 0px,
+
 				before: (
 					background: $cadmin-secondary-l0,
 					width: 3px,
 				),
 			),
+
 			focus: (
 				color: $cadmin-gray-900,
 				outline: 0,
+
 				after: (
 					border-radius: $cadmin-border-radius,
-					bottom: 0,
+					bottom: 0px,
 					box-shadow: $cadmin-component-focus-box-shadow,
 					content: '',
 					display: block,
-					left: 0,
+					left: 0px,
 					position: absolute,
-					right: 0,
-					top: 0,
+					right: 0px,
+					top: 0px,
 				),
 			),
+
 			active-class: (
 				background-color: rgba($cadmin-primary, 0.06),
 				color: $cadmin-gray-900,
 				font-weight: $cadmin-font-weight-semi-bold,
-				letter-spacing: 0,
+				letter-spacing: 0px,
+
 				before: (
 					background-color: $cadmin-primary-l0,
 					width: 4px,
 				),
 			),
+
 			disabled: (
 				background-color: transparent,
 				box-shadow: none,
 				color: rgba($cadmin-black, 0.3),
 				font-weight: $cadmin-font-weight-normal,
 				letter-spacing: 0.32px,
+
 				before: (
 					content: none,
 				),
+
 				after: (
 					content: none,
 				),
 			),
+
 			show: (
 				background-color: transparent,
 				color: $cadmin-gray-900,
 				font-weight: $cadmin-font-weight-semi-bold,
+
 				before: (
 					background-color: transparent,
 				),
+
 				hover: (
 					before: (
 						background-color: $cadmin-secondary-l0,
@@ -530,41 +613,49 @@ $cadmin-menubar-vertical-transparent-lg: map-deep-merge(
 				),
 			),
 		),
+
 		media-breakpoint-down: (
 			md: (
 				nav-link: (
 					border-radius: clay-enable-rounded(0),
 					color: $cadmin-gray-900,
-					margin-bottom: 0,
+					margin-bottom: 0px,
+
 					before: (
 						content: none,
 					),
+
 					hover: (
 						background-color: rgba($cadmin-gray-900, 0.04),
 						box-shadow: none,
 					),
+
 					focus: (
 						background-color: transparent,
 						after: (
 							box-shadow: $cadmin-component-focus-inset-box-shadow,
 						),
 					),
+
 					active-class: (
 						background-color: rgba($cadmin-primary, 0.06),
 						box-shadow: none,
 						color: $cadmin-gray-900,
 						font-weight: $cadmin-font-weight-semi-bold,
 					),
+
 					disabled: (
 						background-color: transparent,
 						color: $cadmin-gray-600,
 					),
+
 					show: (
 						background-color: c-unset,
 						color: c-unset,
 						font-weight: c-unset,
 					),
 				),
+
 				menubar-collapse: (
 					background-color: $cadmin-white,
 					border-color: $cadmin-gray-300,
@@ -572,12 +663,14 @@ $cadmin-menubar-vertical-transparent-lg: map-deep-merge(
 					box-shadow:
 						clay-enable-shadows(0 1px 5px -1px rgba(0, 0, 0, 0.3)),
 				),
+
 				menubar-toggler: (
 					color: $cadmin-gray-600,
 					font-size: 14px,
 					font-weight: $cadmin-font-weight-semi-bold,
 					text-decoration: none,
 					transition: box-shadow 0.15s ease-in-out,
+
 					focus: (
 						box-shadow:
 							clay-enable-shadows(
@@ -585,6 +678,7 @@ $cadmin-menubar-vertical-transparent-lg: map-deep-merge(
 							),
 						outline: 0,
 					),
+
 					disabled: (
 						box-shadow: clay-enable-shadows(none),
 					),