@navikt/ds-css 7.0.1 → 7.1.1

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 (23) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/accordion.css +0 -4
  3. package/date.css +1 -0
  4. package/dist/component/accordion.css +0 -4
  5. package/dist/component/accordion.min.css +1 -1
  6. package/dist/component/date.css +1 -0
  7. package/dist/component/date.min.css +1 -1
  8. package/dist/component/form.css +26 -0
  9. package/dist/component/form.min.css +1 -1
  10. package/dist/component/index.css +68 -56
  11. package/dist/component/index.min.css +3 -3
  12. package/dist/component/list.css +46 -56
  13. package/dist/component/list.min.css +1 -1
  14. package/dist/components.css +81 -60
  15. package/dist/components.min.css +2 -2
  16. package/dist/global/tokens.css +1 -1
  17. package/dist/global/tokens.min.css +1 -1
  18. package/dist/index.css +68 -56
  19. package/dist/index.min.css +3 -3
  20. package/form/combobox.css +30 -0
  21. package/form/select.css +4 -0
  22. package/list.css +44 -56
  23. package/package.json +2 -2
package/dist/component/list.css CHANGED
@@ -4,92 +4,82 @@
4
4
  margin-block: var(--a-spacing-4);
5
5
  }
6
6
 
7
- .navds-list--nested ul,
8
- .navds-list--nested ol {
9
- margin-block: var(--a-spacing-2);
10
- }
11
-
12
7
  .navds-list--small ul,
13
8
  .navds-list--small ol {
14
9
  margin-block: var(--a-spacing-3);
15
10
  }
16
11
 
17
- .navds-list li {
18
- margin-block-end: var(--a-spacing-2);
12
+ .navds-list .navds-list :where(ul, ol) {
13
+ margin-block: var(--a-spacing-2) 0;
19
14
  }
20
15
 
21
- .navds-list:last-child > ul > li:last-child,
22
- .navds-list:last-child > ol > li:last-child {
23
- margin-bottom: 0;
16
+ .navds-list ol {
17
+ padding-left: 1.7rem;
24
18
  }
25
19
 
26
- .navds-list ul .navds-list__item {
27
- display: grid;
28
- grid-template-columns: auto 1fr;
29
- gap: var(--a-spacing-3);
30
- padding-left: 0;
20
+ .navds-list ol > .navds-list__item {
21
+ padding-left: 0.3rem;
31
22
  }
32
23
 
33
- .navds-list ul .navds-list__item::marker {
34
- content: none;
35
- }
24
+ /* SAFARI HACK START */
36
25
 
37
- .navds-list ol .navds-list__item-marker--icon {
38
- grid-column: 1 / 2;
39
- display: flex;
26
+ /* stylelint-disable selector-type-no-unknown */
27
+
28
+ _::-webkit-full-page-media,
29
+ _:future,
30
+ :root .navds-list ol {
31
+ padding-left: 2.1rem;
40
32
  }
41
33
 
42
- .navds-list .navds-list__item-marker--bullet {
43
- display: flex;
44
- align-items: center;
45
- height: var(--a-font-line-height-xlarge);
46
- grid-column: 1 / 2;
47
- color: var(--ac-list-marker-ul-color, var(--ac-list-marker-color, var(--a-icon-default)));
34
+ _::-webkit-full-page-media,
35
+ _:future,
36
+ :root .navds-list ol .navds-list__item {
37
+ padding-left: 0;
48
38
  }
49
39
 
50
- .navds-list--small .navds-list__item-marker--bullet {
51
- height: var(--a-font-line-height-large);
40
+ /* SAFARI HACK END */
41
+
42
+ /* stylelint-enable selector-type-no-unknown */
43
+
44
+ .navds-list__item {
45
+ margin-block-end: var(--a-spacing-2);
52
46
  }
53
47
 
54
- .navds-list__item-marker--icon {
55
- color: var(--ac-list-marker-icon-color, var(--ac-list-marker-color, var(--a-icon-default)));
56
- display: flex;
57
- align-items: center;
58
- height: var(--a-font-line-height-xlarge);
59
- padding-block-end: 1px;
60
- font-size: 1.5rem;
48
+ .navds-list__item:last-child {
49
+ margin-block-end: 0;
61
50
  }
62
51
 
63
- .navds-list--small .navds-list__item-marker--icon {
64
- height: var(--a-font-line-height-large);
52
+ .navds-list ul > .navds-list__item {
53
+ display: grid;
54
+ grid-template-columns: auto 1fr;
55
+ gap: var(--a-spacing-2);
65
56
  }
66
57
 
67
- .navds-list__item-marker--icon svg {
68
- flex-shrink: 0;
58
+ .navds-list ol li::marker {
59
+ font-weight: var(--a-font-weight-bold);
60
+ color: var(--ac-list-marker-ol-color, var(--ac-list-marker-color, var(--a-icon-default)));
69
61
  }
70
62
 
71
- .navds-list ul .navds-list__item-content {
72
- grid-column: 2 / 3;
63
+ .navds-list__item-marker {
64
+ width: 1.5rem;
73
65
  }
74
66
 
75
- .navds-list ol {
76
- padding-left: var(--a-spacing-2);
77
- list-style: decimal;
67
+ .navds-list ul > li > .navds-list__item-marker {
68
+ display: flex;
69
+ align-items: center;
70
+ height: var(--a-font-line-height-xlarge);
78
71
  }
79
72
 
80
- .navds-list ol li {
81
- padding-left: var(--a-spacing-1);
82
- margin-left: var(--a-spacing-2);
73
+ .navds-list--small ul > li > .navds-list__item-marker {
74
+ height: var(--a-font-line-height-large);
83
75
  }
84
76
 
85
- .navds-list ol li::marker {
86
- font-weight: var(--a-font-weight-bold);
87
- font-size: var(--a-font-size-large);
88
- color: var(--ac-list-marker-ol-color, var(--ac-list-marker-color, var(--a-icon-default)));
89
- line-height: var(--a-font-line-height-xlarge);
77
+ .navds-list__item-marker--bullet {
78
+ padding-left: 0.8rem;
79
+ color: var(--ac-list-marker-ul-color, var(--ac-list-marker-color, var(--a-icon-default)));
90
80
  }
91
81
 
92
- .navds-list--small ol li::marker {
93
- font-size: var(--a-font-size-small);
94
- line-height: var(--a-font-line-height-large);
82
+ .navds-list__item-marker--icon {
83
+ font-size: 1.5rem;
84
+ color: var(--ac-list-marker-icon-color, var(--ac-list-marker-color, var(--a-icon-default)));
95
85
  }
package/dist/component/list.min.css CHANGED
@@ -1 +1 @@
1
- .navds-list ol,.navds-list ul{margin-block:var(--a-spacing-4);padding:0}.navds-list--nested ol,.navds-list--nested ul{margin-block:var(--a-spacing-2)}.navds-list--small ol,.navds-list--small ul{margin-block:var(--a-spacing-3)}.navds-list li{margin-block-end:var(--a-spacing-2)}.navds-list:last-child>ol>li:last-child,.navds-list:last-child>ul>li:last-child{margin-bottom:0}.navds-list ul .navds-list__item{display:grid;gap:var(--a-spacing-3);grid-template-columns:auto 1fr;padding-left:0}.navds-list ul .navds-list__item::marker{content:none}.navds-list ol .navds-list__item-marker--icon{display:flex;grid-column:1/2}.navds-list .navds-list__item-marker--bullet{align-items:center;color:var(--ac-list-marker-ul-color,var(--ac-list-marker-color,var(--a-icon-default)));display:flex;grid-column:1/2;height:var(--a-font-line-height-xlarge)}.navds-list--small .navds-list__item-marker--bullet{height:var(--a-font-line-height-large)}.navds-list__item-marker--icon{align-items:center;color:var(--ac-list-marker-icon-color,var(--ac-list-marker-color,var(--a-icon-default)));display:flex;font-size:1.5rem;height:var(--a-font-line-height-xlarge);padding-block-end:1px}.navds-list--small .navds-list__item-marker--icon{height:var(--a-font-line-height-large)}.navds-list__item-marker--icon svg{flex-shrink:0}.navds-list ul .navds-list__item-content{grid-column:2/3}.navds-list ol{list-style:decimal;padding-left:var(--a-spacing-2)}.navds-list ol li{margin-left:var(--a-spacing-2);padding-left:var(--a-spacing-1)}.navds-list ol li::marker{color:var(--ac-list-marker-ol-color,var(--ac-list-marker-color,var(--a-icon-default)));font-size:var(--a-font-size-large);font-weight:var(--a-font-weight-bold);line-height:var(--a-font-line-height-xlarge)}.navds-list--small ol li::marker{font-size:var(--a-font-size-small);line-height:var(--a-font-line-height-large)}
1
+ .navds-list ol,.navds-list ul{margin-block:var(--a-spacing-4);padding:0}.navds-list--small ol,.navds-list--small ul{margin-block:var(--a-spacing-3)}.navds-list .navds-list :where(ul,ol){margin-block:var(--a-spacing-2) 0}.navds-list ol{padding-left:1.7rem}.navds-list ol>.navds-list__item{padding-left:.3rem}:root .navds-list ol,_::-webkit-full-page-media,_:future{padding-left:2.1rem}:root .navds-list ol .navds-list__item,_::-webkit-full-page-media,_:future{padding-left:0}.navds-list__item{margin-block-end:var(--a-spacing-2)}.navds-list__item:last-child{margin-block-end:0}.navds-list ul>.navds-list__item{display:grid;gap:var(--a-spacing-2);grid-template-columns:auto 1fr}.navds-list ol li::marker{color:var(--ac-list-marker-ol-color,var(--ac-list-marker-color,var(--a-icon-default)));font-weight:var(--a-font-weight-bold)}.navds-list__item-marker{width:1.5rem}.navds-list ul>li>.navds-list__item-marker{align-items:center;display:flex;height:var(--a-font-line-height-xlarge)}.navds-list--small ul>li>.navds-list__item-marker{height:var(--a-font-line-height-large)}.navds-list__item-marker--bullet{color:var(--ac-list-marker-ul-color,var(--ac-list-marker-color,var(--a-icon-default)));padding-left:.8rem}.navds-list__item-marker--icon{color:var(--ac-list-marker-icon-color,var(--ac-list-marker-color,var(--a-icon-default)));font-size:1.5rem}
package/dist/components.css CHANGED
@@ -345,10 +345,6 @@
345
345
  --__ac-accordion-header-shadow-color: var(--ac-accordion-header-border, var(--a-border-divider));
346
346
  }
347
347
 
348
- .navds-accordion__item:focus-within {
349
- position: relative;
350
- }
351
-
352
348
  /*************************
353
349
  * Header *
354
350
  *************************/
@@ -3095,6 +3091,10 @@
3095
3091
  cursor: default;
3096
3092
  }
3097
3093
 
3094
+ .navds-select--readonly .navds-select__chevron {
3095
+ color: var(--a-gray-500);
3096
+ }
3097
+
3098
3098
  .navds-switch {
3099
3099
  position: relative;
3100
3100
  min-height: 3rem;
@@ -3831,6 +3831,36 @@
3831
3831
  --__ac-combobox-input-height: 1.5rem;
3832
3832
  }
3833
3833
 
3834
+ .navds-combobox--disabled {
3835
+ opacity: 0.3;
3836
+ }
3837
+
3838
+ .navds-combobox--disabled .navds-combobox__wrapper *:hover {
3839
+ cursor: not-allowed;
3840
+ }
3841
+
3842
+ .navds-combobox--disabled .navds-text-field__input {
3843
+ border: 1px solid var(--a-border-default);
3844
+ }
3845
+
3846
+ .navds-combobox--disabled .navds-combobox__selected-options {
3847
+ pointer-events: none;
3848
+ }
3849
+
3850
+ .navds-combobox--readonly {
3851
+ pointer-events: none;
3852
+ }
3853
+
3854
+ .navds-combobox--readonly .navds-combobox__button-toggle-list {
3855
+ color: var(--a-gray-500);
3856
+ }
3857
+
3858
+ .navds-combobox--readonly .navds-text-field__input,
3859
+ .navds-combobox--readonly .navds-combobox__input {
3860
+ background-color: var(--a-surface-subtle);
3861
+ border-color: var(--a-border-subtle);
3862
+ }
3863
+
3834
3864
  .navds-combobox__button-clear svg,
3835
3865
  .navds-combobox__button-toggle-list svg,
3836
3866
  .navds-combobox__list svg {
@@ -5393,6 +5423,7 @@ button.navds-internalheader__title:active,
5393
5423
 
5394
5424
  .navds-date__field--readonly .navds-date__field-button {
5395
5425
  cursor: default;
5426
+ color: var(--a-gray-500);
5396
5427
  }
5397
5428
 
5398
5429
  .navds-date__caption-button {
@@ -7454,94 +7485,84 @@ button.navds-stepper__step {
7454
7485
  margin-block: var(--a-spacing-4);
7455
7486
  }
7456
7487
 
7457
- .navds-list--nested ul,
7458
- .navds-list--nested ol {
7459
- margin-block: var(--a-spacing-2);
7460
- }
7461
-
7462
7488
  .navds-list--small ul,
7463
7489
  .navds-list--small ol {
7464
7490
  margin-block: var(--a-spacing-3);
7465
7491
  }
7466
7492
 
7467
- .navds-list li {
7468
- margin-block-end: var(--a-spacing-2);
7493
+ .navds-list .navds-list :where(ul, ol) {
7494
+ margin-block: var(--a-spacing-2) 0;
7469
7495
  }
7470
7496
 
7471
- .navds-list:last-child > ul > li:last-child,
7472
- .navds-list:last-child > ol > li:last-child {
7473
- margin-bottom: 0;
7497
+ .navds-list ol {
7498
+ padding-left: 1.7rem;
7474
7499
  }
7475
7500
 
7476
- .navds-list ul .navds-list__item {
7477
- display: grid;
7478
- grid-template-columns: auto 1fr;
7479
- gap: var(--a-spacing-3);
7480
- padding-left: 0;
7501
+ .navds-list ol > .navds-list__item {
7502
+ padding-left: 0.3rem;
7481
7503
  }
7482
7504
 
7483
- .navds-list ul .navds-list__item::marker {
7484
- content: none;
7485
- }
7505
+ /* SAFARI HACK START */
7486
7506
 
7487
- .navds-list ol .navds-list__item-marker--icon {
7488
- grid-column: 1 / 2;
7489
- display: flex;
7507
+ /* stylelint-disable selector-type-no-unknown */
7508
+
7509
+ _::-webkit-full-page-media,
7510
+ _:future,
7511
+ :root .navds-list ol {
7512
+ padding-left: 2.1rem;
7490
7513
  }
7491
7514
 
7492
- .navds-list .navds-list__item-marker--bullet {
7493
- display: flex;
7494
- align-items: center;
7495
- height: var(--a-font-line-height-xlarge);
7496
- grid-column: 1 / 2;
7497
- color: var(--ac-list-marker-ul-color, var(--ac-list-marker-color, var(--a-icon-default)));
7515
+ _::-webkit-full-page-media,
7516
+ _:future,
7517
+ :root .navds-list ol .navds-list__item {
7518
+ padding-left: 0;
7498
7519
  }
7499
7520
 
7500
- .navds-list--small .navds-list__item-marker--bullet {
7501
- height: var(--a-font-line-height-large);
7521
+ /* SAFARI HACK END */
7522
+
7523
+ /* stylelint-enable selector-type-no-unknown */
7524
+
7525
+ .navds-list__item {
7526
+ margin-block-end: var(--a-spacing-2);
7502
7527
  }
7503
7528
 
7504
- .navds-list__item-marker--icon {
7505
- color: var(--ac-list-marker-icon-color, var(--ac-list-marker-color, var(--a-icon-default)));
7506
- display: flex;
7507
- align-items: center;
7508
- height: var(--a-font-line-height-xlarge);
7509
- padding-block-end: 1px;
7510
- font-size: 1.5rem;
7529
+ .navds-list__item:last-child {
7530
+ margin-block-end: 0;
7511
7531
  }
7512
7532
 
7513
- .navds-list--small .navds-list__item-marker--icon {
7514
- height: var(--a-font-line-height-large);
7533
+ .navds-list ul > .navds-list__item {
7534
+ display: grid;
7535
+ grid-template-columns: auto 1fr;
7536
+ gap: var(--a-spacing-2);
7515
7537
  }
7516
7538
 
7517
- .navds-list__item-marker--icon svg {
7518
- flex-shrink: 0;
7539
+ .navds-list ol li::marker {
7540
+ font-weight: var(--a-font-weight-bold);
7541
+ color: var(--ac-list-marker-ol-color, var(--ac-list-marker-color, var(--a-icon-default)));
7519
7542
  }
7520
7543
 
7521
- .navds-list ul .navds-list__item-content {
7522
- grid-column: 2 / 3;
7544
+ .navds-list__item-marker {
7545
+ width: 1.5rem;
7523
7546
  }
7524
7547
 
7525
- .navds-list ol {
7526
- padding-left: var(--a-spacing-2);
7527
- list-style: decimal;
7548
+ .navds-list ul > li > .navds-list__item-marker {
7549
+ display: flex;
7550
+ align-items: center;
7551
+ height: var(--a-font-line-height-xlarge);
7528
7552
  }
7529
7553
 
7530
- .navds-list ol li {
7531
- padding-left: var(--a-spacing-1);
7532
- margin-left: var(--a-spacing-2);
7554
+ .navds-list--small ul > li > .navds-list__item-marker {
7555
+ height: var(--a-font-line-height-large);
7533
7556
  }
7534
7557
 
7535
- .navds-list ol li::marker {
7536
- font-weight: var(--a-font-weight-bold);
7537
- font-size: var(--a-font-size-large);
7538
- color: var(--ac-list-marker-ol-color, var(--ac-list-marker-color, var(--a-icon-default)));
7539
- line-height: var(--a-font-line-height-xlarge);
7558
+ .navds-list__item-marker--bullet {
7559
+ padding-left: 0.8rem;
7560
+ color: var(--ac-list-marker-ul-color, var(--ac-list-marker-color, var(--a-icon-default)));
7540
7561
  }
7541
7562
 
7542
- .navds-list--small ol li::marker {
7543
- font-size: var(--a-font-size-small);
7544
- line-height: var(--a-font-line-height-large);
7563
+ .navds-list__item-marker--icon {
7564
+ font-size: 1.5rem;
7565
+ color: var(--ac-list-marker-icon-color, var(--ac-list-marker-color, var(--a-icon-default)));
7545
7566
  }
7546
7567
 
7547
7568
  .navds-box-bg {