@orangesix/react 2.3.1 → 2.4.0-beta.3

package/style/scss/_speeddial.scss

@@ -1,91 +0,0 @@
-@use "sass:math";
-
-.p-speeddial-button {
-	&.p-button.p-button-icon-only {
-		width: $speedDialButtonWidth;
-		height: $speedDialButtonHeight;
-
-		.p-button-icon {
-			font-size: $speedDialButtonIconFontSize;
-
-			&.p-icon {
-				width: $speedDialButtonIconFontSize;
-				height: $speedDialButtonIconFontSize;
-			}
-		}
-	}
-}
-
-.p-speeddial-list {
-	outline: 0 none;
-}
-
-.p-speeddial-action {
-	width: $speedDialActionWidth;
-	height: $speedDialActionHeight;
-	background: $speedDialActionBg;
-	color: $speedDialActionTextColor;
-
-	&:hover {
-		background: $speedDialActionHoverBg;
-		color: $speedDialActionTextHoverColor;
-	}
-}
-
-.p-speeddial-direction-up {
-	.p-speeddial-item {
-		margin: math.div($inlineSpacing, 2);
-
-		&:first-child {
-			margin-bottom: $inlineSpacing;
-		}
-	}
-}
-
-.p-speeddial-direction-down {
-	.p-speeddial-item {
-		margin: math.div($inlineSpacing, 2);
-
-		&:first-child {
-			margin-top: $inlineSpacing;
-		}
-	}
-}
-
-.p-speeddial-direction-left {
-	.p-speeddial-item {
-		margin: 0 math.div($inlineSpacing, 2);
-
-		&:first-child {
-			margin-right: $inlineSpacing;
-		}
-	}
-}
-
-.p-speeddial-direction-right {
-	.p-speeddial-item {
-		margin: 0 math.div($inlineSpacing, 2);
-
-		&:first-child {
-			margin-left: $inlineSpacing;
-		}
-	}
-}
-
-.p-speeddial-circle,
-.p-speeddial-semi-circle,
-.p-speeddial-quarter-circle {
-	.p-speeddial-item {
-		margin: 0;
-
-		&:first-child,
-		&:last-child {
-			margin: 0;
-		}
-	}
-}
-
-.p-speeddial-mask {
-	background-color: $maskBg;
-	border-radius: $borderRadius;
-}

package/style/scss/_splitbutton.scss

@@ -1,359 +0,0 @@
-.p-splitbutton {
-    border-radius: $borderRadius;
-
-    &.p-button-outlined {
-        > .p-button {
-            background-color: transparent;
-            color: $buttonBg;
-            border: $outlinedButtonBorder;
-
-            &:not(:disabled):hover {
-                background: rgba($buttonBg, $textButtonHoverBgOpacity);
-                color: $buttonBg;
-            }
-
-            &:not(:disabled):active {
-                background: rgba($buttonBg, $textButtonActiveBgOpacity);
-                color: $buttonBg;
-            }
-        }
-
-        &.p-button-plain {
-            > .p-button {
-                color: $plainButtonTextColor;
-                border-color: $plainButtonTextColor;
-
-                &:not(:disabled):hover {
-                    background: $plainButtonHoverBgColor;
-                    color: $plainButtonTextColor;
-                }
-        
-                &:not(:disabled):active {
-                    background: $plainButtonActiveBgColor;
-                    color: $plainButtonTextColor;
-                }
-            }
-        }
-    }
-
-    &.p-button-text {
-        > .p-button {
-            background-color: transparent;
-            color: $buttonBg;
-            border-color: transparent;
-
-            &:not(:disabled):hover {
-                background: rgba($buttonBg, $textButtonHoverBgOpacity);
-                color: $buttonBg;
-                border-color: transparent;
-            }
-
-            &:not(:disabled):active {
-                background: rgba($buttonBg, $textButtonActiveBgOpacity);
-                color: $buttonBg;
-                border-color: transparent;
-            }
-        }
-
-        &.p-button-plain {
-            > .p-button {
-                color: $plainButtonTextColor;
-
-                &:not(:disabled):hover {
-                    background: $plainButtonHoverBgColor;
-                    color: $plainButtonTextColor;
-                }
-        
-                &:not(:disabled):active {
-                    background: $plainButtonActiveBgColor;
-                    color: $plainButtonTextColor;
-                }
-            }
-        }
-    }
-
-    &.p-button-raised {
-        box-shadow: $raisedButtonShadow;
-    }
-
-    &.p-button-rounded {
-        border-radius: $roundedButtonBorderRadius;
-
-        > .p-button {
-            border-radius: $roundedButtonBorderRadius;
-        }
-    }
-
-    &.p-button-sm {
-        > .p-button {
-            @include scaledFontSize($fontSize, $scaleSM);
-            @include scaledPadding($buttonPadding, $scaleSM);
-
-            .p-button-icon {
-                @include scaledFontSize($primeIconFontSize, $scaleSM);
-            }
-        }
-    }
-
-    &.p-button-lg {
-        > .p-button {
-            @include scaledFontSize($fontSize, $scaleLG);
-            @include scaledPadding($buttonPadding, $scaleLG);
-
-            &.p-button-icon-only {
-                width: auto;
-            }
-            
-            .p-button-icon {
-                @include scaledFontSize($primeIconFontSize, $scaleLG);
-            }
-        }
-    }
-    
-    .p-splitbutton-menubutton,
-    .p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button,
-    .p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button {
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-    }
-}
-
-.p-splitbutton.p-button-secondary {    
-    &.p-button-outlined {
-        > .p-button {
-            background-color: transparent;
-            color: $secondaryButtonBg;
-            border: $outlinedButtonBorder;
-
-            &:not(:disabled):hover {
-                background: rgba($secondaryButtonBg, $textButtonHoverBgOpacity);
-                color: $secondaryButtonBg;
-            }
-
-            &:not(:disabled):active {
-                background: rgba($secondaryButtonBg, $textButtonActiveBgOpacity);
-                color: $secondaryButtonBg;
-            }
-        }
-    }
-
-    &.p-button-text {
-        > .p-button {
-            background-color: transparent;
-            color: $secondaryButtonBg;
-            border-color: transparent;
-
-            &:not(:disabled):hover {
-                background: rgba($secondaryButtonBg, $textButtonHoverBgOpacity);
-                border-color: transparent;
-                color: $secondaryButtonBg;
-            }
-
-            &:not(:disabled):active {
-                background: rgba($secondaryButtonBg, $textButtonActiveBgOpacity);
-                border-color: transparent;
-                color: $secondaryButtonBg;
-            }
-        }
-    }
-}
-
-.p-splitbutton.p-button-info {
-    &.p-button-outlined {
-        > .p-button {
-            background-color: transparent;
-            color: $infoButtonBg;
-            border: $outlinedButtonBorder;
-
-            &:not(:disabled):hover {
-                background: rgba($infoButtonBg, $textButtonHoverBgOpacity);
-                color: $infoButtonBg;
-            }
-
-            &:not(:disabled):active {
-                background: rgba($infoButtonBg, $textButtonActiveBgOpacity);
-                color: $infoButtonBg;
-            }
-        }
-    }
-
-    &.p-button-text {
-        > .p-button {
-            background-color: transparent;
-            color: $infoButtonBg;
-            border-color: transparent;
-
-            &:not(:disabled):hover {
-                background: rgba($infoButtonBg, $textButtonHoverBgOpacity);
-                border-color: transparent;
-                color: $infoButtonBg;
-            }
-
-            &:not(:disabled):active {
-                background: rgba($infoButtonBg, $textButtonActiveBgOpacity);
-                border-color: transparent;
-                color: $infoButtonBg;
-            }
-        }
-    }
-}
-
-.p-splitbutton.p-button-success {
-    &.p-button-outlined {
-        > .p-button {
-            background-color: transparent;
-            color: $successButtonBg;
-            border: $outlinedButtonBorder;
-
-            &:not(:disabled):hover {
-                background: rgba($successButtonBg, $textButtonHoverBgOpacity);
-                color: $successButtonBg;
-            }
-
-            &:not(:disabled):active {
-                background: rgba($successButtonBg, $textButtonActiveBgOpacity);
-                color: $successButtonBg;
-            }
-        }
-    }
-
-    &.p-button-text {
-        > .p-button {
-            background-color: transparent;
-            color: $successButtonBg;
-            border-color: transparent;
-
-            &:not(:disabled):hover {
-                background: rgba($successButtonBg, $textButtonHoverBgOpacity);
-                border-color: transparent;
-                color: $successButtonBg;
-            }
-
-            &:not(:disabled):active {
-                background: rgba($successButtonBg, $textButtonActiveBgOpacity);
-                border-color: transparent;
-                color: $successButtonBg;
-            }
-        }
-    }
-}
-
-.p-splitbutton.p-button-warning {
-    &.p-button-outlined {
-        > .p-button {
-            background-color: transparent;
-            color: $warningButtonBg;
-            border: $outlinedButtonBorder;
-
-            &:not(:disabled):hover {
-                background: rgba($warningButtonBg, $textButtonHoverBgOpacity);
-                color: $warningButtonBg;
-            }
-
-            &:not(:disabled):active {
-                background: rgba($warningButtonBg, $textButtonActiveBgOpacity);
-                color: $warningButtonBg;
-            }
-        }
-    }
-
-    &.p-button-text {
-        > .p-button {
-            background-color: transparent;
-            color: $warningButtonBg;
-            border-color: transparent;
-
-            &:not(:disabled):hover {
-                background: rgba($warningButtonBg, $textButtonHoverBgOpacity);
-                border-color: transparent;
-                color: $warningButtonBg;
-            }
-
-            &:not(:disabled):active {
-                background: rgba($warningButtonBg, $textButtonActiveBgOpacity);
-                border-color: transparent;
-                color: $warningButtonBg;
-            }
-        }
-    }
-}
-
-.p-splitbutton.p-button-help {
-    &.p-button-outlined {
-        > .p-button {
-            background-color: transparent;
-            color: $helpButtonBg;
-            border: $outlinedButtonBorder;
-
-            &:not(:disabled):hover {
-                background: rgba($helpButtonBg, $textButtonHoverBgOpacity);
-                color: $helpButtonBg;
-            }
-
-            &:not(:disabled):active {
-                background: rgba($helpButtonBg, $textButtonActiveBgOpacity);
-                color: $helpButtonBg;
-            }
-        }
-    }
-
-    &.p-button-text {
-        > .p-button {
-            background-color: transparent;
-            color: $helpButtonBg;
-            border-color: transparent;
-
-            &:not(:disabled):hover {
-                background: rgba($helpButtonBg, $textButtonHoverBgOpacity);
-                border-color: transparent;
-                color: $helpButtonBg;
-            }
-
-            &:not(:disabled):active {
-                background: rgba($helpButtonBg, $textButtonActiveBgOpacity);
-                border-color: transparent;
-                color: $helpButtonBg;
-            }
-        }
-    }
-}
-
-.p-splitbutton.p-button-danger {
-    &.p-button-outlined {
-        > .p-button {
-            background-color: transparent;
-            color: $dangerButtonBg;
-            border: $outlinedButtonBorder;
-
-            &:not(:disabled):hover {
-                background: rgba($dangerButtonBg, $textButtonHoverBgOpacity);
-                color: $dangerButtonBg;
-            }
-
-            &:not(:disabled):active {
-                background: rgba($dangerButtonBg, $textButtonActiveBgOpacity);
-                color: $dangerButtonBg;
-            }
-        }
-    }
-
-    &.p-button-text {
-        > .p-button {
-            background-color: transparent;
-            color: $dangerButtonBg;
-            border-color: transparent;
-
-            &:not(:disabled):hover {
-                background: rgba($dangerButtonBg, $textButtonHoverBgOpacity);
-                border-color: transparent;
-                color: $dangerButtonBg;
-            }
-
-            &:not(:disabled):active {
-                background: rgba($dangerButtonBg, $textButtonActiveBgOpacity);
-                border-color: transparent;
-                color: $dangerButtonBg;
-            }
-        }
-    }
-}

package/style/scss/_splitter.scss

@@ -1,23 +0,0 @@
-.p-splitter {
-	border: $panelContentBorder;
-	background: $panelContentBg;
-	border-radius: $borderRadius;
-	color: $panelContentTextColor;
-
-	.p-splitter-gutter {
-		transition: $actionIconTransition;
-		background: $splitterGutterBg;
-
-		.p-splitter-gutter-handle {
-			background: $splitterGutterHandleBg;
-
-			&:focus-visible {
-				@include focused();
-			}
-		}
-	}
-
-	.p-splitter-gutter-resizing {
-		background: $splitterGutterHandleBg;
-	}
-}

package/style/scss/_stepper.scss

@@ -1,136 +0,0 @@
-@use "sass:math";
-
-//theme
-.p-stepper {
-  .p-stepper-nav {
-    display: flex;
-    justify-content: space-between;
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-  }
-
-  .p-stepper-header {
-    padding: $inlineSpacing;
-
-    .p-stepper-action {
-      transition: $listItemTransition;
-      border-radius: $borderRadius;
-      background: $stepsItemBg;
-      outline-color: transparent;
-
-      .p-stepper-number {
-        color: $stepsItemNumberColor;
-        border: $stepsItemBorder;
-        border-width: 2px;
-        background: $stepsItemBg;
-        min-width: $stepsItemNumberWidth;
-        height: $stepsItemNumberHeight;
-        line-height: $stepsItemNumberHeight;
-        font-size: $stepsItemNumberFontSize;
-        border-radius: $stepsItemNumberBorderRadius;
-        transition: $actionIconTransition;
-      }
-
-      .p-stepper-title {
-        margin-left: $inlineSpacing;
-        color: $stepsItemTextColor;
-        font-weight: $stepsItemActiveFontWeight;
-        transition: $actionIconTransition;
-      }
-
-      &:not(.p-disabled):focus-visible {
-        @include focused();
-      }
-    }
-
-    &.p-highlight {
-      .p-stepper-number {
-        background: $highlightBg;
-        color: $highlightTextColor;
-      }
-
-      .p-stepper-title {
-        color: $textColor;
-      }
-    }
-
-    &:not(.p-disabled):focus-visible {
-      @include focused();
-    }
-
-    &:has(~ .p-highlight) {
-      @if variable-exists(primaryColor) {
-        .p-stepper-separator {
-          background-color: $primaryColor;
-        }
-      }
-    }
-  }
-
-  .p-stepper-panels {
-    background: $tabviewContentBg;
-    padding: $tabviewContentPadding;
-    color: $tabviewContentTextColor;
-  }
-
-  .p-stepper-separator {
-    background-color: $timelineEventColor;
-    width: 100%;
-    height: 2px;
-    margin-inline-start: calc($inlineSpacing * 2);
-    transition: $listItemTransition;
-  }
-
-  &.p-stepper-vertical {
-    display: flex;
-    flex-direction: column;
-
-    .p-stepper-toggleable-content {
-      display: flex;
-      flex: 1 1 auto;
-      background: $tabviewContentBg;
-      color: $tabviewContentTextColor;
-    }
-
-    .p-stepper-panel {
-      display: flex;
-      flex-direction: column;
-      flex: initial;
-
-      &.p-stepper-panel-active {
-        flex: 1 1 auto;
-      }
-
-      .p-stepper-header {
-        flex: initial;
-      }
-
-      .p-stepper-content {
-        width: 100%;
-        padding-left: calc($inlineSpacing * 2);
-      }
-
-      .p-stepper-separator {
-        flex: 0 0 auto;
-        width: 2px;
-        height: auto;
-        margin-inline-start: calc($inlineSpacing * 7 / 2 + 2px);
-      }
-
-      &:has(~ .p-stepper-panel-active) {
-        @if variable-exists(primaryColor) {
-          .p-stepper-separator {
-            background-color: $primaryColor;
-          }
-        }
-      }
-
-      &:last-of-type {
-        .p-stepper-content {
-          padding-left: calc($inlineSpacing * 6);
-        }
-      }
-    }
-  }
-}

package/style/scss/_steps.scss

@@ -1,57 +0,0 @@
-@use 'sass:math';
-
-.p-steps {
-
-    .p-steps-item {
-        .p-menuitem-link {
-            background: transparent;
-            transition: $listItemTransition;
-            border-radius: $borderRadius;
-            background: $stepsItemBg;
-
-            .p-steps-number {
-                color: $stepsItemNumberColor;
-                border: $stepsItemBorder;
-                background: $stepsItemBg;
-                min-width: $stepsItemNumberWidth;
-                height: $stepsItemNumberHeight;
-                line-height: $stepsItemNumberHeight;
-                font-size: $stepsItemNumberFontSize;
-                z-index: 1;
-                border-radius: $stepsItemNumberBorderRadius;
-            }
-
-            .p-steps-title {
-                margin-top: $inlineSpacing;
-                color: $stepsItemTextColor;
-            }
-
-            &:not(.p-disabled):focus-visible {
-                @include focused();
-            }
-        }
-
-        &.p-highlight {
-            .p-steps-number {
-                background: $highlightBg;
-                color: $highlightTextColor;
-            }
-
-            .p-steps-title {
-                font-weight: $stepsItemActiveFontWeight;
-                color: $textColor;
-            }
-        }
-
-        &:before {
-            content:' ';
-            border-top: $divider;
-            width: 100%;
-            top: 50%;
-            left: 0;
-            display: block;
-            position: absolute;
-            margin-top: math.div(-1 * $stepsItemNumberHeight, 2);
-        }
-    }
-}

package/style/scss/_tabmenu.scss

@@ -1,50 +0,0 @@
-.p-tabmenu {
-    .p-tabmenu-nav {
-        background: $tabviewNavBg;
-        border: $tabviewNavBorder;
-        border-width: $tabviewNavBorderWidth;
-
-        .p-tabmenuitem {
-            margin-right: $tabviewHeaderSpacing;
-
-            .p-menuitem-link {
-                border: $tabviewHeaderBorder;
-                border-width: $tabviewHeaderBorderWidth;
-                border-color: $tabviewHeaderBorderColor;
-                background: $tabviewHeaderBg;
-                color: $tabviewHeaderTextColor;
-                padding: $tabviewHeaderPadding;
-                font-weight: $tabviewHeaderFontWeight;
-                border-top-right-radius: $borderRadius;
-                border-top-left-radius: $borderRadius;
-                transition: $listItemTransition;
-                margin: $tabviewHeaderMargin;
-                height: calc(100% + #{-1 * nth($tabviewHeaderMargin, 3)});
-
-                .p-menuitem-icon {
-                    margin-right: $inlineSpacing;
-                }
-
-                &:not(.p-disabled):focus-visible {
-                    @include focused-inset();
-                }
-            }
-
-            &:not(.p-highlight):not(.p-disabled):hover {
-                .p-menuitem-link {
-                    background: $tabviewHeaderHoverBg;
-                    border-color: $tabviewHeaderHoverBorderColor;
-                    color: $tabviewHeaderTextHoverColor;
-                }
-            }
-
-            &.p-highlight {
-                .p-menuitem-link {
-                    background: $tabviewHeaderActiveBg;
-                    border-color: $tabviewHeaderActiveBorderColor;
-                    color: $tabviewHeaderTextActiveColor;
-                }
-            }
-        }
-    }
-}