@orangesix/react 2.3.1 → 2.4.0-beta.3

package/style/scss/_radiobutton.scss

@@ -1,170 +0,0 @@
-//core
-.p-radiobutton {
-    position: relative;
-    display: inline-flex;
-    user-select: none;
-    vertical-align: bottom;
-}
-
-.p-radiobutton-input {
-    cursor: pointer;
-}
-
-.p-radiobutton-box {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.p-radiobutton-icon {
-    -webkit-backface-visibility: hidden;
-    backface-visibility: hidden;
-    transform: translateZ(0) scale(.1);
-    border-radius: 50%;
-    visibility: hidden;
-}
-
-.p-radiobutton.p-highlight .p-radiobutton-icon {
-    transform: translateZ(0) scale(1.0, 1.0);
-    visibility: visible;
-}
-
-//theme
-.p-radiobutton {
-    width: $radiobuttonWidth;
-    height: $radiobuttonHeight;
-
-      .p-radiobutton-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: $radiobuttonBorder;
-        border-radius: 50%;
-    }
-
-    .p-radiobutton-box {
-        border: $radiobuttonBorder;
-        background: $inputBg;
-        width: $radiobuttonWidth;
-        height: $radiobuttonHeight;
-        color: $textColor;
-        border-radius: 50%;
-        transition: $formElementTransition;
-        outline-color: transparent;
-
-        .p-radiobutton-icon {
-            width: $radiobuttonIconSize;
-            height: $radiobuttonIconSize;
-            transition-duration: $transitionDuration;
-            background-color: $radiobuttonIconActiveColor;
-        }
-    }
-
-    &.p-highlight {
-        .p-radiobutton-box {
-            border-color: $radiobuttonActiveBorderColor;
-            background: $radiobuttonActiveBg;
-        }
-    }
-
-    &:not(.p-disabled) {
-        &:has(.p-radiobutton-input:hover) {
-            .p-radiobutton-box {
-                border-color: $inputHoverBorderColor;
-            }
-
-            &.p-highlight {
-                .p-radiobutton-box {
-                    border-color: $radiobuttonActiveHoverBorderColor;
-                    background: $radiobuttonActiveHoverBg;
-
-                    .p-radiobutton-icon {
-                        background-color: $radiobuttonIconActiveHoverColor;
-                    }
-                }
-            }
-        }
-
-        &:has(.p-radiobutton-input:focus-visible) {
-            .p-radiobutton-box {
-                @include focused-input();
-            }
-        }
-    }
-
-    &.p-invalid > .p-radiobutton-box {
-        @include invalid-input();
-    }
-
-    &.p-variant-filled {
-        .p-radiobutton-box {
-            background-color: $inputFilledBg;
-        }
-
-        &.p-highlight {
-            .p-radiobutton-box {
-                background: $radiobuttonActiveBg;
-            }
-        }
-
-        &:not(.p-disabled) {
-            &:has(.p-radiobutton-input:hover) {
-                .p-radiobutton-box {
-                    background-color: $inputFilledHoverBg;
-                }
-
-                &.p-highlight {
-                    .p-radiobutton-box {
-                        background: $radiobuttonActiveHoverBg;
-                    }
-                }
-            }
-        }
-    }
-}
-
-.p-input-filled {
-    .p-radiobutton {
-        .p-radiobutton-box {
-            background-color: $inputFilledBg;
-        }
-
-        &.p-highlight {
-            .p-radiobutton-box {
-                background: $radiobuttonActiveBg;
-            }
-        }
-
-        &:not(.p-disabled) {
-            &:has(.p-radiobutton-input:hover) {
-                .p-radiobutton-box {
-                    background-color: $inputFilledHoverBg;
-                }
-
-                &.p-highlight {
-                    .p-radiobutton-box {
-                        background: $radiobuttonActiveHoverBg;
-                    }
-                }
-            }
-        }
-    }
-}
-
-@if ($highlightBg == $radiobuttonActiveBg) {
-    .p-highlight {
-        .p-radiobutton {
-            .p-radiobutton-box {
-                border-color: $radiobuttonIconActiveColor;
-            }
-        }
-    }
-}

package/style/scss/_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/_reset.scss

@@ -1,76 +0,0 @@
-* {
-  box-sizing: border-box;
-}
-
-.p-component {
-  font-family: var(--font-family);
-  font-feature-settings: var(--font-feature-settings, normal);
-  font-size: $fontSize;
-  font-weight: $fontWeight;
-}
-
-.p-component-overlay {
-  background-color: $maskBg;
-  transition-duration: $transitionDuration;
-}
-
-.p-disabled, .p-component:disabled {
-  opacity: $disabledOpacity;
-  background-color: $disabledBackground !important;
-}
-
-.p-error {
-  color: $errorColor;
-}
-
-.p-text-secondary {
-  color: $textSecondaryColor;
-}
-
-.pi {
-  font-size: $primeIconFontSize;
-}
-
-.p-icon {
-  width: $primeIconFontSize;
-  height: $primeIconFontSize;
-}
-
-.p-link {
-  font-family: var(--font-family);
-  font-feature-settings: var(--font-feature-settings, normal);
-  font-size: $fontSize;
-  border-radius: $borderRadius;
-
-  &:focus-visible {
-    @include focused();
-  }
-}
-
-.p-component-overlay-enter {
-  animation: p-component-overlay-enter-animation 150ms forwards;
-}
-
-.p-component-overlay-leave {
-  animation: p-component-overlay-leave-animation 150ms forwards;
-}
-
-.p-component-overlay {
-  @keyframes p-component-overlay-enter-animation {
-    from {
-      background-color: transparent;
-    }
-    to {
-      background-color: var(--maskbg);
-    }
-  }
-
-  @keyframes p-component-overlay-leave-animation {
-    from {
-      background-color: var(--maskbg);
-    }
-    to {
-      background-color: transparent;
-    }
-  }
-}

package/style/scss/_root.scss

@@ -1,110 +0,0 @@
-@import '../core/mixins';
-@import '../core/colors';
-@import '../core/extensions';
-
-@layer primereact {
-  @import '../core/reset';
-  
-  //Input
-  @import 'input/autocomplete';
-  @import 'input/calendar';
-  @import 'input/cascadeselect';
-  @import 'input/checkbox';
-  @import 'input/tristatecheckbox';
-  @import 'input/chips';
-  @import 'input/colorpicker';
-  @import 'input/dropdown';
-  @import 'input/inputgroup';
-  @import 'input/inputnumber';
-  @import 'input/inputswitch';
-  @import 'input/inputtext';
-  @import 'input/iconfield';
-  @import 'input/inputicon';
-  @import 'input/inputotp';
-  @import 'input/listbox';
-  @import 'input/mention';
-  @import 'input/multiselect';
-  @import 'input/password';
-  @import 'input/radiobutton';
-  @import 'input/rating';
-  @import 'input/selectbutton';
-  @import 'input/slider';
-  @import 'input/treeselect';
-  @import 'input/togglebutton';
-
-  //Button
-  @import 'button/button';
-  @import 'button/splitbutton';
-  @import 'button/speeddial';
-
-  //Data
-  @import 'data/carousel';
-  @import 'data/datatable';
-  @import 'data/dataview';
-  @import 'data/datascroller';
-  @import 'data/filter';
-  @import 'data/orderlist';
-  @import 'data/organizationchart';
-  @import 'data/paginator';
-  @import 'data/picklist';
-  @import 'data/tree';
-  @import 'data/treetable';
-  @import 'data/timeline';
-
-  //Panel
-  @import 'panel/accordion';
-  @import 'panel/card';
-  @import 'panel/fieldset';
-  @import 'panel/divider';
-  @import 'panel/panel';
-  @import 'panel/splitter';
-  @import 'panel/stepper';
-  @import 'panel/scrollpanel';
-  @import 'panel/tabview';
-  @import 'panel/toolbar';
-
-  //Overlay
-  @import 'overlay/confirmpopup';
-  @import 'overlay/dialog';
-  @import 'overlay/overlaypanel';
-  @import 'overlay/sidebar';
-  @import 'overlay/tooltip';
-
-  //File
-  @import 'file/fileupload';
-
-  //Menu
-  @import 'menu/breadcrumb';
-  @import 'menu/contextmenu';
-  @import 'menu/dock';
-  @import 'menu/megamenu';
-  @import 'menu/menu';
-  @import 'menu/menubar';
-  @import 'menu/panelmenu';
-  @import 'menu/slidemenu';
-  @import 'menu/steps';
-  @import 'menu/tabmenu';
-  @import 'menu/tieredmenu';
-
-  //Messages
-  @import 'messages/inlinemessage';
-  @import 'messages/message';
-  @import 'messages/toast';
-
-  //MultiMedia
-  @import 'multimedia/galleria';
-  @import 'multimedia/image';
-
-  //Misc
-  @import 'misc/avatar';
-  @import 'misc/chip';
-  @import 'misc/scrolltop';
-  @import 'misc/skeleton';
-  @import 'misc/tag';
-  @import 'misc/inplace';
-  @import 'misc/metergroup';
-  @import 'misc/progressbar';
-  @import 'misc/terminal';
-  @import 'misc/blockui';
-  @import 'misc/badge';
-}

package/style/scss/_scrollpanel.scss

@@ -1,10 +0,0 @@
-.p-scrollpanel {
-	.p-scrollpanel-bar {
-		background: $scrollPanelTrackBg;
-		border: $scrollPanelTrackBorder;
-
-		&:focus-visible {
-			@include focused();
-		}
-	}
-}

package/style/scss/_scrolltop.scss

@@ -1,25 +0,0 @@
-.p-scrolltop {
-    width: $scrollTopWidth;
-    height: $scrollTopHeight;
-    border-radius: $scrollTopBorderRadius;
-    box-shadow: $inputOverlayShadow;
-    transition: $actionIconTransition;
-
-    &.p-link {
-        background: $scrollTopBg;
-
-        &:hover {
-            background: $scrollTopHoverBg;
-        }
-    }
-
-    .p-scrolltop-icon {
-        font-size: $scrollTopFontSize;
-        color: $scrollTopTextColor;
-
-        &.p-icon {
-            width: $scrollTopFontSize;
-            height: $scrollTopFontSize;
-        }
-    }
-}

package/style/scss/_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/_sidebar.scss

@@ -1,23 +0,0 @@
-.p-sidebar {
-    background: $overlayContentBg;
-    color: $panelContentTextColor;
-    border: $overlayContentBorder;
-    box-shadow: $overlayContainerShadow;
-
-    .p-sidebar-header {
-        padding: $panelHeaderPadding;
-
-        .p-sidebar-close,
-        .p-sidebar-icon {
-            @include action-icon();
-        }
-
-        & + .p-sidebar-content {
-            padding-top: 0;
-        }
-    }
-
-    .p-sidebar-content {
-        padding: $panelContentPadding;
-    }
-}

package/style/scss/_skeleton.scss

@@ -1,8 +0,0 @@
-.p-skeleton {
-    background-color: $skeletonBg;
-    border-radius: $borderRadius;
-
-    &:after {
-        background: linear-gradient(90deg, rgba(255, 255, 255, 0), $skeletonAnimationBg, rgba(255, 255, 255, 0));
-    }
-}

package/style/scss/_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/_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;
-        }
-    }
-}