@orangesix/react 2.3.1 → 2.4.0-beta.3

package/style/scss/menu/_megamenu.scss

@@ -1,141 +0,0 @@
-.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

@@ -1,33 +0,0 @@
-.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

@@ -1,216 +0,0 @@
-.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

@@ -1,153 +0,0 @@
-.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

@@ -1,60 +0,0 @@
-.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

@@ -1,57 +0,0 @@
-@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

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