@oslokommune/punkt-css 17.0.7 → 17.0.8
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 +21 -0
- package/dist/css/components/tag.css +61 -45
- package/dist/css/components/tag.min.css +1 -1
- package/dist/css/pkt-components.css +61 -611
- package/dist/css/pkt-components.min.css +1 -1
- package/dist/css/pkt-docs.css +89 -316
- package/dist/css/pkt-docs.min.css +1 -1
- package/dist/css/pkt-elements.css +26 -72
- package/dist/css/pkt-elements.min.css +1 -1
- package/dist/css/pkt.css +89 -316
- package/dist/css/pkt.layer.css +24478 -0
- package/dist/css/pkt.layer.min.css +1 -0
- package/dist/css/pkt.min.css +1 -1
- package/dist/scss/components/_index.scss +0 -2
- package/dist/scss/components/_tag.scss +37 -0
- package/dist/scss/elements/_index.scss +0 -1
- package/dist/scss/pkt.layer.scss +8 -0
- package/package.json +2 -2
- package/dist/css/components/preview.css +0 -180
- package/dist/css/components/preview.min.css +0 -1
- package/dist/css/components/textinput.css +0 -385
- package/dist/css/components/textinput.min.css +0 -1
- package/dist/css/elements/select.css +0 -419
- package/dist/css/elements/select.min.css +0 -1
- package/dist/scss/components/_preview.scss +0 -191
- package/dist/scss/components/_textinput.scss +0 -13
- package/dist/scss/elements/_select.scss +0 -13
|
@@ -1,385 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
* Textinput component
|
|
3
|
-
*
|
|
4
|
-
* Denne blir stilsatt av .pkt-input
|
|
5
|
-
* Ikke bruk klassen .pkt-textinput
|
|
6
|
-
*/
|
|
7
|
-
/* Common styles for all inputs */
|
|
8
|
-
pkt-textinput,
|
|
9
|
-
pkt-textarea,
|
|
10
|
-
pkt-select {
|
|
11
|
-
display: block;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
.pkt-input, .pkt-textinput__input {
|
|
15
|
-
display: flex;
|
|
16
|
-
align-items: center;
|
|
17
|
-
appearance: none;
|
|
18
|
-
background-color: var(--pkt-color-input-background-normal);
|
|
19
|
-
border: 2px solid var(--pkt-color-input-border-normal);
|
|
20
|
-
border-radius: 0;
|
|
21
|
-
color: var(--pkt-color-input-text-normal);
|
|
22
|
-
margin: 0;
|
|
23
|
-
padding: 0.5rem 1rem;
|
|
24
|
-
min-height: 3rem;
|
|
25
|
-
letter-spacing: -0.2px;
|
|
26
|
-
font-weight: 300;
|
|
27
|
-
font-size: 1.125rem;
|
|
28
|
-
line-height: 1.75rem;
|
|
29
|
-
}
|
|
30
|
-
.pkt-input--small:not(:is(textarea, .pkt-timepicker__input, .pkt-datepicker__input)) {
|
|
31
|
-
min-height: 2.625rem;
|
|
32
|
-
padding: 0.375rem 1rem;
|
|
33
|
-
letter-spacing: -0.2px;
|
|
34
|
-
font-weight: 300;
|
|
35
|
-
font-size: 1rem;
|
|
36
|
-
line-height: 1.5rem;
|
|
37
|
-
}
|
|
38
|
-
.pkt-input--small:not(:is(textarea, .pkt-timepicker__input, .pkt-datepicker__input)):not(select[multiple]) {
|
|
39
|
-
height: 2.625rem;
|
|
40
|
-
}
|
|
41
|
-
.pkt-input--xsmall:not(:is(textarea, .pkt-timepicker__input, .pkt-datepicker__input)) {
|
|
42
|
-
min-height: 2.25rem;
|
|
43
|
-
padding: 0.25rem 0.75rem;
|
|
44
|
-
letter-spacing: -0.2px;
|
|
45
|
-
font-weight: 300;
|
|
46
|
-
font-size: 0.875rem;
|
|
47
|
-
line-height: 1.375rem;
|
|
48
|
-
}
|
|
49
|
-
.pkt-input--xsmall:not(:is(textarea, .pkt-timepicker__input, .pkt-datepicker__input)):not(select[multiple]) {
|
|
50
|
-
height: 2.25rem;
|
|
51
|
-
}
|
|
52
|
-
.pkt-input input.pkt-input, .pkt-textinput__input input.pkt-input, .pkt-input input.pkt-textinput__input, .pkt-textinput__input input.pkt-textinput__input,
|
|
53
|
-
.pkt-input select.pkt-input,
|
|
54
|
-
.pkt-textinput__input select.pkt-input,
|
|
55
|
-
.pkt-input select.pkt-textinput__input,
|
|
56
|
-
.pkt-textinput__input select.pkt-textinput__input {
|
|
57
|
-
display: block;
|
|
58
|
-
}
|
|
59
|
-
.pkt-input-compact.pkt-input, .pkt-input-compact.pkt-textinput__input {
|
|
60
|
-
border: 0;
|
|
61
|
-
border-bottom: 1px solid var(--pkt-color-input-border-normal);
|
|
62
|
-
padding: 0 0 0.1rem 0;
|
|
63
|
-
letter-spacing: -0.2px;
|
|
64
|
-
font-weight: 300;
|
|
65
|
-
font-size: 1rem;
|
|
66
|
-
line-height: 1.5rem;
|
|
67
|
-
}
|
|
68
|
-
.pkt-input-compact.pkt-input:is(select):not([multiple]), .pkt-input-compact.pkt-textinput__input:is(select):not([multiple]) {
|
|
69
|
-
background-position: right 0 top 50%;
|
|
70
|
-
padding-right: 2rem;
|
|
71
|
-
}
|
|
72
|
-
.pkt-input:not(:is(textarea)):not(input[size]):not(.pkt-input--fullwidth):not(.pkt-datepicker__input:not(.pkt-datepicker--multiple)), .pkt-textinput__input:not(:is(textarea)):not(input[size]):not(.pkt-input--fullwidth):not(.pkt-datepicker__input:not(.pkt-datepicker--multiple)), .pkt-input__container:not(:is(:has(.pkt-datepicker__input:not(.pkt-datepicker--multiple)))):not(:is(:has(textarea[cols]))):not(:is(:has(input[size]))):not(:is(:has(.pkt-input--fullwidth))):not(:is(:has(.pkt-timepicker__input))) {
|
|
73
|
-
width: min(31rem, 100%);
|
|
74
|
-
}
|
|
75
|
-
.pkt-input__container:is(:has(.pkt-datepicker__input:not(.pkt-datepicker--multiple))):not(:is(:has(.pkt-input--fullwidth))) {
|
|
76
|
-
width: fit-content;
|
|
77
|
-
}
|
|
78
|
-
.pkt-input--fullwidth, *:has(.pkt-input--fullwidth) ~ .pkt-input__counter, .pkt-input--fullwidth + .pkt-input__counter {
|
|
79
|
-
width: 100%;
|
|
80
|
-
}
|
|
81
|
-
[fullwidth] .pkt-input__counter {
|
|
82
|
-
width: 100%;
|
|
83
|
-
}
|
|
84
|
-
.pkt-input:is(textarea:not([rows])), .pkt-textinput__input:is(textarea:not([rows])) {
|
|
85
|
-
min-height: 9.25rem;
|
|
86
|
-
}
|
|
87
|
-
.pkt-input:is(select), .pkt-textinput__input:is(select) {
|
|
88
|
-
appearance: none;
|
|
89
|
-
-moz-appearance: none;
|
|
90
|
-
-webkit-appearance: none;
|
|
91
|
-
padding-right: 3rem;
|
|
92
|
-
}
|
|
93
|
-
.pkt-input:is(select):not([multiple]), .pkt-textinput__input:is(select):not([multiple]) {
|
|
94
|
-
--svg: url(https://punkt-cdn.oslo.kommune.no/17.0/icons/chevron-thin-down.svg);
|
|
95
|
-
background-image: var(--svg);
|
|
96
|
-
background-repeat: no-repeat;
|
|
97
|
-
background-position: right 0.7rem top 50%;
|
|
98
|
-
background-size: 1.5rem auto, 100%;
|
|
99
|
-
}
|
|
100
|
-
.pkt-input:is(select):not([multiple]).pkt-input--small, .pkt-textinput__input:is(select):not([multiple]).pkt-input--small {
|
|
101
|
-
background-size: 1.25rem auto, 100%;
|
|
102
|
-
background-position: right 0.5rem top 50%;
|
|
103
|
-
padding: 0.375rem 2.5rem 0.375rem 1rem;
|
|
104
|
-
}
|
|
105
|
-
.pkt-input:is(select):not([multiple]).pkt-input--xsmall, .pkt-textinput__input:is(select):not([multiple]).pkt-input--xsmall {
|
|
106
|
-
background-size: 1.125rem auto, 100%;
|
|
107
|
-
background-position: right 0.5rem top 50%;
|
|
108
|
-
padding: 0.25rem 2.25rem 0.25rem 0.75rem;
|
|
109
|
-
}
|
|
110
|
-
.pkt-input:is(select) option, .pkt-textinput__input:is(select) option {
|
|
111
|
-
background-color: var(--pkt-color-input-background-normal);
|
|
112
|
-
color: var(--pkt-color-input-text-normal);
|
|
113
|
-
font-weight: normal;
|
|
114
|
-
}
|
|
115
|
-
.pkt-input::placeholder, .pkt-textinput__input::placeholder {
|
|
116
|
-
color: var(--pkt-color-text-placeholder);
|
|
117
|
-
opacity: 1;
|
|
118
|
-
}
|
|
119
|
-
.pkt-input:hover, .pkt-textinput__input:hover, .pkt-input.pkt-input--hover, .pkt-input--hover.pkt-textinput__input {
|
|
120
|
-
border-color: var(--pkt-color-input-border-hover);
|
|
121
|
-
}
|
|
122
|
-
.pkt-input:focus, .pkt-textinput__input:focus {
|
|
123
|
-
outline: none;
|
|
124
|
-
border-color: var(--pkt-color-input-border-active);
|
|
125
|
-
}
|
|
126
|
-
.pkt-input:focus-visible, .pkt-textinput__input:focus-visible, .pkt-input.pkt-input__textinput--focus, .pkt-input__textinput--focus.pkt-textinput__input {
|
|
127
|
-
outline: 2px solid var(--pkt-color-input-border-active);
|
|
128
|
-
outline-offset: 0;
|
|
129
|
-
border-color: var(--pkt-color-input-border-active);
|
|
130
|
-
}
|
|
131
|
-
:is(.pkt-inputwrapper, .pkt-searchinput):not([data-navtype=pointer]) .pkt-input:focus-visible, :is(.pkt-inputwrapper, .pkt-searchinput):not([data-navtype=pointer]) .pkt-textinput__input:focus-visible {
|
|
132
|
-
outline: 4px solid var(--pkt-color-border-states-focus);
|
|
133
|
-
outline-offset: 0;
|
|
134
|
-
}
|
|
135
|
-
.pkt-input:disabled, .pkt-textinput__input:disabled, .pkt-input:disabled::placeholder, .pkt-textinput__input:disabled::placeholder, .pkt-input[readonly]:not(.ios-readonly-hack), [readonly].pkt-textinput__input:not(.ios-readonly-hack) {
|
|
136
|
-
opacity: 1;
|
|
137
|
-
background-color: var(--pkt-color-surface-default-gray);
|
|
138
|
-
border-color: var(--pkt-color-input-border-disabled);
|
|
139
|
-
color: var(--pkt-color-input-text-disabled);
|
|
140
|
-
cursor: inherit;
|
|
141
|
-
}
|
|
142
|
-
.pkt-input:disabled:active, .pkt-textinput__input:disabled:active {
|
|
143
|
-
border: 2px solid var(--pkt-color-input-border-disabled);
|
|
144
|
-
}
|
|
145
|
-
.pkt-input-prefix, .pkt-input-suffix, .pkt-input-icon, .pkt-input-separator {
|
|
146
|
-
letter-spacing: -0.2px;
|
|
147
|
-
font-weight: 300;
|
|
148
|
-
font-size: 1.125rem;
|
|
149
|
-
line-height: 1.75rem;
|
|
150
|
-
}
|
|
151
|
-
.pkt-input-prefix, .pkt-input-suffix, .pkt-input-icon, .pkt-input-separator {
|
|
152
|
-
display: flex;
|
|
153
|
-
align-items: center;
|
|
154
|
-
width: auto;
|
|
155
|
-
height: 3rem;
|
|
156
|
-
border: 2px solid var(--pkt-color-input-border-normal);
|
|
157
|
-
flex-shrink: 0;
|
|
158
|
-
color: var(--pkt-color-brand-dark-blue-1000);
|
|
159
|
-
background-color: var(--pkt-color-input-background-normal);
|
|
160
|
-
}
|
|
161
|
-
.pkt-input-prefix {
|
|
162
|
-
padding: 0.5rem 0rem 0.5rem 1rem;
|
|
163
|
-
}
|
|
164
|
-
.pkt-input-prefix::after {
|
|
165
|
-
content: "";
|
|
166
|
-
width: 1px;
|
|
167
|
-
margin-left: 0.5rem;
|
|
168
|
-
height: 100%;
|
|
169
|
-
background-color: var(--pkt-color-brand-dark-blue-1000);
|
|
170
|
-
}
|
|
171
|
-
.pkt-input-suffix {
|
|
172
|
-
padding: 0.5rem 1rem 0.5rem 0rem;
|
|
173
|
-
}
|
|
174
|
-
.pkt-input-suffix svg {
|
|
175
|
-
width: 1.5rem;
|
|
176
|
-
height: 1.5rem;
|
|
177
|
-
margin-left: 0.5rem;
|
|
178
|
-
}
|
|
179
|
-
.pkt-input-suffix::before {
|
|
180
|
-
content: "";
|
|
181
|
-
width: 1px;
|
|
182
|
-
margin-right: 0.5rem;
|
|
183
|
-
height: 1.5rem;
|
|
184
|
-
background-color: var(--pkt-color-brand-dark-blue-1000);
|
|
185
|
-
}
|
|
186
|
-
.pkt-input-icon {
|
|
187
|
-
padding: 0.5rem 1rem;
|
|
188
|
-
align-self: stretch;
|
|
189
|
-
}
|
|
190
|
-
.pkt-input-icon svg {
|
|
191
|
-
width: 1.5rem;
|
|
192
|
-
height: 1.5rem;
|
|
193
|
-
}
|
|
194
|
-
.pkt-input-icon:not(button) svg {
|
|
195
|
-
margin-left: 0.5rem;
|
|
196
|
-
}
|
|
197
|
-
.pkt-input-separator {
|
|
198
|
-
padding: 0.5rem 0;
|
|
199
|
-
}
|
|
200
|
-
.pkt-input__container--small {
|
|
201
|
-
align-items: stretch;
|
|
202
|
-
}
|
|
203
|
-
.pkt-input__container--small .pkt-input-prefix,
|
|
204
|
-
.pkt-input__container--small .pkt-input-suffix,
|
|
205
|
-
.pkt-input__container--small .pkt-input-icon {
|
|
206
|
-
height: auto;
|
|
207
|
-
min-height: 2.625rem;
|
|
208
|
-
letter-spacing: -0.2px;
|
|
209
|
-
font-weight: 300;
|
|
210
|
-
font-size: 1rem;
|
|
211
|
-
line-height: 1.5rem;
|
|
212
|
-
}
|
|
213
|
-
.pkt-input__container--small .pkt-input-prefix {
|
|
214
|
-
padding: 0.375rem 0 0.375rem 1rem;
|
|
215
|
-
}
|
|
216
|
-
.pkt-input__container--small .pkt-input-suffix {
|
|
217
|
-
padding: 0.375rem 1rem 0.375rem 0;
|
|
218
|
-
}
|
|
219
|
-
.pkt-input__container--small input.pkt-input, .pkt-input__container--small input.pkt-textinput__input,
|
|
220
|
-
.pkt-input__container--small select.pkt-input,
|
|
221
|
-
.pkt-input__container--small select.pkt-textinput__input {
|
|
222
|
-
height: auto;
|
|
223
|
-
min-height: 2.625rem;
|
|
224
|
-
flex: 1 1 auto;
|
|
225
|
-
min-width: 0;
|
|
226
|
-
padding: 0.375rem 1rem;
|
|
227
|
-
letter-spacing: -0.2px;
|
|
228
|
-
font-weight: 300;
|
|
229
|
-
font-size: 1rem;
|
|
230
|
-
line-height: 1.5rem;
|
|
231
|
-
}
|
|
232
|
-
.pkt-input__container--small .pkt-input-icon svg,
|
|
233
|
-
.pkt-input__container--small .pkt-input-suffix svg {
|
|
234
|
-
width: 1.25rem;
|
|
235
|
-
height: 1.25rem;
|
|
236
|
-
}
|
|
237
|
-
.pkt-input__container--small .pkt-input-suffix::before {
|
|
238
|
-
height: 1.25rem;
|
|
239
|
-
}
|
|
240
|
-
.pkt-input__container--xsmall {
|
|
241
|
-
align-items: stretch;
|
|
242
|
-
}
|
|
243
|
-
.pkt-input__container--xsmall .pkt-input-prefix,
|
|
244
|
-
.pkt-input__container--xsmall .pkt-input-suffix,
|
|
245
|
-
.pkt-input__container--xsmall .pkt-input-icon {
|
|
246
|
-
height: auto;
|
|
247
|
-
min-height: 2.25rem;
|
|
248
|
-
letter-spacing: -0.2px;
|
|
249
|
-
font-weight: 300;
|
|
250
|
-
font-size: 0.875rem;
|
|
251
|
-
line-height: 1.375rem;
|
|
252
|
-
}
|
|
253
|
-
.pkt-input__container--xsmall .pkt-input-prefix {
|
|
254
|
-
padding: 0.25rem 0 0.25rem 0.75rem;
|
|
255
|
-
}
|
|
256
|
-
.pkt-input__container--xsmall .pkt-input-suffix {
|
|
257
|
-
padding: 0.25rem 0.75rem 0.25rem 0;
|
|
258
|
-
}
|
|
259
|
-
.pkt-input__container--xsmall input.pkt-input, .pkt-input__container--xsmall input.pkt-textinput__input,
|
|
260
|
-
.pkt-input__container--xsmall select.pkt-input,
|
|
261
|
-
.pkt-input__container--xsmall select.pkt-textinput__input {
|
|
262
|
-
height: auto;
|
|
263
|
-
min-height: 2.25rem;
|
|
264
|
-
flex: 1 1 auto;
|
|
265
|
-
min-width: 0;
|
|
266
|
-
padding: 0.25rem 0.75rem;
|
|
267
|
-
letter-spacing: -0.2px;
|
|
268
|
-
font-weight: 300;
|
|
269
|
-
font-size: 0.875rem;
|
|
270
|
-
line-height: 1.375rem;
|
|
271
|
-
}
|
|
272
|
-
.pkt-input__container--xsmall .pkt-input-icon {
|
|
273
|
-
padding: 0.25rem 0.5rem;
|
|
274
|
-
}
|
|
275
|
-
.pkt-input__container--xsmall .pkt-input-icon svg,
|
|
276
|
-
.pkt-input__container--xsmall .pkt-input-suffix svg {
|
|
277
|
-
width: 1.125rem;
|
|
278
|
-
height: 1.125rem;
|
|
279
|
-
}
|
|
280
|
-
.pkt-input__container--xsmall .pkt-input-suffix::before {
|
|
281
|
-
height: 1.125rem;
|
|
282
|
-
}
|
|
283
|
-
.pkt-input--counter-error, .pkt-input--counter-error:focus {
|
|
284
|
-
border-color: var(--pkt-color-input-border-error);
|
|
285
|
-
background-color: var(--pkt-color-surface-default-faded-red);
|
|
286
|
-
}
|
|
287
|
-
.pkt-input--counter-error:focus {
|
|
288
|
-
box-shadow: 0 0 0 2px var(--pkt-color-input-border-error);
|
|
289
|
-
}
|
|
290
|
-
.pkt-input__container {
|
|
291
|
-
display: flex;
|
|
292
|
-
align-items: center;
|
|
293
|
-
align-self: stretch;
|
|
294
|
-
}
|
|
295
|
-
.pkt-input__container:is(:has(input[size])), .pkt-input__container:is(:has(textarea[cols])) {
|
|
296
|
-
align-self: flex-start;
|
|
297
|
-
}
|
|
298
|
-
.pkt-input__container :first-child:not(:only-child) {
|
|
299
|
-
border-right-width: 0;
|
|
300
|
-
}
|
|
301
|
-
.pkt-input__container :last-child:not(:only-child) {
|
|
302
|
-
border-left-width: 0;
|
|
303
|
-
}
|
|
304
|
-
.pkt-input__container :not(:first-child):not(:last-child) {
|
|
305
|
-
border-left-width: 0;
|
|
306
|
-
border-right-width: 0;
|
|
307
|
-
}
|
|
308
|
-
.pkt-input__container p {
|
|
309
|
-
margin: 0;
|
|
310
|
-
}
|
|
311
|
-
.pkt-input__container input:focus {
|
|
312
|
-
outline: none;
|
|
313
|
-
box-shadow: none;
|
|
314
|
-
}
|
|
315
|
-
.pkt-input__container:hover .pkt-input:not(:disabled), .pkt-input__container:hover .pkt-textinput__input:not(:disabled), .pkt-input__container:hover .pkt-input-prefix:not(:disabled), .pkt-input__container:hover .pkt-input-suffix:not(:disabled), .pkt-input__container:hover .pkt-input-icon:not(:disabled) {
|
|
316
|
-
border-color: var(--pkt-color-input-border-active);
|
|
317
|
-
color: var(--pkt-color-input-text-hover);
|
|
318
|
-
--fg-color: var(--pkt-color-input-text-hover);
|
|
319
|
-
}
|
|
320
|
-
.pkt-input__container:focus-within {
|
|
321
|
-
outline: 2px solid var(--pkt-color-input-border-active);
|
|
322
|
-
}
|
|
323
|
-
.pkt-input__container:focus-within .pkt-input, .pkt-input__container:focus-within .pkt-textinput__input,
|
|
324
|
-
.pkt-input__container:focus-within .pkt-input-prefix,
|
|
325
|
-
.pkt-input__container:focus-within .pkt-input-suffix,
|
|
326
|
-
.pkt-input__container:focus-within .pkt-input-icon {
|
|
327
|
-
border-color: var(--pkt-color-input-border-active);
|
|
328
|
-
}
|
|
329
|
-
:is(.pkt-inputwrapper, .pkt-searchinput):not([data-navtype=pointer]) .pkt-input__container:focus-within {
|
|
330
|
-
outline: 4px solid var(--pkt-color-border-states-focus);
|
|
331
|
-
}
|
|
332
|
-
:is(.pkt-inputwrapper, .pkt-searchinput):not([data-navtype=pointer]) .pkt-input__container:focus-within .pkt-input:focus-visible, :is(.pkt-inputwrapper, .pkt-searchinput):not([data-navtype=pointer]) .pkt-input__container:focus-within .pkt-textinput__input:focus-visible {
|
|
333
|
-
outline: none;
|
|
334
|
-
}
|
|
335
|
-
.pkt-input__counter {
|
|
336
|
-
letter-spacing: -0.2px;
|
|
337
|
-
font-weight: 300;
|
|
338
|
-
font-size: 0.875rem;
|
|
339
|
-
line-height: 1.375rem;
|
|
340
|
-
}
|
|
341
|
-
.pkt-input__counter {
|
|
342
|
-
width: min(100%, 31rem);
|
|
343
|
-
text-align: right;
|
|
344
|
-
}
|
|
345
|
-
.pkt-input__counter--error {
|
|
346
|
-
letter-spacing: -0.2px;
|
|
347
|
-
font-weight: 500;
|
|
348
|
-
font-size: 0.875rem;
|
|
349
|
-
line-height: 1.375rem;
|
|
350
|
-
}
|
|
351
|
-
.pkt-input__counter--error {
|
|
352
|
-
color: var(--pkt-color-input-text-error);
|
|
353
|
-
}
|
|
354
|
-
|
|
355
|
-
@media screen and (max-width: 30rem) {
|
|
356
|
-
.pkt-input__range-inputs {
|
|
357
|
-
max-width: 100%;
|
|
358
|
-
}
|
|
359
|
-
.pkt-input__range-inputs .pkt-input__container {
|
|
360
|
-
border: 2px solid var(--pkt-color-input-border-normal);
|
|
361
|
-
display: grid;
|
|
362
|
-
grid-template-rows: auto auto;
|
|
363
|
-
grid-template-columns: auto 3rem;
|
|
364
|
-
gap: 0;
|
|
365
|
-
}
|
|
366
|
-
.pkt-input__range-inputs .pkt-input__container .pkt-input-prefix,
|
|
367
|
-
.pkt-input__range-inputs .pkt-input__container .pkt-input-suffix,
|
|
368
|
-
.pkt-input__range-inputs .pkt-input__container .pkt-input-icon,
|
|
369
|
-
.pkt-input__range-inputs .pkt-input__container .pkt-input,
|
|
370
|
-
.pkt-input__range-inputs .pkt-input__container .pkt-textinput__input {
|
|
371
|
-
border: 0;
|
|
372
|
-
}
|
|
373
|
-
.pkt-input__range-inputs .pkt-input__container .pkt-input-separator {
|
|
374
|
-
margin: 0 auto;
|
|
375
|
-
}
|
|
376
|
-
.pkt-input__range-inputs .pkt-input__container .pkt-input.pkt-datepicker__input.pkt-datepicker--range, .pkt-input__range-inputs .pkt-input__container .pkt-datepicker__input.pkt-datepicker--range.pkt-textinput__input {
|
|
377
|
-
padding-left: 1rem;
|
|
378
|
-
}
|
|
379
|
-
.pkt-input__range-inputs .pkt-input__container:has(> :first-child.pkt-input-prefix) > :nth-child(2) {
|
|
380
|
-
grid-column-start: span 2;
|
|
381
|
-
}
|
|
382
|
-
.pkt-input__range-inputs .pkt-input__container:has(> :first-child.pkt-input-prefix) {
|
|
383
|
-
grid-template-columns: min-content auto 3rem;
|
|
384
|
-
}
|
|
385
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
pkt-textinput,pkt-textarea,pkt-select{display:block}.pkt-input,.pkt-textinput__input{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;min-height:3rem;letter-spacing:-0.2px;font-weight:300;font-size:1.125rem;line-height:1.75rem}.pkt-input--small:not(:is(textarea,.pkt-timepicker__input,.pkt-datepicker__input)){min-height:2.625rem;padding:.375rem 1rem;letter-spacing:-0.2px;font-weight:300;font-size:1rem;line-height:1.5rem}.pkt-input--small:not(:is(textarea,.pkt-timepicker__input,.pkt-datepicker__input)):not(select[multiple]){height:2.625rem}.pkt-input--xsmall:not(:is(textarea,.pkt-timepicker__input,.pkt-datepicker__input)){min-height:2.25rem;padding:.25rem .75rem;letter-spacing:-0.2px;font-weight:300;font-size:.875rem;line-height:1.375rem}.pkt-input--xsmall:not(:is(textarea,.pkt-timepicker__input,.pkt-datepicker__input)):not(select[multiple]){height:2.25rem}.pkt-input input.pkt-input,.pkt-textinput__input input.pkt-input,.pkt-input input.pkt-textinput__input,.pkt-textinput__input input.pkt-textinput__input,.pkt-input select.pkt-input,.pkt-textinput__input select.pkt-input,.pkt-input select.pkt-textinput__input,.pkt-textinput__input select.pkt-textinput__input{display:block}.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;letter-spacing:-0.2px;font-weight:300;font-size:1rem;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(:is(textarea)):not(input[size]):not(.pkt-input--fullwidth):not(.pkt-datepicker__input:not(.pkt-datepicker--multiple)),.pkt-textinput__input:not(:is(textarea)):not(input[size]):not(.pkt-input--fullwidth):not(.pkt-datepicker__input:not(.pkt-datepicker--multiple)),.pkt-input__container:not(:is(:has(.pkt-datepicker__input:not(.pkt-datepicker--multiple)))):not(:is(:has(textarea[cols]))):not(:is(:has(input[size]))):not(:is(:has(.pkt-input--fullwidth))):not(:is(:has(.pkt-timepicker__input))){width:min(31rem,100%)}.pkt-input__container:is(:has(.pkt-datepicker__input:not(.pkt-datepicker--multiple))):not(:is(:has(.pkt-input--fullwidth))){width:fit-content}.pkt-input--fullwidth,*:has(.pkt-input--fullwidth)~.pkt-input__counter,.pkt-input--fullwidth+.pkt-input__counter{width:100%}[fullwidth] .pkt-input__counter{width:100%}.pkt-input:is(textarea:not([rows])),.pkt-textinput__input:is(textarea:not([rows])){min-height:9.25rem}.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/17.0/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):not([multiple]).pkt-input--small,.pkt-textinput__input:is(select):not([multiple]).pkt-input--small{background-size:1.25rem auto,100%;background-position:right .5rem top 50%;padding:.375rem 2.5rem .375rem 1rem}.pkt-input:is(select):not([multiple]).pkt-input--xsmall,.pkt-textinput__input:is(select):not([multiple]).pkt-input--xsmall{background-size:1.125rem auto,100%;background-position:right .5rem top 50%;padding:.25rem 2.25rem .25rem .75rem}.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,.pkt-textinput__input:focus{outline:none;border-color:var(--pkt-color-input-border-active)}.pkt-input:focus-visible,.pkt-textinput__input:focus-visible,.pkt-input.pkt-input__textinput--focus,.pkt-input__textinput--focus.pkt-textinput__input{outline:2px solid var(--pkt-color-input-border-active);outline-offset:0;border-color:var(--pkt-color-input-border-active)}:is(.pkt-inputwrapper,.pkt-searchinput):not([data-navtype=pointer]) .pkt-input:focus-visible,:is(.pkt-inputwrapper,.pkt-searchinput):not([data-navtype=pointer]) .pkt-textinput__input:focus-visible{outline:4px solid var(--pkt-color-border-states-focus);outline-offset:0}.pkt-input:disabled,.pkt-textinput__input:disabled,.pkt-input:disabled::placeholder,.pkt-textinput__input:disabled::placeholder,.pkt-input[readonly]:not(.ios-readonly-hack),[readonly].pkt-textinput__input:not(.ios-readonly-hack){opacity:1;background-color:var(--pkt-color-surface-default-gray);border-color:var(--pkt-color-input-border-disabled);color:var(--pkt-color-input-text-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,.pkt-input-separator{letter-spacing:-0.2px;font-weight:300;font-size:1.125rem;line-height:1.75rem}.pkt-input-prefix,.pkt-input-suffix,.pkt-input-icon,.pkt-input-separator{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}.pkt-input-icon:not(button) svg{margin-left:.5rem}.pkt-input-separator{padding:.5rem 0}.pkt-input__container--small{align-items:stretch}.pkt-input__container--small .pkt-input-prefix,.pkt-input__container--small .pkt-input-suffix,.pkt-input__container--small .pkt-input-icon{height:auto;min-height:2.625rem;letter-spacing:-0.2px;font-weight:300;font-size:1rem;line-height:1.5rem}.pkt-input__container--small .pkt-input-prefix{padding:.375rem 0 .375rem 1rem}.pkt-input__container--small .pkt-input-suffix{padding:.375rem 1rem .375rem 0}.pkt-input__container--small input.pkt-input,.pkt-input__container--small input.pkt-textinput__input,.pkt-input__container--small select.pkt-input,.pkt-input__container--small select.pkt-textinput__input{height:auto;min-height:2.625rem;flex:1 1 auto;min-width:0;padding:.375rem 1rem;letter-spacing:-0.2px;font-weight:300;font-size:1rem;line-height:1.5rem}.pkt-input__container--small .pkt-input-icon svg,.pkt-input__container--small .pkt-input-suffix svg{width:1.25rem;height:1.25rem}.pkt-input__container--small .pkt-input-suffix::before{height:1.25rem}.pkt-input__container--xsmall{align-items:stretch}.pkt-input__container--xsmall .pkt-input-prefix,.pkt-input__container--xsmall .pkt-input-suffix,.pkt-input__container--xsmall .pkt-input-icon{height:auto;min-height:2.25rem;letter-spacing:-0.2px;font-weight:300;font-size:.875rem;line-height:1.375rem}.pkt-input__container--xsmall .pkt-input-prefix{padding:.25rem 0 .25rem .75rem}.pkt-input__container--xsmall .pkt-input-suffix{padding:.25rem .75rem .25rem 0}.pkt-input__container--xsmall input.pkt-input,.pkt-input__container--xsmall input.pkt-textinput__input,.pkt-input__container--xsmall select.pkt-input,.pkt-input__container--xsmall select.pkt-textinput__input{height:auto;min-height:2.25rem;flex:1 1 auto;min-width:0;padding:.25rem .75rem;letter-spacing:-0.2px;font-weight:300;font-size:.875rem;line-height:1.375rem}.pkt-input__container--xsmall .pkt-input-icon{padding:.25rem .5rem}.pkt-input__container--xsmall .pkt-input-icon svg,.pkt-input__container--xsmall .pkt-input-suffix svg{width:1.125rem;height:1.125rem}.pkt-input__container--xsmall .pkt-input-suffix::before{height:1.125rem}.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-width:0}.pkt-input__container :last-child:not(:only-child){border-left-width:0}.pkt-input__container :not(:first-child):not(:last-child){border-left-width:0;border-right-width:0}.pkt-input__container p{margin:0}.pkt-input__container input:focus{outline:none;box-shadow:none}.pkt-input__container:hover .pkt-input:not(:disabled),.pkt-input__container:hover .pkt-textinput__input:not(:disabled),.pkt-input__container:hover .pkt-input-prefix:not(:disabled),.pkt-input__container:hover .pkt-input-suffix:not(:disabled),.pkt-input__container:hover .pkt-input-icon:not(:disabled){border-color:var(--pkt-color-input-border-active);color:var(--pkt-color-input-text-hover);--fg-color: var(--pkt-color-input-text-hover)}.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)}:is(.pkt-inputwrapper,.pkt-searchinput):not([data-navtype=pointer]) .pkt-input__container:focus-within{outline:4px solid var(--pkt-color-border-states-focus)}:is(.pkt-inputwrapper,.pkt-searchinput):not([data-navtype=pointer]) .pkt-input__container:focus-within .pkt-input:focus-visible,:is(.pkt-inputwrapper,.pkt-searchinput):not([data-navtype=pointer]) .pkt-input__container:focus-within .pkt-textinput__input:focus-visible{outline:none}.pkt-input__counter{letter-spacing:-0.2px;font-weight:300;font-size:.875rem;line-height:1.375rem}.pkt-input__counter{width:min(100%,31rem);text-align:right}.pkt-input__counter--error{letter-spacing:-0.2px;font-weight:500;font-size:.875rem;line-height:1.375rem}.pkt-input__counter--error{color:var(--pkt-color-input-text-error)}@media screen and (max-width: 30rem){.pkt-input__range-inputs{max-width:100%}.pkt-input__range-inputs .pkt-input__container{border:2px solid var(--pkt-color-input-border-normal);display:grid;grid-template-rows:auto auto;grid-template-columns:auto 3rem;gap:0}.pkt-input__range-inputs .pkt-input__container .pkt-input-prefix,.pkt-input__range-inputs .pkt-input__container .pkt-input-suffix,.pkt-input__range-inputs .pkt-input__container .pkt-input-icon,.pkt-input__range-inputs .pkt-input__container .pkt-input,.pkt-input__range-inputs .pkt-input__container .pkt-textinput__input{border:0}.pkt-input__range-inputs .pkt-input__container .pkt-input-separator{margin:0 auto}.pkt-input__range-inputs .pkt-input__container .pkt-input.pkt-datepicker__input.pkt-datepicker--range,.pkt-input__range-inputs .pkt-input__container .pkt-datepicker__input.pkt-datepicker--range.pkt-textinput__input{padding-left:1rem}.pkt-input__range-inputs .pkt-input__container:has(>:first-child.pkt-input-prefix)>:nth-child(2){grid-column-start:span 2}.pkt-input__range-inputs .pkt-input__container:has(>:first-child.pkt-input-prefix){grid-template-columns:min-content auto 3rem}}
|