@orangesix/react 1.4.0 → 2.0.3

package/style/scss/input/_rating.scss

@@ -0,0 +1,81 @@
+@use 'sass:math';
+
+// core
+.p-rating {
+    position: relative;
+    display: flex;
+    align-items: center;
+}
+
+.p-rating-item {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+}
+
+.p-rating.p-readonly .p-rating-item {
+    cursor: default;
+}
+
+// theme
+.p-rating {
+    gap: $inlineSpacing;
+
+    .p-rating-item {
+        outline-color: transparent;
+        border-radius: 50%;
+        
+        .p-rating-icon {
+            color: $ratingStarIconOffColor;
+            transition: $formElementTransition;   
+            font-size: $ratingIconFontSize;
+
+            &.p-icon {
+                width: $ratingIconFontSize;
+                height: $ratingIconFontSize;
+            }
+    
+            &.p-rating-cancel {
+                color: $ratingCancelIconColor;
+            }
+        }
+
+        &.p-focus {
+            @include focused();
+        }
+
+        &.p-rating-item-active {
+            .p-rating-icon {
+                color: $ratingStarIconOnColor;
+            }
+        }
+    }
+
+    &:not(.p-disabled):not(.p-readonly) {
+        .p-rating-item {
+            &:hover {
+                .p-rating-icon {
+                    color: $ratingStarIconHoverColor;
+
+                    &.p-rating-cancel {
+                        color: $ratingCancelIconHoverColor;
+                    }
+                }
+            }
+        }
+    }
+}
+
+@if ($highlightBg == $ratingStarIconOnColor) {
+    .p-highlight {
+        .p-rating {
+            .p-rating-item {
+                &.p-rating-item-active {
+                    .p-rating-icon {
+                        color: $highlightTextColor;
+                    }
+                }
+            }
+        }
+    }
+}

package/style/scss/input/_selectbutton.scss

@@ -0,0 +1,50 @@
+.p-selectbutton {
+    .p-button {
+        background: $toggleButtonBg;
+        border: $toggleButtonBorder;
+        color: $toggleButtonTextColor;
+        transition: $formElementTransition;
+
+        .p-button-icon-left,
+        .p-button-icon-right {
+            color: $toggleButtonIconColor;
+        }
+
+        &:not(.p-disabled):not(.p-highlight):hover {
+            background: $toggleButtonHoverBg;
+            border-color: $toggleButtonHoverBorderColor;
+            color: $toggleButtonTextHoverColor;
+
+            .p-button-icon-left,
+            .p-button-icon-right {
+                color: $toggleButtonIconHoverColor;
+            }
+        }
+
+        &.p-highlight {
+            background: $toggleButtonActiveBg;
+            border-color: $toggleButtonActiveBorderColor;
+            color: $toggleButtonTextActiveColor;
+
+            .p-button-icon-left,
+            .p-button-icon-right {
+                color: $toggleButtonIconActiveColor;
+            }
+
+            &:hover {
+                background: $toggleButtonActiveHoverBg;
+                border-color: $toggleButtonActiveHoverBorderColor;
+                color: $toggleButtonTextActiveHoverColor;
+
+                .p-button-icon-left,
+                .p-button-icon-right {
+                    color: $toggleButtonIconActiveHoverColor;
+                }
+            }
+        }
+    }
+
+    &.p-invalid > .p-button {
+        @include invalid-input();
+    }
+}

package/style/scss/input/_slider.scss

@@ -0,0 +1,49 @@
+@use 'sass:math';
+
+.p-slider {
+    background: $sliderBg;
+    border: $sliderBorder;
+    border-radius: $borderRadius;
+
+    &.p-slider-horizontal {
+        height: $sliderHorizontalHeight;
+
+        .p-slider-handle {
+            margin-top: math.div(-1 * $sliderHandleHeight, 2);
+            margin-left: math.div(-1 * $sliderHandleWidth, 2);
+        }
+    }
+
+    &.p-slider-vertical {
+        width: $sliderVerticalWidth;
+
+        .p-slider-handle {
+            margin-left: math.div(-1 * $sliderHandleWidth, 2);
+            margin-bottom: math.div(-1 * $sliderHandleHeight, 2);
+        }
+    }
+
+    .p-slider-handle {
+        height: $sliderHandleHeight;
+        width: $sliderHandleWidth;
+        background: $sliderHandleBg;
+        border: $sliderHandleBorder;
+        border-radius: $sliderHandleBorderRadius;
+        transition: $formElementTransition;
+
+        &:focus {
+            @include focused();
+        }
+    }
+
+    .p-slider-range {
+        background: $sliderRangeBg;
+    }
+
+    &:not(.p-disabled) {
+        .p-slider-handle:hover {
+            background: $sliderHandleHoverBg;
+            border-color: $sliderHandleHoverBorderColor;
+        }
+    }
+}

package/style/scss/input/_togglebutton.scss

@@ -0,0 +1,99 @@
+//core
+.p-togglebutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+}
+
+.p-togglebutton-input {
+    cursor: pointer;
+}
+
+.p-togglebutton .p-button {
+    flex: 1 1 auto;
+}
+//theme
+.p-togglebutton {
+    .p-togglebutton-input {
+        appearance: none;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        padding: 0;
+        margin: 0;
+        opacity: 0;
+        z-index: 1;
+        outline: 0 none;
+        border: $toggleButtonBorder;
+        border-radius: $borderRadius;
+    }
+
+    .p-button {
+        background: $toggleButtonBg;
+        border: $toggleButtonBorder;
+        color: $toggleButtonTextColor;
+        transition: $formElementTransition;
+        outline-color: transparent;
+
+        .p-button-icon-left,
+        .p-button-icon-right {
+            color: $toggleButtonIconColor;
+        }
+    }
+
+    &.p-highlight {
+        .p-button {
+            background: $toggleButtonActiveBg;
+            border-color: $toggleButtonActiveBorderColor;
+            color: $toggleButtonTextActiveColor;
+
+            .p-button-icon-left,
+            .p-button-icon-right {
+                color: $toggleButtonIconActiveColor;
+            }
+        }
+    }
+
+    &:not(.p-disabled) {
+        &:has(.p-togglebutton-input:hover) {
+            &:not(.p-highlight) {
+                .p-button {
+                    background: $toggleButtonHoverBg;
+                    border-color: $toggleButtonHoverBorderColor;
+                    color: $toggleButtonTextHoverColor;
+
+                    .p-button-icon-left,
+                    .p-button-icon-right {
+                        color: $toggleButtonIconHoverColor;
+                    }
+                }
+            }
+
+            &.p-highlight {
+                .p-button {
+                    background: $toggleButtonActiveHoverBg;
+                    border-color: $toggleButtonActiveHoverBorderColor;
+                    color: $toggleButtonTextActiveHoverColor;
+
+                    .p-button-icon-left,
+                    .p-button-icon-right {
+                        color: $toggleButtonIconActiveHoverColor;
+                    }
+                }
+            }
+        }
+
+        &:has(.p-togglebutton-input:focus-visible) {
+            .p-button {
+                @include focused-input();
+            }
+        }
+    }
+
+    &.p-invalid > .p-button {
+        @include invalid-input();
+    }
+}

package/style/scss/input/_treeselect.scss

@@ -0,0 +1,151 @@
+@use 'sass:math';
+
+.p-treeselect {
+    background: $inputBg;
+    border: $inputBorder;
+    transition: $formElementTransition;
+    border-radius: $borderRadius;
+
+    &:not(.p-disabled):hover {
+        border-color: $inputHoverBorderColor;
+    }
+
+    &:not(.p-disabled).p-focus {
+        @include focused-input();
+    }
+
+    &.p-treeselect-clearable {
+        .p-treeselect-label {
+            padding-right: nth($inputPadding, 2) + $primeIconFontSize;
+        }
+    }
+
+    &.p-variant-filled {
+        background: $inputFilledBg;
+
+        &:not(.p-disabled):hover {
+            background-color: $inputFilledHoverBg;
+        }
+
+        &:not(.p-disabled).p-focus {
+            background-color: $inputFilledFocusBg;
+        }
+    }
+    
+    .p-treeselect-label {
+        padding: $inputPadding;
+        transition: $formElementTransition;
+
+        &.p-placeholder {
+            color: $inputPlaceholderTextColor;
+        }
+    }
+
+    &.p-treeselect-chip {
+        .p-treeselect-token {
+            padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
+            margin-right: $inlineSpacing;
+            background: $chipBg;
+            color: $chipTextColor;
+            border-radius: $chipBorderRadius;
+        }
+    }
+
+    .p-treeselect-trigger {
+        background: transparent;
+        color: $inputIconColor;
+        width: $inputGroupAddOnMinWidth;
+        border-top-right-radius: $borderRadius;
+        border-bottom-right-radius: $borderRadius;
+    }
+
+    .p-treeselect-clear-icon {
+        color: $inputIconColor;
+        right: $inputGroupAddOnMinWidth;
+    }
+    
+    &.p-invalid.p-component {
+        @include invalid-input();
+    }
+}
+
+.p-inputwrapper-filled {
+    &.p-treeselect {
+        &.p-treeselect-chip {
+            .p-treeselect-label {
+                padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
+            }
+        }
+    }
+}
+
+.p-treeselect-panel {
+    background: $inputOverlayBg;
+    color: $inputListTextColor;
+    border: $inputOverlayBorder;
+    border-radius: $borderRadius;
+    box-shadow: $inputOverlayShadow;
+
+    .p-treeselect-header {
+        padding: $inputListHeaderPadding;
+        border-bottom: $inputListHeaderBorder;
+        color: $inputListHeaderTextColor;
+        background: $inputOverlayHeaderBg;
+        margin: $inputListHeaderMargin;
+        border-top-right-radius: $borderRadius;
+        border-top-left-radius: $borderRadius;
+
+        .p-treeselect-filter-container {
+            margin-right: $inlineSpacing;
+
+            .p-treeselect-filter {
+                padding-right: nth($inputPadding, 2) + $primeIconFontSize;
+            }
+    
+            .p-treeselect-filter-icon {
+                right: nth($inputPadding, 2);
+                color: $inputIconColor;
+            }
+    
+            &.p-treeselect-clearable-filter {
+                .p-treeselect-filter {
+                    padding-right: 2 * (nth($inputPadding, 2) + $primeIconFontSize);
+                }
+        
+                .p-treeselect-filter-clear-icon {
+                    right: (2 * nth($inputPadding, 2)) + $primeIconFontSize;
+                }
+            }
+        }
+
+        .p-treeselect-close {
+            @include action-icon();
+        }
+    }
+
+    .p-treeselect-items-wrapper {
+        .p-tree {
+            border: 0 none;
+        }
+
+        .p-treeselect-empty-message {
+            padding: $inputListItemPadding;
+            color: $inputListItemTextColor;
+            background: $inputListItemBg;
+        }
+    }
+}
+
+.p-input-filled {
+    .p-treeselect {
+        background: $inputFilledBg;
+
+        &:not(.p-disabled):hover {
+            background-color: $inputFilledHoverBg;
+        }
+    
+        &:not(.p-disabled).p-focus {
+            background-color: $inputFilledFocusBg;
+        }
+    }
+}

package/style/scss/input/_tristatecheckbox.scss

@@ -0,0 +1,46 @@
+//core
+.p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+}
+
+.p-checkbox-input {
+    cursor: pointer;
+}
+
+.p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+//theme
+.p-tristatecheckbox {
+    &.p-variant-filled {
+        .p-checkbox-box {
+            background-color: $inputFilledBg;
+        }
+
+        &.p-highlight {
+            .p-checkbox-box {
+                background: $checkboxActiveBg;
+            }
+        }
+
+        &:not(.p-disabled) {
+            &:has(.p-checkbox-input:hover) {
+                .p-checkbox-box {
+                    background-color: $inputFilledHoverBg;
+                }
+
+                &.p-highlight {
+                    .p-checkbox-box {
+                        background: $checkboxActiveHoverBg;
+                    }
+                }
+            }
+        }
+    }
+}

package/style/scss/menu/_breadcrumb.scss

@@ -0,0 +1,42 @@
+.p-breadcrumb {
+	background: $breadcrumbBg;
+	border: $breadcrumbBorder;
+	border-radius: $borderRadius;
+	padding: $breadcrumbPadding;
+
+	.p-breadcrumb-list {
+		li {
+			.p-menuitem-link {
+				transition: $listItemTransition;
+				border-radius: $borderRadius;
+
+				&:focus-visible {
+					@include focused();
+				}
+
+				.p-menuitem-text {
+					color: $breadcrumbItemTextColor;
+				}
+
+				.p-menuitem-icon {
+					color: $breadcrumbItemIconColor;
+				}
+			}
+
+			&.p-menuitem-separator {
+				margin: 0 $inlineSpacing 0 $inlineSpacing;
+				color: $breadcrumbSeparatorColor;
+			}
+
+			&:last-child {
+				.p-menuitem-text {
+					color: $breadcrumbLastItemTextColor;
+				}
+
+				.p-menuitem-icon {
+					color: $breadcrumbLastItemIconColor;
+				}
+			}
+		}
+	}
+}

package/style/scss/menu/_contextmenu.scss

@@ -0,0 +1,39 @@
+.p-contextmenu {
+	padding: $verticalMenuPadding;
+	background: $overlayMenuBg;
+	color: $menuTextColor;
+	border: $overlayMenuBorder;
+	box-shadow: $overlayMenuShadow;
+	border-radius: $borderRadius;
+	width: $menuWidth;
+
+	.p-contextmenu-root-list {
+		outline: 0 none;
+	}
+
+	.p-submenu-list {
+		padding: $verticalMenuPadding;
+		background: $overlayMenuBg;
+		border: $overlayMenuBorder;
+		box-shadow: $overlayMenuShadow;
+		border-radius: $borderRadius;
+	}
+
+	.p-menuitem {
+		@include menuitem-link();
+	}
+
+	.p-menuitem-separator {
+		border-top: $divider;
+		margin: $menuSeparatorMargin;
+	}
+
+	.p-submenu-icon {
+		font-size: $menuitemSubmenuIconFontSize;
+
+		&.p-icon {
+			width: $menuitemSubmenuIconFontSize;
+			height: $menuitemSubmenuIconFontSize;
+		}
+	}
+}

package/style/scss/menu/_dock.scss

@@ -0,0 +1,109 @@
+.p-dock {
+	.p-dock-list-container {
+		background: $dockBg;
+		border: $dockBorder;
+		padding: $dockPadding;
+		border-radius: $dockBorderRadius;
+
+		.p-dock-list {
+			outline: 0 none;
+		}
+	}
+
+	.p-dock-item {
+		padding: $dockItemPadding;
+		border-radius: $dockItemBorderRadius;
+
+		&.p-focus {
+			@include focused-listitem();
+		}
+	}
+
+	.p-dock-action {
+		width: $dockActionWidth;
+		height: $dockActionHeight;
+	}
+
+	&.p-dock-top,
+	&.p-dock-bottom {
+		.p-dock-item-second-prev,
+		.p-dock-item-second-next {
+			margin: 0 $dockSecondItemsMargin;
+		}
+
+		.p-dock-item-prev,
+		.p-dock-item-next {
+			margin: 0 $dockFirstItemsMargin;
+		}
+
+		.p-dock-item-current {
+			margin: 0 $dockCurrentItemMargin;
+		}
+	}
+
+	&.p-dock-left,
+	&.p-dock-right {
+		.p-dock-item-second-prev,
+		.p-dock-item-second-next {
+			margin: $dockSecondItemsMargin 0;
+		}
+
+		.p-dock-item-prev,
+		.p-dock-item-next {
+			margin: $dockFirstItemsMargin 0;
+		}
+
+		.p-dock-item-current {
+			margin: $dockCurrentItemMargin 0;
+		}
+	}
+
+	&.p-dock-mobile {
+		&.p-dock-top,
+		&.p-dock-bottom {
+			.p-dock-list-container {
+				overflow-x: auto;
+				width: 100%;
+
+				.p-dock-list {
+					margin: 0 auto;
+				}
+			}
+		}
+
+		&.p-dock-left,
+		&.p-dock-right {
+			.p-dock-list-container {
+				overflow-y: auto;
+				height: 100%;
+
+				.p-dock-list {
+					margin: auto 0;
+				}
+			}
+		}
+
+		.p-dock-list {
+			.p-dock-item {
+				transform: none;
+				margin: 0;
+			}
+		}
+
+		&.p-dock-magnification {
+			&.p-dock-top,
+			&.p-dock-bottom,
+			&.p-dock-left,
+			&.p-dock-right {
+				.p-dock-item-second-prev,
+				.p-dock-item-second-next,
+				.p-dock-item-prev,
+				.p-dock-item-next,
+				.p-dock-item-current {
+					transform: none;
+					margin: 0;
+				}
+			}
+		}
+	}
+}