@orangesix/react 1.3.8 → 2.0.3

package/style/scss/menu/_megamenu.scss

@@ -0,0 +1,141 @@
+.p-megamenu {
+	padding: $horizontalMenuPadding;
+	background: $horizontalMenuBg;
+	color: $horizontalMenuTextColor;
+	border: $horizontalMenuBorder;
+	border-radius: $borderRadius;
+
+	.p-megamenu-root-list {
+		outline: 0 none;
+	}
+
+	.p-menuitem {
+		@include menuitem-link();
+	}
+
+	.p-megamenu-panel {
+		background: $overlayMenuBg;
+		color: $menuTextColor;
+		border: $overlayMenuBorder;
+		box-shadow: $overlayMenuShadow;
+	}
+
+	.p-submenu-header {
+		margin: $submenuHeaderMargin;
+		padding: $submenuHeaderPadding;
+		color: $submenuHeaderTextColor;
+		background: $submenuHeaderBg;
+		font-weight: $submenuHeaderFontWeight;
+		border-top-right-radius: $borderRadius;
+		border-top-left-radius: $borderRadius;
+	}
+
+	.p-submenu-list {
+		padding: $verticalMenuPadding;
+		width: $menuWidth;
+
+		.p-menuitem-separator {
+			border-top: $divider;
+			margin: $menuSeparatorMargin;
+		}
+	}
+
+	&.p-megamenu-vertical {
+		width: $menuWidth;
+		padding: $verticalMenuPadding;
+	}
+
+	.p-megamenu-button {
+		width: $actionIconWidth;
+		height: $actionIconHeight;
+		color: $horizontalMenuRootMenuitemIconColor;
+		border-radius: $actionIconBorderRadius;
+		transition: $actionIconTransition;
+
+		&:hover {
+			color: $horizontalMenuRootMenuitemIconHoverColor;
+			background: $horizontalMenuRootMenuitemHoverBg;
+		}
+
+		&:focus {
+			@include focused();
+		}
+	}
+
+	&.p-megamenu-horizontal {
+		.p-megamenu-root-list {
+			> .p-menuitem {
+				@include horizontal-rootmenuitem-link();
+			}
+		}
+	}
+
+	&.p-megamenu-mobile-active {
+		.p-megamenu-root-list {
+			padding: $verticalMenuPadding;
+			background: $overlayMenuBg;
+			border: $overlayMenuBorder;
+			box-shadow: $overlayMenuShadow;
+
+			.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;
+					}
+				}
+
+				&.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;
+			}
+		}
+	}
+}

package/style/scss/menu/_menu.scss

@@ -0,0 +1,33 @@
+.p-menu {
+	padding: $verticalMenuPadding;
+	background: $menuBg;
+	color: $menuTextColor;
+	border: $menuBorder;
+	border-radius: $borderRadius;
+	width: $menuWidth;
+
+	.p-menuitem {
+		@include menuitem-link();
+	}
+
+	&.p-menu-overlay {
+		background: $overlayMenuBg;
+		border: $overlayMenuBorder;
+		box-shadow: $overlayMenuShadow;
+	}
+
+	.p-submenu-header {
+		margin: $submenuHeaderMargin;
+		padding: $submenuHeaderPadding;
+		color: $submenuHeaderTextColor;
+		background: $submenuHeaderBg;
+		font-weight: $submenuHeaderFontWeight;
+		border-top-right-radius: $submenuHeaderBorderRadius;
+		border-top-left-radius: $submenuHeaderBorderRadius;
+	}
+
+	.p-menu-separator {
+		border-top: $divider;
+		margin: $menuSeparatorMargin;
+	}
+}

package/style/scss/menu/_menubar.scss

@@ -0,0 +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;
+		}
+	}
+}

package/style/scss/menu/_panelmenu.scss

@@ -0,0 +1,153 @@
+.p-panelmenu {
+	.p-panelmenu-header {
+		outline: 0 none;
+
+		.p-panelmenu-header-content {
+			border: $accordionHeaderBorder;
+			color: $accordionHeaderTextColor;
+			background: $accordionHeaderBg;
+			border-radius: $borderRadius;
+			transition: $listItemTransition;
+
+			.p-panelmenu-header-link {
+				color: $accordionHeaderTextColor;
+				padding: $accordionHeaderPadding;
+				font-weight: $accordionHeaderFontWeight;
+
+				.p-submenu-icon {
+					margin-right: $inlineSpacing;
+				}
+
+				.p-menuitem-icon {
+					margin-right: $inlineSpacing;
+				}
+			}
+		}
+
+		&:not(.p-disabled) {
+			&:focus-visible {
+				.p-panelmenu-header-content {
+					@include focused-inset();
+				}
+			}
+		}
+
+		&:not(.p-highlight):not(.p-disabled):hover {
+			.p-panelmenu-header-content {
+				background: $accordionHeaderHoverBg;
+				border-color: $accordionHeaderHoverBorderColor;
+				color: $accordionHeaderTextHoverColor;
+			}
+		}
+
+		&:not(.p-disabled).p-highlight {
+			.p-panelmenu-header-content {
+				background: $accordionHeaderActiveBg;
+				border-color: $accordionHeaderActiveBorderColor;
+				color: $accordionHeaderTextActiveColor;
+				border-bottom-right-radius: 0;
+				border-bottom-left-radius: 0;
+				margin-bottom: 0;
+			}
+
+			&:hover {
+				.p-panelmenu-header-content {
+					border-color: $accordionHeaderActiveHoverBorderColor;
+					background: $accordionHeaderActiveHoverBg;
+					color: $accordionHeaderTextActiveHoverColor;
+				}
+			}
+		}
+	}
+
+	.p-panelmenu-content {
+		padding: $verticalMenuPadding;
+		border: $accordionContentBorder;
+		background: $accordionContentBg;
+		color: $accordionContentTextColor;
+		border-top: 0;
+		border-top-right-radius: 0;
+		border-top-left-radius: 0;
+		border-bottom-right-radius: $borderRadius;
+		border-bottom-left-radius: $borderRadius;
+
+		.p-panelmenu-root-list {
+			outline: 0 none;
+		}
+
+		.p-menuitem {
+			@include menuitem-link();
+
+			.p-menuitem-content {
+				.p-menuitem-link {
+					.p-submenu-icon {
+						margin-right: $inlineSpacing;
+					}
+				}
+			}
+		}
+
+		.p-menuitem-separator {
+			border-top: $divider;
+			margin: $menuSeparatorMargin;
+		}
+
+		.p-submenu-list:not(.p-panelmenu-root-list) {
+			padding: $treeNodeChildrenPadding;
+		}
+	}
+
+	.p-panelmenu-panel {
+		margin-bottom: $accordionSpacing;
+
+		@if $accordionSpacing == 0 {
+			.p-panelmenu-header {
+				.p-panelmenu-header-content {
+					border-radius: 0;
+				}
+			}
+
+			.p-panelmenu-content {
+				border-radius: 0;
+			}
+
+			&:not(:first-child) {
+				.p-panelmenu-header {
+					.p-panelmenu-header-content {
+						border-top: 0 none;
+					}
+
+					&:not(.p-highlight):not(.p-disabled):hover,
+					&:not(.p-disabled).p-highlight:hover {
+						.p-panelmenu-header-content {
+							border-top: 0 none;
+						}
+					}
+				}
+			}
+
+			&:first-child {
+				.p-panelmenu-header {
+					.p-panelmenu-header-content {
+						border-top-right-radius: $borderRadius;
+						border-top-left-radius: $borderRadius;
+					}
+				}
+			}
+
+			&:last-child {
+				.p-panelmenu-header:not(.p-highlight) {
+					.p-panelmenu-header-content {
+						border-bottom-right-radius: $borderRadius;
+						border-bottom-left-radius: $borderRadius;
+					}
+				}
+
+				.p-panelmenu-content {
+					border-bottom-right-radius: $borderRadius;
+					border-bottom-left-radius: $borderRadius;
+				}
+			}
+		}
+	}
+}

package/style/scss/menu/_slidemenu.scss

@@ -0,0 +1,60 @@
+.p-slidemenu {
+    padding: $verticalMenuPadding;
+    background: $menuBg;
+    color: $menuTextColor;
+    border: $menuBorder;
+    border-radius: $borderRadius;
+    width: $menuWidth;
+
+    .p-menuitem-link {
+        @include menuitem-link();
+    }
+
+    &.p-slidemenu-overlay {
+        background: $overlayMenuBg;
+        border: $overlayMenuBorder;
+        box-shadow: $overlayMenuShadow;
+    }
+
+    .p-slidemenu-list {
+        padding: $verticalMenuPadding;
+        background: $overlayMenuBg;
+        border: $overlayMenuBorder;
+        box-shadow: $overlayMenuShadow;
+    }
+
+    .p-slidemenu {
+        &.p-slidemenu-active {
+            > .p-slidemenu-link {
+                background: $menuitemActiveBg;
+
+                .p-slidemenu-text {
+                    color: $menuitemTextActiveColor;
+                }
+
+                .p-slidemenu-icon, .p-slidemenu-icon {
+                    color: $menuitemIconActiveColor;
+                }
+            }
+        }
+    }
+
+    .p-slidemenu-separator {
+        border-top: $divider;
+        margin: $menuSeparatorMargin;
+    }
+
+    .p-slidemenu-icon {
+        font-size: $menuitemSubmenuIconFontSize;
+
+        &.p-icon {
+            width: $menuitemSubmenuIconFontSize;
+            height: $menuitemSubmenuIconFontSize;
+        }
+    }
+
+    .p-slidemenu-backward {
+        padding: $menuitemPadding;
+	    color: $menuitemTextColor;
+    }
+}

package/style/scss/menu/_steps.scss

@@ -0,0 +1,57 @@
+@use 'sass:math';
+
+.p-steps {
+
+    .p-steps-item {
+        .p-menuitem-link {
+            background: transparent;
+            transition: $listItemTransition;
+            border-radius: $borderRadius;
+            background: $stepsItemBg;
+
+            .p-steps-number {
+                color: $stepsItemNumberColor;
+                border: $stepsItemBorder;
+                background: $stepsItemBg;
+                min-width: $stepsItemNumberWidth;
+                height: $stepsItemNumberHeight;
+                line-height: $stepsItemNumberHeight;
+                font-size: $stepsItemNumberFontSize;
+                z-index: 1;
+                border-radius: $stepsItemNumberBorderRadius;
+            }
+
+            .p-steps-title {
+                margin-top: $inlineSpacing;
+                color: $stepsItemTextColor;
+            }
+
+            &:not(.p-disabled):focus-visible {
+                @include focused();
+            }
+        }
+
+        &.p-highlight {
+            .p-steps-number {
+                background: $highlightBg;
+                color: $highlightTextColor;
+            }
+
+            .p-steps-title {
+                font-weight: $stepsItemActiveFontWeight;
+                color: $textColor;
+            }
+        }
+
+        &:before {
+            content:' ';
+            border-top: $divider;
+            width: 100%;
+            top: 50%;
+            left: 0;
+            display: block;
+            position: absolute;
+            margin-top: math.div(-1 * $stepsItemNumberHeight, 2);
+        }
+    }
+}

package/style/scss/menu/_tabmenu.scss

@@ -0,0 +1,50 @@
+.p-tabmenu {
+    .p-tabmenu-nav {
+        background: $tabviewNavBg;
+        border: $tabviewNavBorder;
+        border-width: $tabviewNavBorderWidth;
+
+        .p-tabmenuitem {
+            margin-right: $tabviewHeaderSpacing;
+
+            .p-menuitem-link {
+                border: $tabviewHeaderBorder;
+                border-width: $tabviewHeaderBorderWidth;
+                border-color: $tabviewHeaderBorderColor;
+                background: $tabviewHeaderBg;
+                color: $tabviewHeaderTextColor;
+                padding: $tabviewHeaderPadding;
+                font-weight: $tabviewHeaderFontWeight;
+                border-top-right-radius: $borderRadius;
+                border-top-left-radius: $borderRadius;
+                transition: $listItemTransition;
+                margin: $tabviewHeaderMargin;
+                height: calc(100% + #{-1 * nth($tabviewHeaderMargin, 3)});
+
+                .p-menuitem-icon {
+                    margin-right: $inlineSpacing;
+                }
+
+                &:not(.p-disabled):focus-visible {
+                    @include focused-inset();
+                }
+            }
+
+            &:not(.p-highlight):not(.p-disabled):hover {
+                .p-menuitem-link {
+                    background: $tabviewHeaderHoverBg;
+                    border-color: $tabviewHeaderHoverBorderColor;
+                    color: $tabviewHeaderTextHoverColor;
+                }
+            }
+
+            &.p-highlight {
+                .p-menuitem-link {
+                    background: $tabviewHeaderActiveBg;
+                    border-color: $tabviewHeaderActiveBorderColor;
+                    color: $tabviewHeaderTextActiveColor;
+                }
+            }
+        }
+    }
+}