Merge branch 'main' of https://github.com/primefaces/primereact-sass-…

…theme

theme-base/_components.scss

@@ -58,6 +58,7 @@
     @import './components/panel/_divider';
     @import './components/panel/_panel';
     @import './components/panel/_splitter';
+    @import './components/panel/_stepper';
     @import './components/panel/_scrollpanel';
     @import './components/panel/_tabview';
     @import './components/panel/_toolbar';

theme-base/components/panel/_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);
+        }
+      }
+    }
+  }
+}

themes/lara/lara-dark/_extensions.scss

@@ -153,4 +153,24 @@
             }
         }
     }
+
+    .p-stepper {
+        .p-stepper-header {
+            .p-stepper-action {
+                .p-stepper-number {
+                    border-style: solid;
+                    border-color: $shade600;
+                }
+            }
+
+            &.p-highlight {
+                .p-stepper-action {
+                    .p-stepper-number {
+                        background: $primaryColor;
+                        color: $primaryTextColor;
+                    }
+                }
+            }
+        }
+    }
 }

themes/lara/lara-light/_extensions.scss

@@ -135,4 +135,15 @@
             }
         }
     }
+
+    .p-stepper {
+        .p-stepper-header {
+            &.p-highlight {
+                .p-stepper-number {
+                    background: $primaryColor;
+                    color: $primaryTextColor;
+                }
+            }
+        }
+    }
 }

themes/material/extensions/_stepper.scss

@@ -0,0 +1,35 @@
+.p-stepper {
+    .p-stepper-header {
+        .p-stepper-action {
+            .p-stepper-number {
+                background-color: #9e9d9e;
+                color: #ffffff;
+                font-size: 0.857rem;
+                min-width: 1.714rem;
+                height: 1.714rem;
+            }
+        }
+
+        &.p-highlight {
+            .p-stepper-action {
+                .p-stepper-number {
+                    background-color: $primaryColor;
+                    color: $primaryTextColor;
+                }
+
+                .p-stepper-title {
+                    font-weight: 600;
+                    color: $textColor;
+                }
+            }
+        }
+    }
+
+    &.p-stepper-vertical {
+        .p-stepper-panel {
+            .p-stepper-separator {
+                margin-inline-start: calc($inlineSpacing * 7 / 2);
+            }
+        }
+    }
+}

themes/material/extensions/_vendor_extensions.scss

@@ -39,6 +39,7 @@
     @import './_slidemenu';
     @import './_slider';
     @import './_splitbutton';
+    @import './_stepper';
     @import './_steps';
     @import './_tabview';
     @import './_tieredmenu';