@oslokommune/punkt-css 17.0.8 → 17.1.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 +36 -0
- package/dist/css/components/combobox.css +16 -21
- package/dist/css/components/combobox.min.css +1 -1
- package/dist/css/components/datepicker.css +31 -5
- package/dist/css/components/datepicker.min.css +1 -1
- package/dist/css/components/fileupload.css +24 -158
- package/dist/css/components/fileupload.min.css +1 -1
- package/dist/css/components/inputwrapper.css +8 -1
- package/dist/css/components/inputwrapper.min.css +1 -1
- package/dist/css/components/textarea.css +2 -10
- package/dist/css/components/textarea.min.css +1 -1
- package/dist/css/components/timepicker.css +54 -132
- package/dist/css/components/timepicker.min.css +1 -1
- package/dist/css/elements/button.css +0 -6
- package/dist/css/elements/button.min.css +1 -1
- package/dist/css/elements/checkbox-radio.css +5 -4
- package/dist/css/elements/checkbox-radio.min.css +1 -1
- package/dist/css/elements/input.css +38 -10
- package/dist/css/elements/input.min.css +1 -1
- package/dist/css/pkt-base.css +106 -107
- package/dist/css/pkt-base.min.css +1 -1
- package/dist/css/pkt-components.css +135 -327
- package/dist/css/pkt-components.min.css +1 -1
- package/dist/css/pkt-docs.css +285 -454
- package/dist/css/pkt-docs.min.css +1 -1
- package/dist/css/pkt-elements.css +44 -20
- package/dist/css/pkt-elements.min.css +1 -1
- package/dist/css/pkt.css +285 -454
- package/dist/css/pkt.layer.css +269 -443
- package/dist/css/pkt.layer.min.css +1 -1
- package/dist/css/pkt.min.css +1 -1
- package/dist/scss/abstracts/variables/_index.scss +1 -1
- package/dist/scss/base/_defaults.scss +5 -0
- package/dist/scss/base/_index.scss +1 -0
- package/dist/scss/base/_link.scss +136 -0
- package/dist/scss/base/_typography.scss +0 -139
- package/dist/scss/components/_combobox.scss +45 -43
- package/dist/scss/components/_datepicker.scss +30 -5
- package/dist/scss/components/_fileupload.scss +9 -3
- package/dist/scss/components/_inputwrapper.scss +8 -2
- package/dist/scss/components/_textarea.scss +2 -13
- package/dist/scss/components/_timepicker.scss +3 -3
- package/dist/scss/elements/_button.scss +0 -6
- package/dist/scss/elements/_checkbox-radio.scss +2 -1
- package/dist/scss/elements/_input.scss +40 -18
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,42 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
|
|
|
5
5
|
|
|
6
6
|
---
|
|
7
7
|
|
|
8
|
+
## [17.1.0](https://github.com/oslokommune/punkt/compare/17.0.10...17.1.0) (2026-08-24)
|
|
9
|
+
|
|
10
|
+
### ⚠ BREAKING CHANGES
|
|
11
|
+
Ingen
|
|
12
|
+
|
|
13
|
+
### Features
|
|
14
|
+
* Opprydding i stiler og tilgjengelighet for skjemaelementer (#3602).
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
### Bug Fixes
|
|
18
|
+
Ingen
|
|
19
|
+
|
|
20
|
+
### Chores
|
|
21
|
+
Ingen
|
|
22
|
+
|
|
23
|
+
---
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
## [17.1.0](https://github.com/oslokommune/punkt/compare/17.0.9...17.1.0) (2026-08-20)
|
|
27
|
+
|
|
28
|
+
### ⚠ BREAKING CHANGES
|
|
29
|
+
Ingen
|
|
30
|
+
|
|
31
|
+
### Features
|
|
32
|
+
Ingen
|
|
33
|
+
|
|
34
|
+
### Bug Fixes
|
|
35
|
+
* Trekk ut .pkt-link til egen _link.scss, pluss litt rydding (#3599). Fjernet klasse .pkt-display-contents. Github-søk viser at den hverken er i bruk av oss eller andre. Den har alltid bare vært ubrukt alias for .pkt-contents.
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
### Chores
|
|
39
|
+
Ingen
|
|
40
|
+
|
|
41
|
+
---
|
|
42
|
+
|
|
43
|
+
|
|
8
44
|
## [17.0.8](https://github.com/oslokommune/punkt/compare/17.0.7...17.0.8) (2026-08-17)
|
|
9
45
|
|
|
10
46
|
### ⚠ BREAKING CHANGES
|
|
@@ -1,11 +1,12 @@
|
|
|
1
|
-
pkt-combobox
|
|
1
|
+
pkt-combobox {
|
|
2
|
+
display: block;
|
|
3
|
+
}
|
|
4
|
+
|
|
2
5
|
.pkt-combobox-component {
|
|
3
6
|
display: block;
|
|
4
7
|
max-width: 31rem;
|
|
5
8
|
width: 100%;
|
|
6
9
|
}
|
|
7
|
-
pkt-combobox[fullwidth], pkt-combobox--fullwidth,
|
|
8
|
-
.pkt-combobox-component[fullwidth],
|
|
9
10
|
.pkt-combobox-component--fullwidth {
|
|
10
11
|
max-width: 100%;
|
|
11
12
|
}
|
|
@@ -194,59 +195,53 @@ pkt-combobox[fullwidth], pkt-combobox--fullwidth,
|
|
|
194
195
|
.pkt-combobox__wrapper .pkt-listbox__open {
|
|
195
196
|
margin-block-start: 0.5rem;
|
|
196
197
|
}
|
|
197
|
-
|
|
198
|
-
.pkt-inputwrapper:not([data-navtype=pointer]) .pkt-combobox__input:focus-within {
|
|
198
|
+
.pkt-combobox__wrapper.pkt-inputwrapper:not([data-navtype=pointer]) .pkt-combobox__input:focus-within {
|
|
199
199
|
outline: 4px solid var(--pkt-color-border-states-focus);
|
|
200
200
|
}
|
|
201
|
-
|
|
202
|
-
.pkt-inputwrapper--small .pkt-listbox .pkt-listbox__option:not(.pkt-listbox__search),
|
|
203
|
-
.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__option:not(.pkt-listbox__search) {
|
|
201
|
+
.pkt-combobox__wrapper.pkt-inputwrapper--small .pkt-listbox .pkt-listbox__option:not(.pkt-listbox__search), .pkt-combobox__wrapper.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__option:not(.pkt-listbox__search) {
|
|
204
202
|
padding: 0.5rem 1rem;
|
|
205
203
|
letter-spacing: -0.2px;
|
|
206
204
|
font-weight: 300;
|
|
207
205
|
font-size: 1rem;
|
|
208
206
|
line-height: 1.5rem;
|
|
209
207
|
}
|
|
210
|
-
.pkt-inputwrapper--small .pkt-listbox .pkt-listbox__empty,
|
|
211
|
-
.pkt-inputwrapper--small .pkt-listbox .pkt-listbox__banner,
|
|
212
|
-
.pkt-inputwrapper--xsmall .pkt-listbox .pkt-
|
|
213
|
-
.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__banner {
|
|
208
|
+
.pkt-combobox__wrapper.pkt-inputwrapper--small .pkt-listbox .pkt-listbox__empty,
|
|
209
|
+
.pkt-combobox__wrapper.pkt-inputwrapper--small .pkt-listbox .pkt-listbox__banner, .pkt-combobox__wrapper.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__empty,
|
|
210
|
+
.pkt-combobox__wrapper.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__banner {
|
|
214
211
|
padding: 0.5rem 1rem;
|
|
215
212
|
letter-spacing: -0.2px;
|
|
216
213
|
font-weight: 300;
|
|
217
214
|
font-size: 1rem;
|
|
218
215
|
line-height: 1.5rem;
|
|
219
216
|
}
|
|
220
|
-
.pkt-inputwrapper--small .pkt-listbox .pkt-listbox__search input,
|
|
221
|
-
.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__search input {
|
|
217
|
+
.pkt-combobox__wrapper.pkt-inputwrapper--small .pkt-listbox .pkt-listbox__search input, .pkt-combobox__wrapper.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__search input {
|
|
222
218
|
padding: 0.5rem 0.75rem;
|
|
223
219
|
letter-spacing: -0.2px;
|
|
224
220
|
font-weight: 300;
|
|
225
221
|
font-size: 1rem;
|
|
226
222
|
line-height: 1.5rem;
|
|
227
223
|
}
|
|
228
|
-
|
|
229
|
-
.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__option:not(.pkt-listbox__search) {
|
|
224
|
+
.pkt-combobox__wrapper.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__option:not(.pkt-listbox__search) {
|
|
230
225
|
padding: 0.375rem 0.75rem;
|
|
231
226
|
letter-spacing: -0.2px;
|
|
232
227
|
font-weight: 300;
|
|
233
228
|
font-size: 0.875rem;
|
|
234
229
|
line-height: 1.375rem;
|
|
235
230
|
}
|
|
236
|
-
.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__empty,
|
|
237
|
-
.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__banner {
|
|
231
|
+
.pkt-combobox__wrapper.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__empty,
|
|
232
|
+
.pkt-combobox__wrapper.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__banner {
|
|
238
233
|
padding: 0.375rem 0.75rem;
|
|
239
234
|
letter-spacing: -0.2px;
|
|
240
235
|
font-weight: 300;
|
|
241
236
|
font-size: 0.875rem;
|
|
242
237
|
line-height: 1.375rem;
|
|
243
238
|
}
|
|
244
|
-
.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__banner-icon,
|
|
245
|
-
.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__search-icon .pkt-icon {
|
|
239
|
+
.pkt-combobox__wrapper.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__banner-icon,
|
|
240
|
+
.pkt-combobox__wrapper.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__search-icon .pkt-icon {
|
|
246
241
|
width: 1.125rem;
|
|
247
242
|
height: 1.125rem;
|
|
248
243
|
}
|
|
249
|
-
.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__search input {
|
|
244
|
+
.pkt-combobox__wrapper.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__search input {
|
|
250
245
|
padding: 0.375rem 0.5rem;
|
|
251
246
|
letter-spacing: -0.2px;
|
|
252
247
|
font-weight: 300;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
pkt-combobox
|
|
1
|
+
pkt-combobox{display:block}.pkt-combobox-component{display:block;max-width:31rem;width:100%}.pkt-combobox-component--fullwidth{max-width:100%}.pkt-combobox__wrapper{position:relative;width:100%}.pkt-combobox__wrapper .pkt-combobox{position:relative;display:flex;flex-direction:column;width:100%}.pkt-combobox__wrapper .pkt-combobox__arrow.pkt-btn{position:absolute;right:.25rem;height:100%;min-width:1.125rem;min-height:1.125rem;padding:.5rem}.pkt-combobox__wrapper .pkt-combobox__arrow.pkt-btn svg{width:1.5rem;height:1.5rem}.pkt-combobox__wrapper .pkt-combobox__arrow.pkt-btn:hover:not([data-disabled]){background-color:inherit;border-color:rgba(0,0,0,0)}.pkt-combobox__wrapper .pkt-combobox__value{padding-inline-start:.5rem}.pkt-combobox__wrapper .pkt-combobox__input{display:flex;align-items:center;position:relative;margin:0;padding:.5rem 2rem .5rem .5rem;background-color:var(--pkt-color-input-background-normal);border:2px solid var(--pkt-color-input-border-normal);color:var(--pkt-color-input-text-normal);min-height:3rem;gap:.375rem;flex-wrap:wrap;letter-spacing:-0.2px;font-weight:300;font-size:1.125rem;line-height:1.75rem;line-height:1.25}.pkt-combobox__wrapper .pkt-combobox__input-div{display:contents}.pkt-combobox__wrapper .pkt-combobox__input--fullwidth{width:100%}.pkt-combobox__wrapper .pkt-combobox__input--small{min-height:2.625rem;padding:.375rem 2.5rem .375rem .375rem;letter-spacing:-0.2px;font-weight:300;font-size:1rem;line-height:1.5rem}.pkt-combobox__wrapper .pkt-combobox__input--small .pkt-combobox__arrow-icon svg{width:1.25rem;height:1.25rem}.pkt-combobox__wrapper .pkt-combobox__input--xsmall{min-height:2.25rem;padding:.25rem 2.25rem .25rem .25rem;letter-spacing:-0.2px;font-weight:300;font-size:.875rem;line-height:1.375rem}.pkt-combobox__wrapper .pkt-combobox__input--xsmall .pkt-combobox__arrow-icon{padding:.25rem .5rem}.pkt-combobox__wrapper .pkt-combobox__input--xsmall .pkt-combobox__arrow-icon svg{width:1.125rem;height:1.125rem}.pkt-combobox__wrapper .pkt-combobox__input:hover:not(.pkt-combobox__wrapper .pkt-combobox__input--disabled):not(.pkt-combobox__wrapper .pkt-combobox__input--error){border-color:var(--pkt-color-input-border-hover)}.pkt-combobox__wrapper .pkt-combobox__input:hover:not(.pkt-combobox__wrapper .pkt-combobox__input--disabled):not(.pkt-combobox__wrapper .pkt-combobox__input--error)>.pkt-combobox__value{color:var(--pkt-color-input-text-hover)}.pkt-combobox__wrapper .pkt-combobox__input:hover:not(.pkt-combobox__wrapper .pkt-combobox__input--disabled):not(.pkt-combobox__wrapper .pkt-combobox__input--error) .pkt-combobox__arrow-icon{--fg-color: var(--pkt-color-brand-warm-blue-1000)}.pkt-combobox__wrapper .pkt-combobox__input:hover:not(.pkt-combobox__wrapper .pkt-combobox__input--disabled):not(.pkt-combobox__wrapper .pkt-combobox__input--error) .pkt-combobox__arrow-icon:not(.pkt-combobox__arrow-icon--open) svg{transform:translateY(0.25rem)}.pkt-combobox__wrapper .pkt-combobox__input--error,.pkt-combobox__wrapper .pkt-combobox__input--error:hover,.pkt-combobox__wrapper .pkt-combobox__input--error:focus,.pkt-combobox__wrapper .pkt-combobox__input--error:focus-within{border-color:var(--pkt-color-brand-red-1000)}.pkt-combobox__wrapper .pkt-combobox__input:focus,.pkt-combobox__wrapper .pkt-combobox__input:focus-within,.pkt-combobox__wrapper .pkt-combobox__input:focus-visible,.pkt-combobox__wrapper .pkt-combobox__input--open{border-color:var(--pkt-color-input-border-active);outline:2px solid var(--pkt-color-input-border-active)}.pkt-combobox__wrapper .pkt-combobox__input--disabled,.pkt-combobox__wrapper .pkt-combobox__input--disabled:hover,.pkt-combobox__wrapper .pkt-combobox__input--disabled:focus,.pkt-combobox__wrapper .pkt-combobox__input--disabled:focus-within{background-color:var(--pkt-color-surface-default-gray);border-color:var(--pkt-color-border-states-disabled);color:var(--pkt-color-text-action-disabled);cursor:inherit}.pkt-combobox__wrapper .pkt-combobox__input input{border:none;font-size:inherit;font-family:inherit;font-weight:inherit;color:inherit;background:rgba(0,0,0,0);letter-spacing:inherit;line-height:1.4rem;padding:0 0 0 .5rem;margin:0;flex:1;min-width:3rem}.pkt-combobox__wrapper .pkt-combobox__input input::placeholder{color:var(--pkt-color-text-placeholder);opacity:1}.pkt-combobox__wrapper .pkt-combobox__input input:focus,.pkt-combobox__wrapper .pkt-combobox__input input:active{outline:none}.pkt-combobox__wrapper .pkt-combobox__input .pkt-tag{margin:0}.pkt-combobox__wrapper .pkt-combobox__tag-list{display:contents;list-style:none;margin:0;padding:0}.pkt-combobox__wrapper .pkt-combobox__tag-list li{display:contents}.pkt-combobox__wrapper .pkt-combobox__arrow-icon{position:absolute;right:.25rem;min-width:1.125rem;min-height:1.125rem;padding:.5rem;transform:rotate(0deg);transition:transform .3s ease;pointer-events:none}.pkt-combobox__wrapper .pkt-combobox__arrow-icon svg{width:1.5rem;height:1.5rem;transition:transform .1s ease-in-out}.pkt-combobox__wrapper .pkt-combobox__arrow-icon--open{transform:rotate(180deg);transition:transform .3s ease}.pkt-combobox__wrapper .pkt-combobox__tags-outside{display:flex;flex-wrap:wrap;gap:.375rem}.pkt-combobox__wrapper .pkt-combobox__tags-outside .pkt-tag{margin:0}.pkt-combobox__wrapper .pkt-combobox__tags-outside .pkt-combobox__tag-list{display:flex;flex-wrap:wrap;gap:.375rem;list-style:none;margin:0;padding:0}.pkt-combobox__wrapper .pkt-combobox__tags-outside .pkt-combobox__tag-list li{display:contents}.pkt-combobox__wrapper .pkt-combobox__placeholder{color:var(--pkt-color-text-placeholder);opacity:1;padding-inline-start:.5rem}.pkt-combobox__wrapper .pkt-listbox__open{margin-block-start:.5rem}.pkt-combobox__wrapper.pkt-inputwrapper:not([data-navtype=pointer]) .pkt-combobox__input:focus-within{outline:4px solid var(--pkt-color-border-states-focus)}.pkt-combobox__wrapper.pkt-inputwrapper--small .pkt-listbox .pkt-listbox__option:not(.pkt-listbox__search),.pkt-combobox__wrapper.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__option:not(.pkt-listbox__search){padding:.5rem 1rem;letter-spacing:-0.2px;font-weight:300;font-size:1rem;line-height:1.5rem}.pkt-combobox__wrapper.pkt-inputwrapper--small .pkt-listbox .pkt-listbox__empty,.pkt-combobox__wrapper.pkt-inputwrapper--small .pkt-listbox .pkt-listbox__banner,.pkt-combobox__wrapper.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__empty,.pkt-combobox__wrapper.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__banner{padding:.5rem 1rem;letter-spacing:-0.2px;font-weight:300;font-size:1rem;line-height:1.5rem}.pkt-combobox__wrapper.pkt-inputwrapper--small .pkt-listbox .pkt-listbox__search input,.pkt-combobox__wrapper.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__search input{padding:.5rem .75rem;letter-spacing:-0.2px;font-weight:300;font-size:1rem;line-height:1.5rem}.pkt-combobox__wrapper.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__option:not(.pkt-listbox__search){padding:.375rem .75rem;letter-spacing:-0.2px;font-weight:300;font-size:.875rem;line-height:1.375rem}.pkt-combobox__wrapper.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__empty,.pkt-combobox__wrapper.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__banner{padding:.375rem .75rem;letter-spacing:-0.2px;font-weight:300;font-size:.875rem;line-height:1.375rem}.pkt-combobox__wrapper.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__banner-icon,.pkt-combobox__wrapper.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__search-icon .pkt-icon{width:1.125rem;height:1.125rem}.pkt-combobox__wrapper.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__search input{padding:.375rem .5rem;letter-spacing:-0.2px;font-weight:300;font-size:.875rem;line-height:1.375rem}
|
|
@@ -4,6 +4,10 @@ pkt-datepicker {
|
|
|
4
4
|
position: relative;
|
|
5
5
|
}
|
|
6
6
|
|
|
7
|
+
.pkt-datepicker--fullwidth {
|
|
8
|
+
width: 100%;
|
|
9
|
+
}
|
|
10
|
+
|
|
7
11
|
.pkt-datepicker__tags button.pkt-tag {
|
|
8
12
|
margin: 0 0.25rem 0.5rem 0;
|
|
9
13
|
}
|
|
@@ -17,13 +21,14 @@ pkt-datepicker-multiple {
|
|
|
17
21
|
display: block;
|
|
18
22
|
}
|
|
19
23
|
|
|
24
|
+
.pkt-datepicker__inputs .pkt-input__container:not(:has(.pkt-input--fullwidth)):not(:has(.pkt-datepicker--multiple)) {
|
|
25
|
+
width: fit-content;
|
|
26
|
+
}
|
|
27
|
+
|
|
20
28
|
.pkt-datepicker__inputs {
|
|
21
29
|
width: 100%;
|
|
22
30
|
position: relative;
|
|
23
31
|
}
|
|
24
|
-
.pkt-datepicker__inputs .pkt-input__container:not(:has(.pkt-input--fullwidth)) {
|
|
25
|
-
width: fit-content;
|
|
26
|
-
}
|
|
27
32
|
.pkt-datepicker__inputs .pkt-input__container {
|
|
28
33
|
border: 2px solid var(--pkt-color-input-border-normal);
|
|
29
34
|
background-color: var(--pkt-color-input-background-normal);
|
|
@@ -75,6 +80,8 @@ pkt-datepicker-multiple {
|
|
|
75
80
|
.pkt-datepicker__inputs .pkt-datepicker__input {
|
|
76
81
|
padding-inline-end: 0;
|
|
77
82
|
background-image: none;
|
|
83
|
+
}
|
|
84
|
+
.pkt-datepicker__inputs .pkt-datepicker__input:not(.pkt-datepicker--multiple) {
|
|
78
85
|
width: 8.3rem;
|
|
79
86
|
}
|
|
80
87
|
.pkt-datepicker__inputs .pkt-input-separator ~ .pkt-datepicker--range {
|
|
@@ -98,10 +105,19 @@ pkt-datepicker-multiple {
|
|
|
98
105
|
max-width: calc(100% - 3rem);
|
|
99
106
|
}
|
|
100
107
|
|
|
101
|
-
.pkt-datepicker__input.pkt-input--fullwidth:not(.pkt-datepicker--multiple) {
|
|
108
|
+
.pkt-datepicker__input.pkt-input--fullwidth:not(.pkt-datepicker--multiple):not(.pkt-datepicker--range) {
|
|
102
109
|
flex: 1;
|
|
103
110
|
}
|
|
104
111
|
|
|
112
|
+
.pkt-datepicker__input.pkt-input--fullwidth.pkt-datepicker--range {
|
|
113
|
+
flex: 0 0 auto;
|
|
114
|
+
width: 8.3rem;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.pkt-input__container:has(.pkt-datepicker--range.pkt-input--fullwidth) button.pkt-input-icon {
|
|
118
|
+
margin-inline-start: auto;
|
|
119
|
+
}
|
|
120
|
+
|
|
105
121
|
.pkt-datepicker__input::-webkit-inner-spin-button,
|
|
106
122
|
.pkt-datepicker__input::-webkit-calendar-picker-indicator {
|
|
107
123
|
display: none;
|
|
@@ -141,6 +157,9 @@ pkt-datepicker-multiple {
|
|
|
141
157
|
.pkt-datepicker--small .pkt-datepicker__inputs .pkt-datepicker__input:not(.pkt-datepicker--multiple):not(.pkt-input--fullwidth) {
|
|
142
158
|
width: 7.3rem;
|
|
143
159
|
}
|
|
160
|
+
.pkt-datepicker--small .pkt-datepicker__inputs .pkt-datepicker__input.pkt-input--fullwidth.pkt-datepicker--range {
|
|
161
|
+
width: 7.3rem;
|
|
162
|
+
}
|
|
144
163
|
.pkt-datepicker--small .pkt-datepicker__inputs .pkt-datepicker__input:not(.pkt-datepicker--multiple):not(.pkt-datepicker--range) {
|
|
145
164
|
max-width: calc(100% - 2.5rem);
|
|
146
165
|
}
|
|
@@ -175,6 +194,9 @@ pkt-datepicker-multiple {
|
|
|
175
194
|
.pkt-datepicker--xsmall .pkt-datepicker__inputs .pkt-datepicker__input:not(.pkt-datepicker--multiple):not(.pkt-input--fullwidth) {
|
|
176
195
|
width: 6.5rem;
|
|
177
196
|
}
|
|
197
|
+
.pkt-datepicker--xsmall .pkt-datepicker__inputs .pkt-datepicker__input.pkt-input--fullwidth.pkt-datepicker--range {
|
|
198
|
+
width: 6.5rem;
|
|
199
|
+
}
|
|
178
200
|
.pkt-datepicker--xsmall .pkt-datepicker__inputs .pkt-datepicker__input:not(.pkt-datepicker--multiple):not(.pkt-datepicker--range) {
|
|
179
201
|
max-width: calc(100% - 2rem);
|
|
180
202
|
}
|
|
@@ -188,10 +210,14 @@ pkt-datepicker-multiple {
|
|
|
188
210
|
width: auto;
|
|
189
211
|
max-width: 100%;
|
|
190
212
|
}
|
|
191
|
-
.pkt-datepicker__inputs .pkt-datepicker__input.pkt-input--fullwidth:not(.pkt-datepicker--multiple) {
|
|
213
|
+
.pkt-datepicker__inputs .pkt-datepicker__input.pkt-input--fullwidth:not(.pkt-datepicker--multiple):not(.pkt-datepicker--range) {
|
|
192
214
|
width: auto;
|
|
193
215
|
flex: 1;
|
|
194
216
|
}
|
|
217
|
+
.pkt-datepicker__inputs .pkt-datepicker__input.pkt-input--fullwidth.pkt-datepicker--range {
|
|
218
|
+
width: auto;
|
|
219
|
+
flex: 0 0 auto;
|
|
220
|
+
}
|
|
195
221
|
.pkt-datepicker__inputs .pkt-input__container:has(.pkt-datepicker__input[type=date]) button.pkt-input-icon {
|
|
196
222
|
display: none;
|
|
197
223
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.pkt-datepicker,pkt-datepicker{display:block;position:relative}.pkt-datepicker__tags button.pkt-tag{margin:0 .25rem .5rem 0}.pkt-datepicker-single,.pkt-datepicker-range,.pkt-datepicker-multiple,pkt-datepicker-single,pkt-datepicker-range,pkt-datepicker-multiple{display:block}.pkt-datepicker__inputs
|
|
1
|
+
.pkt-datepicker,pkt-datepicker{display:block;position:relative}.pkt-datepicker--fullwidth{width:100%}.pkt-datepicker__tags button.pkt-tag{margin:0 .25rem .5rem 0}.pkt-datepicker-single,.pkt-datepicker-range,.pkt-datepicker-multiple,pkt-datepicker-single,pkt-datepicker-range,pkt-datepicker-multiple{display:block}.pkt-datepicker__inputs .pkt-input__container:not(:has(.pkt-input--fullwidth)):not(:has(.pkt-datepicker--multiple)){width:fit-content}.pkt-datepicker__inputs{width:100%;position:relative}.pkt-datepicker__inputs .pkt-input__container{border:2px solid var(--pkt-color-input-border-normal);background-color:var(--pkt-color-input-background-normal)}.pkt-datepicker__inputs .pkt-input__container .pkt-input,.pkt-datepicker__inputs .pkt-input__container .pkt-input-prefix,.pkt-datepicker__inputs .pkt-input__container .pkt-input-suffix,.pkt-datepicker__inputs .pkt-input__container .pkt-input-icon,.pkt-datepicker__inputs .pkt-input__container .pkt-input-separator{border:0;height:100%;min-height:2.75rem}.pkt-datepicker__inputs .pkt-input__container:hover{border-color:var(--pkt-color-input-border-active)}.pkt-datepicker__inputs .pkt-input__container:focus-within{border-color:var(--pkt-color-input-border-active)}.pkt-datepicker__inputs .pkt-input__container:has(input:disabled),.pkt-datepicker__inputs .pkt-input__container:has(input[readonly]:not(.ios-readonly-hack)){border-color:var(--pkt-color-input-border-disabled);--fg-color: var(--pkt-color-input-text-disabled)}.pkt-datepicker__inputs .pkt-input__container:has(.pkt-input--counter-error){border-color:var(--pkt-color-input-border-error)}.pkt-inputwrapper--error .pkt-datepicker__inputs .pkt-input__container{border-color:var(--pkt-color-brand-red-1000)}.pkt-inputwrapper--error .pkt-datepicker__inputs .pkt-input__container:hover,.pkt-inputwrapper--error .pkt-datepicker__inputs .pkt-input__container:focus-within{border-color:var(--pkt-color-brand-red-1000)}.pkt-inputwrapper--disabled .pkt-datepicker__inputs .pkt-input__container{border-color:var(--pkt-color-border-states-disabled)}.pkt-inputwrapper--disabled .pkt-datepicker__inputs .pkt-input__container:hover,.pkt-inputwrapper--disabled .pkt-datepicker__inputs .pkt-input__container:focus-within{border-color:var(--pkt-color-border-states-disabled);box-shadow:none;outline:none}.pkt-datepicker__inputs button.pkt-input-icon{padding-inline:.75rem}.pkt-datepicker__inputs button.pkt-input-icon:hover{background-color:inherit !important;border-color:inherit !important;--fg-color: var(--pkt-color-button-text-hover)}.pkt-datepicker__inputs .pkt-datepicker__input{padding-inline-end:0;background-image:none}.pkt-datepicker__inputs .pkt-datepicker__input:not(.pkt-datepicker--multiple){width:8.3rem}.pkt-datepicker__inputs .pkt-input-separator~.pkt-datepicker--range{padding-inline-start:.25rem}.pkt-calendar-popup{top:100%;left:0;z-index:2;margin-block-start:.5rem;padding:.5rem;position:absolute;width:max-content;background:var(--pkt-color-background-default);border:2px solid var(--pkt-color-border-gray)}.pkt-datepicker__input:not(.pkt-datepicker--multiple):not(.pkt-datepicker--range){width:8.3rem;max-width:calc(100% - 3rem)}.pkt-datepicker__input.pkt-input--fullwidth:not(.pkt-datepicker--multiple):not(.pkt-datepicker--range){flex:1}.pkt-datepicker__input.pkt-input--fullwidth.pkt-datepicker--range{flex:0 0 auto;width:8.3rem}.pkt-input__container:has(.pkt-datepicker--range.pkt-input--fullwidth) button.pkt-input-icon{margin-inline-start:auto}.pkt-datepicker__input::-webkit-inner-spin-button,.pkt-datepicker__input::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}.pkt-datepicker__input.pkt-input--fullwidth.pkt-datepicker--multiple{flex:1;min-width:0}.pkt-datepicker--small .pkt-datepicker__inputs .pkt-input,.pkt-datepicker--small .pkt-datepicker__inputs .pkt-input-prefix,.pkt-datepicker--small .pkt-datepicker__inputs .pkt-input-suffix,.pkt-datepicker--small .pkt-datepicker__inputs .pkt-input-icon,.pkt-datepicker--small .pkt-datepicker__inputs .pkt-input-separator{min-height:2.375rem}.pkt-datepicker--small .pkt-datepicker__inputs .pkt-datepicker__input,.pkt-datepicker--small .pkt-datepicker__inputs .pkt-input-prefix,.pkt-datepicker--small .pkt-datepicker__inputs .pkt-input-separator{letter-spacing:-0.2px;font-weight:300;font-size:1rem;line-height:1.5rem}.pkt-datepicker--small .pkt-datepicker__inputs button.pkt-input-icon{padding-inline:.5rem}.pkt-datepicker--small .pkt-datepicker__inputs button.pkt-input-icon pkt-icon,.pkt-datepicker--small .pkt-datepicker__inputs button.pkt-input-icon .pkt-icon,.pkt-datepicker--small .pkt-datepicker__inputs button.pkt-input-icon svg{width:1.25rem;height:1.25rem}@supports not (-moz-appearance: none){.pkt-datepicker--small .pkt-datepicker__inputs .pkt-datepicker__input:not(.pkt-datepicker--multiple):not(.pkt-input--fullwidth){width:7.3rem}.pkt-datepicker--small .pkt-datepicker__inputs .pkt-datepicker__input.pkt-input--fullwidth.pkt-datepicker--range{width:7.3rem}.pkt-datepicker--small .pkt-datepicker__inputs .pkt-datepicker__input:not(.pkt-datepicker--multiple):not(.pkt-datepicker--range){max-width:calc(100% - 2.5rem)}}.pkt-datepicker--xsmall .pkt-datepicker__inputs .pkt-input,.pkt-datepicker--xsmall .pkt-datepicker__inputs .pkt-input-prefix,.pkt-datepicker--xsmall .pkt-datepicker__inputs .pkt-input-suffix,.pkt-datepicker--xsmall .pkt-datepicker__inputs .pkt-input-icon,.pkt-datepicker--xsmall .pkt-datepicker__inputs .pkt-input-separator{min-height:2rem}.pkt-datepicker--xsmall .pkt-datepicker__inputs .pkt-datepicker__input,.pkt-datepicker--xsmall .pkt-datepicker__inputs .pkt-input-prefix,.pkt-datepicker--xsmall .pkt-datepicker__inputs .pkt-input-separator{letter-spacing:-0.2px;font-weight:300;font-size:.875rem;line-height:1.375rem;line-height:1rem}.pkt-datepicker--xsmall .pkt-datepicker__inputs button.pkt-input-icon{padding-inline:.5rem}.pkt-datepicker--xsmall .pkt-datepicker__inputs button.pkt-input-icon pkt-icon,.pkt-datepicker--xsmall .pkt-datepicker__inputs button.pkt-input-icon .pkt-icon,.pkt-datepicker--xsmall .pkt-datepicker__inputs button.pkt-input-icon svg{width:1.125rem;height:1.125rem}@supports not (-moz-appearance: none){.pkt-datepicker--xsmall .pkt-datepicker__inputs .pkt-datepicker__input:not(.pkt-datepicker--multiple):not(.pkt-input--fullwidth){width:6.5rem}.pkt-datepicker--xsmall .pkt-datepicker__inputs .pkt-datepicker__input.pkt-input--fullwidth.pkt-datepicker--range{width:6.5rem}.pkt-datepicker--xsmall .pkt-datepicker__inputs .pkt-datepicker__input:not(.pkt-datepicker--multiple):not(.pkt-datepicker--range){max-width:calc(100% - 2rem)}}@supports(-moz-appearance: none){.pkt-datepicker__inputs .pkt-datepicker__input{padding-inline-end:.5rem}.pkt-datepicker__inputs .pkt-datepicker__input:not(.pkt-datepicker--multiple){width:auto;max-width:100%}.pkt-datepicker__inputs .pkt-datepicker__input.pkt-input--fullwidth:not(.pkt-datepicker--multiple):not(.pkt-datepicker--range){width:auto;flex:1}.pkt-datepicker__inputs .pkt-datepicker__input.pkt-input--fullwidth.pkt-datepicker--range{width:auto;flex:0 0 auto}.pkt-datepicker__inputs .pkt-input__container:has(.pkt-datepicker__input[type=date]) button.pkt-input-icon{display:none}.pkt-datepicker__inputs input.pkt-datepicker__input:has(~button):not(:has(~.pkt-input-separator)):not(:has(~.pkt-input-prefix)){border-right-width:2px !important}@media screen and (max-width: 30rem){.pkt-datepicker__inputs .pkt-input__container .pkt-datepicker__input.pkt-datepicker--range{justify-self:start}}}
|