@orangesix/react 2.3.1 → 2.4.0-beta.3

package/style/scss/input/_listbox.scss

@@ -1,139 +0,0 @@
-// core
-.p-listbox-list-wrapper {
-    overflow: auto;
-}
-
-.p-listbox-list {
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-}
-
-.p-listbox-item {
-    cursor: pointer;
-    position: relative;
-    overflow: hidden;
-}
-
-.p-listbox-item-group {
-    cursor: auto;
-}
-
-.p-listbox-filter-container {
-    position: relative;
-}
-
-.p-listbox-filter-icon {
-    position: absolute;
-    top: 50%;
-    margin-top: -0.5rem;
-}
-
-.p-listbox-filter {
-    width: 100%;
-}
-
-// theme
-.p-listbox {
-    background: $inputListBg;
-    color: $inputListTextColor;
-    border: $inputListBorder;
-    border-radius: $borderRadius;
-    transition: $formElementTransition;
-    outline-color: transparent;
-
-    .p-listbox-header {
-        padding: $inputListHeaderPadding;
-        border-bottom: $inputListHeaderBorder;
-        color: $inputListHeaderTextColor;
-        background: $inputListHeaderBg;
-        margin: $inputListHeaderMargin;
-        border-top-right-radius: $borderRadius;
-        border-top-left-radius: $borderRadius;
-
-        .p-listbox-filter {
-            padding-right: nth($inputPadding, 2) + $primeIconFontSize;
-        }
-
-        .p-listbox-filter-icon {
-            right: nth($inputPadding, 2);
-            color: $inputIconColor;
-        }
-    }
-
-    .p-listbox-list {
-        padding: $inputListPadding;
-        outline: 0 none;
-
-        .p-listbox-item {
-            margin: $inputListItemMargin;
-            padding: $inputListItemPadding;
-            border: $inputListItemBorder;
-            color: $inputListItemTextColor;
-            transition: $listItemTransition;
-            border-radius: $inputListItemBorderRadius;
-
-            &:first-child {
-                margin-top: 0;
-            }
-
-            &:last-child {
-                margin-bottom: 0;
-            }
-
-            &.p-highlight {
-                color: $highlightTextColor;
-                background: $highlightBg;
-            }
-        }
-
-        .p-listbox-item-group {
-            margin: $submenuHeaderMargin;
-            padding: $submenuHeaderPadding;
-            color: $submenuHeaderTextColor;
-            background: $submenuHeaderBg;
-            font-weight: $submenuHeaderFontWeight;
-        }
-
-        .p-listbox-empty-message {
-            padding: $inputListItemPadding;
-            color: $inputListItemTextColor;
-            background: $inputListItemBg;
-        }
-    }
-
-    &:not(.p-disabled) {
-        .p-listbox-item {
-            &.p-highlight {
-                &.p-focus {
-                    background: $highlightFocusBg;
-                }
-            }
-
-            &:not(.p-highlight):not(.p-disabled) {
-                &.p-focus {
-                    color: $inputListItemTextHoverColor;
-                    background: $inputListItemHoverBg;
-                }
-
-                &:hover {
-                    color: $inputListItemTextHoverColor;
-                    background: $inputListItemHoverBg;
-
-                    &.p-focus {
-                        color: $inputListItemTextHoverColor;
-                        background: $inputListItemHoverBg;
-                    }
-                }
-            }
-        }
-    }
-
-    &.p-focus {
-        @include focused-input();
-    }
-
-    &.p-invalid {
-        @include invalid-input();
-    }
-}

package/style/scss/input/_mention.scss

@@ -1,31 +0,0 @@
-.p-mention-panel {
-    background: $inputOverlayBg;
-    color: $inputListTextColor;
-    border: $inputOverlayBorder;
-    border-radius: $borderRadius;
-    box-shadow: $inputOverlayShadow;
-
-    .p-mention-items {
-        padding: $inputListPadding;
-
-        .p-mention-item {
-            margin: $inputListItemMargin;
-            padding: $inputListItemPadding;
-            border: $inputListItemBorder;
-            color: $inputListItemTextColor;
-            background: $inputListItemBg;
-            transition: $listItemTransition;
-            border-radius: $inputListItemBorderRadius;
-
-            &:hover {
-                color: $inputListItemTextHoverColor;
-                background: $inputListItemHoverBg;
-            }
-
-            &.p-highlight {
-                color: $highlightTextColor;
-                background: $highlightBg;
-            }
-        }
-    }
-}

package/style/scss/input/_multiselect.scss

@@ -1,278 +0,0 @@
-@use "sass:math";
-
-// core
-.p-multiselect {
-    display: inline-flex;
-    cursor: pointer;
-    user-select: none;
-}
-
-.p-multiselect-trigger {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-}
-
-.p-multiselect-label-container {
-    overflow: hidden;
-    flex: 1 1 auto;
-    cursor: pointer;
-}
-
-.p-multiselect-label {
-    display: block;
-    white-space: nowrap;
-    cursor: pointer;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.p-multiselect-label-empty {
-    overflow: hidden;
-    visibility: hidden;
-}
-
-.p-multiselect-token {
-    cursor: default;
-    display: inline-flex;
-    align-items: center;
-    flex: 0 0 auto;
-}
-
-.p-multiselect-token-icon {
-    cursor: pointer;
-}
-
-.p-multiselect .p-multiselect-panel {
-    min-width: 100%;
-}
-
-.p-multiselect-items-wrapper {
-    overflow: auto;
-}
-
-.p-multiselect-items {
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-}
-
-.p-multiselect-item {
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    font-weight: normal;
-    white-space: nowrap;
-    position: relative;
-    overflow: hidden;
-}
-
-.p-multiselect-item-group {
-    cursor: auto;
-}
-
-.p-multiselect-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-}
-
-.p-multiselect-filter-container {
-    position: relative;
-    flex: 1 1 auto;
-}
-
-.p-multiselect-filter-icon {
-    position: absolute;
-    top: 50%;
-    margin-top: -0.5rem;
-}
-
-.p-multiselect-filter-container .p-inputtext {
-    width: 100%;
-}
-
-.p-multiselect-close {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    overflow: hidden;
-    position: relative;
-    margin-left: auto;
-}
-
-.p-fluid .p-multiselect {
-    display: flex;
-}
-
-// theme
-.p-multiselect {
-    background: $inputBg;
-    border: $inputBorder;
-    transition: $formElementTransition;
-    border-radius: $borderRadius;
-    outline-color: transparent;
-
-    &:not(.p-disabled):hover {
-        border-color: $inputHoverBorderColor;
-    }
-
-    &:not(.p-disabled).p-focus {
-        @include focused-input();
-    }
-
-    &.p-variant-filled {
-        background: $inputFilledBg;
-
-        &:not(.p-disabled):hover {
-            background-color: $inputFilledHoverBg;
-        }
-
-        &:not(.p-disabled).p-focus {
-            background-color: $inputFilledFocusBg;
-        }
-    }
-
-    .p-multiselect-label {
-        padding: $inputPadding;
-        transition: $formElementTransition;
-
-        &.p-placeholder {
-            color: $inputPlaceholderTextColor;
-        }
-    }
-
-    &.p-multiselect-chip {
-        .p-multiselect-token {
-            padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
-            margin-right: $inlineSpacing;
-            background: $chipBg;
-            color: $chipTextColor;
-            border-radius: $chipBorderRadius;
-
-            .p-multiselect-token-icon {
-                margin-left: $inlineSpacing;
-            }
-        }
-    }
-
-    .p-multiselect-trigger {
-        background: transparent;
-        color: $inputIconColor;
-        width: $inputGroupAddOnMinWidth;
-        border-top-right-radius: $borderRadius;
-        border-bottom-right-radius: $borderRadius;
-    }
-
-    &.p-invalid.p-component {
-        @include invalid-input();
-    }
-}
-
-.p-inputwrapper-filled {
-    &.p-multiselect {
-        &.p-multiselect-chip {
-            .p-multiselect-label {
-                padding: math.div(nth($inputPadding, 1), 2)
-                    nth($inputPadding, 2);
-            }
-        }
-    }
-}
-
-.p-multiselect-panel {
-    background: $inputOverlayBg;
-    color: $inputListTextColor;
-    border: $inputOverlayBorder;
-    border-radius: $borderRadius;
-    box-shadow: $inputOverlayShadow;
-
-    .p-multiselect-header {
-        padding: $inputListHeaderPadding;
-        border-bottom: $inputListHeaderBorder;
-        color: $inputListHeaderTextColor;
-        background: $inputOverlayHeaderBg;
-        margin: $inputListHeaderMargin;
-        border-top-right-radius: $borderRadius;
-        border-top-left-radius: $borderRadius;
-
-        .p-multiselect-filter-container {
-            .p-inputtext {
-                padding-right: nth($inputPadding, 2) + $primeIconFontSize;
-            }
-
-            .p-multiselect-filter-icon {
-                right: nth($inputPadding, 2);
-                color: $inputIconColor;
-            }
-        }
-
-        .p-checkbox {
-            margin-right: $inlineSpacing;
-        }
-
-        .p-multiselect-close {
-            margin-left: $inlineSpacing;
-            @include action-icon();
-        }
-    }
-
-    .p-multiselect-items {
-        padding: $inputListPadding;
-
-        .p-multiselect-item {
-            margin: $inputListItemMargin;
-            padding: $inputListItemPadding;
-            border: $inputListItemBorder;
-            color: $inputListItemTextColor;
-            background: $inputListItemBg;
-            transition: $listItemTransition;
-            border-radius: $inputListItemBorderRadius;
-
-            &:first-child {
-                margin-top: 0;
-            }
-
-            &:last-child {
-                margin-bottom: 0;
-            }
-
-            &.p-highlight {
-                color: $highlightTextColor;
-                background: $highlightBg;
-
-                &.p-focus {
-                    background: $highlightFocusBg;
-                }
-            }
-
-            &:not(.p-highlight):not(.p-disabled) {
-                &.p-focus {
-                    color: $inputListItemTextHoverColor;
-                    background: $inputListItemHoverBg;
-                }
-            }
-
-            .p-checkbox {
-                margin-right: $inlineSpacing;
-            }
-        }
-
-        .p-multiselect-item-group {
-            margin: $submenuHeaderMargin;
-            padding: $submenuHeaderPadding;
-            color: $submenuHeaderTextColor;
-            background: $submenuHeaderBg;
-            font-weight: $submenuHeaderFontWeight;
-        }
-
-        .p-multiselect-empty-message {
-            padding: $inputListItemPadding;
-            color: $inputListItemTextColor;
-            background: $inputListItemBg;
-        }
-    }
-}
-

package/style/scss/input/_password.scss

@@ -1,33 +0,0 @@
-.p-password {
-    &.p-invalid.p-component > .p-inputtext {
-        @include invalid-input();
-    }
-}
-
-.p-password-panel {
-    padding: $panelContentPadding;
-    background: $panelContentBg;
-    color: $panelContentTextColor;
-    border: $overlayContentBorder;
-    box-shadow: $inputOverlayShadow;
-    border-radius: $borderRadius;
-
-    .p-password-meter {
-        margin-bottom: $inlineSpacing;
-        background: $passwordMeterBg;
-
-        .p-password-strength {
-            &.weak {
-                background: $passwordWeakBg;
-            }
-
-            &.medium {
-                background: $passwordMediumBg;
-            }
-
-            &.strong {
-                background: $passwordStrongBg;
-            }
-        }
-    }
-}

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