@navikt/ds-css 7.1.0 → 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 (20) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/date.css +1 -0
  3. package/dist/component/date.css +1 -0
  4. package/dist/component/date.min.css +1 -1
  5. package/dist/component/form.css +26 -0
  6. package/dist/component/form.min.css +1 -1
  7. package/dist/component/index.css +68 -53
  8. package/dist/component/index.min.css +2 -2
  9. package/dist/component/list.css +46 -56
  10. package/dist/component/list.min.css +1 -1
  11. package/dist/components.css +81 -56
  12. package/dist/components.min.css +1 -1
  13. package/dist/global/tokens.css +1 -1
  14. package/dist/global/tokens.min.css +1 -1
  15. package/dist/index.css +68 -53
  16. package/dist/index.min.css +2 -2
  17. package/form/combobox.css +30 -0
  18. package/form/select.css +4 -0
  19. package/list.css +44 -56
  20. 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
@@ -3091,6 +3091,10 @@
3091
3091
  cursor: default;
3092
3092
  }
3093
3093
 
3094
+ .navds-select--readonly .navds-select__chevron {
3095
+ color: var(--a-gray-500);
3096
+ }
3097
+
3094
3098
  .navds-switch {
3095
3099
  position: relative;
3096
3100
  min-height: 3rem;
@@ -3827,6 +3831,36 @@
3827
3831
  --__ac-combobox-input-height: 1.5rem;
3828
3832
  }
3829
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
+
3830
3864
  .navds-combobox__button-clear svg,
3831
3865
  .navds-combobox__button-toggle-list svg,
3832
3866
  .navds-combobox__list svg {
@@ -5389,6 +5423,7 @@ button.navds-internalheader__title:active,
5389
5423
 
5390
5424
  .navds-date__field--readonly .navds-date__field-button {
5391
5425
  cursor: default;
5426
+ color: var(--a-gray-500);
5392
5427
  }
5393
5428
 
5394
5429
  .navds-date__caption-button {
@@ -7450,94 +7485,84 @@ button.navds-stepper__step {
7450
7485
  margin-block: var(--a-spacing-4);
7451
7486
  }
7452
7487
 
7453
- .navds-list--nested ul,
7454
- .navds-list--nested ol {
7455
- margin-block: var(--a-spacing-2);
7456
- }
7457
-
7458
7488
  .navds-list--small ul,
7459
7489
  .navds-list--small ol {
7460
7490
  margin-block: var(--a-spacing-3);
7461
7491
  }
7462
7492
 
7463
- .navds-list li {
7464
- margin-block-end: var(--a-spacing-2);
7493
+ .navds-list .navds-list :where(ul, ol) {
7494
+ margin-block: var(--a-spacing-2) 0;
7465
7495
  }
7466
7496
 
7467
- .navds-list:last-child > ul > li:last-child,
7468
- .navds-list:last-child > ol > li:last-child {
7469
- margin-bottom: 0;
7497
+ .navds-list ol {
7498
+ padding-left: 1.7rem;
7470
7499
  }
7471
7500
 
7472
- .navds-list ul .navds-list__item {
7473
- display: grid;
7474
- grid-template-columns: auto 1fr;
7475
- gap: var(--a-spacing-3);
7476
- padding-left: 0;
7501
+ .navds-list ol > .navds-list__item {
7502
+ padding-left: 0.3rem;
7477
7503
  }
7478
7504
 
7479
- .navds-list ul .navds-list__item::marker {
7480
- content: none;
7481
- }
7505
+ /* SAFARI HACK START */
7482
7506
 
7483
- .navds-list ol .navds-list__item-marker--icon {
7484
- grid-column: 1 / 2;
7485
- 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;
7486
7513
  }
7487
7514
 
7488
- .navds-list .navds-list__item-marker--bullet {
7489
- display: flex;
7490
- align-items: center;
7491
- height: var(--a-font-line-height-xlarge);
7492
- grid-column: 1 / 2;
7493
- 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;
7494
7519
  }
7495
7520
 
7496
- .navds-list--small .navds-list__item-marker--bullet {
7497
- 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);
7498
7527
  }
7499
7528
 
7500
- .navds-list__item-marker--icon {
7501
- color: var(--ac-list-marker-icon-color, var(--ac-list-marker-color, var(--a-icon-default)));
7502
- display: flex;
7503
- align-items: center;
7504
- height: var(--a-font-line-height-xlarge);
7505
- padding-block-end: 1px;
7506
- font-size: 1.5rem;
7529
+ .navds-list__item:last-child {
7530
+ margin-block-end: 0;
7507
7531
  }
7508
7532
 
7509
- .navds-list--small .navds-list__item-marker--icon {
7510
- 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);
7511
7537
  }
7512
7538
 
7513
- .navds-list__item-marker--icon svg {
7514
- 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)));
7515
7542
  }
7516
7543
 
7517
- .navds-list ul .navds-list__item-content {
7518
- grid-column: 2 / 3;
7544
+ .navds-list__item-marker {
7545
+ width: 1.5rem;
7519
7546
  }
7520
7547
 
7521
- .navds-list ol {
7522
- padding-left: var(--a-spacing-2);
7523
- 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);
7524
7552
  }
7525
7553
 
7526
- .navds-list ol li {
7527
- padding-left: var(--a-spacing-1);
7528
- margin-left: var(--a-spacing-2);
7554
+ .navds-list--small ul > li > .navds-list__item-marker {
7555
+ height: var(--a-font-line-height-large);
7529
7556
  }
7530
7557
 
7531
- .navds-list ol li::marker {
7532
- font-weight: var(--a-font-weight-bold);
7533
- font-size: var(--a-font-size-large);
7534
- color: var(--ac-list-marker-ol-color, var(--ac-list-marker-color, var(--a-icon-default)));
7535
- 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)));
7536
7561
  }
7537
7562
 
7538
- .navds-list--small ol li::marker {
7539
- font-size: var(--a-font-size-small);
7540
- 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)));
7541
7566
  }
7542
7567
 
7543
7568
  .navds-box-bg {