@orangesix/react 2.3.1 → 2.4.0-beta.3

package/style/scss/input/_rating.scss

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

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

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

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

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

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

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

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

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