@navikt/ds-css 7.1.0 → 7.1.2

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 +16 -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 +69 -53
  8. package/dist/component/index.min.css +2 -2
  9. package/dist/component/list.css +47 -56
  10. package/dist/component/list.min.css +1 -1
  11. package/dist/components.css +82 -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 +69 -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 +45 -56
  20. package/package.json +2 -2
package/dist/component/list.css CHANGED
@@ -4,92 +4,83 @@
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
+ list-style: decimal; /* This is the default value, but some frameworks have `ol,ul { list-style:none }` */
18
+ padding-left: 1.7rem;
24
19
  }
25
20
 
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;
21
+ .navds-list ol > .navds-list__item {
22
+ padding-left: 0.3rem;
31
23
  }
32
24
 
33
- .navds-list ul .navds-list__item::marker {
34
- content: none;
35
- }
25
+ /* SAFARI HACK START */
36
26
 
37
- .navds-list ol .navds-list__item-marker--icon {
38
- grid-column: 1 / 2;
39
- display: flex;
27
+ /* stylelint-disable selector-type-no-unknown */
28
+
29
+ _::-webkit-full-page-media,
30
+ _:future,
31
+ :root .navds-list ol {
32
+ padding-left: 2.1rem;
40
33
  }
41
34
 
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)));
35
+ _::-webkit-full-page-media,
36
+ _:future,
37
+ :root .navds-list ol .navds-list__item {
38
+ padding-left: 0;
48
39
  }
49
40
 
50
- .navds-list--small .navds-list__item-marker--bullet {
51
- height: var(--a-font-line-height-large);
41
+ /* SAFARI HACK END */
42
+
43
+ /* stylelint-enable selector-type-no-unknown */
44
+
45
+ .navds-list__item {
46
+ margin-block-end: var(--a-spacing-2);
52
47
  }
53
48
 
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;
49
+ .navds-list__item:last-child {
50
+ margin-block-end: 0;
61
51
  }
62
52
 
63
- .navds-list--small .navds-list__item-marker--icon {
64
- height: var(--a-font-line-height-large);
53
+ .navds-list ul > .navds-list__item {
54
+ display: grid;
55
+ grid-template-columns: auto 1fr;
56
+ gap: var(--a-spacing-2);
65
57
  }
66
58
 
67
- .navds-list__item-marker--icon svg {
68
- flex-shrink: 0;
59
+ .navds-list ol li::marker {
60
+ font-weight: var(--a-font-weight-bold);
61
+ color: var(--ac-list-marker-ol-color, var(--ac-list-marker-color, var(--a-icon-default)));
69
62
  }
70
63
 
71
- .navds-list ul .navds-list__item-content {
72
- grid-column: 2 / 3;
64
+ .navds-list__item-marker {
65
+ width: 1.5rem;
73
66
  }
74
67
 
75
- .navds-list ol {
76
- padding-left: var(--a-spacing-2);
77
- list-style: decimal;
68
+ .navds-list ul > li > .navds-list__item-marker {
69
+ display: flex;
70
+ align-items: center;
71
+ height: var(--a-font-line-height-xlarge);
78
72
  }
79
73
 
80
- .navds-list ol li {
81
- padding-left: var(--a-spacing-1);
82
- margin-left: var(--a-spacing-2);
74
+ .navds-list--small ul > li > .navds-list__item-marker {
75
+ height: var(--a-font-line-height-large);
83
76
  }
84
77
 
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);
78
+ .navds-list__item-marker--bullet {
79
+ padding-left: 0.8rem;
80
+ color: var(--ac-list-marker-ul-color, var(--ac-list-marker-color, var(--a-icon-default)));
90
81
  }
91
82
 
92
- .navds-list--small ol li::marker {
93
- font-size: var(--a-font-size-small);
94
- line-height: var(--a-font-line-height-large);
83
+ .navds-list__item-marker--icon {
84
+ font-size: 1.5rem;
85
+ color: var(--ac-list-marker-icon-color, var(--ac-list-marker-color, var(--a-icon-default)));
95
86
  }
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{list-style:decimal;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,85 @@ 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
+ list-style: decimal; /* This is the default value, but some frameworks have `ol,ul { list-style:none }` */
7499
+ padding-left: 1.7rem;
7470
7500
  }
7471
7501
 
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;
7502
+ .navds-list ol > .navds-list__item {
7503
+ padding-left: 0.3rem;
7477
7504
  }
7478
7505
 
7479
- .navds-list ul .navds-list__item::marker {
7480
- content: none;
7481
- }
7506
+ /* SAFARI HACK START */
7482
7507
 
7483
- .navds-list ol .navds-list__item-marker--icon {
7484
- grid-column: 1 / 2;
7485
- display: flex;
7508
+ /* stylelint-disable selector-type-no-unknown */
7509
+
7510
+ _::-webkit-full-page-media,
7511
+ _:future,
7512
+ :root .navds-list ol {
7513
+ padding-left: 2.1rem;
7486
7514
  }
7487
7515
 
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)));
7516
+ _::-webkit-full-page-media,
7517
+ _:future,
7518
+ :root .navds-list ol .navds-list__item {
7519
+ padding-left: 0;
7494
7520
  }
7495
7521
 
7496
- .navds-list--small .navds-list__item-marker--bullet {
7497
- height: var(--a-font-line-height-large);
7522
+ /* SAFARI HACK END */
7523
+
7524
+ /* stylelint-enable selector-type-no-unknown */
7525
+
7526
+ .navds-list__item {
7527
+ margin-block-end: var(--a-spacing-2);
7498
7528
  }
7499
7529
 
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;
7530
+ .navds-list__item:last-child {
7531
+ margin-block-end: 0;
7507
7532
  }
7508
7533
 
7509
- .navds-list--small .navds-list__item-marker--icon {
7510
- height: var(--a-font-line-height-large);
7534
+ .navds-list ul > .navds-list__item {
7535
+ display: grid;
7536
+ grid-template-columns: auto 1fr;
7537
+ gap: var(--a-spacing-2);
7511
7538
  }
7512
7539
 
7513
- .navds-list__item-marker--icon svg {
7514
- flex-shrink: 0;
7540
+ .navds-list ol li::marker {
7541
+ font-weight: var(--a-font-weight-bold);
7542
+ color: var(--ac-list-marker-ol-color, var(--ac-list-marker-color, var(--a-icon-default)));
7515
7543
  }
7516
7544
 
7517
- .navds-list ul .navds-list__item-content {
7518
- grid-column: 2 / 3;
7545
+ .navds-list__item-marker {
7546
+ width: 1.5rem;
7519
7547
  }
7520
7548
 
7521
- .navds-list ol {
7522
- padding-left: var(--a-spacing-2);
7523
- list-style: decimal;
7549
+ .navds-list ul > li > .navds-list__item-marker {
7550
+ display: flex;
7551
+ align-items: center;
7552
+ height: var(--a-font-line-height-xlarge);
7524
7553
  }
7525
7554
 
7526
- .navds-list ol li {
7527
- padding-left: var(--a-spacing-1);
7528
- margin-left: var(--a-spacing-2);
7555
+ .navds-list--small ul > li > .navds-list__item-marker {
7556
+ height: var(--a-font-line-height-large);
7529
7557
  }
7530
7558
 
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);
7559
+ .navds-list__item-marker--bullet {
7560
+ padding-left: 0.8rem;
7561
+ color: var(--ac-list-marker-ul-color, var(--ac-list-marker-color, var(--a-icon-default)));
7536
7562
  }
7537
7563
 
7538
- .navds-list--small ol li::marker {
7539
- font-size: var(--a-font-size-small);
7540
- line-height: var(--a-font-line-height-large);
7564
+ .navds-list__item-marker--icon {
7565
+ font-size: 1.5rem;
7566
+ color: var(--ac-list-marker-icon-color, var(--ac-list-marker-color, var(--a-icon-default)));
7541
7567
  }
7542
7568
 
7543
7569
  .navds-box-bg {