@oslokommune/punkt-css 16.26.2 → 17.0.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.
Files changed (75) hide show
  1. package/CHANGELOG.md +111 -0
  2. package/dist/css/components/accordion.css +27 -5
  3. package/dist/css/components/accordion.min.css +1 -1
  4. package/dist/css/components/alert.css +37 -9
  5. package/dist/css/components/alert.min.css +1 -1
  6. package/dist/css/components/calendar.css +4 -0
  7. package/dist/css/components/calendar.min.css +1 -1
  8. package/dist/css/components/combobox.css +82 -0
  9. package/dist/css/components/combobox.min.css +1 -1
  10. package/dist/css/components/datepicker.css +82 -3
  11. package/dist/css/components/datepicker.min.css +1 -1
  12. package/dist/css/components/footer.css +232 -108
  13. package/dist/css/components/footer.min.css +1 -1
  14. package/dist/css/components/header-global.css +287 -0
  15. package/dist/css/components/header-global.min.css +1 -0
  16. package/dist/css/components/header-menu.css +364 -123
  17. package/dist/css/components/header-menu.min.css +1 -1
  18. package/dist/css/components/header-service-mobile.css +71 -22
  19. package/dist/css/components/header-service-mobile.min.css +1 -1
  20. package/dist/css/components/header-service.css +68 -14
  21. package/dist/css/components/header-service.min.css +1 -1
  22. package/dist/css/components/header-shared.css +49 -0
  23. package/dist/css/components/header-shared.min.css +0 -0
  24. package/dist/css/components/inputwrapper.css +59 -5
  25. package/dist/css/components/inputwrapper.min.css +1 -1
  26. package/dist/css/components/modal.css +0 -5
  27. package/dist/css/components/modal.min.css +1 -1
  28. package/dist/css/components/searchinput.css +71 -2
  29. package/dist/css/components/searchinput.min.css +1 -1
  30. package/dist/css/components/textarea.css +41 -0
  31. package/dist/css/components/textarea.min.css +1 -0
  32. package/dist/css/components/textinput.css +126 -6
  33. package/dist/css/components/textinput.min.css +1 -1
  34. package/dist/css/components/timepicker.css +133 -38
  35. package/dist/css/components/timepicker.min.css +1 -1
  36. package/dist/css/elements/button.css +20 -4
  37. package/dist/css/elements/button.min.css +1 -1
  38. package/dist/css/elements/checkbox-radio.css +3 -3
  39. package/dist/css/elements/checkbox-radio.min.css +1 -1
  40. package/dist/css/elements/input.css +121 -6
  41. package/dist/css/elements/input.min.css +1 -1
  42. package/dist/css/elements/select.css +137 -9
  43. package/dist/css/elements/select.min.css +1 -1
  44. package/dist/css/pkt-base.css +434 -1
  45. package/dist/css/pkt-base.min.css +1 -1
  46. package/dist/css/pkt-components.css +1595 -348
  47. package/dist/css/pkt-components.min.css +1 -1
  48. package/dist/css/pkt-docs.css +2077 -364
  49. package/dist/css/pkt-docs.min.css +1 -1
  50. package/dist/css/pkt-elements.css +160 -16
  51. package/dist/css/pkt-elements.min.css +1 -1
  52. package/dist/css/pkt.css +2077 -364
  53. package/dist/css/pkt.min.css +1 -1
  54. package/dist/scss/abstracts/variables/_index.scss +1 -1
  55. package/dist/scss/abstracts/variables/_spacing.scss +1 -0
  56. package/dist/scss/components/_accordion.scss +7 -11
  57. package/dist/scss/components/_alert.scss +34 -11
  58. package/dist/scss/components/_calendar.scss +3 -0
  59. package/dist/scss/components/_combobox.scss +74 -0
  60. package/dist/scss/components/_datepicker.scss +75 -8
  61. package/dist/scss/components/_footer.scss +149 -123
  62. package/dist/scss/components/_header-global.scss +192 -0
  63. package/dist/scss/components/_header-menu.scss +30 -31
  64. package/dist/scss/components/_header-service-mobile.scss +4 -28
  65. package/dist/scss/components/_header-service.scss +4 -21
  66. package/dist/scss/components/_header-shared.scss +190 -0
  67. package/dist/scss/components/_index.scss +2 -0
  68. package/dist/scss/components/_inputwrapper.scss +66 -10
  69. package/dist/scss/components/_modal.scss +1 -5
  70. package/dist/scss/components/_searchinput.scss +58 -2
  71. package/dist/scss/components/_textarea.scss +48 -0
  72. package/dist/scss/components/_timepicker.scss +95 -34
  73. package/dist/scss/elements/_button.scss +12 -3
  74. package/dist/scss/elements/_input.scss +141 -7
  75. package/package.json +3 -3
package/dist/css/pkt-base.css CHANGED
@@ -2748,6 +2748,70 @@ body {
2748
2748
  gap: 8rem !important;
2749
2749
  }
2750
2750
 
2751
+ .m-size-148 {
2752
+ margin: 9.25rem !important;
2753
+ }
2754
+
2755
+ .mt-size-148 {
2756
+ margin-top: 9.25rem !important;
2757
+ }
2758
+
2759
+ .mr-size-148 {
2760
+ margin-right: 9.25rem !important;
2761
+ }
2762
+
2763
+ .mb-size-148 {
2764
+ margin-bottom: 9.25rem !important;
2765
+ }
2766
+
2767
+ .ml-size-148 {
2768
+ margin-left: 9.25rem !important;
2769
+ }
2770
+
2771
+ .mx-size-148 {
2772
+ margin-right: 9.25rem !important;
2773
+ margin-left: 9.25rem !important;
2774
+ }
2775
+
2776
+ .my-size-148 {
2777
+ margin-top: 9.25rem !important;
2778
+ margin-bottom: 9.25rem !important;
2779
+ }
2780
+
2781
+ .p-size-148 {
2782
+ padding: 9.25rem !important;
2783
+ }
2784
+
2785
+ .pt-size-148 {
2786
+ padding-top: 9.25rem !important;
2787
+ }
2788
+
2789
+ .pr-size-148 {
2790
+ padding-right: 9.25rem !important;
2791
+ }
2792
+
2793
+ .pb-size-148 {
2794
+ padding-bottom: 9.25rem !important;
2795
+ }
2796
+
2797
+ .pl-size-148 {
2798
+ padding-left: 9.25rem !important;
2799
+ }
2800
+
2801
+ .px-size-148 {
2802
+ padding-right: 9.25rem !important;
2803
+ padding-left: 9.25rem !important;
2804
+ }
2805
+
2806
+ .py-size-148 {
2807
+ padding-top: 9.25rem !important;
2808
+ padding-bottom: 9.25rem !important;
2809
+ }
2810
+
2811
+ .gap-size-148 {
2812
+ gap: 9.25rem !important;
2813
+ }
2814
+
2751
2815
  .m-size-5 {
2752
2816
  margin: 0.3125rem !important;
2753
2817
  }
@@ -9138,6 +9202,312 @@ body {
9138
9202
  gap: 8rem !important;
9139
9203
  }
9140
9204
  }
9205
+ @media screen and (min-width: 0) {
9206
+ .m-size-148--mobile-up {
9207
+ margin: 9.25rem !important;
9208
+ }
9209
+ .mt-size-148--mobile-up {
9210
+ margin-top: 9.25rem !important;
9211
+ }
9212
+ .mr-size-148--mobile-up {
9213
+ margin-right: 9.25rem !important;
9214
+ }
9215
+ .mb-size-148--mobile-up {
9216
+ margin-bottom: 9.25rem !important;
9217
+ }
9218
+ .ml-size-148--mobile-up {
9219
+ margin-left: 9.25rem !important;
9220
+ }
9221
+ .mx-size-148--mobile-up {
9222
+ margin-right: 9.25rem !important;
9223
+ margin-left: 9.25rem !important;
9224
+ }
9225
+ .my-size-148--mobile-up {
9226
+ margin-top: 9.25rem !important;
9227
+ margin-bottom: 9.25rem !important;
9228
+ }
9229
+ .p-size-148--mobile-up {
9230
+ padding: 9.25rem !important;
9231
+ }
9232
+ .pt-size-148--mobile-up {
9233
+ padding-top: 9.25rem !important;
9234
+ }
9235
+ .pr-size-148--mobile-up {
9236
+ padding-right: 9.25rem !important;
9237
+ }
9238
+ .pb-size-148--mobile-up {
9239
+ padding-bottom: 9.25rem !important;
9240
+ }
9241
+ .pl-size-148--mobile-up {
9242
+ padding-left: 9.25rem !important;
9243
+ }
9244
+ .px-size-148--mobile-up {
9245
+ padding-right: 9.25rem !important;
9246
+ padding-left: 9.25rem !important;
9247
+ }
9248
+ .py-size-148--mobile-up {
9249
+ padding-top: 9.25rem !important;
9250
+ padding-bottom: 9.25rem !important;
9251
+ }
9252
+ .gap-size-148--mobile-up {
9253
+ gap: 9.25rem !important;
9254
+ }
9255
+ }
9256
+ @media screen and (min-width: 36rem) {
9257
+ .m-size-148--phablet-up {
9258
+ margin: 9.25rem !important;
9259
+ }
9260
+ .mt-size-148--phablet-up {
9261
+ margin-top: 9.25rem !important;
9262
+ }
9263
+ .mr-size-148--phablet-up {
9264
+ margin-right: 9.25rem !important;
9265
+ }
9266
+ .mb-size-148--phablet-up {
9267
+ margin-bottom: 9.25rem !important;
9268
+ }
9269
+ .ml-size-148--phablet-up {
9270
+ margin-left: 9.25rem !important;
9271
+ }
9272
+ .mx-size-148--phablet-up {
9273
+ margin-right: 9.25rem !important;
9274
+ margin-left: 9.25rem !important;
9275
+ }
9276
+ .my-size-148--phablet-up {
9277
+ margin-top: 9.25rem !important;
9278
+ margin-bottom: 9.25rem !important;
9279
+ }
9280
+ .p-size-148--phablet-up {
9281
+ padding: 9.25rem !important;
9282
+ }
9283
+ .pt-size-148--phablet-up {
9284
+ padding-top: 9.25rem !important;
9285
+ }
9286
+ .pr-size-148--phablet-up {
9287
+ padding-right: 9.25rem !important;
9288
+ }
9289
+ .pb-size-148--phablet-up {
9290
+ padding-bottom: 9.25rem !important;
9291
+ }
9292
+ .pl-size-148--phablet-up {
9293
+ padding-left: 9.25rem !important;
9294
+ }
9295
+ .px-size-148--phablet-up {
9296
+ padding-right: 9.25rem !important;
9297
+ padding-left: 9.25rem !important;
9298
+ }
9299
+ .py-size-148--phablet-up {
9300
+ padding-top: 9.25rem !important;
9301
+ padding-bottom: 9.25rem !important;
9302
+ }
9303
+ .gap-size-148--phablet-up {
9304
+ gap: 9.25rem !important;
9305
+ }
9306
+ }
9307
+ @media screen and (min-width: 48rem) {
9308
+ .m-size-148--tablet-up {
9309
+ margin: 9.25rem !important;
9310
+ }
9311
+ .mt-size-148--tablet-up {
9312
+ margin-top: 9.25rem !important;
9313
+ }
9314
+ .mr-size-148--tablet-up {
9315
+ margin-right: 9.25rem !important;
9316
+ }
9317
+ .mb-size-148--tablet-up {
9318
+ margin-bottom: 9.25rem !important;
9319
+ }
9320
+ .ml-size-148--tablet-up {
9321
+ margin-left: 9.25rem !important;
9322
+ }
9323
+ .mx-size-148--tablet-up {
9324
+ margin-right: 9.25rem !important;
9325
+ margin-left: 9.25rem !important;
9326
+ }
9327
+ .my-size-148--tablet-up {
9328
+ margin-top: 9.25rem !important;
9329
+ margin-bottom: 9.25rem !important;
9330
+ }
9331
+ .p-size-148--tablet-up {
9332
+ padding: 9.25rem !important;
9333
+ }
9334
+ .pt-size-148--tablet-up {
9335
+ padding-top: 9.25rem !important;
9336
+ }
9337
+ .pr-size-148--tablet-up {
9338
+ padding-right: 9.25rem !important;
9339
+ }
9340
+ .pb-size-148--tablet-up {
9341
+ padding-bottom: 9.25rem !important;
9342
+ }
9343
+ .pl-size-148--tablet-up {
9344
+ padding-left: 9.25rem !important;
9345
+ }
9346
+ .px-size-148--tablet-up {
9347
+ padding-right: 9.25rem !important;
9348
+ padding-left: 9.25rem !important;
9349
+ }
9350
+ .py-size-148--tablet-up {
9351
+ padding-top: 9.25rem !important;
9352
+ padding-bottom: 9.25rem !important;
9353
+ }
9354
+ .gap-size-148--tablet-up {
9355
+ gap: 9.25rem !important;
9356
+ }
9357
+ }
9358
+ @media screen and (min-width: 64rem) {
9359
+ .m-size-148--tablet-big-up {
9360
+ margin: 9.25rem !important;
9361
+ }
9362
+ .mt-size-148--tablet-big-up {
9363
+ margin-top: 9.25rem !important;
9364
+ }
9365
+ .mr-size-148--tablet-big-up {
9366
+ margin-right: 9.25rem !important;
9367
+ }
9368
+ .mb-size-148--tablet-big-up {
9369
+ margin-bottom: 9.25rem !important;
9370
+ }
9371
+ .ml-size-148--tablet-big-up {
9372
+ margin-left: 9.25rem !important;
9373
+ }
9374
+ .mx-size-148--tablet-big-up {
9375
+ margin-right: 9.25rem !important;
9376
+ margin-left: 9.25rem !important;
9377
+ }
9378
+ .my-size-148--tablet-big-up {
9379
+ margin-top: 9.25rem !important;
9380
+ margin-bottom: 9.25rem !important;
9381
+ }
9382
+ .p-size-148--tablet-big-up {
9383
+ padding: 9.25rem !important;
9384
+ }
9385
+ .pt-size-148--tablet-big-up {
9386
+ padding-top: 9.25rem !important;
9387
+ }
9388
+ .pr-size-148--tablet-big-up {
9389
+ padding-right: 9.25rem !important;
9390
+ }
9391
+ .pb-size-148--tablet-big-up {
9392
+ padding-bottom: 9.25rem !important;
9393
+ }
9394
+ .pl-size-148--tablet-big-up {
9395
+ padding-left: 9.25rem !important;
9396
+ }
9397
+ .px-size-148--tablet-big-up {
9398
+ padding-right: 9.25rem !important;
9399
+ padding-left: 9.25rem !important;
9400
+ }
9401
+ .py-size-148--tablet-big-up {
9402
+ padding-top: 9.25rem !important;
9403
+ padding-bottom: 9.25rem !important;
9404
+ }
9405
+ .gap-size-148--tablet-big-up {
9406
+ gap: 9.25rem !important;
9407
+ }
9408
+ }
9409
+ @media screen and (min-width: 80rem) {
9410
+ .m-size-148--laptop-up {
9411
+ margin: 9.25rem !important;
9412
+ }
9413
+ .mt-size-148--laptop-up {
9414
+ margin-top: 9.25rem !important;
9415
+ }
9416
+ .mr-size-148--laptop-up {
9417
+ margin-right: 9.25rem !important;
9418
+ }
9419
+ .mb-size-148--laptop-up {
9420
+ margin-bottom: 9.25rem !important;
9421
+ }
9422
+ .ml-size-148--laptop-up {
9423
+ margin-left: 9.25rem !important;
9424
+ }
9425
+ .mx-size-148--laptop-up {
9426
+ margin-right: 9.25rem !important;
9427
+ margin-left: 9.25rem !important;
9428
+ }
9429
+ .my-size-148--laptop-up {
9430
+ margin-top: 9.25rem !important;
9431
+ margin-bottom: 9.25rem !important;
9432
+ }
9433
+ .p-size-148--laptop-up {
9434
+ padding: 9.25rem !important;
9435
+ }
9436
+ .pt-size-148--laptop-up {
9437
+ padding-top: 9.25rem !important;
9438
+ }
9439
+ .pr-size-148--laptop-up {
9440
+ padding-right: 9.25rem !important;
9441
+ }
9442
+ .pb-size-148--laptop-up {
9443
+ padding-bottom: 9.25rem !important;
9444
+ }
9445
+ .pl-size-148--laptop-up {
9446
+ padding-left: 9.25rem !important;
9447
+ }
9448
+ .px-size-148--laptop-up {
9449
+ padding-right: 9.25rem !important;
9450
+ padding-left: 9.25rem !important;
9451
+ }
9452
+ .py-size-148--laptop-up {
9453
+ padding-top: 9.25rem !important;
9454
+ padding-bottom: 9.25rem !important;
9455
+ }
9456
+ .gap-size-148--laptop-up {
9457
+ gap: 9.25rem !important;
9458
+ }
9459
+ }
9460
+ @media screen and (min-width: 100rem) {
9461
+ .m-size-148--desktop-up {
9462
+ margin: 9.25rem !important;
9463
+ }
9464
+ .mt-size-148--desktop-up {
9465
+ margin-top: 9.25rem !important;
9466
+ }
9467
+ .mr-size-148--desktop-up {
9468
+ margin-right: 9.25rem !important;
9469
+ }
9470
+ .mb-size-148--desktop-up {
9471
+ margin-bottom: 9.25rem !important;
9472
+ }
9473
+ .ml-size-148--desktop-up {
9474
+ margin-left: 9.25rem !important;
9475
+ }
9476
+ .mx-size-148--desktop-up {
9477
+ margin-right: 9.25rem !important;
9478
+ margin-left: 9.25rem !important;
9479
+ }
9480
+ .my-size-148--desktop-up {
9481
+ margin-top: 9.25rem !important;
9482
+ margin-bottom: 9.25rem !important;
9483
+ }
9484
+ .p-size-148--desktop-up {
9485
+ padding: 9.25rem !important;
9486
+ }
9487
+ .pt-size-148--desktop-up {
9488
+ padding-top: 9.25rem !important;
9489
+ }
9490
+ .pr-size-148--desktop-up {
9491
+ padding-right: 9.25rem !important;
9492
+ }
9493
+ .pb-size-148--desktop-up {
9494
+ padding-bottom: 9.25rem !important;
9495
+ }
9496
+ .pl-size-148--desktop-up {
9497
+ padding-left: 9.25rem !important;
9498
+ }
9499
+ .px-size-148--desktop-up {
9500
+ padding-right: 9.25rem !important;
9501
+ padding-left: 9.25rem !important;
9502
+ }
9503
+ .py-size-148--desktop-up {
9504
+ padding-top: 9.25rem !important;
9505
+ padding-bottom: 9.25rem !important;
9506
+ }
9507
+ .gap-size-148--desktop-up {
9508
+ gap: 9.25rem !important;
9509
+ }
9510
+ }
9141
9511
  @media screen and (min-width: 0) {
9142
9512
  .m-size-5--mobile-up {
9143
9513
  margin: 0.3125rem !important;
@@ -12195,6 +12565,15 @@ body {
12195
12565
  .pkt-grid--rowgap-size-128 {
12196
12566
  row-gap: 8rem;
12197
12567
  }
12568
+ .pkt-grid--gap-size-148 {
12569
+ gap: 9.25rem;
12570
+ }
12571
+ .pkt-grid--colgap-size-148 {
12572
+ column-gap: 9.25rem;
12573
+ }
12574
+ .pkt-grid--rowgap-size-148 {
12575
+ row-gap: 9.25rem;
12576
+ }
12198
12577
  .pkt-grid--gap-size-5 {
12199
12578
  gap: 0.3125rem;
12200
12579
  }
@@ -12448,6 +12827,15 @@ body {
12448
12827
  .pkt-grid--rowgap-size-128-mobile-up {
12449
12828
  row-gap: 8rem;
12450
12829
  }
12830
+ .pkt-grid--gap-size-148-mobile-up {
12831
+ gap: 9.25rem;
12832
+ }
12833
+ .pkt-grid--colgap-size-148-mobile-up {
12834
+ column-gap: 9.25rem;
12835
+ }
12836
+ .pkt-grid--rowgap-size-148-mobile-up {
12837
+ row-gap: 9.25rem;
12838
+ }
12451
12839
  .pkt-grid--gap-size-5-mobile-up {
12452
12840
  gap: 0.3125rem;
12453
12841
  }
@@ -12702,6 +13090,15 @@ body {
12702
13090
  .pkt-grid--rowgap-size-128-phablet-up {
12703
13091
  row-gap: 8rem;
12704
13092
  }
13093
+ .pkt-grid--gap-size-148-phablet-up {
13094
+ gap: 9.25rem;
13095
+ }
13096
+ .pkt-grid--colgap-size-148-phablet-up {
13097
+ column-gap: 9.25rem;
13098
+ }
13099
+ .pkt-grid--rowgap-size-148-phablet-up {
13100
+ row-gap: 9.25rem;
13101
+ }
12705
13102
  .pkt-grid--gap-size-5-phablet-up {
12706
13103
  gap: 0.3125rem;
12707
13104
  }
@@ -12956,6 +13353,15 @@ body {
12956
13353
  .pkt-grid--rowgap-size-128-tablet-up {
12957
13354
  row-gap: 8rem;
12958
13355
  }
13356
+ .pkt-grid--gap-size-148-tablet-up {
13357
+ gap: 9.25rem;
13358
+ }
13359
+ .pkt-grid--colgap-size-148-tablet-up {
13360
+ column-gap: 9.25rem;
13361
+ }
13362
+ .pkt-grid--rowgap-size-148-tablet-up {
13363
+ row-gap: 9.25rem;
13364
+ }
12959
13365
  .pkt-grid--gap-size-5-tablet-up {
12960
13366
  gap: 0.3125rem;
12961
13367
  }
@@ -13210,6 +13616,15 @@ body {
13210
13616
  .pkt-grid--rowgap-size-128-tablet-big-up {
13211
13617
  row-gap: 8rem;
13212
13618
  }
13619
+ .pkt-grid--gap-size-148-tablet-big-up {
13620
+ gap: 9.25rem;
13621
+ }
13622
+ .pkt-grid--colgap-size-148-tablet-big-up {
13623
+ column-gap: 9.25rem;
13624
+ }
13625
+ .pkt-grid--rowgap-size-148-tablet-big-up {
13626
+ row-gap: 9.25rem;
13627
+ }
13213
13628
  .pkt-grid--gap-size-5-tablet-big-up {
13214
13629
  gap: 0.3125rem;
13215
13630
  }
@@ -13464,6 +13879,15 @@ body {
13464
13879
  .pkt-grid--rowgap-size-128-laptop-up {
13465
13880
  row-gap: 8rem;
13466
13881
  }
13882
+ .pkt-grid--gap-size-148-laptop-up {
13883
+ gap: 9.25rem;
13884
+ }
13885
+ .pkt-grid--colgap-size-148-laptop-up {
13886
+ column-gap: 9.25rem;
13887
+ }
13888
+ .pkt-grid--rowgap-size-148-laptop-up {
13889
+ row-gap: 9.25rem;
13890
+ }
13467
13891
  .pkt-grid--gap-size-5-laptop-up {
13468
13892
  gap: 0.3125rem;
13469
13893
  }
@@ -13718,6 +14142,15 @@ body {
13718
14142
  .pkt-grid--rowgap-size-128-desktop-up {
13719
14143
  row-gap: 8rem;
13720
14144
  }
14145
+ .pkt-grid--gap-size-148-desktop-up {
14146
+ gap: 9.25rem;
14147
+ }
14148
+ .pkt-grid--colgap-size-148-desktop-up {
14149
+ column-gap: 9.25rem;
14150
+ }
14151
+ .pkt-grid--rowgap-size-148-desktop-up {
14152
+ row-gap: 9.25rem;
14153
+ }
13721
14154
  .pkt-grid--gap-size-5-desktop-up {
13722
14155
  gap: 0.3125rem;
13723
14156
  }
@@ -14169,7 +14602,7 @@ a:active, a.pkt-link--active,
14169
14602
  .pkt-link--external::after {
14170
14603
  display: inline-block;
14171
14604
  content: " ";
14172
- --svg: url(https://punkt-cdn.oslo.kommune.no/16.26/icons/new-window-small.svg);
14605
+ --svg: url(https://punkt-cdn.oslo.kommune.no/17.0/icons/new-window-small.svg);
14173
14606
  background-image: var(--svg);
14174
14607
  background-repeat: no-repeat;
14175
14608
  background-size: 18px 18px;