@adcops/autocore-react 3.3.8 → 3.3.10

package/src/themes/theme-base/components/menu/_menubar.scss

@@ -1,216 +1,216 @@
-.p-menubar {
-	padding: $horizontalMenuPadding;
-	background: $horizontalMenuBg;
-	color: $horizontalMenuTextColor;
-	border: $horizontalMenuBorder;
-	border-radius: $borderRadius;
-
-	.p-menubar-root-list {
-		outline: 0 none;
-
-		> .p-menuitem {
-			@include horizontal-rootmenuitem-link();
-		}
-	}
-
-	.p-menuitem {
-		@include menuitem-link();
-	}
-
-	.p-submenu-list {
-		padding: $verticalMenuPadding;
-		background: $overlayMenuBg;
-		border: $overlayMenuBorder;
-		box-shadow: $overlayMenuShadow;
-		width: $menuWidth;
-
-		.p-menuitem-separator {
-			border-top: $divider;
-			margin: $menuSeparatorMargin;
-		}
-
-		.p-submenu-icon {
-			font-size: $menuitemSubmenuIconFontSize;
-		}
-	}
-
-	&.p-menubar-mobile {
-		.p-menubar-button {
-			width: $actionIconWidth;
-			height: $actionIconHeight;
-			color: $horizontalMenuRootMenuitemIconColor;
-			border-radius: $actionIconBorderRadius;
-			transition: $actionIconTransition;
-
-			&:hover {
-				color: $horizontalMenuRootMenuitemIconHoverColor;
-				background: $horizontalMenuRootMenuitemHoverBg;
-			}
-
-			&:focus {
-				@include focused();
-			}
-		}
-
-		.p-menubar-root-list {
-			padding: $verticalMenuPadding;
-			background: $overlayMenuBg;
-			border: $overlayMenuBorder;
-			box-shadow: $overlayMenuShadow;
-
-			.p-menuitem-separator {
-				border-top: $divider;
-				margin: $menuSeparatorMargin;
-			}
-
-			.p-submenu-icon {
-				font-size: $menuitemSubmenuIconFontSize;
-			}
-
-			.p-menuitem {
-				.p-menuitem-content {
-					.p-menuitem-link {
-						.p-submenu-icon {
-							margin-left: auto;
-							transition: transform $transitionDuration;
-						}
-					}
-				}
-
-				&.p-menuitem-active {
-					> .p-menuitem-content {
-						> .p-menuitem-link {
-							> .p-submenu-icon {
-								transform: rotate(-180deg);
-							}
-						}
-					}
-				}
-			}
-
-			.p-submenu-list {
-				.p-submenu-icon {
-					transition: transform $transitionDuration;
-					transform: rotate(90deg);
-				}
-
-				.p-menuitem-active {
-					> .p-menuitem-content {
-						> .p-menuitem-link {
-							> .p-submenu-icon {
-								transform: rotate(-90deg);
-							}
-						}
-					}
-				}
-			}
-
-			@include nested-submenu-indents(nth($menuitemPadding, 1), 2, 10);
-		}
-	}
-}
-
-@media screen and (max-width: 960px) {
-	.p-menubar {
-		position: relative;
-
-		.p-menubar-button {
-			display: flex;
-			width: $actionIconWidth;
-			height: $actionIconHeight;
-			color: $horizontalMenuRootMenuitemIconColor;
-			border-radius: $actionIconBorderRadius;
-			transition: $actionIconTransition;
-
-			&:hover {
-				color: $horizontalMenuRootMenuitemIconHoverColor;
-				background: $horizontalMenuRootMenuitemHoverBg;
-			}
-
-			&:focus {
-				@include focused();
-			}
-		}
-
-		.p-menubar-root-list {
-			position: absolute;
-			display: none;
-			padding: $verticalMenuPadding;
-			background: $overlayMenuBg;
-			border: $overlayMenuBorder;
-			box-shadow: $overlayMenuShadow;
-			width: 100%;
-
-			.p-menu-separator {
-				border-top: $divider;
-				margin: $menuSeparatorMargin;
-			}
-
-			.p-submenu-icon {
-				font-size: $menuitemSubmenuIconFontSize;
-
-				&.p-icon {
-					width: $menuitemSubmenuIconFontSize;
-					height: $menuitemSubmenuIconFontSize;
-				}
-			}
-
-			> .p-menuitem {
-				width: 100%;
-				position: static;
-
-				> .p-menuitem-link {
-					@include menuitem-link();
-
-					> .p-submenu-icon {
-						margin-left: auto;
-						transition: transform $transitionDuration;
-					}
-				}
-
-				&.p-menuitem-active {
-					> .p-menuitem-link {
-						> .p-submenu-icon {
-							transform: rotate(-180deg);
-						}
-					}
-				}
-			}
-
-			.p-submenu-list {
-				width: 100%;
-				position: static;
-				box-shadow: none;
-				border: 0 none;
-
-				.p-submenu-icon {
-					transition: transform $transitionDuration;
-					transform: rotate(90deg);
-				}
-
-				.p-menuitem-active {
-					> .p-menuitem-link {
-						> .p-submenu-icon {
-							transform: rotate(-90deg);
-						}
-					}
-				}
-			}
-
-			.p-menuitem {
-				width: 100%;
-				position: static;
-			}
-
-			@include nested-submenu-indents(nth($menuitemPadding, 1), 2, 10);
-		}
-
-		&.p-menubar-mobile-active .p-menubar-root-list {
-			display: flex;
-			flex-direction: column;
-			top: 100%;
-			left: 0;
-			z-index: 1;
-		}
-	}
-}
+.p-menubar {
+	padding: $horizontalMenuPadding;
+	background: $horizontalMenuBg;
+	color: $horizontalMenuTextColor;
+	border: $horizontalMenuBorder;
+	border-radius: $borderRadius;
+
+	.p-menubar-root-list {
+		outline: 0 none;
+
+		> .p-menuitem {
+			@include horizontal-rootmenuitem-link();
+		}
+	}
+
+	.p-menuitem {
+		@include menuitem-link();
+	}
+
+	.p-submenu-list {
+		padding: $verticalMenuPadding;
+		background: $overlayMenuBg;
+		border: $overlayMenuBorder;
+		box-shadow: $overlayMenuShadow;
+		width: $menuWidth;
+
+		.p-menuitem-separator {
+			border-top: $divider;
+			margin: $menuSeparatorMargin;
+		}
+
+		.p-submenu-icon {
+			font-size: $menuitemSubmenuIconFontSize;
+		}
+	}
+
+	&.p-menubar-mobile {
+		.p-menubar-button {
+			width: $actionIconWidth;
+			height: $actionIconHeight;
+			color: $horizontalMenuRootMenuitemIconColor;
+			border-radius: $actionIconBorderRadius;
+			transition: $actionIconTransition;
+
+			&:hover {
+				color: $horizontalMenuRootMenuitemIconHoverColor;
+				background: $horizontalMenuRootMenuitemHoverBg;
+			}
+
+			&:focus {
+				@include focused();
+			}
+		}
+
+		.p-menubar-root-list {
+			padding: $verticalMenuPadding;
+			background: $overlayMenuBg;
+			border: $overlayMenuBorder;
+			box-shadow: $overlayMenuShadow;
+
+			.p-menuitem-separator {
+				border-top: $divider;
+				margin: $menuSeparatorMargin;
+			}
+
+			.p-submenu-icon {
+				font-size: $menuitemSubmenuIconFontSize;
+			}
+
+			.p-menuitem {
+				.p-menuitem-content {
+					.p-menuitem-link {
+						.p-submenu-icon {
+							margin-left: auto;
+							transition: transform $transitionDuration;
+						}
+					}
+				}
+
+				&.p-menuitem-active {
+					> .p-menuitem-content {
+						> .p-menuitem-link {
+							> .p-submenu-icon {
+								transform: rotate(-180deg);
+							}
+						}
+					}
+				}
+			}
+
+			.p-submenu-list {
+				.p-submenu-icon {
+					transition: transform $transitionDuration;
+					transform: rotate(90deg);
+				}
+
+				.p-menuitem-active {
+					> .p-menuitem-content {
+						> .p-menuitem-link {
+							> .p-submenu-icon {
+								transform: rotate(-90deg);
+							}
+						}
+					}
+				}
+			}
+
+			@include nested-submenu-indents(nth($menuitemPadding, 1), 2, 10);
+		}
+	}
+}
+
+@media screen and (max-width: 960px) {
+	.p-menubar {
+		position: relative;
+
+		.p-menubar-button {
+			display: flex;
+			width: $actionIconWidth;
+			height: $actionIconHeight;
+			color: $horizontalMenuRootMenuitemIconColor;
+			border-radius: $actionIconBorderRadius;
+			transition: $actionIconTransition;
+
+			&:hover {
+				color: $horizontalMenuRootMenuitemIconHoverColor;
+				background: $horizontalMenuRootMenuitemHoverBg;
+			}
+
+			&:focus {
+				@include focused();
+			}
+		}
+
+		.p-menubar-root-list {
+			position: absolute;
+			display: none;
+			padding: $verticalMenuPadding;
+			background: $overlayMenuBg;
+			border: $overlayMenuBorder;
+			box-shadow: $overlayMenuShadow;
+			width: 100%;
+
+			.p-menu-separator {
+				border-top: $divider;
+				margin: $menuSeparatorMargin;
+			}
+
+			.p-submenu-icon {
+				font-size: $menuitemSubmenuIconFontSize;
+
+				&.p-icon {
+					width: $menuitemSubmenuIconFontSize;
+					height: $menuitemSubmenuIconFontSize;
+				}
+			}
+
+			> .p-menuitem {
+				width: 100%;
+				position: static;
+
+				> .p-menuitem-link {
+					@include menuitem-link();
+
+					> .p-submenu-icon {
+						margin-left: auto;
+						transition: transform $transitionDuration;
+					}
+				}
+
+				&.p-menuitem-active {
+					> .p-menuitem-link {
+						> .p-submenu-icon {
+							transform: rotate(-180deg);
+						}
+					}
+				}
+			}
+
+			.p-submenu-list {
+				width: 100%;
+				position: static;
+				box-shadow: none;
+				border: 0 none;
+
+				.p-submenu-icon {
+					transition: transform $transitionDuration;
+					transform: rotate(90deg);
+				}
+
+				.p-menuitem-active {
+					> .p-menuitem-link {
+						> .p-submenu-icon {
+							transform: rotate(-90deg);
+						}
+					}
+				}
+			}
+
+			.p-menuitem {
+				width: 100%;
+				position: static;
+			}
+
+			@include nested-submenu-indents(nth($menuitemPadding, 1), 2, 10);
+		}
+
+		&.p-menubar-mobile-active .p-menubar-root-list {
+			display: flex;
+			flex-direction: column;
+			top: 100%;
+			left: 0;
+			z-index: 1;
+		}
+	}
+}