@orangesix/react 2.3.1 → 2.4.0-beta.3

package/style/scss/menu/_tieredmenu.scss

@@ -1,43 +0,0 @@
-.p-tieredmenu {
-	padding: $verticalMenuPadding;
-	background: $menuBg;
-	color: $menuTextColor;
-	border: $menuBorder;
-	border-radius: $borderRadius;
-	width: $menuWidth;
-
-	&.p-tieredmenu-overlay {
-		background: $overlayMenuBg;
-		border: $overlayMenuBorder;
-		box-shadow: $overlayMenuShadow;
-	}
-
-	.p-tieredmenu-root-list {
-		outline: 0 none;
-	}
-
-	.p-submenu-list {
-		padding: $verticalMenuPadding;
-		background: $overlayMenuBg;
-		border: $overlayMenuBorder;
-		box-shadow: $overlayMenuShadow;
-	}
-
-	.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/messages/_inlinemessage.scss

@@ -1,69 +0,0 @@
-.p-inline-message {
-    padding: $inlineMessagePadding;
-    margin: $inlineMessageMargin;
-    border-radius: $borderRadius;
-
-    &.p-inline-message-info {
-        background: $infoMessageBg;
-        border: $infoMessageBorder;
-        border-width: $inlineMessageBorderWidth;
-        color: $infoMessageTextColor;
-
-        .p-inline-message-icon {
-            color: $infoMessageIconColor;
-        }
-    }
-
-    &.p-inline-message-success {
-        background: $successMessageBg;
-        border: $successMessageBorder;
-        border-width: $inlineMessageBorderWidth;
-        color: $successMessageTextColor;
-
-        .p-inline-message-icon {
-            color: $successMessageIconColor;
-        }
-    }
-
-    &.p-inline-message-warn {
-        background: $warningMessageBg;
-        border: $warningMessageBorder;
-        border-width: $inlineMessageBorderWidth;
-        color: $warningMessageTextColor;
-
-        .p-inline-message-icon {
-            color: $warningMessageIconColor;
-        }
-    }
-
-    &.p-inline-message-error {
-        background: $errorMessageBg;
-        border: $errorMessageBorder;
-        border-width: $inlineMessageBorderWidth;
-        color: $errorMessageTextColor;
-
-        .p-inline-message-icon {
-            color: $errorMessageIconColor;
-        }
-    }
-
-    .p-inline-message-icon {
-        font-size: $inlineMessageIconFontSize;
-        margin-right: $inlineSpacing;
-
-        &.p-icon {
-            width: $inlineMessageIconFontSize;
-            height: $inlineMessageIconFontSize;
-        }
-    }
-
-    .p-inline-message-text {
-        font-size: $inlineMessageTextFontSize;
-    }
-
-    &.p-inline-message-icon-only {
-        .p-inline-message-icon {
-            margin-right: 0;
-        }
-    }
-}

package/style/scss/messages/_message.scss

@@ -1,107 +0,0 @@
-.p-message {
-    margin: $messageMargin;
-    border-radius: $borderRadius;
-
-    .p-message-wrapper {
-        padding: $messagePadding;
-    }
-
-    .p-message-close {
-        width: $actionIconWidth;
-        height: $actionIconHeight;
-        border-radius: $actionIconBorderRadius;
-        background: transparent;
-        transition: $actionIconTransition;
-
-        &:hover {
-            background: rgba(255,255,255,.5);
-        }
-
-        &:focus-visible {
-            @include focused();
-        }
-    }
-
-    &.p-message-info {
-        background: $infoMessageBg;
-        border: $infoMessageBorder;
-        border-width: $messageBorderWidth;
-        color: $infoMessageTextColor;
-
-        .p-message-icon {
-            color: $infoMessageIconColor;
-        }
-
-        .p-message-close {
-            color: $infoMessageIconColor;
-        }
-    }
-
-    &.p-message-success {
-        background: $successMessageBg;
-        border: $successMessageBorder;
-        border-width: $messageBorderWidth;
-        color: $successMessageTextColor;
-
-        .p-message-icon {
-            color: $successMessageIconColor;
-        }
-
-        .p-message-close {
-            color: $successMessageIconColor;
-        }
-    }
-
-    &.p-message-warn {
-        background: $warningMessageBg;
-        border: $warningMessageBorder;
-        border-width: $messageBorderWidth;
-        color: $warningMessageTextColor;
-
-        .p-message-icon {
-            color: $warningMessageIconColor;
-        }
-
-        .p-message-close {
-            color: $warningMessageIconColor;
-        }
-    }
-
-    &.p-message-error {
-        background: $errorMessageBg;
-        border: $errorMessageBorder;
-        border-width: $messageBorderWidth;
-        color: $errorMessageTextColor;
-
-        .p-message-icon {
-            color: $errorMessageIconColor;
-        }
-
-        .p-message-close {
-            color: $errorMessageIconColor;
-        }
-    }
-
-    .p-message-text {
-        font-size: $messageTextFontSize;
-        font-weight: $messageTextFontWeight;
-    }
-
-    .p-message-icon {
-        font-size: $messageIconFontSize;
-        margin-right: $inlineSpacing;
-
-        &.p-icon {
-            width: $messageIconFontSize;
-            height: $messageIconFontSize;
-        }
-    }
-
-    .p-message-summary {
-        font-weight: 700;
-    }
-
-    .p-message-detail {
-        margin-left: $inlineSpacing;
-    }
-}

package/style/scss/messages/_toast.scss

@@ -1,100 +0,0 @@
-.p-toast {
-    opacity: $toastOpacity;
-
-    .p-toast-message {
-        margin: $toastMargin;
-        box-shadow: $toastShadow;
-        border-radius: $borderRadius;
-
-        .p-toast-message-content {
-            padding: $toastPadding;
-
-            .p-toast-message-text {
-                margin: $toastMessageTextMargin;
-            }
-
-            .p-toast-message-icon {
-                font-size: $toastIconFontSize;
-                
-                &.p-icon {
-                    width: $toastIconFontSize;
-                    height: $toastIconFontSize;
-                }
-            }
-
-
-            .p-toast-summary {
-                font-weight: $toastTitleFontWeight;
-            }
-
-            .p-toast-detail {
-                margin: $toastDetailMargin;
-            }
-        }
-
-        .p-toast-icon-close {
-            width: $toastIconFontSize;
-            height: $toastIconFontSize;
-            border-radius: $actionIconBorderRadius;
-            background: transparent;
-            transition: $actionIconTransition;
-
-            &:hover {
-                background: rgba(255,255,255,.5);
-            }
-
-            &:focus-visible {
-                @include focused();
-            }
-        }
-
-        &.p-toast-message-info {
-            background: $infoMessageBg;
-            border: $infoMessageBorder;
-            border-width: $messageBorderWidth;
-            color: $infoMessageTextColor;
-
-            .p-toast-message-icon,
-            .p-toast-icon-close {
-                color: $infoMessageIconColor;
-            }
-        }
-
-        &.p-toast-message-success {
-            background: $successMessageBg;
-            border: $successMessageBorder;
-            border-width: $messageBorderWidth;
-            color: $successMessageTextColor;
-
-            .p-toast-message-icon,
-            .p-toast-icon-close {
-                color: $successMessageIconColor;
-            }
-        }
-
-        &.p-toast-message-warn {
-            background: $warningMessageBg;
-            border: $warningMessageBorder;
-            border-width: $messageBorderWidth;
-            color: $warningMessageTextColor;
-
-            .p-toast-message-icon,
-            .p-toast-icon-close {
-                color: $warningMessageIconColor;
-            }
-        }
-
-        &.p-toast-message-error {
-            background: $errorMessageBg;
-            border: $errorMessageBorder;
-            border-width: $messageBorderWidth;
-            color: $errorMessageTextColor;
-
-            .p-toast-message-icon,
-            .p-toast-icon-close {
-                color: $errorMessageIconColor;
-            }
-        }
-
-    }
-}

package/style/scss/misc/_avatar.scss

@@ -1,34 +0,0 @@
-.p-avatar {
-    background-color: $avatarBg;
-    border-radius: $borderRadius;
-
-    &.p-avatar-lg {
-        width: 3rem;
-        height: 3rem;
-        font-size: 1.5rem;
-
-        .p-avatar-icon {
-            font-size: 1.5rem;
-        }
-    }
-
-    &.p-avatar-xl {
-        width: 4rem;
-        height: 4rem;
-        font-size: 2rem;
-
-        .p-avatar-icon {
-            font-size: 2rem;
-        }
-    }
-}
-
-.p-avatar-circle {
-    border-radius: 50%;
-  }
-
-.p-avatar-group {
-    .p-avatar {
-        border: 2px solid $panelContentBg;
-    }
-}

package/style/scss/misc/_badge.scss

@@ -1,77 +0,0 @@
-.p-badge {
-    background: $badgeBg;
-    color: $badgeTextColor;
-    font-size: $badgeFontSize;
-    font-weight: $badgeFontWeight;
-    min-width: $badgeMinWidth;
-    height: $badgeHeight;
-    line-height: $badgeHeight;
-
-    &.p-badge-secondary {
-        background-color: $secondaryButtonBg;
-        color: $secondaryButtonTextColor;
-    }
-
-    &.p-badge-success {
-        background-color: $successButtonBg;
-        color: $successButtonTextColor;
-    }
-
-    &.p-badge-info {
-        background-color: $infoButtonBg;
-        color: $infoButtonTextColor;
-    }
-
-    &.p-badge-warning {
-        background-color: $warningButtonBg;
-        color: $warningButtonTextColor;
-    }
-
-    &.p-badge-danger {
-        background-color: $dangerButtonBg;
-        color: $dangerButtonTextColor;
-    }
-
-    &.p-badge-lg {
-        font-size: 1.5 * $badgeFontSize;
-        min-width: 1.5 * $badgeMinWidth;
-        height: 1.5 * $badgeHeight;
-        line-height: 1.5 * $badgeHeight;
-    }
-
-    &.p-badge-xl {
-        font-size: 2 * $badgeFontSize;
-        min-width: 2 * $badgeMinWidth;
-        height: 2 * $badgeHeight;
-        line-height: 2 * $badgeHeight;
-    }
-}
-
-.p-tag {
-    background: $badgeBg;
-    color: $badgeTextColor;
-    font-size: $badgeFontSize;
-    font-weight: $badgeFontWeight;
-    padding: $tagPadding;
-    border-radius: $borderRadius;
-
-    &.p-tag-success {
-        background-color: $successButtonBg;
-        color: $successButtonTextColor;
-    }
-
-    &.p-tag-info {
-        background-color: $infoButtonBg;
-        color: $infoButtonTextColor;
-    }
-
-    &.p-tag-warning {
-        background-color: $warningButtonBg;
-        color: $warningButtonTextColor;
-    }
-
-    &.p-tag-danger {
-        background-color: $dangerButtonBg;
-        color: $dangerButtonTextColor;
-    }
-}

package/style/scss/misc/_chip.scss

@@ -1,39 +0,0 @@
-@use 'sass:math';
-
-.p-chip {
-    background-color: $chipBg;
-    color: $chipTextColor;
-    border-radius: $chipBorderRadius;
-    padding: 0 nth($inputPadding, 2);
-
-    .p-chip-text {
-        line-height: 1.5;
-        margin-top: math.div(nth($inputPadding, 1), 2);
-        margin-bottom: math.div(nth($inputPadding, 1), 2);
-    }
-
-    .p-chip-icon {
-        margin-right: $inlineSpacing;
-    }
-
-    img {
-        width: 1.5 + nth($inputPadding, 1);
-        height: 1.5 + nth($inputPadding, 1);
-        margin-left: -1 * nth($inputPadding, 2);
-        margin-right: $inlineSpacing;
-    }
-
-    .p-chip-remove-icon {
-        border-radius: $borderRadius;
-        transition: $actionIconTransition;
-        margin-left: $inlineSpacing;
-        
-        &:focus-visible {
-            @include focused();
-        }
-
-        &:focus {
-            outline: 0 none;
-        }
-    }
-}

package/style/scss/misc/_inplace.scss

@@ -1,17 +0,0 @@
-.p-inplace {
-    .p-inplace-display {
-        padding: $inplacePadding;
-        border-radius: $borderRadius;
-        transition: $formElementTransition;
-
-        &:not(.p-disabled):hover {
-            background: $inplaceHoverBg;
-            color: $inplaceTextHoverColor;
-        }
-
-        &:focus {
-            @include focused();
-        }
-    }
-}
-

package/style/scss/misc/_metergroup.scss

@@ -1,81 +0,0 @@
-.p-metergroup {
-    .p-metergroup-meter-container {
-        background: $progressBarBg;
-        border-radius: $borderRadius;
-    }
-
-    .p-metergroup-meter {
-        border: $progressBarBorder;
-        background: $progressBarValueBg;
-    }
-
-    .p-metergroup-label-list {
-        .p-metergroup-label-list-item {
-            line-height: $progressBarHeight;
-        }
-        
-        .p-metergroup-label-type {
-            background: $progressBarValueBg;
-            width: 0.5rem;
-            height: 0.5rem;
-            border-radius: 100%;
-            margin-right: $inlineSpacing;
-        }
-        
-        .p-metergroup-label {
-            margin-right: $inlineSpacing * 2;
-        }
-    
-        .p-metergroup-label-icon {
-            width: 1rem;
-            height: 1rem;
-            margin-right: $inlineSpacing;
-        }
-    }
-
-
-    &.p-metergroup-horizontal {
-        .p-metergroup-meter-container {
-            height: 0.5rem;
-        }
-
-        .p-metergroup-meter:first-of-type {
-            border-top-left-radius: $borderRadius;
-            border-bottom-left-radius: $borderRadius;
-        }
-
-        .p-metergroup-meter:last-of-type {
-            border-top-right-radius: $borderRadius;
-            border-bottom-right-radius: $borderRadius;
-        }
-
-        .p-metergroup-label-list-start {
-            margin-bottom: $inlineSpacing * 2;
-        }
-    
-        .p-metergroup-label-list-end {
-            margin-top: $inlineSpacing * 2;
-        }
-    }
-
-    &.p-metergroup-vertical {
-        .p-metergroup-meter-container {
-            width: 0.5rem;
-            height: 100%;
-        }
-
-        .p-metergroup-meter:first-of-type {
-            border-top-left-radius: $borderRadius;
-            border-top-right-radius: $borderRadius;
-        }
-    
-        .p-metergroup-meter:last-of-type {
-            border-bottom-left-radius: $borderRadius;
-            border-bottom-right-radius: $borderRadius;
-        }
-
-        .p-metergroup-label-list:not(.p-metergroup-label-list-start) {
-            margin-left: $inlineSpacing * 2;
-        }
-    }
-}

package/style/scss/misc/_progressbar.scss

@@ -1,17 +0,0 @@
-.p-progressbar {
-    border: $progressBarBorder;
-    height: $progressBarHeight;
-    background: $progressBarBg;
-    border-radius: $borderRadius;
-
-    .p-progressbar-value {
-        border: 0 none;
-        margin: 0;
-        background: $progressBarValueBg;
-    }
-
-    .p-progressbar-label {
-        color: $progressBarValueTextColor;
-        line-height: $progressBarHeight;
-    }
-}

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

@@ -1,40 +0,0 @@
-@use 'sass:math';
-
-.p-tag {
-    background: $badgeBg;
-    color: $badgeTextColor;
-    font-size: $badgeFontSize;
-    font-weight: $badgeFontWeight;
-    padding: $tagPadding;
-    border-radius: $borderRadius;
-
-    &.p-tag-success {
-        background-color: $successButtonBg;
-        color: $successButtonTextColor;
-    }
-
-    &.p-tag-info {
-        background-color: $infoButtonBg;
-        color: $infoButtonTextColor;
-    }
-
-    &.p-tag-warning {
-        background-color: $warningButtonBg;
-        color: $warningButtonTextColor;
-    }
-
-    &.p-tag-danger {
-        background-color: $dangerButtonBg;
-        color: $dangerButtonTextColor;
-    }
-
-    .p-tag-icon {
-        margin-right: math.div($inlineSpacing, 2);
-        font-size: $badgeFontSize;
-
-        &.p-icon {
-            width: $badgeFontSize;
-            height: $badgeFontSize;
-        }
-    }
-}

package/style/scss/misc/_terminal.scss

@@ -1,12 +0,0 @@
-.p-terminal {
-	background: $panelContentBg;
-	color: $panelContentTextColor;
-	border: $panelContentBorder;
-	padding: $panelContentPadding;
-
-	.p-terminal-input {
-		font-family: var(--font-family);
-		font-feature-settings: var(--font-feature-settings, normal);
-		font-size: $inputTextFontSize;
-	}
-}