@orangesix/react 1.3.8 → 2.0.3

package/style/scss/_speeddial.scss

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

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

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

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

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

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