From 0e2f6780eaa7a27b647d94189e28428d77bdcb8d Mon Sep 17 00:00:00 2001 From: gucal Date: Thu, 28 Mar 2024 16:33:00 +0300 Subject: [PATCH] Add new component - stepper --- theme-base/_components.scss | 1 + theme-base/components/panel/_stepper.scss | 136 ++++++++++++++++++ themes/lara/lara-dark/_extensions.scss | 20 +++ themes/lara/lara-light/_extensions.scss | 11 ++ themes/material/extensions/_stepper.scss | 35 +++++ .../extensions/_vendor_extensions.scss | 1 + 6 files changed, 204 insertions(+) create mode 100644 theme-base/components/panel/_stepper.scss create mode 100644 themes/material/extensions/_stepper.scss diff --git a/theme-base/_components.scss b/theme-base/_components.scss index 00387b9..9d74981 100644 --- a/theme-base/_components.scss +++ b/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'; diff --git a/theme-base/components/panel/_stepper.scss b/theme-base/components/panel/_stepper.scss new file mode 100644 index 0000000..83b5036 --- /dev/null +++ b/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); + } + } + } + } +} diff --git a/themes/lara/lara-dark/_extensions.scss b/themes/lara/lara-dark/_extensions.scss index 98fcdad..ce388da 100644 --- a/themes/lara/lara-dark/_extensions.scss +++ b/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; + } + } + } + } + } } diff --git a/themes/lara/lara-light/_extensions.scss b/themes/lara/lara-light/_extensions.scss index 3a5fbc8..d5b24f6 100644 --- a/themes/lara/lara-light/_extensions.scss +++ b/themes/lara/lara-light/_extensions.scss @@ -135,4 +135,15 @@ } } } + + .p-stepper { + .p-stepper-header { + &.p-highlight { + .p-stepper-number { + background: $primaryColor; + color: $primaryTextColor; + } + } + } + } } diff --git a/themes/material/extensions/_stepper.scss b/themes/material/extensions/_stepper.scss new file mode 100644 index 0000000..f811780 --- /dev/null +++ b/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); + } + } + } +} \ No newline at end of file diff --git a/themes/material/extensions/_vendor_extensions.scss b/themes/material/extensions/_vendor_extensions.scss index 64a8917..ec0f7d5 100644 --- a/themes/material/extensions/_vendor_extensions.scss +++ b/themes/material/extensions/_vendor_extensions.scss @@ -39,6 +39,7 @@ @import './_slidemenu'; @import './_slider'; @import './_splitbutton'; + @import './_stepper'; @import './_steps'; @import './_tabview'; @import './_tieredmenu';