@oslokommune/punkt-css 11.14.0 → 11.14.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +147 -0
- package/dist/css/components/linkcard.css +18 -1
- package/dist/css/components/linkcard.min.css +1 -1
- package/dist/css/components/stepper.css +158 -0
- package/dist/css/components/stepper.min.css +1 -0
- package/dist/css/pkt-components.css +827 -651
- package/dist/css/pkt-components.min.css +1 -1
- package/dist/css/pkt.css +695 -518
- package/dist/css/pkt.min.css +1 -1
- package/dist/scss/components/_index.scss +7 -6
- package/dist/scss/components/_linkcard.scss +26 -1
- package/dist/scss/components/_stepper.scss +212 -0
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,153 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
|
|
|
5
5
|
|
|
6
6
|
---
|
|
7
7
|
|
|
8
|
+
## [11.15.0](https://github.com/oslokommune/punkt/compare/11.14.1...11.15.0) (2024-07-12)
|
|
9
|
+
|
|
10
|
+
### ⚠ BREAKING CHANGES
|
|
11
|
+
Ingen
|
|
12
|
+
|
|
13
|
+
### Features
|
|
14
|
+
* update deploys 🚀 (#1788).
|
|
15
|
+
* update deploys to include "Feature*".
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
### Bug Fixes
|
|
19
|
+
* add styling for steps w/ skeleton. - Wrapper for blå bakgrunn + spacing for tittel og content på aktivt steg
|
|
20
|
+
- Legge på beskrivelser i props på Steps.
|
|
21
|
+
- Sjekk om Steppern er UU godkjent med ARC tool / WCAG lista
|
|
22
|
+
- Oppdater specs
|
|
23
|
+
- Legg til React tester
|
|
24
|
+
|
|
25
|
+
* feat(react,css): change from Steps --> Stepper
|
|
26
|
+
|
|
27
|
+
+ remote unused import
|
|
28
|
+
+ Show example 'hideNonActiveSteps' = false
|
|
29
|
+
|
|
30
|
+
* Feature stepper html (#1799)
|
|
31
|
+
|
|
32
|
+
* Feature Steps 👣 (react, tests, specs, css) (#1776)
|
|
33
|
+
|
|
34
|
+
* (react,css): add styling for steps w/ skeleton
|
|
35
|
+
|
|
36
|
+
* (react,css): add horizontal styling + cleanup
|
|
37
|
+
|
|
38
|
+
* (react,css): Adjustments to state steps handling
|
|
39
|
+
|
|
40
|
+
* feat(react,css): Tuning, Specs and tests
|
|
41
|
+
|
|
42
|
+
Done:
|
|
43
|
+
- Wrapper for blå bakgrunn + spacing for tittel og content på aktivt steg
|
|
44
|
+
- Legge på beskrivelser i props på Steps.
|
|
45
|
+
- Sjekk om Steppern er UU godkjent med ARC tool / WCAG lista
|
|
46
|
+
- Oppdater specs
|
|
47
|
+
- Legg til React tester
|
|
48
|
+
|
|
49
|
+
* feat(react,css): change from Steps --> Stepper
|
|
50
|
+
|
|
51
|
+
+ remote unused import
|
|
52
|
+
+ Show example 'hideNonActiveSteps' = false
|
|
53
|
+
|
|
54
|
+
* Feature Steps 👣 (react, tests, specs, css) (#1776)
|
|
55
|
+
|
|
56
|
+
* (react,css): add styling for steps w/ skeleton
|
|
57
|
+
|
|
58
|
+
* (react,css): add horizontal styling + cleanup
|
|
59
|
+
|
|
60
|
+
* (react,css): Adjustments to state steps handling
|
|
61
|
+
|
|
62
|
+
* feat(react,css): Tuning, Specs and tests
|
|
63
|
+
|
|
64
|
+
Done:
|
|
65
|
+
- Wrapper for blå bakgrunn + spacing for tittel og content på aktivt steg
|
|
66
|
+
- Legge på beskrivelser i props på Steps.
|
|
67
|
+
- Sjekk om Steppern er UU godkjent med ARC tool / WCAG lista
|
|
68
|
+
- Oppdater specs
|
|
69
|
+
- Legg til React tester
|
|
70
|
+
|
|
71
|
+
* feat(react,css): change from Steps --> Stepper
|
|
72
|
+
|
|
73
|
+
+ remote unused import
|
|
74
|
+
+ Show example 'hideNonActiveSteps' = false
|
|
75
|
+
|
|
76
|
+
* feat(html): Add html dev usage example
|
|
77
|
+
|
|
78
|
+
---------
|
|
79
|
+
|
|
80
|
+
Co-authored-by: Jan Schjetne <jan.schjetne@origo.oslo.kommune.no>
|
|
81
|
+
|
|
82
|
+
* Feature stepper (vue) (#1819)
|
|
83
|
+
|
|
84
|
+
* feat(vue): ✨ Stepper in vue
|
|
85
|
+
|
|
86
|
+
- Dev setup
|
|
87
|
+
- Will be shown properly with props and all
|
|
88
|
+
- Remove unneccessary props 'hideContent' on Step. We set the css class through the parent Stepper instead.
|
|
89
|
+
- Align the way the React STepper component and the Vue Stepper component works
|
|
90
|
+
|
|
91
|
+
* Fiks manglende progressbar i components/_index.scss
|
|
92
|
+
|
|
93
|
+
* progresbar => progressbar
|
|
94
|
+
|
|
95
|
+
---------
|
|
96
|
+
|
|
97
|
+
Co-authored-by: Jan Schjetne <jan.schjetne@origo.oslo.kommune.no>
|
|
98
|
+
|
|
99
|
+
* Feature stepper docs (#1822)
|
|
100
|
+
|
|
101
|
+
* feat(docs): add code documentation
|
|
102
|
+
|
|
103
|
+
- Set up page for Stepper
|
|
104
|
+
- Add code documentation
|
|
105
|
+
- Add code documentation examples
|
|
106
|
+
- Adjust Vue and React Stepper component to be more similar for consistency when hiding nonActiveStepContent
|
|
107
|
+
- Tested to see if we wanted to switch to using context, but for v1 it is better to keep it simple.
|
|
108
|
+
|
|
109
|
+
* feat(docs): oppdater universell utforming dok
|
|
110
|
+
|
|
111
|
+
* feat(docs): add feedback changes 📝
|
|
112
|
+
|
|
113
|
+
- use shorthand for boolean prop in exam
|
|
114
|
+
- remove classname as prop
|
|
115
|
+
|
|
116
|
+
* feat(docs): adjust code example + add description 📝
|
|
117
|
+
|
|
118
|
+
* Fiks feil visning av tekstinnhold i eksempel
|
|
119
|
+
|
|
120
|
+
---------
|
|
121
|
+
|
|
122
|
+
Co-authored-by: Jan Schjetne <jan.schjetne@origo.oslo.kommune.no>
|
|
123
|
+
|
|
124
|
+
* feat(css): fix background color
|
|
125
|
+
|
|
126
|
+
---------
|
|
127
|
+
|
|
128
|
+
Co-authored-by: Jan Schjetne <jan.schjetne@origo.oslo.kommune.no>
|
|
129
|
+
|
|
130
|
+
|
|
131
|
+
### Chores
|
|
132
|
+
Ingen
|
|
133
|
+
|
|
134
|
+
---
|
|
135
|
+
|
|
136
|
+
|
|
137
|
+
## [11.14.1](https://github.com/oslokommune/punkt/compare/11.14.0...11.14.1) (2024-06-26)
|
|
138
|
+
|
|
139
|
+
### ⚠ BREAKING CHANGES
|
|
140
|
+
Ingen
|
|
141
|
+
|
|
142
|
+
### Features
|
|
143
|
+
Ingen
|
|
144
|
+
|
|
145
|
+
### Bug Fixes
|
|
146
|
+
Ingen
|
|
147
|
+
|
|
148
|
+
### Chores
|
|
149
|
+
* Legg til grå variant av LinkCard, pluss hovereffekter (#1774).
|
|
150
|
+
|
|
151
|
+
|
|
152
|
+
---
|
|
153
|
+
|
|
154
|
+
|
|
8
155
|
## [11.14.0](https://github.com/oslokommune/punkt/compare/11.13.14...11.14.0) (2024-06-26)
|
|
9
156
|
|
|
10
157
|
### ⚠ BREAKING CHANGES
|
|
@@ -8,6 +8,7 @@
|
|
|
8
8
|
text-decoration: none;
|
|
9
9
|
width: 100%;
|
|
10
10
|
height: 100%;
|
|
11
|
+
transition: background-color 0.2s linear;
|
|
11
12
|
}
|
|
12
13
|
@media screen and (min-width: 80rem) {
|
|
13
14
|
.pkt-linkcard {
|
|
@@ -80,13 +81,29 @@
|
|
|
80
81
|
background-color: var(--pkt-color-surface-subtle-pale-blue);
|
|
81
82
|
color: var(--pkt-color-text-body-dark) !important;
|
|
82
83
|
}
|
|
84
|
+
.pkt-linkcard--blue:hover {
|
|
85
|
+
background-color: var(--pkt-color-surface-default-light-blue);
|
|
86
|
+
}
|
|
83
87
|
.pkt-linkcard--blue:hover, .pkt-linkcard--blue:focus, .pkt-linkcard--blue:focus-visible, .pkt-linkcard--blue:active {
|
|
84
88
|
color: var(--pkt-color-brand-warm-blue-1000) !important;
|
|
85
89
|
}
|
|
90
|
+
.pkt-linkcard--grey {
|
|
91
|
+
background-color: var(--pkt-color-surface-default-gray);
|
|
92
|
+
color: var(--pkt-color-text-body-dark) !important;
|
|
93
|
+
}
|
|
94
|
+
.pkt-linkcard--grey:hover {
|
|
95
|
+
background-color: var(--pkt-color-surface-strong-gray);
|
|
96
|
+
}
|
|
97
|
+
.pkt-linkcard--grey:hover, .pkt-linkcard--grey:focus, .pkt-linkcard--grey:focus-visible, .pkt-linkcard--grey:active {
|
|
98
|
+
color: var(--pkt-color-brand-warm-blue-1000) !important;
|
|
99
|
+
}
|
|
86
100
|
.pkt-linkcard--green {
|
|
87
|
-
background-color: var(--pkt-color-surface-
|
|
101
|
+
background-color: var(--pkt-color-surface-default-faded-green);
|
|
88
102
|
color: var(--pkt-color-text-body-dark) !important;
|
|
89
103
|
}
|
|
104
|
+
.pkt-linkcard--green:hover {
|
|
105
|
+
background-color: var(--pkt-color-surface-strong-light-green);
|
|
106
|
+
}
|
|
90
107
|
.pkt-linkcard--green:hover, .pkt-linkcard--green:focus, .pkt-linkcard--green:focus-visible, .pkt-linkcard--green:active {
|
|
91
108
|
color: var(--pkt-color-brand-warm-blue-1000) !important;
|
|
92
109
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.pkt-linkcard{display:flex;align-items:flex-start;padding:1rem;text-decoration:none;width:100%;height:100
|
|
1
|
+
.pkt-linkcard{display:flex;align-items:flex-start;padding:1rem;text-decoration:none;width:100%;height:100%;transition:background-color .2s linear}@media screen and (min-width: 80rem){.pkt-linkcard{padding:1.5rem}}.pkt-linkcard:hover{text-decoration:none}.pkt-linkcard:hover .pkt-linkcard__title{text-decoration:underline}.pkt-linkcard:hover .pkt-link--external::after{filter:brightness(0) saturate(100%) invert(16%) sepia(99%) saturate(2420%) hue-rotate(222deg) brightness(93%) contrast(90%)}.pkt-linkcard__title{font-size:1.25rem;font-weight:500;letter-spacing:-0.2px;line-height:2rem;margin-bottom:.5rem}.pkt-linkcard__title>p{margin:0}@media screen and (min-width: 35.938rem){.pkt-linkcard__title{font-size:1.5rem;font-weight:500;letter-spacing:-0.2px;line-height:2.25rem}}.pkt-linkcard__title.pkt-link--external{display:inline-flex}.pkt-linkcard__title.pkt-link--external::after{height:2.25rem;width:1.5rem;background-size:1.5rem 1.5rem;background-position:center;margin-left:.5rem;flex:1 0 auto;align-self:flex-start}.pkt-linkcard.pkt-link .pkt-icon.pkt-link__icon,.pkt-linkcard.pkt-link pkt-icon.pkt-link__icon{margin-top:.188rem}@media screen and (min-width: 35.938rem){.pkt-linkcard.pkt-link .pkt-icon.pkt-link__icon,.pkt-linkcard.pkt-link pkt-icon.pkt-link__icon{margin-top:.375rem}}.pkt-linkcard__text p:first-of-type{margin-top:0}.pkt-linkcard__text p:last-of-type{margin-bottom:0}.pkt-linkcard--beige{background-color:var(--pkt-color-surface-default-light-beige);color:var(--pkt-color-text-body-dark) !important}.pkt-linkcard--beige:hover,.pkt-linkcard--beige:focus,.pkt-linkcard--beige:focus-visible,.pkt-linkcard--beige:active{color:var(--pkt-color-brand-warm-blue-1000) !important}.pkt-linkcard--blue{background-color:var(--pkt-color-surface-subtle-pale-blue);color:var(--pkt-color-text-body-dark) !important}.pkt-linkcard--blue:hover{background-color:var(--pkt-color-surface-default-light-blue)}.pkt-linkcard--blue:hover,.pkt-linkcard--blue:focus,.pkt-linkcard--blue:focus-visible,.pkt-linkcard--blue:active{color:var(--pkt-color-brand-warm-blue-1000) !important}.pkt-linkcard--grey{background-color:var(--pkt-color-surface-default-gray);color:var(--pkt-color-text-body-dark) !important}.pkt-linkcard--grey:hover{background-color:var(--pkt-color-surface-strong-gray)}.pkt-linkcard--grey:hover,.pkt-linkcard--grey:focus,.pkt-linkcard--grey:focus-visible,.pkt-linkcard--grey:active{color:var(--pkt-color-brand-warm-blue-1000) !important}.pkt-linkcard--green{background-color:var(--pkt-color-surface-default-faded-green);color:var(--pkt-color-text-body-dark) !important}.pkt-linkcard--green:hover{background-color:var(--pkt-color-surface-strong-light-green)}.pkt-linkcard--green:hover,.pkt-linkcard--green:focus,.pkt-linkcard--green:focus-visible,.pkt-linkcard--green:active{color:var(--pkt-color-brand-warm-blue-1000) !important}.pkt-linkcard--grey-outline{border:4px solid var(--pkt-color-border-subtle)}.pkt-linkcard--beige-outline{border:4px solid var(--pkt-color-border-light-beige)}[data-mode=dark] .pkt-linkcard .pkt-link--external::after{filter:brightness(0) saturate(100%) invert(99%) sepia(0%) saturate(2190%) hue-rotate(285deg) brightness(109%) contrast(100%)}[data-mode=dark] .pkt-linkcard:hover .pkt-link--external::after{filter:brightness(0) saturate(100%) invert(93%) sepia(91%) saturate(6664%) hue-rotate(169deg) brightness(103%) contrast(107%)}[data-mode=dark] .pkt-linkcard--beige .pkt-link--external::after,.pkt-linkcard--blue .pkt-link--external::after{filter:brightness(0) saturate(100%) invert(14%) sepia(64%) saturate(913%) hue-rotate(210deg) brightness(91%) contrast(95%) !important}[data-mode=dark] .pkt-linkcard--beige .pkt-link--external:hover::after,.pkt-linkcard--blue .pkt-link--external:hover::after{filter:brightness(0) saturate(100%) invert(14%) sepia(64%) saturate(913%) hue-rotate(210deg) brightness(91%) contrast(95%) !important}
|
|
@@ -0,0 +1,158 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Stepper component
|
|
3
|
+
*/
|
|
4
|
+
.pkt-stepper {
|
|
5
|
+
--pkt-steps-indicator-width: 24px;
|
|
6
|
+
--pkt-steps-indicator-height: 24px;
|
|
7
|
+
--pkt-steps-indicator-color: var(--pkt-color-brand-dark-blue-1000);
|
|
8
|
+
--pkt-steps-border-width: 2.5px;
|
|
9
|
+
--pkt-steps-line-length: 1.5rem;
|
|
10
|
+
color: var(--pkt-color-brand-dark-blue-1000);
|
|
11
|
+
font-size: 1.125rem;
|
|
12
|
+
font-weight: 500;
|
|
13
|
+
letter-spacing: -0.2px;
|
|
14
|
+
list-style: none;
|
|
15
|
+
margin: 0;
|
|
16
|
+
padding: 0;
|
|
17
|
+
}
|
|
18
|
+
.pkt-stepper .pkt-step {
|
|
19
|
+
display: grid;
|
|
20
|
+
}
|
|
21
|
+
.pkt-stepper .pkt-step__wrapper {
|
|
22
|
+
grid-column: title/content;
|
|
23
|
+
grid-row: title/content;
|
|
24
|
+
}
|
|
25
|
+
.pkt-stepper .pkt-step__title {
|
|
26
|
+
font-weight: 500;
|
|
27
|
+
width: max-content;
|
|
28
|
+
width: 100%;
|
|
29
|
+
}
|
|
30
|
+
.pkt-stepper .pkt-step__content {
|
|
31
|
+
font-weight: 300;
|
|
32
|
+
padding-bottom: 1.5rem;
|
|
33
|
+
width: 100%;
|
|
34
|
+
}
|
|
35
|
+
.pkt-stepper .pkt-step__indicator {
|
|
36
|
+
z-index: 2;
|
|
37
|
+
grid-area: indicator;
|
|
38
|
+
}
|
|
39
|
+
.pkt-stepper .pkt-step__line {
|
|
40
|
+
background-color: var(--pkt-color-brand-dark-blue-1000);
|
|
41
|
+
}
|
|
42
|
+
.pkt-stepper .pkt-step__line--1 {
|
|
43
|
+
grid-area: indicator;
|
|
44
|
+
}
|
|
45
|
+
.pkt-stepper .pkt-step__line--2 {
|
|
46
|
+
grid-area: indicator;
|
|
47
|
+
}
|
|
48
|
+
.pkt-stepper .pkt-step__line--3 {
|
|
49
|
+
grid-area: line;
|
|
50
|
+
height: fit-content;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.pkt-stepper--vertical {
|
|
54
|
+
display: grid;
|
|
55
|
+
grid-template-columns: 1fr;
|
|
56
|
+
}
|
|
57
|
+
.pkt-stepper--vertical .pkt-step {
|
|
58
|
+
grid-template-areas: "indicator title" "line content";
|
|
59
|
+
grid-template-columns: var(--pkt-steps-indicator-width) auto;
|
|
60
|
+
grid-template-rows: var(--pkt-steps-indicator-height) minmax(min-content, max-content);
|
|
61
|
+
grid-gap: 0 1rem;
|
|
62
|
+
justify-items: flex-start;
|
|
63
|
+
}
|
|
64
|
+
.pkt-stepper--vertical .pkt-step--current .pkt-step__title,
|
|
65
|
+
.pkt-stepper--vertical .pkt-step--current .pkt-step__content {
|
|
66
|
+
padding: 1rem 1.5rem;
|
|
67
|
+
background-color: var(--pkt-color-surface-subtle-pale-blue);
|
|
68
|
+
}
|
|
69
|
+
.pkt-stepper--vertical .pkt-step--current .pkt-step__wrapper {
|
|
70
|
+
margin-bottom: 1.5rem;
|
|
71
|
+
}
|
|
72
|
+
.pkt-stepper--vertical .pkt-step__indicator > svg {
|
|
73
|
+
vertical-align: baseline;
|
|
74
|
+
}
|
|
75
|
+
.pkt-stepper--vertical .pkt-step__line {
|
|
76
|
+
min-height: min-content;
|
|
77
|
+
height: 100%;
|
|
78
|
+
margin: auto;
|
|
79
|
+
width: var(--pkt-steps-border-width);
|
|
80
|
+
}
|
|
81
|
+
.pkt-stepper--vertical .pkt-step__line--1 {
|
|
82
|
+
height: 50%;
|
|
83
|
+
transform: translateY(-55%);
|
|
84
|
+
}
|
|
85
|
+
.pkt-stepper--vertical .pkt-step__line--2 {
|
|
86
|
+
height: 50%;
|
|
87
|
+
transform: translateY(55%);
|
|
88
|
+
}
|
|
89
|
+
.pkt-stepper--vertical .pkt-step__line--3 {
|
|
90
|
+
min-height: 4rem;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.pkt-stepper--horizontal {
|
|
94
|
+
display: flex;
|
|
95
|
+
}
|
|
96
|
+
.pkt-stepper--horizontal .pkt-step {
|
|
97
|
+
grid-template-areas: "indicator line" "title title" "content content";
|
|
98
|
+
grid-template-columns: var(--pkt-steps-indicator-width) auto;
|
|
99
|
+
grid-template-rows: var(--pkt-steps-indicator-width) min-content min-content;
|
|
100
|
+
justify-items: flex-start;
|
|
101
|
+
}
|
|
102
|
+
.pkt-stepper--horizontal .pkt-step__wrapper {
|
|
103
|
+
min-width: fit-content;
|
|
104
|
+
}
|
|
105
|
+
.pkt-stepper--horizontal .pkt-step__title {
|
|
106
|
+
padding: 1.5rem 1rem 1.5rem 0;
|
|
107
|
+
}
|
|
108
|
+
.pkt-stepper--horizontal .pkt-step__content {
|
|
109
|
+
padding: 0 1rem 1rem 0;
|
|
110
|
+
}
|
|
111
|
+
.pkt-stepper--horizontal .pkt-step__indicator > svg {
|
|
112
|
+
vertical-align: baseline;
|
|
113
|
+
}
|
|
114
|
+
.pkt-stepper--horizontal .pkt-step__line {
|
|
115
|
+
min-width: min-content;
|
|
116
|
+
width: 100%;
|
|
117
|
+
margin: auto;
|
|
118
|
+
height: var(--pkt-steps-border-width);
|
|
119
|
+
}
|
|
120
|
+
.pkt-stepper--horizontal .pkt-step__line--1 {
|
|
121
|
+
width: 50%;
|
|
122
|
+
transform: translateX(-55%);
|
|
123
|
+
}
|
|
124
|
+
.pkt-stepper--horizontal .pkt-step__line--2 {
|
|
125
|
+
width: 50%;
|
|
126
|
+
transform: translateX(55%);
|
|
127
|
+
}
|
|
128
|
+
.pkt-stepper--horizontal .pkt-step__line--3 {
|
|
129
|
+
min-width: 5rem;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.pkt-step:first-of-type .pkt-step__line--1 {
|
|
133
|
+
display: none;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.pkt-step--incomplete .pkt-step__line {
|
|
137
|
+
background-color: var(--pkt-color-grays-gray-200);
|
|
138
|
+
}
|
|
139
|
+
.pkt-step--incomplete .pkt-step__title,
|
|
140
|
+
.pkt-step--incomplete .pkt-step__content {
|
|
141
|
+
color: var(--pkt-color-grays-gray-600);
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.pkt-step--current + .pkt-step--incomplete .pkt-step__line--1 {
|
|
145
|
+
background-color: var(--pkt-color-brand-dark-blue-1000);
|
|
146
|
+
}
|
|
147
|
+
.pkt-step--current + .pkt-step--incomplete .pkt-step__line--2 {
|
|
148
|
+
background-color: var(--pkt-color-grays-gray-200);
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
.pkt-step:last-of-type .pkt-step__line--3,
|
|
152
|
+
.pkt-step:last-of-type .pkt-step__line--2 {
|
|
153
|
+
display: none;
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
.pkt-step--hidden:not(.pkt-step--current) .pkt-step__content {
|
|
157
|
+
display: none;
|
|
158
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.pkt-stepper{--pkt-steps-indicator-width: 24px;--pkt-steps-indicator-height: 24px;--pkt-steps-indicator-color: var(--pkt-color-brand-dark-blue-1000);--pkt-steps-border-width: 2.5px;--pkt-steps-line-length: 1.5rem;color:var(--pkt-color-brand-dark-blue-1000);font-size:1.125rem;font-weight:500;letter-spacing:-0.2px;list-style:none;margin:0;padding:0}.pkt-stepper .pkt-step{display:grid}.pkt-stepper .pkt-step__wrapper{grid-column:title/content;grid-row:title/content}.pkt-stepper .pkt-step__title{font-weight:500;width:max-content;width:100%}.pkt-stepper .pkt-step__content{font-weight:300;padding-bottom:1.5rem;width:100%}.pkt-stepper .pkt-step__indicator{z-index:2;grid-area:indicator}.pkt-stepper .pkt-step__line{background-color:var(--pkt-color-brand-dark-blue-1000)}.pkt-stepper .pkt-step__line--1{grid-area:indicator}.pkt-stepper .pkt-step__line--2{grid-area:indicator}.pkt-stepper .pkt-step__line--3{grid-area:line;height:fit-content}.pkt-stepper--vertical{display:grid;grid-template-columns:1fr}.pkt-stepper--vertical .pkt-step{grid-template-areas:"indicator title" "line content";grid-template-columns:var(--pkt-steps-indicator-width) auto;grid-template-rows:var(--pkt-steps-indicator-height) minmax(min-content, max-content);grid-gap:0 1rem;justify-items:flex-start}.pkt-stepper--vertical .pkt-step--current .pkt-step__title,.pkt-stepper--vertical .pkt-step--current .pkt-step__content{padding:1rem 1.5rem;background-color:var(--pkt-color-surface-subtle-pale-blue)}.pkt-stepper--vertical .pkt-step--current .pkt-step__wrapper{margin-bottom:1.5rem}.pkt-stepper--vertical .pkt-step__indicator>svg{vertical-align:baseline}.pkt-stepper--vertical .pkt-step__line{min-height:min-content;height:100%;margin:auto;width:var(--pkt-steps-border-width)}.pkt-stepper--vertical .pkt-step__line--1{height:50%;transform:translateY(-55%)}.pkt-stepper--vertical .pkt-step__line--2{height:50%;transform:translateY(55%)}.pkt-stepper--vertical .pkt-step__line--3{min-height:4rem}.pkt-stepper--horizontal{display:flex}.pkt-stepper--horizontal .pkt-step{grid-template-areas:"indicator line" "title title" "content content";grid-template-columns:var(--pkt-steps-indicator-width) auto;grid-template-rows:var(--pkt-steps-indicator-width) min-content min-content;justify-items:flex-start}.pkt-stepper--horizontal .pkt-step__wrapper{min-width:fit-content}.pkt-stepper--horizontal .pkt-step__title{padding:1.5rem 1rem 1.5rem 0}.pkt-stepper--horizontal .pkt-step__content{padding:0 1rem 1rem 0}.pkt-stepper--horizontal .pkt-step__indicator>svg{vertical-align:baseline}.pkt-stepper--horizontal .pkt-step__line{min-width:min-content;width:100%;margin:auto;height:var(--pkt-steps-border-width)}.pkt-stepper--horizontal .pkt-step__line--1{width:50%;transform:translateX(-55%)}.pkt-stepper--horizontal .pkt-step__line--2{width:50%;transform:translateX(55%)}.pkt-stepper--horizontal .pkt-step__line--3{min-width:5rem}.pkt-step:first-of-type .pkt-step__line--1{display:none}.pkt-step--incomplete .pkt-step__line{background-color:var(--pkt-color-grays-gray-200)}.pkt-step--incomplete .pkt-step__title,.pkt-step--incomplete .pkt-step__content{color:var(--pkt-color-grays-gray-600)}.pkt-step--current+.pkt-step--incomplete .pkt-step__line--1{background-color:var(--pkt-color-brand-dark-blue-1000)}.pkt-step--current+.pkt-step--incomplete .pkt-step__line--2{background-color:var(--pkt-color-grays-gray-200)}.pkt-step:last-of-type .pkt-step__line--3,.pkt-step:last-of-type .pkt-step__line--2{display:none}.pkt-step--hidden:not(.pkt-step--current) .pkt-step__content{display:none}
|