@oslokommune/punkt-css 12.10.1 → 12.11.0
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 +211 -0
- package/dist/css/components/alert.css +1 -0
- package/dist/css/components/alert.min.css +1 -1
- package/dist/css/components/calendar.css +4 -0
- package/dist/css/components/calendar.min.css +1 -1
- package/dist/css/components/modal.css +124 -0
- package/dist/css/components/modal.min.css +1 -0
- package/dist/css/components/textinput.css +1 -1
- package/dist/css/components/textinput.min.css +1 -1
- package/dist/css/pkt-base.css +1 -1
- package/dist/css/pkt-base.min.css +1 -1
- package/dist/css/pkt-components.css +130 -1
- package/dist/css/pkt-components.min.css +1 -1
- package/dist/css/pkt-elements.css +3 -3
- package/dist/css/pkt-elements.min.css +1 -1
- package/dist/css/pkt.css +133 -4
- package/dist/css/pkt.min.css +1 -1
- package/dist/scss/abstracts/variables/_index.scss +1 -1
- package/dist/scss/components/_alert.scss +1 -0
- package/dist/scss/components/_calendar.scss +3 -0
- package/dist/scss/components/_index.scss +1 -0
- package/dist/scss/components/_modal.scss +166 -0
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,217 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
|
|
|
5
5
|
|
|
6
6
|
---
|
|
7
7
|
|
|
8
|
+
## [12.11.0](https://github.com/oslokommune/punkt/compare/12.10.4...12.11.0) (2024-11-26)
|
|
9
|
+
|
|
10
|
+
### ⚠ BREAKING CHANGES
|
|
11
|
+
Ingen
|
|
12
|
+
|
|
13
|
+
### Features
|
|
14
|
+
* 🍿 modal (#2008). * feat(css,elements): custom modal 🍿 (#1990)
|
|
15
|
+
|
|
16
|
+
* chore(vue,elements): Alert, Messagebox, Tag i Vue (#1991)
|
|
17
|
+
|
|
18
|
+
* chore: Oppdater changelogs [skip ci]
|
|
19
|
+
|
|
20
|
+
* v12.6.1 [skip ci]
|
|
21
|
+
|
|
22
|
+
* fix(react): Legg til støtte for `style` i React wrapper (#1996)
|
|
23
|
+
|
|
24
|
+
* chore: Oppdater changelogs [skip ci]
|
|
25
|
+
|
|
26
|
+
* v12.6.2 [skip ci]
|
|
27
|
+
|
|
28
|
+
* chore(css): legg til progressbar.astro for css (#1995)
|
|
29
|
+
|
|
30
|
+
* chore: Oppdater changelogs [skip ci]
|
|
31
|
+
|
|
32
|
+
* v12.6.3 [skip ci]
|
|
33
|
+
|
|
34
|
+
* fix(react,elements): Datepicker trigger mangler `type=button` (#2001 A Punkt Odyssey)
|
|
35
|
+
|
|
36
|
+
Pluss tastaturnavigering i måned- og årvelger i kalenderen funket ikke. Og flere inputs manglet label.
|
|
37
|
+
|
|
38
|
+
* chore: Oppdater changelogs [skip ci]
|
|
39
|
+
|
|
40
|
+
* v12.6.4 [skip ci]
|
|
41
|
+
|
|
42
|
+
* Fix Card heading på React testmmiljø (#2002)
|
|
43
|
+
|
|
44
|
+
* chore: Oppdater changelogs [skip ci]
|
|
45
|
+
|
|
46
|
+
* v12.6.5 [skip ci]
|
|
47
|
+
|
|
48
|
+
* feat(all): ✨ add Modal specs, css, elements...
|
|
49
|
+
|
|
50
|
+
- Add modal specs modal.json
|
|
51
|
+
- Add modal css + forward it in index.scss
|
|
52
|
+
- Add modal basic component (WIP)
|
|
53
|
+
- Add modal local dev setup
|
|
54
|
+
|
|
55
|
+
# Conflicts:
|
|
56
|
+
# packages/elements/src/components/alert/index.ts
|
|
57
|
+
|
|
58
|
+
* feat(css,elements): ✨ add overlay/background ++
|
|
59
|
+
|
|
60
|
+
... add optional function. Close modal if background is clicked
|
|
61
|
+
- Some other adjustments
|
|
62
|
+
|
|
63
|
+
* feat(css, elements): ✨ btn help classes, sizes ++
|
|
64
|
+
|
|
65
|
+
- Kan brukes dersom man ønsker hjelp til wrapping, plassering av knappene. etc. Må ha samme oppbygging med spans og slikt.
|
|
66
|
+
- Legg til tre ulike størrelser på bredden: small, medium og large.
|
|
67
|
+
- 100% bredde på mobilvisning. Kommer litt irriterende scrolling. TBA...
|
|
68
|
+
- Endre prop navn til 'closeOnBackdropClick'
|
|
69
|
+
|
|
70
|
+
* chore(all): clean up and set auto focus
|
|
71
|
+
|
|
72
|
+
* fix(css): 👩🏻🔧 styling in safari
|
|
73
|
+
|
|
74
|
+
* feat(elements): ♿️ Can close w 'Esc' btn in dialog
|
|
75
|
+
|
|
76
|
+
* fix(build): 👩🏻🔧 remove duplicate imports++
|
|
77
|
+
|
|
78
|
+
* fix(elements,css): 🐛 move imports, fix position
|
|
79
|
+
|
|
80
|
+
* fix(css): 🐛 set max-height on modal
|
|
81
|
+
|
|
82
|
+
* chore(elements): from 'closeModal' -> 'closable'
|
|
83
|
+
|
|
84
|
+
* WIP
|
|
85
|
+
|
|
86
|
+
now the dialog functions work (showmodal, close fns). Still missing tabbing in Safari tho. Also, need to tweak the _isClosed variable, så that the modal will open when the Showmodal function is called.
|
|
87
|
+
|
|
88
|
+
* Fjernet litt unødvendig kode og fikset backdrop click.
|
|
89
|
+
|
|
90
|
+
* fix(all): 🐛 closable -> hideCloseButton ++
|
|
91
|
+
|
|
92
|
+
- For some reason, setting the default to true overrides the prop received if it is false. So we set the default to false, and change the name of the button
|
|
93
|
+
|
|
94
|
+
* fix(css): 💄 fix sizes
|
|
95
|
+
|
|
96
|
+
---------
|
|
97
|
+
|
|
98
|
+
Co-authored-by: Jan Schjetne <jan.schjetne@origo.oslo.kommune.no>
|
|
99
|
+
Co-authored-by: GitHub Actions <>
|
|
100
|
+
Co-authored-by: Trine Håve <trine.haave@origo.oslo.kommune.no>
|
|
101
|
+
Co-authored-by: CatPel <catalina.pelaeze@gmail.com>
|
|
102
|
+
|
|
103
|
+
* Feature modal react (#2011)
|
|
104
|
+
|
|
105
|
+
* feat(react): ✨ set up modal for react
|
|
106
|
+
|
|
107
|
+
* chore(css): 💄 Center buttons when wrapped ...
|
|
108
|
+
|
|
109
|
+
- Sørg for at knappene sentreres og wrappes under hverandre på mindre skjerm
|
|
110
|
+
|
|
111
|
+
# Conflicts:
|
|
112
|
+
# packages/css/src/scss/components/_modal.scss
|
|
113
|
+
|
|
114
|
+
* chore(spec): 📝 add detailed description on props
|
|
115
|
+
|
|
116
|
+
# Conflicts:
|
|
117
|
+
# component-specs/modal.json
|
|
118
|
+
|
|
119
|
+
* feat(react): ✨add react-wrapped modal
|
|
120
|
+
|
|
121
|
+
* fix(all): 🔧 missing code cuz of cherry picking...
|
|
122
|
+
|
|
123
|
+
... adding code that were missing from cherry-picking.
|
|
124
|
+
|
|
125
|
+
* fix(all): 🚧 trying to fix warning: 'LitComponent'
|
|
126
|
+
|
|
127
|
+
* fix(all): 🔧 `title` --> `headingText` ..
|
|
128
|
+
|
|
129
|
+
... using 'title' has its issues as it cannot be set as null/undefined cuz of some internal stuff. Changing the name til 'headingText' so that it will be easier for our future component 'Heading' to merge into the design system.
|
|
130
|
+
|
|
131
|
+
* chore(all): 😴 forgot to change the props
|
|
132
|
+
|
|
133
|
+
* feat(all): ✨ add 'scrollIntoView' fn when closed..
|
|
134
|
+
|
|
135
|
+
.. Adds scrolls into View if opened element is outside of ViewPort.
|
|
136
|
+
|
|
137
|
+
+ add modal to react's dev routes.
|
|
138
|
+
|
|
139
|
+
* chore(elements): 🚚 move to improve code
|
|
140
|
+
|
|
141
|
+
* Feature modal docs (#2037)
|
|
142
|
+
|
|
143
|
+
* feat(docs): 📝 set up pages for modal docs
|
|
144
|
+
|
|
145
|
+
* feat(docs): 📝 updating docs, add examples. WIP
|
|
146
|
+
|
|
147
|
+
* feat(all): ✨ prevent scroll when modal is open
|
|
148
|
+
|
|
149
|
+
* chore(assets): 🖼️ Add SVG photos for docs
|
|
150
|
+
|
|
151
|
+
* chore(css): 💄 adjust screen width for mobile ..
|
|
152
|
+
|
|
153
|
+
.. adjusting when the modal will take up full width
|
|
154
|
+
|
|
155
|
+
* feat(docs): ✨ fill in on code and UU docs
|
|
156
|
+
|
|
157
|
+
* chore(docs): 📝 adjust documentation: sizes, dialog
|
|
158
|
+
|
|
159
|
+
* fix(docs): 👩🏻🔧 fix button icon disalignment
|
|
160
|
+
|
|
161
|
+
* fix(docs,css): 👩🏻🔧 A11Y issues..
|
|
162
|
+
|
|
163
|
+
- Set full-width modal based on current modal size
|
|
164
|
+
- Set padding on headingText to avoid headingText and close-button overlapping
|
|
165
|
+
- Improve aligning, centering and spacing of button in smaller screens.
|
|
166
|
+
|
|
167
|
+
* fix(docs): 📝 Update index.mdx
|
|
168
|
+
|
|
169
|
+
* Feature modal react tester 🧪 (#2046)
|
|
170
|
+
|
|
171
|
+
* feat(modal): ✅ Add basic react tests for modal
|
|
172
|
+
|
|
173
|
+
* fix(css): 💄 add gap between buttons
|
|
174
|
+
|
|
175
|
+
* fix(react): 🧪 clean up the tests
|
|
176
|
+
|
|
177
|
+
* fix(all): ✨ A lot of content will activate scroll
|
|
178
|
+
|
|
179
|
+
+ removing unused code
|
|
180
|
+
+ making sure our modal will automatically adjust to content, but will take up 80% of the viewport.
|
|
181
|
+
|
|
182
|
+
* chore(all): 👯♀️ remove redundant code
|
|
183
|
+
|
|
184
|
+
---------
|
|
185
|
+
|
|
186
|
+
Co-authored-by: Jan Schjetne <jan.schjetne@origo.oslo.kommune.no>
|
|
187
|
+
Co-authored-by: Trine Håve <trine.haave@origo.oslo.kommune.no>
|
|
188
|
+
Co-authored-by: CatPel <catalina.pelaeze@gmail.com>
|
|
189
|
+
|
|
190
|
+
|
|
191
|
+
### Bug Fixes
|
|
192
|
+
* PktDatepicker tidssonesikring og UU-forbedringer (#2054).
|
|
193
|
+
|
|
194
|
+
|
|
195
|
+
### Chores
|
|
196
|
+
Ingen
|
|
197
|
+
|
|
198
|
+
---
|
|
199
|
+
|
|
200
|
+
|
|
201
|
+
## [12.10.2](https://github.com/oslokommune/punkt/compare/12.10.1...12.10.2) (2024-11-22)
|
|
202
|
+
|
|
203
|
+
### ⚠ BREAKING CHANGES
|
|
204
|
+
Ingen
|
|
205
|
+
|
|
206
|
+
### Features
|
|
207
|
+
Ingen
|
|
208
|
+
|
|
209
|
+
### Bug Fixes
|
|
210
|
+
* Brekker opp lange ord i alert (#2043).
|
|
211
|
+
|
|
212
|
+
|
|
213
|
+
### Chores
|
|
214
|
+
Ingen
|
|
215
|
+
|
|
216
|
+
---
|
|
217
|
+
|
|
218
|
+
|
|
8
219
|
## [12.10.1](https://github.com/oslokommune/punkt/compare/12.10.0...12.10.1) (2024-11-22)
|
|
9
220
|
|
|
10
221
|
### ⚠ BREAKING CHANGES
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.pkt-alert{--pkt-color-alert-bc: var(--pkt-color-border-blue);--pkt-color-alert-bg: var(--pkt-color-surface-default-light-blue);--pkt-color-alert-txt: var(--pkt-color-text-body-dark);--pkt-color-alert-icon-fg: var(--pkt-color-brand-dark-blue-1000);--pkt-color-alert-close-fg: var(--pkt-color-brand-dark-blue-1000)}.pkt-alert--error{--pkt-color-alert-bc: var(--pkt-color-border-red);--pkt-color-alert-bg: var(--pkt-color-surface-default-faded-red)}.pkt-alert--success{--pkt-color-alert-bc: var(--pkt-color-border-green);--pkt-color-alert-bg: var(--pkt-color-surface-default-light-green)}.pkt-alert--warning{--pkt-color-alert-bc: var(--pkt-color-border-yellow);--pkt-color-alert-bg: var(--pkt-color-surface-default-yellow)}@property --angle{syntax:"<angle>";initial-value:0deg;inherits:false}.pkt-alert{padding:1.5rem 1.5rem 1.5rem 1.25rem;display:block;position:relative;border-left:.25rem solid var(--pkt-color-alert-bc);background-color:var(--pkt-color-alert-bg);color:var(--pkt-color-alert-txt)}.pkt-alert__title{font-size:1.125rem;font-weight:500;letter-spacing:-0.2px;line-height:1.75rem;margin:0 0 1.5rem 2.5rem}.pkt-alert__close~.pkt-alert__title{margin:0 4rem 1.5rem 2.5rem}.pkt-alert__text{font-size:1.125rem;font-weight:300;letter-spacing:-0.2px;line-height:1.75rem;margin:0 0 0 2.5rem}.pkt-alert__text p{margin-bottom:1rem}.pkt-alert__text p:first-of-type{margin-top:0}.pkt-alert__text p:last-of-type{margin-bottom:0}.pkt-alert__close+.pkt-alert__text{margin:0 4rem 0 2.5rem}.pkt-alert__title+.pkt-alert__text{margin-left:0;margin-right:0}.pkt-alert__date{font-size:.875rem;font-weight:300;letter-spacing:-0.2px;line-height:1.375rem;margin-top:1.5rem}.pkt-alert__icon{--fg-color: var(--pkt-color-alert-icon-fg);height:2rem;width:2rem;position:absolute;top:22px;left:20px}.pkt-alert__close{position:absolute;right:1.125rem;top:.625rem}.pkt-alert__close svg{--fg-color: var(--pkt-color-alert-close-fg)}.pkt-alert--compact{padding:.75rem 1rem .75rem .25rem}.pkt-alert--compact .pkt-alert__icon{width:1.375rem;height:1.375rem;top:.81rem;left:1.25rem}.pkt-alert--compact .pkt-alert__text{font-size:1rem;font-weight:300;letter-spacing:-0.2px;line-height:1.5rem;margin:0 2.875rem}.pkt-alert--compact .pkt-alert__close{top:.25rem}
|
|
1
|
+
.pkt-alert{--pkt-color-alert-bc: var(--pkt-color-border-blue);--pkt-color-alert-bg: var(--pkt-color-surface-default-light-blue);--pkt-color-alert-txt: var(--pkt-color-text-body-dark);--pkt-color-alert-icon-fg: var(--pkt-color-brand-dark-blue-1000);--pkt-color-alert-close-fg: var(--pkt-color-brand-dark-blue-1000)}.pkt-alert--error{--pkt-color-alert-bc: var(--pkt-color-border-red);--pkt-color-alert-bg: var(--pkt-color-surface-default-faded-red)}.pkt-alert--success{--pkt-color-alert-bc: var(--pkt-color-border-green);--pkt-color-alert-bg: var(--pkt-color-surface-default-light-green)}.pkt-alert--warning{--pkt-color-alert-bc: var(--pkt-color-border-yellow);--pkt-color-alert-bg: var(--pkt-color-surface-default-yellow)}@property --angle{syntax:"<angle>";initial-value:0deg;inherits:false}.pkt-alert{padding:1.5rem 1.5rem 1.5rem 1.25rem;display:block;position:relative;border-left:.25rem solid var(--pkt-color-alert-bc);background-color:var(--pkt-color-alert-bg);color:var(--pkt-color-alert-txt)}.pkt-alert__title{font-size:1.125rem;font-weight:500;letter-spacing:-0.2px;line-height:1.75rem;margin:0 0 1.5rem 2.5rem}.pkt-alert__close~.pkt-alert__title{margin:0 4rem 1.5rem 2.5rem}.pkt-alert__text{font-size:1.125rem;font-weight:300;letter-spacing:-0.2px;line-height:1.75rem;margin:0 0 0 2.5rem;overflow-wrap:break-word}.pkt-alert__text p{margin-bottom:1rem}.pkt-alert__text p:first-of-type{margin-top:0}.pkt-alert__text p:last-of-type{margin-bottom:0}.pkt-alert__close+.pkt-alert__text{margin:0 4rem 0 2.5rem}.pkt-alert__title+.pkt-alert__text{margin-left:0;margin-right:0}.pkt-alert__date{font-size:.875rem;font-weight:300;letter-spacing:-0.2px;line-height:1.375rem;margin-top:1.5rem}.pkt-alert__icon{--fg-color: var(--pkt-color-alert-icon-fg);height:2rem;width:2rem;position:absolute;top:22px;left:20px}.pkt-alert__close{position:absolute;right:1.125rem;top:.625rem}.pkt-alert__close svg{--fg-color: var(--pkt-color-alert-close-fg)}.pkt-alert--compact{padding:.75rem 1rem .75rem .25rem}.pkt-alert--compact .pkt-alert__icon{width:1.375rem;height:1.375rem;top:.81rem;left:1.25rem}.pkt-alert--compact .pkt-alert__text{font-size:1rem;font-weight:300;letter-spacing:-0.2px;line-height:1.5rem;margin:0 2.875rem}.pkt-alert--compact .pkt-alert__close{top:.25rem}
|
|
@@ -149,6 +149,10 @@ pkt-calendar .pkt-cal-range-hover :before,
|
|
|
149
149
|
pkt-calendar .pkt-cal-range-hover .pkt-btn {
|
|
150
150
|
background-color: var(--pkt-color-surface-default-light-blue);
|
|
151
151
|
}
|
|
152
|
+
.pkt-calendar .pkt-cal-range-hover ::after,
|
|
153
|
+
pkt-calendar .pkt-cal-range-hover ::after {
|
|
154
|
+
background-color: transparent;
|
|
155
|
+
}
|
|
152
156
|
.pkt-calendar .pkt-cal-range-hover .pkt-btn,
|
|
153
157
|
pkt-calendar .pkt-cal-range-hover .pkt-btn {
|
|
154
158
|
border-color: var(--pkt-color-surface-default-light-blue);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.pkt-calendar,pkt-calendar{z-index:2;display:block;position:relative;max-width:25rem}.pkt-calendar .pkt-cal-month-nav,pkt-calendar .pkt-cal-month-nav{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker,pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker{display:flex;gap:.5rem}.pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker .pkt-input,pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker .pkt-input{font-size:1rem;font-weight:500;letter-spacing:-0.2px;line-height:1.5rem}.pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker .pkt-input:is(select),pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker .pkt-input:is(select){text-align:right}.pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker>.pkt-cal-input-year,pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker>.pkt-cal-input-year{max-width:4.5rem}.pkt-calendar .pkt-cal-month-nav td,.pkt-calendar .pkt-cal-days td,pkt-calendar .pkt-cal-month-nav td,pkt-calendar .pkt-cal-days td{border:0}.pkt-calendar .pkt-cal-month-nav .pkt-btn,.pkt-calendar .pkt-cal-month-nav td>div,.pkt-calendar .pkt-cal-month-nav th>div,.pkt-calendar .pkt-cal-days .pkt-btn,.pkt-calendar .pkt-cal-days td>div,.pkt-calendar .pkt-cal-days th>div,pkt-calendar .pkt-cal-month-nav .pkt-btn,pkt-calendar .pkt-cal-month-nav td>div,pkt-calendar .pkt-cal-month-nav th>div,pkt-calendar .pkt-cal-days .pkt-btn,pkt-calendar .pkt-cal-days td>div,pkt-calendar .pkt-cal-days th>div{font:inherit;aspect-ratio:1/1;display:flex;justify-content:center;align-items:center;border:0}.pkt-calendar .pkt-cal-month-nav .pkt-btn,.pkt-calendar .pkt-cal-days .pkt-btn,pkt-calendar .pkt-cal-month-nav .pkt-btn,pkt-calendar .pkt-cal-days .pkt-btn{margin:0;border-radius:50%}.pkt-calendar .pkt-cal-days,pkt-calendar .pkt-cal-days{margin:0;padding-left:0;border-spacing:0}.pkt-calendar .pkt-cal-days td,pkt-calendar .pkt-cal-days td{padding:0}.pkt-calendar .pkt-cal-days div,pkt-calendar .pkt-cal-days div{aspect-ratio:1/1;justify-content:center;align-items:center;position:relative;text-align:center}.pkt-calendar .pkt-cal-days div:before,.pkt-calendar .pkt-cal-days div:after,pkt-calendar .pkt-cal-days div:before,pkt-calendar .pkt-cal-days div:after{content:"";display:block;position:absolute;top:0;bottom:0;z-index:-1}.pkt-calendar .pkt-cal-days div:before,pkt-calendar .pkt-cal-days div:before{left:0;right:50%}.pkt-calendar .pkt-cal-days div:after,pkt-calendar .pkt-cal-days div:after{left:50%;right:0}.pkt-calendar.pkt-cal-weeknumbers .pkt-cal-day-names,.pkt-calendar.pkt-cal-weeknumbers .pkt-cal-days,pkt-calendar.pkt-cal-weeknumbers .pkt-cal-day-names,pkt-calendar.pkt-cal-weeknumbers .pkt-cal-days{grid-template-columns:repeat(8, 12.5%)}.pkt-calendar .pkt-cal-other,.pkt-calendar .pkt-cal-days [data-disabled],pkt-calendar .pkt-cal-other,pkt-calendar .pkt-cal-days [data-disabled]{cursor:not-allowed;color:var(--pkt-color-grays-gray-200);background:rgba(0,0,0,0);border:none}.pkt-calendar .pkt-cal-today .pkt-btn,pkt-calendar .pkt-cal-today .pkt-btn{text-decoration:underline;outline:1px solid var(--pkt-color-border-default);outline-offset:-1px}.pkt-calendar .pkt-cal-selected .pkt-btn,.pkt-calendar .pkt-cal-selected .pkt-btn:focus,.pkt-calendar .pkt-cal-selected .pkt-btn:hover,pkt-calendar .pkt-cal-selected .pkt-btn,pkt-calendar .pkt-cal-selected .pkt-btn:focus,pkt-calendar .pkt-cal-selected .pkt-btn:hover{background-color:var(--pkt-color-surface-strong-blue)}.pkt-calendar .pkt-cal-in-range :before,.pkt-calendar .pkt-cal-in-range :after,.pkt-calendar .pkt-cal-in-range-first :after,.pkt-calendar .pkt-cal-in-range-last :before,pkt-calendar .pkt-cal-in-range :before,pkt-calendar .pkt-cal-in-range :after,pkt-calendar .pkt-cal-in-range-first :after,pkt-calendar .pkt-cal-in-range-last :before{background-color:var(--pkt-color-surface-default-light-blue)}.pkt-calendar .pkt-cal-in-range-first :before,.pkt-calendar .pkt-cal-in-range-last :after,pkt-calendar .pkt-cal-in-range-first :before,pkt-calendar .pkt-cal-in-range-last :after{background-color:rgba(0,0,0,0)}.pkt-calendar .pkt-cal-range-hover :before,.pkt-calendar .pkt-cal-range-hover .pkt-btn,pkt-calendar .pkt-cal-range-hover :before,pkt-calendar .pkt-cal-range-hover .pkt-btn{background-color:var(--pkt-color-surface-default-light-blue)}.pkt-calendar .pkt-cal-range-hover .pkt-btn,pkt-calendar .pkt-cal-range-hover .pkt-btn{border-color:var(--pkt-color-surface-default-light-blue)}.pkt-calendar .pkt-cal-excluded,pkt-calendar .pkt-cal-excluded{background-color:var(--pkt-color-brand-neutrals-100)}.pkt-calendar .pkt-cal-excluded :before,.pkt-calendar .pkt-cal-excluded :after,pkt-calendar .pkt-cal-excluded :before,pkt-calendar .pkt-cal-excluded :after{background-color:rgba(0,0,0,0)}pkt-datepicker{display:block;position:relative}pkt-datepicker .pkt-datepicker{position:relative}pkt-datepicker .pkt-datepicker__tags .pkt-tag{margin:0 .25rem .5rem 0}.pkt-datepicker__inputs{width:100%;position:relative}.pkt-calendar-popup{top:100%;left:0;z-index:2;margin:0;padding:.5rem;position:absolute;width:max-content;background:var(--pkt-color-background-default);box-shadow:0px 2px 4px -2px rgba(0,0,0,.1),0px 4px 6px -1px rgba(0,0,0,.1)}.pkt-datepicker__input::-webkit-inner-spin-button,.pkt-datepicker__input::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}
|
|
1
|
+
.pkt-calendar,pkt-calendar{z-index:2;display:block;position:relative;max-width:25rem}.pkt-calendar .pkt-cal-month-nav,pkt-calendar .pkt-cal-month-nav{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker,pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker{display:flex;gap:.5rem}.pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker .pkt-input,pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker .pkt-input{font-size:1rem;font-weight:500;letter-spacing:-0.2px;line-height:1.5rem}.pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker .pkt-input:is(select),pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker .pkt-input:is(select){text-align:right}.pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker>.pkt-cal-input-year,pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker>.pkt-cal-input-year{max-width:4.5rem}.pkt-calendar .pkt-cal-month-nav td,.pkt-calendar .pkt-cal-days td,pkt-calendar .pkt-cal-month-nav td,pkt-calendar .pkt-cal-days td{border:0}.pkt-calendar .pkt-cal-month-nav .pkt-btn,.pkt-calendar .pkt-cal-month-nav td>div,.pkt-calendar .pkt-cal-month-nav th>div,.pkt-calendar .pkt-cal-days .pkt-btn,.pkt-calendar .pkt-cal-days td>div,.pkt-calendar .pkt-cal-days th>div,pkt-calendar .pkt-cal-month-nav .pkt-btn,pkt-calendar .pkt-cal-month-nav td>div,pkt-calendar .pkt-cal-month-nav th>div,pkt-calendar .pkt-cal-days .pkt-btn,pkt-calendar .pkt-cal-days td>div,pkt-calendar .pkt-cal-days th>div{font:inherit;aspect-ratio:1/1;display:flex;justify-content:center;align-items:center;border:0}.pkt-calendar .pkt-cal-month-nav .pkt-btn,.pkt-calendar .pkt-cal-days .pkt-btn,pkt-calendar .pkt-cal-month-nav .pkt-btn,pkt-calendar .pkt-cal-days .pkt-btn{margin:0;border-radius:50%}.pkt-calendar .pkt-cal-days,pkt-calendar .pkt-cal-days{margin:0;padding-left:0;border-spacing:0}.pkt-calendar .pkt-cal-days td,pkt-calendar .pkt-cal-days td{padding:0}.pkt-calendar .pkt-cal-days div,pkt-calendar .pkt-cal-days div{aspect-ratio:1/1;justify-content:center;align-items:center;position:relative;text-align:center}.pkt-calendar .pkt-cal-days div:before,.pkt-calendar .pkt-cal-days div:after,pkt-calendar .pkt-cal-days div:before,pkt-calendar .pkt-cal-days div:after{content:"";display:block;position:absolute;top:0;bottom:0;z-index:-1}.pkt-calendar .pkt-cal-days div:before,pkt-calendar .pkt-cal-days div:before{left:0;right:50%}.pkt-calendar .pkt-cal-days div:after,pkt-calendar .pkt-cal-days div:after{left:50%;right:0}.pkt-calendar.pkt-cal-weeknumbers .pkt-cal-day-names,.pkt-calendar.pkt-cal-weeknumbers .pkt-cal-days,pkt-calendar.pkt-cal-weeknumbers .pkt-cal-day-names,pkt-calendar.pkt-cal-weeknumbers .pkt-cal-days{grid-template-columns:repeat(8, 12.5%)}.pkt-calendar .pkt-cal-other,.pkt-calendar .pkt-cal-days [data-disabled],pkt-calendar .pkt-cal-other,pkt-calendar .pkt-cal-days [data-disabled]{cursor:not-allowed;color:var(--pkt-color-grays-gray-200);background:rgba(0,0,0,0);border:none}.pkt-calendar .pkt-cal-today .pkt-btn,pkt-calendar .pkt-cal-today .pkt-btn{text-decoration:underline;outline:1px solid var(--pkt-color-border-default);outline-offset:-1px}.pkt-calendar .pkt-cal-selected .pkt-btn,.pkt-calendar .pkt-cal-selected .pkt-btn:focus,.pkt-calendar .pkt-cal-selected .pkt-btn:hover,pkt-calendar .pkt-cal-selected .pkt-btn,pkt-calendar .pkt-cal-selected .pkt-btn:focus,pkt-calendar .pkt-cal-selected .pkt-btn:hover{background-color:var(--pkt-color-surface-strong-blue)}.pkt-calendar .pkt-cal-in-range :before,.pkt-calendar .pkt-cal-in-range :after,.pkt-calendar .pkt-cal-in-range-first :after,.pkt-calendar .pkt-cal-in-range-last :before,pkt-calendar .pkt-cal-in-range :before,pkt-calendar .pkt-cal-in-range :after,pkt-calendar .pkt-cal-in-range-first :after,pkt-calendar .pkt-cal-in-range-last :before{background-color:var(--pkt-color-surface-default-light-blue)}.pkt-calendar .pkt-cal-in-range-first :before,.pkt-calendar .pkt-cal-in-range-last :after,pkt-calendar .pkt-cal-in-range-first :before,pkt-calendar .pkt-cal-in-range-last :after{background-color:rgba(0,0,0,0)}.pkt-calendar .pkt-cal-range-hover :before,.pkt-calendar .pkt-cal-range-hover .pkt-btn,pkt-calendar .pkt-cal-range-hover :before,pkt-calendar .pkt-cal-range-hover .pkt-btn{background-color:var(--pkt-color-surface-default-light-blue)}.pkt-calendar .pkt-cal-range-hover ::after,pkt-calendar .pkt-cal-range-hover ::after{background-color:rgba(0,0,0,0)}.pkt-calendar .pkt-cal-range-hover .pkt-btn,pkt-calendar .pkt-cal-range-hover .pkt-btn{border-color:var(--pkt-color-surface-default-light-blue)}.pkt-calendar .pkt-cal-excluded,pkt-calendar .pkt-cal-excluded{background-color:var(--pkt-color-brand-neutrals-100)}.pkt-calendar .pkt-cal-excluded :before,.pkt-calendar .pkt-cal-excluded :after,pkt-calendar .pkt-cal-excluded :before,pkt-calendar .pkt-cal-excluded :after{background-color:rgba(0,0,0,0)}pkt-datepicker{display:block;position:relative}pkt-datepicker .pkt-datepicker{position:relative}pkt-datepicker .pkt-datepicker__tags .pkt-tag{margin:0 .25rem .5rem 0}.pkt-datepicker__inputs{width:100%;position:relative}.pkt-calendar-popup{top:100%;left:0;z-index:2;margin:0;padding:.5rem;position:absolute;width:max-content;background:var(--pkt-color-background-default);box-shadow:0px 2px 4px -2px rgba(0,0,0,.1),0px 4px 6px -1px rgba(0,0,0,.1)}.pkt-datepicker__input::-webkit-inner-spin-button,.pkt-datepicker__input::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}
|
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Modal component
|
|
3
|
+
*/
|
|
4
|
+
.pkt-modal[open] {
|
|
5
|
+
padding: 1.5rem 2.5rem;
|
|
6
|
+
border: none;
|
|
7
|
+
background: white;
|
|
8
|
+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
|
9
|
+
max-height: max-content;
|
|
10
|
+
display: flex;
|
|
11
|
+
flex-direction: column;
|
|
12
|
+
gap: 1rem;
|
|
13
|
+
align-items: center;
|
|
14
|
+
position: fixed;
|
|
15
|
+
max-height: 80vh;
|
|
16
|
+
}
|
|
17
|
+
.pkt-modal[open]::backdrop {
|
|
18
|
+
background-color: rgba(0, 0, 0, 0.55);
|
|
19
|
+
}
|
|
20
|
+
.pkt-modal[open] .pkt-modal__header {
|
|
21
|
+
display: flex;
|
|
22
|
+
justify-content: space-between;
|
|
23
|
+
align-items: center;
|
|
24
|
+
width: 100%;
|
|
25
|
+
}
|
|
26
|
+
.pkt-modal[open] .pkt-modal__headingText {
|
|
27
|
+
margin-bottom: 0;
|
|
28
|
+
margin-right: 3rem;
|
|
29
|
+
}
|
|
30
|
+
.pkt-modal[open] .pkt-modal__closeButton {
|
|
31
|
+
position: absolute;
|
|
32
|
+
right: 1.25rem;
|
|
33
|
+
top: 1.25rem;
|
|
34
|
+
}
|
|
35
|
+
.pkt-modal[open] .pkt-modal__content {
|
|
36
|
+
display: flex;
|
|
37
|
+
flex-direction: column;
|
|
38
|
+
gap: 1rem;
|
|
39
|
+
overflow: auto;
|
|
40
|
+
overscroll-behavior: contain;
|
|
41
|
+
position: relative;
|
|
42
|
+
background: linear-gradient(var(--pkt-color-white) 30%, transparent) top, linear-gradient(transparent, var(--pkt-color-border-subtle) 60%) bottom, radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.3), transparent) top, radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.3), transparent) bottom;
|
|
43
|
+
background-attachment: local, local, scroll, scroll;
|
|
44
|
+
background-repeat: no-repeat;
|
|
45
|
+
background-size: 100% 40px, 100% 50px, 100% 16px, 100% 16px;
|
|
46
|
+
padding: 1rem 0;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
body.pkt-modal--open {
|
|
50
|
+
overflow: hidden;
|
|
51
|
+
scrollbar-gutter: stable;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.pkt-modal--small {
|
|
55
|
+
width: 480px;
|
|
56
|
+
padding: 1rem 2rem;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.pkt-modal--medium {
|
|
60
|
+
width: 36rem;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.pkt-modal--large {
|
|
64
|
+
width: 640px;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.pkt-modal__btn--wrapper {
|
|
68
|
+
padding-top: 1.5rem;
|
|
69
|
+
display: flex;
|
|
70
|
+
justify-content: space-between;
|
|
71
|
+
gap: 1rem;
|
|
72
|
+
flex-wrap: wrap;
|
|
73
|
+
width: 100%;
|
|
74
|
+
justify-self: flex-end;
|
|
75
|
+
}
|
|
76
|
+
.pkt-modal__btn--right-side {
|
|
77
|
+
display: flex;
|
|
78
|
+
justify-self: flex-end;
|
|
79
|
+
gap: 1rem;
|
|
80
|
+
flex-wrap: wrap;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
@media screen and (max-width: 640px) {
|
|
84
|
+
.pkt-modal[open] {
|
|
85
|
+
gap: 1rem 0;
|
|
86
|
+
}
|
|
87
|
+
.pkt-modal[open] .pkt-modal__headingText {
|
|
88
|
+
font-size: 1.25rem;
|
|
89
|
+
letter-spacing: -0.2px;
|
|
90
|
+
line-height: 1.5rem;
|
|
91
|
+
}
|
|
92
|
+
.pkt-modal[open] .pkt-modal__content {
|
|
93
|
+
font-size: 1rem;
|
|
94
|
+
letter-spacing: -0.2px;
|
|
95
|
+
line-height: 1.5rem;
|
|
96
|
+
}
|
|
97
|
+
.pkt-modal--large {
|
|
98
|
+
position: absolute;
|
|
99
|
+
width: 100vh;
|
|
100
|
+
padding: 1rem 1.5rem;
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
@media screen and (max-width: 480px) {
|
|
104
|
+
.pkt-modal--small {
|
|
105
|
+
position: absolute;
|
|
106
|
+
width: 100vh;
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
@media screen and (max-width: 36rem) {
|
|
110
|
+
.pkt-modal--medium {
|
|
111
|
+
position: absolute;
|
|
112
|
+
width: 100vh;
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
@media screen and (max-width: 480px) {
|
|
116
|
+
.pkt-modal__btn--wrapper {
|
|
117
|
+
flex-direction: column-reverse;
|
|
118
|
+
justify-content: center;
|
|
119
|
+
align-items: center;
|
|
120
|
+
}
|
|
121
|
+
.pkt-modal__btn--right-side {
|
|
122
|
+
justify-content: center;
|
|
123
|
+
}
|
|
124
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.pkt-modal[open]{padding:1.5rem 2.5rem;border:none;background:#fff;box-shadow:0 4px 8px rgba(0,0,0,.2);max-height:max-content;display:flex;flex-direction:column;gap:1rem;align-items:center;position:fixed;max-height:80vh}.pkt-modal[open]::backdrop{background-color:rgba(0,0,0,.55)}.pkt-modal[open] .pkt-modal__header{display:flex;justify-content:space-between;align-items:center;width:100%}.pkt-modal[open] .pkt-modal__headingText{margin-bottom:0;margin-right:3rem}.pkt-modal[open] .pkt-modal__closeButton{position:absolute;right:1.25rem;top:1.25rem}.pkt-modal[open] .pkt-modal__content{display:flex;flex-direction:column;gap:1rem;overflow:auto;overscroll-behavior:contain;position:relative;background:linear-gradient(var(--pkt-color-white) 30%, transparent) top,linear-gradient(transparent, var(--pkt-color-border-subtle) 60%) bottom,radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.3), transparent) top,radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.3), transparent) bottom;background-attachment:local,local,scroll,scroll;background-repeat:no-repeat;background-size:100% 40px,100% 50px,100% 16px,100% 16px;padding:1rem 0}body.pkt-modal--open{overflow:hidden;scrollbar-gutter:stable}.pkt-modal--small{width:480px;padding:1rem 2rem}.pkt-modal--medium{width:36rem}.pkt-modal--large{width:640px}.pkt-modal__btn--wrapper{padding-top:1.5rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;width:100%;justify-self:flex-end}.pkt-modal__btn--right-side{display:flex;justify-self:flex-end;gap:1rem;flex-wrap:wrap}@media screen and (max-width: 640px){.pkt-modal[open]{gap:1rem 0}.pkt-modal[open] .pkt-modal__headingText{font-size:1.25rem;letter-spacing:-0.2px;line-height:1.5rem}.pkt-modal[open] .pkt-modal__content{font-size:1rem;letter-spacing:-0.2px;line-height:1.5rem}.pkt-modal--large{position:absolute;width:100vh;padding:1rem 1.5rem}}@media screen and (max-width: 480px){.pkt-modal--small{position:absolute;width:100vh}}@media screen and (max-width: 36rem){.pkt-modal--medium{position:absolute;width:100vh}}@media screen and (max-width: 480px){.pkt-modal__btn--wrapper{flex-direction:column-reverse;justify-content:center;align-items:center}.pkt-modal__btn--right-side{justify-content:center}}
|
|
@@ -90,7 +90,7 @@
|
|
|
90
90
|
padding-right: 3rem;
|
|
91
91
|
}
|
|
92
92
|
.pkt-input:is(select):not([multiple]), .pkt-textinput__input:is(select):not([multiple]) {
|
|
93
|
-
--svg: url(https://punkt-cdn.oslo.kommune.no/12.
|
|
93
|
+
--svg: url(https://punkt-cdn.oslo.kommune.no/12.11/icons/chevron-thin-down.svg);
|
|
94
94
|
background-image: var(--svg);
|
|
95
95
|
background-repeat: no-repeat;
|
|
96
96
|
background-position: right 0.7rem top 50%;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.pkt-input,.pkt-textinput__input,.pkt-input-prefix,.pkt-input-suffix,.pkt-input-icon,.pkt-input__container{--pkt-color-input-background-normal: var(--pkt-color-brand-neutrals-white);--pkt-color-input-border-active: var(--pkt-color-brand-warm-blue-1000);--pkt-color-input-border-disabled: var(--pkt-color-grays-gray-300);--pkt-color-input-border-error: var(--pkt-color-brand-red-1000);--pkt-color-input-border-hover: var(--pkt-color-brand-warm-blue-1000);--pkt-color-input-border-normal: var(--pkt-color-brand-dark-blue-1000);--pkt-color-input-text-active: var(--pkt-color-brand-warm-blue-1000);--pkt-color-input-text-disabled: var(--pkt-color-grays-gray-500);--pkt-color-input-text-hover: var(--pkt-color-brand-warm-blue-1000);--pkt-color-input-text-normal: var(--pkt-color-brand-dark-blue-1000);--pkt-color-input-text-error: var(--pkt-color-brand-red-1000);--pkt-color-input-text-open: var(--pkt-color-brand-neutrals-white)}[data-mode=dark] .pkt-input,[data-mode=dark] .pkt-textinput__input,[data-mode=dark] .pkt-input-prefix,[data-mode=dark] .pkt-input-suffix,[data-mode=dark] .pkt-input-icon,[data-mode=dark] .pkt-input__container{--pkt-color-input-background-normal: var(--pkt-color-brand-neutrals-white);--pkt-color-input-border-active: var(--pkt-color-brand-blue-500);--pkt-color-input-border-disabled: var(--pkt-color-grays-gray-200);--pkt-color-input-border-error: var(--pkt-color-brand-red-1000);--pkt-color-input-border-hover: var(--pkt-color-brand-blue-500);--pkt-color-input-border-normal: var(--pkt-color-brand-neutrals-white);--pkt-color-input-text-active: var(--pkt-color-brand-warm-blue-1000);--pkt-color-input-text-disabled: var(--pkt-color-grays-gray-200);--pkt-color-input-text-hover: var(--pkt-color-brand-warm-blue-1000);--pkt-color-input-text-normal: var(--pkt-color-brand-dark-blue-1000);--pkt-color-input-text-error: var(--pkt-color-brand-red-1000);--pkt-color-input-text-open: var(--pkt-color-brand-dark-blue-1000)}.pkt-input,.pkt-textinput__input{font-size:1.125rem;font-weight:300;letter-spacing:-0.2px;line-height:1.75rem;display:flex;align-items:center;appearance:none;background-color:var(--pkt-color-input-background-normal);border:2px solid var(--pkt-color-input-border-normal);border-radius:0;color:var(--pkt-color-input-text-normal);margin:0;padding:.5rem 1rem}.pkt-input:not(.pkt-input-compact),.pkt-textinput__input:not(.pkt-input-compact){min-height:3rem}.pkt-input-compact.pkt-input,.pkt-input-compact.pkt-textinput__input{border:0;border-bottom:1px solid var(--pkt-color-input-border-normal);padding:0 0 .1rem 0;font-size:1rem;font-weight:300;letter-spacing:-0.2px;line-height:1.5rem}.pkt-input-compact.pkt-input:is(select):not([multiple]),.pkt-input-compact.pkt-textinput__input:is(select):not([multiple]){background-position:right 0 top 50%;padding-right:2rem}.pkt-input:not(textarea[cols]):not(input[size]):not(.pkt-input--fullwidth),.pkt-textinput__input:not(textarea[cols]):not(input[size]):not(.pkt-input--fullwidth),.pkt-input__container:not(:is(:has(textarea[cols]))):not(:is(:has(input[size]))):not(:is(:has(.pkt-input--fullwidth))){width:min(100%,31rem)}.pkt-input--fullwidth,.pkt-input--fullwidth+.pkt-input__counter{width:100%}.pkt-input:is(textarea),.pkt-textinput__input:is(textarea){min-height:8rem}.pkt-input:is(select),.pkt-textinput__input:is(select){appearance:none;-moz-appearance:none;-webkit-appearance:none;padding-right:3rem}.pkt-input:is(select):not([multiple]),.pkt-textinput__input:is(select):not([multiple]){--svg: url(https://punkt-cdn.oslo.kommune.no/12.
|
|
1
|
+
.pkt-input,.pkt-textinput__input,.pkt-input-prefix,.pkt-input-suffix,.pkt-input-icon,.pkt-input__container{--pkt-color-input-background-normal: var(--pkt-color-brand-neutrals-white);--pkt-color-input-border-active: var(--pkt-color-brand-warm-blue-1000);--pkt-color-input-border-disabled: var(--pkt-color-grays-gray-300);--pkt-color-input-border-error: var(--pkt-color-brand-red-1000);--pkt-color-input-border-hover: var(--pkt-color-brand-warm-blue-1000);--pkt-color-input-border-normal: var(--pkt-color-brand-dark-blue-1000);--pkt-color-input-text-active: var(--pkt-color-brand-warm-blue-1000);--pkt-color-input-text-disabled: var(--pkt-color-grays-gray-500);--pkt-color-input-text-hover: var(--pkt-color-brand-warm-blue-1000);--pkt-color-input-text-normal: var(--pkt-color-brand-dark-blue-1000);--pkt-color-input-text-error: var(--pkt-color-brand-red-1000);--pkt-color-input-text-open: var(--pkt-color-brand-neutrals-white)}[data-mode=dark] .pkt-input,[data-mode=dark] .pkt-textinput__input,[data-mode=dark] .pkt-input-prefix,[data-mode=dark] .pkt-input-suffix,[data-mode=dark] .pkt-input-icon,[data-mode=dark] .pkt-input__container{--pkt-color-input-background-normal: var(--pkt-color-brand-neutrals-white);--pkt-color-input-border-active: var(--pkt-color-brand-blue-500);--pkt-color-input-border-disabled: var(--pkt-color-grays-gray-200);--pkt-color-input-border-error: var(--pkt-color-brand-red-1000);--pkt-color-input-border-hover: var(--pkt-color-brand-blue-500);--pkt-color-input-border-normal: var(--pkt-color-brand-neutrals-white);--pkt-color-input-text-active: var(--pkt-color-brand-warm-blue-1000);--pkt-color-input-text-disabled: var(--pkt-color-grays-gray-200);--pkt-color-input-text-hover: var(--pkt-color-brand-warm-blue-1000);--pkt-color-input-text-normal: var(--pkt-color-brand-dark-blue-1000);--pkt-color-input-text-error: var(--pkt-color-brand-red-1000);--pkt-color-input-text-open: var(--pkt-color-brand-dark-blue-1000)}.pkt-input,.pkt-textinput__input{font-size:1.125rem;font-weight:300;letter-spacing:-0.2px;line-height:1.75rem;display:flex;align-items:center;appearance:none;background-color:var(--pkt-color-input-background-normal);border:2px solid var(--pkt-color-input-border-normal);border-radius:0;color:var(--pkt-color-input-text-normal);margin:0;padding:.5rem 1rem}.pkt-input:not(.pkt-input-compact),.pkt-textinput__input:not(.pkt-input-compact){min-height:3rem}.pkt-input-compact.pkt-input,.pkt-input-compact.pkt-textinput__input{border:0;border-bottom:1px solid var(--pkt-color-input-border-normal);padding:0 0 .1rem 0;font-size:1rem;font-weight:300;letter-spacing:-0.2px;line-height:1.5rem}.pkt-input-compact.pkt-input:is(select):not([multiple]),.pkt-input-compact.pkt-textinput__input:is(select):not([multiple]){background-position:right 0 top 50%;padding-right:2rem}.pkt-input:not(textarea[cols]):not(input[size]):not(.pkt-input--fullwidth),.pkt-textinput__input:not(textarea[cols]):not(input[size]):not(.pkt-input--fullwidth),.pkt-input__container:not(:is(:has(textarea[cols]))):not(:is(:has(input[size]))):not(:is(:has(.pkt-input--fullwidth))){width:min(100%,31rem)}.pkt-input--fullwidth,.pkt-input--fullwidth+.pkt-input__counter{width:100%}.pkt-input:is(textarea),.pkt-textinput__input:is(textarea){min-height:8rem}.pkt-input:is(select),.pkt-textinput__input:is(select){appearance:none;-moz-appearance:none;-webkit-appearance:none;padding-right:3rem}.pkt-input:is(select):not([multiple]),.pkt-textinput__input:is(select):not([multiple]){--svg: url(https://punkt-cdn.oslo.kommune.no/12.11/icons/chevron-thin-down.svg);background-image:var(--svg);background-repeat:no-repeat;background-position:right .7rem top 50%;background-size:1.5rem auto,100%}.pkt-input:is(select) option,.pkt-textinput__input:is(select) option{background-color:var(--pkt-color-input-background-normal);color:var(--pkt-color-input-text-normal);font-weight:normal}.pkt-input::placeholder,.pkt-textinput__input::placeholder{color:var(--pkt-color-text-placeholder);opacity:1}.pkt-input:hover,.pkt-textinput__input:hover,.pkt-input.pkt-input--hover,.pkt-input--hover.pkt-textinput__input{border-color:var(--pkt-color-input-border-hover)}.pkt-input:focus-visible,.pkt-textinput__input:focus-visible,.pkt-input.pkt-input__textinput--focus,.pkt-input__textinput--focus.pkt-textinput__input{box-shadow:0 0 0 2px var(--pkt-color-input-border-active);border-color:var(--pkt-color-input-border-active)}.pkt-input:focus,.pkt-textinput__input:focus{outline:none;box-shadow:0 0 0 2px var(--pkt-color-input-border-active);border-color:var(--pkt-color-input-border-active)}.pkt-input:disabled,.pkt-textinput__input:disabled,.pkt-input:disabled::placeholder,.pkt-textinput__input:disabled::placeholder,.pkt-input[readonly],[readonly].pkt-textinput__input{opacity:1;background-color:var(--pkt-color-surface-default-gray);border-color:var(--pkt-color-input-border-disabled);cursor:inherit}.pkt-input:disabled:active,.pkt-textinput__input:disabled:active{border:2px solid var(--pkt-color-input-border-disabled)}.pkt-input-prefix,.pkt-input-suffix,.pkt-input-icon{font-size:1.125rem;font-weight:300;letter-spacing:-0.2px;line-height:1.75rem;display:flex;align-items:center;width:auto;height:3rem;border:2px solid var(--pkt-color-input-border-normal);flex-shrink:0;color:var(--pkt-color-brand-dark-blue-1000);background-color:var(--pkt-color-input-background-normal)}.pkt-input-prefix{padding:.5rem 0rem .5rem 1rem}.pkt-input-prefix::after{content:"";width:1px;margin-left:.5rem;height:100%;background-color:var(--pkt-color-brand-dark-blue-1000)}.pkt-input-suffix{padding:.5rem 1rem .5rem 0rem}.pkt-input-suffix svg{width:1.5rem;height:1.5rem;margin-left:.5rem}.pkt-input-suffix::before{content:"";width:1px;margin-right:.5rem;height:1.5rem;background-color:var(--pkt-color-brand-dark-blue-1000)}.pkt-input-icon{padding:.5rem 1rem;align-self:stretch}.pkt-input-icon svg{width:1.5rem;height:1.5rem;margin-left:.5rem}.pkt-input--counter-error,.pkt-input--counter-error:focus{border-color:var(--pkt-color-input-border-error);background-color:var(--pkt-color-surface-default-faded-red)}.pkt-input--counter-error:focus{box-shadow:0 0 0 2px var(--pkt-color-input-border-error)}.pkt-input__container{display:flex;align-items:center;align-self:stretch}.pkt-input__container:is(:has(input[size])),.pkt-input__container:is(:has(textarea[cols])){align-self:flex-start}.pkt-input__container :first-child:not(:only-child){border-right:none}.pkt-input__container :last-child:not(:only-child){border-left:none}.pkt-input__container :not(:first-child):not(:last-child){border-left:none;border-right:none}.pkt-input__container p{margin:0}.pkt-input__container input:focus{outline:none;box-shadow:none}.pkt-input__container:hover .pkt-input,.pkt-input__container:hover .pkt-textinput__input,.pkt-input__container:hover .pkt-input-prefix,.pkt-input__container:hover .pkt-input-suffix,.pkt-input__container:hover .pkt-input-icon{border-color:var(--pkt-color-input-border-active)}.pkt-input__container:hover .pkt-input:disabled,.pkt-input__container:hover .pkt-textinput__input:disabled,.pkt-input__container:hover .pkt-input-prefix:disabled,.pkt-input__container:hover .pkt-input-suffix:disabled,.pkt-input__container:hover .pkt-input-icon:disabled{border-color:var(--pkt-color-input-border-disabled)}.pkt-input__container:focus-within{outline:2px solid var(--pkt-color-input-border-active)}.pkt-input__container:focus-within .pkt-input,.pkt-input__container:focus-within .pkt-textinput__input,.pkt-input__container:focus-within .pkt-input-prefix,.pkt-input__container:focus-within .pkt-input-suffix,.pkt-input__container:focus-within .pkt-input-icon{border-color:var(--pkt-color-input-border-active)}.pkt-input__counter{font-size:.875rem;font-weight:300;letter-spacing:-0.2px;line-height:1.375rem;width:min(100%,31rem);text-align:right}.pkt-input__counter--error{font-size:.875rem;font-weight:500;letter-spacing:-0.2px;line-height:1.375rem;color:var(--pkt-color-input-text-error)}.pkt-input__range-inputs{min-width:17rem;container:range/inline-size}@container range (width < 30rem){.pkt-input__container{border:2px solid var(--pkt-color-input-border-normal);display:grid;grid-template-rows:auto auto;grid-template-columns:min-content auto 4rem;gap:0}.pkt-input__container>:nth-child(2){grid-column-start:span 2}.pkt-input__container .pkt-input-prefix,.pkt-input__container .pkt-input-suffix,.pkt-input__container .pkt-input-icon,.pkt-input__container .pkt-input,.pkt-input__container .pkt-textinput__input{border:0}}
|
package/dist/css/pkt-base.css
CHANGED
|
@@ -13973,7 +13973,7 @@ a:active, a.pkt-link--active,
|
|
|
13973
13973
|
.pkt-link--external::after {
|
|
13974
13974
|
display: inline-block;
|
|
13975
13975
|
content: " ";
|
|
13976
|
-
--svg: url(https://punkt-cdn.oslo.kommune.no/12.
|
|
13976
|
+
--svg: url(https://punkt-cdn.oslo.kommune.no/12.11/icons/new-window-small.svg);
|
|
13977
13977
|
background-image: var(--svg);
|
|
13978
13978
|
background-repeat: no-repeat;
|
|
13979
13979
|
background-size: 18px 18px;
|