@oslokommune/punkt-css 13.16.0 → 13.17.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 +18 -0
- package/dist/css/components/textinput.css +1 -39
- package/dist/css/components/textinput.min.css +1 -1
- package/dist/css/elements/checkbox-radio.css +8 -35
- package/dist/css/elements/checkbox-radio.min.css +1 -1
- package/dist/css/elements/input.css +1 -39
- package/dist/css/elements/input.min.css +1 -1
- package/dist/css/elements/select.css +1 -41
- package/dist/css/elements/select.min.css +1 -1
- package/dist/css/pkt-base.css +177 -1
- package/dist/css/pkt-base.min.css +1 -1
- package/dist/css/pkt-components.css +1 -39
- package/dist/css/pkt-components.min.css +1 -1
- package/dist/css/pkt-docs.css +186 -77
- package/dist/css/pkt-docs.min.css +1 -1
- package/dist/css/pkt-elements.css +9 -76
- package/dist/css/pkt-elements.min.css +1 -1
- package/dist/css/pkt.css +186 -77
- package/dist/css/pkt.min.css +1 -1
- package/dist/scss/abstracts/variables/_colors.scss +21 -1
- package/dist/scss/abstracts/variables/_index.scss +1 -1
- package/dist/scss/base/_colors.scss +20 -0
- package/dist/scss/elements/_checkbox-radio.scss +6 -40
- package/dist/scss/elements/_input.scss +0 -39
- package/package.json +2 -2
package/dist/css/pkt.css
CHANGED
|
@@ -380,6 +380,22 @@ input[type=search]::-webkit-search-decoration {
|
|
|
380
380
|
--pkt-color-text-action-active: #1f42aa;
|
|
381
381
|
--pkt-color-text-action-hover: #1f42aa;
|
|
382
382
|
--pkt-color-text-action-normal: #2a2859;
|
|
383
|
+
--pkt-color-input-background-normal: #ffffff;
|
|
384
|
+
--pkt-color-input-border-active: #1f42aa;
|
|
385
|
+
--pkt-color-input-border-disabled: #b3b3b3;
|
|
386
|
+
--pkt-color-input-border-error: #ff8274;
|
|
387
|
+
--pkt-color-input-border-hover: #1f42aa;
|
|
388
|
+
--pkt-color-input-border-normal: #2a2859;
|
|
389
|
+
--pkt-color-input-text-active: #1f42aa;
|
|
390
|
+
--pkt-color-input-text-disabled: #808080;
|
|
391
|
+
--pkt-color-input-text-hover: #1f42aa;
|
|
392
|
+
--pkt-color-input-text-normal: #2a2859;
|
|
393
|
+
--pkt-color-input-text-error: #ff8274;
|
|
394
|
+
--pkt-color-input-text-open: #ffffff;
|
|
395
|
+
--pkt-color-input-check-background: #ffffff;
|
|
396
|
+
--pkt-color-input-check-border: #2a2859;
|
|
397
|
+
--pkt-color-input-check-text-active: #1f42aa;
|
|
398
|
+
--pkt-color-input-check-text-hover: #1f42aa;
|
|
383
399
|
--color-blue: #6fe9ff;
|
|
384
400
|
--color-blue-light: #b3f5ff;
|
|
385
401
|
--color-blue-dark: #2a2859;
|
|
@@ -1188,6 +1204,150 @@ input[type=search]::-webkit-search-decoration {
|
|
|
1188
1204
|
:root .pkt-color-border-text-action-normal {
|
|
1189
1205
|
border-color: var(--pkt-color-text-action-normal) !important;
|
|
1190
1206
|
}
|
|
1207
|
+
:root .pkt-color-bg-input-background-normal {
|
|
1208
|
+
background-color: var(--pkt-color-input-background-normal) !important;
|
|
1209
|
+
}
|
|
1210
|
+
:root .pkt-color-txt-input-background-normal {
|
|
1211
|
+
color: var(--pkt-color-input-background-normal) !important;
|
|
1212
|
+
}
|
|
1213
|
+
:root .pkt-color-border-input-background-normal {
|
|
1214
|
+
border-color: var(--pkt-color-input-background-normal) !important;
|
|
1215
|
+
}
|
|
1216
|
+
:root .pkt-color-bg-input-border-active {
|
|
1217
|
+
background-color: var(--pkt-color-input-border-active) !important;
|
|
1218
|
+
}
|
|
1219
|
+
:root .pkt-color-txt-input-border-active {
|
|
1220
|
+
color: var(--pkt-color-input-border-active) !important;
|
|
1221
|
+
}
|
|
1222
|
+
:root .pkt-color-border-input-border-active {
|
|
1223
|
+
border-color: var(--pkt-color-input-border-active) !important;
|
|
1224
|
+
}
|
|
1225
|
+
:root .pkt-color-bg-input-border-disabled {
|
|
1226
|
+
background-color: var(--pkt-color-input-border-disabled) !important;
|
|
1227
|
+
}
|
|
1228
|
+
:root .pkt-color-txt-input-border-disabled {
|
|
1229
|
+
color: var(--pkt-color-input-border-disabled) !important;
|
|
1230
|
+
}
|
|
1231
|
+
:root .pkt-color-border-input-border-disabled {
|
|
1232
|
+
border-color: var(--pkt-color-input-border-disabled) !important;
|
|
1233
|
+
}
|
|
1234
|
+
:root .pkt-color-bg-input-border-error {
|
|
1235
|
+
background-color: var(--pkt-color-input-border-error) !important;
|
|
1236
|
+
}
|
|
1237
|
+
:root .pkt-color-txt-input-border-error {
|
|
1238
|
+
color: var(--pkt-color-input-border-error) !important;
|
|
1239
|
+
}
|
|
1240
|
+
:root .pkt-color-border-input-border-error {
|
|
1241
|
+
border-color: var(--pkt-color-input-border-error) !important;
|
|
1242
|
+
}
|
|
1243
|
+
:root .pkt-color-bg-input-border-hover {
|
|
1244
|
+
background-color: var(--pkt-color-input-border-hover) !important;
|
|
1245
|
+
}
|
|
1246
|
+
:root .pkt-color-txt-input-border-hover {
|
|
1247
|
+
color: var(--pkt-color-input-border-hover) !important;
|
|
1248
|
+
}
|
|
1249
|
+
:root .pkt-color-border-input-border-hover {
|
|
1250
|
+
border-color: var(--pkt-color-input-border-hover) !important;
|
|
1251
|
+
}
|
|
1252
|
+
:root .pkt-color-bg-input-border-normal {
|
|
1253
|
+
background-color: var(--pkt-color-input-border-normal) !important;
|
|
1254
|
+
}
|
|
1255
|
+
:root .pkt-color-txt-input-border-normal {
|
|
1256
|
+
color: var(--pkt-color-input-border-normal) !important;
|
|
1257
|
+
}
|
|
1258
|
+
:root .pkt-color-border-input-border-normal {
|
|
1259
|
+
border-color: var(--pkt-color-input-border-normal) !important;
|
|
1260
|
+
}
|
|
1261
|
+
:root .pkt-color-bg-input-text-active {
|
|
1262
|
+
background-color: var(--pkt-color-input-text-active) !important;
|
|
1263
|
+
}
|
|
1264
|
+
:root .pkt-color-txt-input-text-active {
|
|
1265
|
+
color: var(--pkt-color-input-text-active) !important;
|
|
1266
|
+
}
|
|
1267
|
+
:root .pkt-color-border-input-text-active {
|
|
1268
|
+
border-color: var(--pkt-color-input-text-active) !important;
|
|
1269
|
+
}
|
|
1270
|
+
:root .pkt-color-bg-input-text-disabled {
|
|
1271
|
+
background-color: var(--pkt-color-input-text-disabled) !important;
|
|
1272
|
+
}
|
|
1273
|
+
:root .pkt-color-txt-input-text-disabled {
|
|
1274
|
+
color: var(--pkt-color-input-text-disabled) !important;
|
|
1275
|
+
}
|
|
1276
|
+
:root .pkt-color-border-input-text-disabled {
|
|
1277
|
+
border-color: var(--pkt-color-input-text-disabled) !important;
|
|
1278
|
+
}
|
|
1279
|
+
:root .pkt-color-bg-input-text-hover {
|
|
1280
|
+
background-color: var(--pkt-color-input-text-hover) !important;
|
|
1281
|
+
}
|
|
1282
|
+
:root .pkt-color-txt-input-text-hover {
|
|
1283
|
+
color: var(--pkt-color-input-text-hover) !important;
|
|
1284
|
+
}
|
|
1285
|
+
:root .pkt-color-border-input-text-hover {
|
|
1286
|
+
border-color: var(--pkt-color-input-text-hover) !important;
|
|
1287
|
+
}
|
|
1288
|
+
:root .pkt-color-bg-input-text-normal {
|
|
1289
|
+
background-color: var(--pkt-color-input-text-normal) !important;
|
|
1290
|
+
}
|
|
1291
|
+
:root .pkt-color-txt-input-text-normal {
|
|
1292
|
+
color: var(--pkt-color-input-text-normal) !important;
|
|
1293
|
+
}
|
|
1294
|
+
:root .pkt-color-border-input-text-normal {
|
|
1295
|
+
border-color: var(--pkt-color-input-text-normal) !important;
|
|
1296
|
+
}
|
|
1297
|
+
:root .pkt-color-bg-input-text-error {
|
|
1298
|
+
background-color: var(--pkt-color-input-text-error) !important;
|
|
1299
|
+
}
|
|
1300
|
+
:root .pkt-color-txt-input-text-error {
|
|
1301
|
+
color: var(--pkt-color-input-text-error) !important;
|
|
1302
|
+
}
|
|
1303
|
+
:root .pkt-color-border-input-text-error {
|
|
1304
|
+
border-color: var(--pkt-color-input-text-error) !important;
|
|
1305
|
+
}
|
|
1306
|
+
:root .pkt-color-bg-input-text-open {
|
|
1307
|
+
background-color: var(--pkt-color-input-text-open) !important;
|
|
1308
|
+
}
|
|
1309
|
+
:root .pkt-color-txt-input-text-open {
|
|
1310
|
+
color: var(--pkt-color-input-text-open) !important;
|
|
1311
|
+
}
|
|
1312
|
+
:root .pkt-color-border-input-text-open {
|
|
1313
|
+
border-color: var(--pkt-color-input-text-open) !important;
|
|
1314
|
+
}
|
|
1315
|
+
:root .pkt-color-bg-input-check-background {
|
|
1316
|
+
background-color: var(--pkt-color-input-check-background) !important;
|
|
1317
|
+
}
|
|
1318
|
+
:root .pkt-color-txt-input-check-background {
|
|
1319
|
+
color: var(--pkt-color-input-check-background) !important;
|
|
1320
|
+
}
|
|
1321
|
+
:root .pkt-color-border-input-check-background {
|
|
1322
|
+
border-color: var(--pkt-color-input-check-background) !important;
|
|
1323
|
+
}
|
|
1324
|
+
:root .pkt-color-bg-input-check-border {
|
|
1325
|
+
background-color: var(--pkt-color-input-check-border) !important;
|
|
1326
|
+
}
|
|
1327
|
+
:root .pkt-color-txt-input-check-border {
|
|
1328
|
+
color: var(--pkt-color-input-check-border) !important;
|
|
1329
|
+
}
|
|
1330
|
+
:root .pkt-color-border-input-check-border {
|
|
1331
|
+
border-color: var(--pkt-color-input-check-border) !important;
|
|
1332
|
+
}
|
|
1333
|
+
:root .pkt-color-bg-input-check-text-active {
|
|
1334
|
+
background-color: var(--pkt-color-input-check-text-active) !important;
|
|
1335
|
+
}
|
|
1336
|
+
:root .pkt-color-txt-input-check-text-active {
|
|
1337
|
+
color: var(--pkt-color-input-check-text-active) !important;
|
|
1338
|
+
}
|
|
1339
|
+
:root .pkt-color-border-input-check-text-active {
|
|
1340
|
+
border-color: var(--pkt-color-input-check-text-active) !important;
|
|
1341
|
+
}
|
|
1342
|
+
:root .pkt-color-bg-input-check-text-hover {
|
|
1343
|
+
background-color: var(--pkt-color-input-check-text-hover) !important;
|
|
1344
|
+
}
|
|
1345
|
+
:root .pkt-color-txt-input-check-text-hover {
|
|
1346
|
+
color: var(--pkt-color-input-check-text-hover) !important;
|
|
1347
|
+
}
|
|
1348
|
+
:root .pkt-color-border-input-check-text-hover {
|
|
1349
|
+
border-color: var(--pkt-color-input-check-text-hover) !important;
|
|
1350
|
+
}
|
|
1191
1351
|
:root .bg-color-blue {
|
|
1192
1352
|
background-color: #6fe9ff !important;
|
|
1193
1353
|
}
|
|
@@ -1540,6 +1700,22 @@ input[type=search]::-webkit-search-decoration {
|
|
|
1540
1700
|
--pkt-color-text-action-active: var(--pkt-color-brand-blue-500);
|
|
1541
1701
|
--pkt-color-text-action-hover: var(--pkt-color-brand-blue-500);
|
|
1542
1702
|
--pkt-color-text-action-normal: var(--pkt-color-brand-neutrals-white);
|
|
1703
|
+
--pkt-color-input-background-normal: var(--pkt-color-brand-neutrals-white);
|
|
1704
|
+
--pkt-color-input-border-active: var(--pkt-color-brand-blue-500);
|
|
1705
|
+
--pkt-color-input-border-disabled: var(--pkt-color-grays-gray-200);
|
|
1706
|
+
--pkt-color-input-border-error: var(--pkt-color-brand-red-1000);
|
|
1707
|
+
--pkt-color-input-border-hover: var(--pkt-color-brand-blue-500);
|
|
1708
|
+
--pkt-color-input-border-normal: var(--pkt-color-brand-neutrals-white);
|
|
1709
|
+
--pkt-color-input-text-active: var(--pkt-color-brand-warm-blue-1000);
|
|
1710
|
+
--pkt-color-input-text-disabled: var(--pkt-color-grays-gray-200);
|
|
1711
|
+
--pkt-color-input-text-hover: var(--pkt-color-brand-warm-blue-1000);
|
|
1712
|
+
--pkt-color-input-text-normal: var(--pkt-color-brand-dark-blue-1000);
|
|
1713
|
+
--pkt-color-input-text-error: var(--pkt-color-brand-red-1000);
|
|
1714
|
+
--pkt-color-input-text-open: var(--pkt-color-brand-dark-blue-1000);
|
|
1715
|
+
--pkt-color-input-check-background: var(--pkt-color-brand-dark-blue-1000);
|
|
1716
|
+
--pkt-color-input-check-border: var(--pkt-color-brand-neutrals-white);
|
|
1717
|
+
--pkt-color-input-check-text-active: var(--pkt-color-brand-blue-500);
|
|
1718
|
+
--pkt-color-input-check-text-hover: var(--pkt-color-brand-blue-500);
|
|
1543
1719
|
}
|
|
1544
1720
|
|
|
1545
1721
|
/*
|
|
@@ -14218,7 +14394,7 @@ a:active, a.pkt-link--active,
|
|
|
14218
14394
|
.pkt-link--external::after {
|
|
14219
14395
|
display: inline-block;
|
|
14220
14396
|
content: " ";
|
|
14221
|
-
--svg: url(https://punkt-cdn.oslo.kommune.no/13.
|
|
14397
|
+
--svg: url(https://punkt-cdn.oslo.kommune.no/13.17/icons/new-window-small.svg);
|
|
14222
14398
|
background-image: var(--svg);
|
|
14223
14399
|
background-repeat: no-repeat;
|
|
14224
14400
|
background-size: 18px 18px;
|
|
@@ -18151,33 +18327,6 @@ div.pkt-btn:not([data-disabled]):active, .pkt-btn:enabled:active, .pkt-btn:activ
|
|
|
18151
18327
|
*
|
|
18152
18328
|
*
|
|
18153
18329
|
*/
|
|
18154
|
-
.pkt-input-check, .pkt-input-check__input, .pkt-input-check__input-checkbox, .pkt-input-check__input--tile {
|
|
18155
|
-
--pkt-color-input-background-normal: var(--pkt-color-brand-neutrals-white);
|
|
18156
|
-
--pkt-color-input-border-active: var(--pkt-color-brand-warm-blue-1000);
|
|
18157
|
-
--pkt-color-input-border-disabled: var(--pkt-color-grays-gray-300);
|
|
18158
|
-
--pkt-color-input-border-error: var(--pkt-color-brand-red-1000);
|
|
18159
|
-
--pkt-color-input-border-hover: var(--pkt-color-brand-warm-blue-1000);
|
|
18160
|
-
--pkt-color-input-border-normal: var(--pkt-color-brand-dark-blue-1000);
|
|
18161
|
-
--pkt-color-input-check-border: var(--pkt-color-input-border-normal);
|
|
18162
|
-
--pkt-color-input-text-active: var(--pkt-color-brand-warm-blue-1000);
|
|
18163
|
-
--pkt-color-input-text-disabled: var(--pkt-color-grays-gray-500);
|
|
18164
|
-
--pkt-color-input-text-hover: var(--pkt-color-brand-warm-blue-1000);
|
|
18165
|
-
--pkt-color-input-text-error: var(--pkt-color-brand-red-1000);
|
|
18166
|
-
}
|
|
18167
|
-
[data-mode=dark] .pkt-input-check, [data-mode=dark] .pkt-input-check__input, [data-mode=dark] .pkt-input-check__input-checkbox, [data-mode=dark] .pkt-input-check__input--tile {
|
|
18168
|
-
--pkt-color-input-background-normal: var(--pkt-color-brand-dark-blue-1000);
|
|
18169
|
-
--pkt-color-input-border-active: var(--pkt-color-brand-blue-500);
|
|
18170
|
-
--pkt-color-input-border-disabled: var(--pkt-color-grays-gray-200);
|
|
18171
|
-
--pkt-color-input-border-error: var(--pkt-color-brand-red-1000);
|
|
18172
|
-
--pkt-color-input-border-hover: var(--pkt-color-brand-blue-500);
|
|
18173
|
-
--pkt-color-input-border-normal: var(--pkt-color-brand-neutrals-white);
|
|
18174
|
-
--pkt-color-input-check-border: var(--pkt-color-input-border-normal);
|
|
18175
|
-
--pkt-color-input-text-active: var(--pkt-color-brand-blue-500);
|
|
18176
|
-
--pkt-color-input-text-disabled: var(--pkt-color-grays-gray-200);
|
|
18177
|
-
--pkt-color-input-text-hover: var(--pkt-color-brand-blue-500);
|
|
18178
|
-
--pkt-color-input-text-error: var(--pkt-color-brand-red-1000);
|
|
18179
|
-
}
|
|
18180
|
-
|
|
18181
18330
|
.pkt-input-check {
|
|
18182
18331
|
display: flex;
|
|
18183
18332
|
flex-direction: column;
|
|
@@ -18208,11 +18357,11 @@ div.pkt-btn:not([data-disabled]):active, .pkt-btn:enabled:active, .pkt-btn:activ
|
|
|
18208
18357
|
line-height: 1.375rem;
|
|
18209
18358
|
}
|
|
18210
18359
|
.pkt-input-check__input:hover > .pkt-input-check__input-checkbox:not(:disabled) + .pkt-input-check__input-label {
|
|
18211
|
-
color: var(--pkt-color-input-text-hover);
|
|
18360
|
+
color: var(--pkt-color-input-check-text-hover);
|
|
18212
18361
|
}
|
|
18213
18362
|
.pkt-input-check__input-checkbox {
|
|
18214
18363
|
appearance: none;
|
|
18215
|
-
background-color: var(--pkt-color-input-background
|
|
18364
|
+
background-color: var(--pkt-color-input-check-background);
|
|
18216
18365
|
border: 2px solid var(--pkt-color-input-check-border);
|
|
18217
18366
|
width: 1.5rem;
|
|
18218
18367
|
height: 1.5rem;
|
|
@@ -18232,7 +18381,7 @@ div.pkt-btn:not([data-disabled]):active, .pkt-btn:enabled:active, .pkt-btn:activ
|
|
|
18232
18381
|
display: block;
|
|
18233
18382
|
content: "";
|
|
18234
18383
|
border: 2px solid var(--pkt-color-input-check-border);
|
|
18235
|
-
background-color: var(--pkt-color-input-background
|
|
18384
|
+
background-color: var(--pkt-color-input-check-background);
|
|
18236
18385
|
position: absolute;
|
|
18237
18386
|
top: -1px;
|
|
18238
18387
|
bottom: -1px;
|
|
@@ -18249,7 +18398,7 @@ div.pkt-btn:not([data-disabled]):active, .pkt-btn:enabled:active, .pkt-btn:activ
|
|
|
18249
18398
|
box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-input-border-normal);
|
|
18250
18399
|
}
|
|
18251
18400
|
.pkt-input-check__input-checkbox:focus-visible:not(:disabled) + .pkt-input-check__input-label {
|
|
18252
|
-
color: var(--pkt-color-input-text-hover);
|
|
18401
|
+
color: var(--pkt-color-input-check-text-hover);
|
|
18253
18402
|
}
|
|
18254
18403
|
.pkt-input-check__input-checkbox[type=checkbox]:hover {
|
|
18255
18404
|
--pkt-color-input-check-border: var(--pkt-color-input-border-hover);
|
|
@@ -18268,7 +18417,7 @@ div.pkt-btn:not([data-disabled]):active, .pkt-btn:enabled:active, .pkt-btn:activ
|
|
|
18268
18417
|
outline-color: var(--pkt-color-input-border-hover);
|
|
18269
18418
|
}
|
|
18270
18419
|
.pkt-input-check__input-checkbox:checked[type=checkbox] {
|
|
18271
|
-
--svg: url(https://punkt-cdn.oslo.kommune.no/13.
|
|
18420
|
+
--svg: url(https://punkt-cdn.oslo.kommune.no/13.17/icons/check-medium.svg);
|
|
18272
18421
|
position: relative;
|
|
18273
18422
|
background-color: var(--pkt-color-input-border-normal);
|
|
18274
18423
|
}
|
|
@@ -18301,7 +18450,7 @@ div.pkt-btn:not([data-disabled]):active, .pkt-btn:enabled:active, .pkt-btn:activ
|
|
|
18301
18450
|
}
|
|
18302
18451
|
.pkt-input-check__input-checkbox:checked[type=radio] {
|
|
18303
18452
|
background-color: var(--pkt-color-input-border-normal);
|
|
18304
|
-
border: 3px solid var(--pkt-color-input-background
|
|
18453
|
+
border: 3px solid var(--pkt-color-input-check-background);
|
|
18305
18454
|
box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-input-border-normal);
|
|
18306
18455
|
}
|
|
18307
18456
|
.pkt-input-check__input-checkbox:checked[type=checkbox]:focus-visible {
|
|
@@ -18312,7 +18461,7 @@ div.pkt-btn:not([data-disabled]):active, .pkt-btn:enabled:active, .pkt-btn:activ
|
|
|
18312
18461
|
}
|
|
18313
18462
|
.pkt-input-check__input-checkbox:checked[type=radio]:focus-visible {
|
|
18314
18463
|
background-color: var(--pkt-color-input-border-active);
|
|
18315
|
-
border: 3px solid var(--pkt-color-input-background
|
|
18464
|
+
border: 3px solid var(--pkt-color-input-check-background);
|
|
18316
18465
|
outline: none;
|
|
18317
18466
|
box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-input-border-active), 0px 0px 0px 0.375rem var(--pkt-color-border-states-focus);
|
|
18318
18467
|
}
|
|
@@ -18326,7 +18475,7 @@ div.pkt-btn:not([data-disabled]):active, .pkt-btn:enabled:active, .pkt-btn:activ
|
|
|
18326
18475
|
cursor: not-allowed;
|
|
18327
18476
|
}
|
|
18328
18477
|
.pkt-input-check__input-checkbox:disabled[type=checkbox][role=switch]:checked:after {
|
|
18329
|
-
--svg: url(https://punkt-cdn.oslo.kommune.no/13.
|
|
18478
|
+
--svg: url(https://punkt-cdn.oslo.kommune.no/13.17/icons/check-medium.svg);
|
|
18330
18479
|
--pkt-color-input-check-border: var(--pkt-color-input-border-normal);
|
|
18331
18480
|
filter: grayscale(100%) brightness(400%);
|
|
18332
18481
|
}
|
|
@@ -18483,46 +18632,6 @@ pkt-select {
|
|
|
18483
18632
|
display: block;
|
|
18484
18633
|
}
|
|
18485
18634
|
|
|
18486
|
-
.pkt-input, .pkt-textinput__input, .pkt-select select,
|
|
18487
|
-
.pkt-select:is(select),
|
|
18488
|
-
.pkt-input-prefix,
|
|
18489
|
-
.pkt-input-suffix,
|
|
18490
|
-
.pkt-input-icon,
|
|
18491
|
-
.pkt-input__container {
|
|
18492
|
-
--pkt-color-input-background-normal: var(--pkt-color-brand-neutrals-white);
|
|
18493
|
-
--pkt-color-input-border-active: var(--pkt-color-brand-warm-blue-1000);
|
|
18494
|
-
--pkt-color-input-border-disabled: var(--pkt-color-grays-gray-300);
|
|
18495
|
-
--pkt-color-input-border-error: var(--pkt-color-brand-red-1000);
|
|
18496
|
-
--pkt-color-input-border-hover: var(--pkt-color-brand-warm-blue-1000);
|
|
18497
|
-
--pkt-color-input-border-normal: var(--pkt-color-brand-dark-blue-1000);
|
|
18498
|
-
--pkt-color-input-text-active: var(--pkt-color-brand-warm-blue-1000);
|
|
18499
|
-
--pkt-color-input-text-disabled: var(--pkt-color-grays-gray-500);
|
|
18500
|
-
--pkt-color-input-text-hover: var(--pkt-color-brand-warm-blue-1000);
|
|
18501
|
-
--pkt-color-input-text-normal: var(--pkt-color-brand-dark-blue-1000);
|
|
18502
|
-
--pkt-color-input-text-error: var(--pkt-color-brand-red-1000);
|
|
18503
|
-
--pkt-color-input-text-open: var(--pkt-color-brand-neutrals-white);
|
|
18504
|
-
}
|
|
18505
|
-
|
|
18506
|
-
[data-mode=dark] .pkt-input, [data-mode=dark] .pkt-textinput__input, [data-mode=dark] .pkt-select select, .pkt-select [data-mode=dark] select,
|
|
18507
|
-
[data-mode=dark] .pkt-select:is(select),
|
|
18508
|
-
[data-mode=dark] .pkt-input-prefix,
|
|
18509
|
-
[data-mode=dark] .pkt-input-suffix,
|
|
18510
|
-
[data-mode=dark] .pkt-input-icon,
|
|
18511
|
-
[data-mode=dark] .pkt-input__container {
|
|
18512
|
-
--pkt-color-input-background-normal: var(--pkt-color-brand-neutrals-white);
|
|
18513
|
-
--pkt-color-input-border-active: var(--pkt-color-brand-blue-500);
|
|
18514
|
-
--pkt-color-input-border-disabled: var(--pkt-color-grays-gray-200);
|
|
18515
|
-
--pkt-color-input-border-error: var(--pkt-color-brand-red-1000);
|
|
18516
|
-
--pkt-color-input-border-hover: var(--pkt-color-brand-blue-500);
|
|
18517
|
-
--pkt-color-input-border-normal: var(--pkt-color-brand-neutrals-white);
|
|
18518
|
-
--pkt-color-input-text-active: var(--pkt-color-brand-warm-blue-1000);
|
|
18519
|
-
--pkt-color-input-text-disabled: var(--pkt-color-grays-gray-200);
|
|
18520
|
-
--pkt-color-input-text-hover: var(--pkt-color-brand-warm-blue-1000);
|
|
18521
|
-
--pkt-color-input-text-normal: var(--pkt-color-brand-dark-blue-1000);
|
|
18522
|
-
--pkt-color-input-text-error: var(--pkt-color-brand-red-1000);
|
|
18523
|
-
--pkt-color-input-text-open: var(--pkt-color-brand-dark-blue-1000);
|
|
18524
|
-
}
|
|
18525
|
-
|
|
18526
18635
|
.pkt-input, .pkt-textinput__input, .pkt-select select,
|
|
18527
18636
|
.pkt-select:is(select) {
|
|
18528
18637
|
display: flex;
|
|
@@ -18581,7 +18690,7 @@ pkt-select {
|
|
|
18581
18690
|
}
|
|
18582
18691
|
.pkt-input:is(select):not([multiple]), .pkt-textinput__input:is(select):not([multiple]), .pkt-select select:is(select):not([multiple]),
|
|
18583
18692
|
.pkt-select:is(select):not([multiple]) {
|
|
18584
|
-
--svg: url(https://punkt-cdn.oslo.kommune.no/13.
|
|
18693
|
+
--svg: url(https://punkt-cdn.oslo.kommune.no/13.17/icons/chevron-thin-down.svg);
|
|
18585
18694
|
background-image: var(--svg);
|
|
18586
18695
|
background-repeat: no-repeat;
|
|
18587
18696
|
background-position: right 0.7rem top 50%;
|