@navikt/ds-css 4.11.2 → 4.12.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 (22) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/alert.css +8 -1
  3. package/copybutton.css +7 -0
  4. package/dist/component/alert.css +8 -1
  5. package/dist/component/alert.min.css +1 -1
  6. package/dist/component/copybutton.css +7 -0
  7. package/dist/component/copybutton.min.css +1 -1
  8. package/dist/component/form.css +21 -5
  9. package/dist/component/form.min.css +1 -1
  10. package/dist/component/index.css +62 -16
  11. package/dist/component/index.min.css +3 -3
  12. package/dist/component/list.css +33 -9
  13. package/dist/component/list.min.css +1 -1
  14. package/dist/components.css +61 -15
  15. package/dist/components.min.css +3 -3
  16. package/dist/global/tokens.css +1 -1
  17. package/dist/index.css +62 -16
  18. package/dist/index.min.css +3 -3
  19. package/form/combobox.css +5 -0
  20. package/form/radio-checkbox.css +21 -5
  21. package/list.css +33 -9
  22. package/package.json +2 -2
package/dist/component/list.css CHANGED
@@ -1,14 +1,24 @@
1
1
  .navds-list ul,
2
2
  .navds-list ol {
3
3
  padding: 0;
4
+ margin-block: var(--a-spacing-4);
4
5
  }
5
6
 
6
- .navds-list--nested {
7
- margin: var(--a-spacing-4) 0 var(--a-spacing-8) 0;
7
+ .navds-list--nested ul,
8
+ .navds-list--nested ol {
9
+ margin-block: var(--a-spacing-2);
8
10
  }
9
11
 
10
- .navds-list li:not(.navds-list__item--noMargin) {
11
- margin-bottom: var(--a-spacing-5);
12
+ .navds-list li {
13
+ margin-block-end: var(--a-spacing-5);
14
+ }
15
+
16
+ .navds-list--small li {
17
+ margin-block-end: var(--a-spacing-2);
18
+ }
19
+
20
+ .navds-list--nested li {
21
+ margin-block-end: var(--a-spacing-3);
12
22
  }
13
23
 
14
24
  .navds-list:last-child > ul > li:last-child,
@@ -34,17 +44,25 @@
34
44
 
35
45
  .navds-list .navds-list__item-marker--bullet {
36
46
  display: flex;
37
- margin-top: 0.375rem;
47
+ align-items: center;
48
+ height: var(--a-font-line-height-large);
38
49
  grid-column: 1 / 2;
39
- /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
40
50
  color: var(--ac-list-marker-ul-color, var(--ac-list-marker-color, var(--a-icon-default)));
41
51
  }
42
52
 
53
+ .navds-list--small .navds-list__item-marker--bullet {
54
+ height: var(--a-font-line-height-medium);
55
+ }
56
+
43
57
  .navds-list__item-marker--icon {
44
- /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
45
58
  color: var(--ac-list-marker-icon-color, var(--ac-list-marker-color, var(--a-icon-default)));
46
59
  display: flex;
47
60
  align-items: center;
61
+ height: var(--a-font-line-height-large);
62
+ padding-block-end: 1px;
63
+ }
64
+
65
+ .navds-list--small .navds-list__item-marker--icon {
48
66
  height: var(--a-font-line-height-medium);
49
67
  }
50
68
 
@@ -58,6 +76,7 @@
58
76
 
59
77
  .navds-list ol {
60
78
  padding-left: var(--a-spacing-2);
79
+ list-style: decimal;
61
80
  }
62
81
 
63
82
  .navds-list ol li {
@@ -67,7 +86,12 @@
67
86
 
68
87
  .navds-list ol li::marker {
69
88
  font-weight: var(--a-font-weight-bold);
70
- font-size: var(--a-font-size-medium);
71
- /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
89
+ font-size: var(--a-font-size-large);
72
90
  color: var(--ac-list-marker-ol-color, var(--ac-list-marker-color, var(--a-icon-default)));
91
+ line-height: var(--a-font-line-height-large);
92
+ }
93
+
94
+ .navds-list--small ol li::marker {
95
+ font-size: var(--a-font-size-small);
96
+ line-height: var(--a-font-line-height-medium);
73
97
  }
package/dist/component/list.min.css CHANGED
@@ -1 +1 @@
1
- .navds-list ol,.navds-list ul{padding:0}.navds-list--nested{margin:var(--a-spacing-4) 0 var(--a-spacing-8) 0}.navds-list li:not(.navds-list__item--noMargin){margin-bottom:var(--a-spacing-5)}.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{color:var(--ac-list-marker-ul-color,var(--ac-list-marker-color,var(--a-icon-default)));display:flex;grid-column:1/2;margin-top:.375rem}.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;height:var(--a-font-line-height-medium)}.navds-list__item-marker--icon svg{flex-shrink:0}.navds-list ul .navds-list__item-content{grid-column:2/3}.navds-list ol{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-medium);font-weight:var(--a-font-weight-bold)}
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 li{-webkit-margin-after:var(--a-spacing-5);margin-block-end:var(--a-spacing-5)}.navds-list--small li{-webkit-margin-after:var(--a-spacing-2);margin-block-end:var(--a-spacing-2)}.navds-list--nested li{-webkit-margin-after:var(--a-spacing-3);margin-block-end:var(--a-spacing-3)}.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-large)}.navds-list--small .navds-list__item-marker--bullet{height:var(--a-font-line-height-medium)}.navds-list__item-marker--icon{-webkit-padding-after:1px;align-items:center;color:var(--ac-list-marker-icon-color,var(--ac-list-marker-color,var(--a-icon-default)));display:flex;height:var(--a-font-line-height-large);padding-block-end:1px}.navds-list--small .navds-list__item-marker--icon{height:var(--a-font-line-height-medium)}.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-large)}.navds-list--small ol li::marker{font-size:var(--a-font-size-small);line-height:var(--a-font-line-height-medium)}
package/dist/components.css CHANGED
@@ -529,9 +529,15 @@
529
529
  font-size: 1.5rem;
530
530
  align-self: flex-start;
531
531
  height: var(--a-font-line-height-xlarge);
532
- margin: var(--a-spacing-1);
532
+ margin-inline: var(--a-spacing-1);
533
+ margin-block: 0;
534
+ margin-block-start: -1px;
533
535
  background: radial-gradient(circle, var(--a-surface-default) 50%, 0, transparent);
534
536
  }
537
+ .navds-alert--close-button > .navds-alert__icon,
538
+ .navds-alert--small > .navds-alert__icon {
539
+ margin-block-start: 0;
540
+ }
535
541
  .navds-alert--small > .navds-alert__icon {
536
542
  height: var(--a-font-line-height-large);
537
543
  }
@@ -1239,8 +1245,13 @@
1239
1245
  .navds-copybutton__icon {
1240
1246
  font-size: 1.5rem;
1241
1247
  display: flex;
1248
+ }
1249
+ .navds-copybutton__icon:first-of-type {
1242
1250
  margin-left: -0.25rem;
1243
1251
  }
1252
+ .navds-copybutton__icon:last-of-type {
1253
+ margin-right: -0.25rem;
1254
+ }
1244
1255
  .navds-copybutton__icon:only-child {
1245
1256
  margin: 0;
1246
1257
  }
@@ -1842,13 +1853,23 @@
1842
1853
  transform: translate(0.25rem, -50%);
1843
1854
  }
1844
1855
  .navds-checkbox__input:checked + .navds-checkbox__label::before {
1845
- background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+ICAgIDxnPiAgICA8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNCwxMGMtMC40LDAtMC44LTAuMS0xLjEtMC40TDAuNCw3LjFDMC4xLDYuOCwwLDYuNCwwLDZzMC4yLTAuOCwwLjUtMS4xQzEsNC40LDIsNC40LDIuNSw0LjlMNCw2LjRsNi40LTYgICAgQzEwLjgsMC4xLDExLjEsMCwxMS41LDBjMC40LDAsMC44LDAuMiwxLDAuNWMwLjYsMC42LDAuNSwxLjYtMC4xLDIuMXYwTDUsOS42QzQuNyw5LjksNC40LDEwLDQsMTB6IE0xMS44LDEuOUwxMS44LDEuOSAgICBDMTEuOCwxLjksMTEuOCwxLjksMTEuOCwxLjl6IE0xMS4yLDEuMUMxMS4yLDEuMSwxMS4yLDEuMSwxMS4yLDEuMUwxMS4yLDEuMXoiLz4gICAgPC9nPjwvc3ZnPg==);
1846
- background-position: 0.375rem center;
1847
- background-repeat: no-repeat;
1848
- background-size: 0.8125rem;
1849
1856
  box-shadow: none;
1850
1857
  background-color: var(--ac-radio-checkbox-action, var(--a-surface-action));
1851
1858
  }
1859
+ .navds-checkbox__input:where(:not(:checked)) + .navds-checkbox__label > .navds-checkbox__icon {
1860
+ display: none;
1861
+ }
1862
+ .navds-checkbox__input:checked + .navds-checkbox__label > .navds-checkbox__icon {
1863
+ color: var(--ac-radio-checkbox-bg, var(--a-surface-default));
1864
+ position: absolute;
1865
+ height: 1.5rem;
1866
+ transform: translate(0.375rem);
1867
+ pointer-events: none;
1868
+ }
1869
+ .navds-checkbox--small .navds-checkbox__input:checked + .navds-checkbox__label > .navds-checkbox__icon {
1870
+ transform: translate(0.25rem, -10%);
1871
+ height: 1.25rem;
1872
+ }
1852
1873
  .navds-checkbox--small > .navds-checkbox__input:checked + .navds-checkbox__label::before {
1853
1874
  background-position: 0.25rem center;
1854
1875
  }
@@ -1987,10 +2008,12 @@
1987
2008
  --__ac-radio-checkbox-readonly-border: var(--a-border-subtle), var(--a-shadow-focus);
1988
2009
  }
1989
2010
  .navds-checkbox--readonly > .navds-checkbox__input:checked + .navds-checkbox__label::before {
1990
- background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+ICAgIDxnPiAgICA8cGF0aCBmaWxsPSJyZ2JhKDAsIDAsIDAsIDAuNjUpIiBkPSJNNCwxMGMtMC40LDAtMC44LTAuMS0xLjEtMC40TDAuNCw3LjFDMC4xLDYuOCwwLDYuNCwwLDZzMC4yLTAuOCwwLjUtMS4xQzEsNC40LDIsNC40LDIuNSw0LjlMNCw2LjRsNi40LTYgICAgQzEwLjgsMC4xLDExLjEsMCwxMS41LDBjMC40LDAsMC44LDAuMiwxLDAuNWMwLjYsMC42LDAuNSwxLjYtMC4xLDIuMXYwTDUsOS42QzQuNyw5LjksNC40LDEwLDQsMTB6IE0xMS44LDEuOUwxMS44LDEuOSAgICBDMTEuOCwxLjksMTEuOCwxLjksMTEuOCwxLjl6IE0xMS4yLDEuMUMxMS4yLDEuMSwxMS4yLDEuMSwxMS4yLDEuMUwxMS4yLDEuMXoiLz4gICAgPC9nPjwvc3ZnPg==);
1991
2011
  box-shadow: inset 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
1992
2012
  background-color: var(--__ac-radio-checkbox-readonly-bg);
1993
2013
  }
2014
+ .navds-checkbox--readonly > .navds-checkbox__input:checked + .navds-checkbox__label > .navds-checkbox__icon {
2015
+ color: var(--a-icon-subtle);
2016
+ }
1994
2017
  .navds-radio--readonly > .navds-radio__input:checked + .navds-radio__label::before {
1995
2018
  box-shadow: inset 0 0 0 2px var(--__ac-radio-checkbox-readonly-border), inset 0 0 0 4px var(--__ac-radio-checkbox-readonly-bg);
1996
2019
  background-color: var(--a-icon-subtle);
@@ -2785,6 +2808,10 @@
2785
2808
  border-left: 4px solid var(--ac-combobox-list-item-hover-border-left, var(--a-border-strong));
2786
2809
  padding-left: calc(var(--a-spacing-3) - 4px);
2787
2810
  }
2811
+ .navds-form-field--small .navds-combobox__list-item--focus,
2812
+ .navds-form-field--small .navds-combobox__list-item:hover {
2813
+ padding-left: calc(var(--a-spacing-2) - 4px);
2814
+ }
2788
2815
  .navds-combobox__list-item--selected {
2789
2816
  background-color: var(--ac-combobox-list-item-selected-bg, var(--a-surface-selected));
2790
2817
  }
@@ -4938,12 +4965,20 @@ button.navds-stepper__step {
4938
4965
  .navds-list ul,
4939
4966
  .navds-list ol {
4940
4967
  padding: 0;
4968
+ margin-block: var(--a-spacing-4);
4941
4969
  }
4942
- .navds-list--nested {
4943
- margin: var(--a-spacing-4) 0 var(--a-spacing-8) 0;
4970
+ .navds-list--nested ul,
4971
+ .navds-list--nested ol {
4972
+ margin-block: var(--a-spacing-2);
4944
4973
  }
4945
- .navds-list li:not(.navds-list__item--noMargin) {
4946
- margin-bottom: var(--a-spacing-5);
4974
+ .navds-list li {
4975
+ margin-block-end: var(--a-spacing-5);
4976
+ }
4977
+ .navds-list--small li {
4978
+ margin-block-end: var(--a-spacing-2);
4979
+ }
4980
+ .navds-list--nested li {
4981
+ margin-block-end: var(--a-spacing-3);
4947
4982
  }
4948
4983
  .navds-list:last-child > ul > li:last-child,
4949
4984
  .navds-list:last-child > ol > li:last-child {
@@ -4964,16 +4999,22 @@ button.navds-stepper__step {
4964
4999
  }
4965
5000
  .navds-list .navds-list__item-marker--bullet {
4966
5001
  display: flex;
4967
- margin-top: 0.375rem;
5002
+ align-items: center;
5003
+ height: var(--a-font-line-height-large);
4968
5004
  grid-column: 1 / 2;
4969
- /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
4970
5005
  color: var(--ac-list-marker-ul-color, var(--ac-list-marker-color, var(--a-icon-default)));
4971
5006
  }
5007
+ .navds-list--small .navds-list__item-marker--bullet {
5008
+ height: var(--a-font-line-height-medium);
5009
+ }
4972
5010
  .navds-list__item-marker--icon {
4973
- /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
4974
5011
  color: var(--ac-list-marker-icon-color, var(--ac-list-marker-color, var(--a-icon-default)));
4975
5012
  display: flex;
4976
5013
  align-items: center;
5014
+ height: var(--a-font-line-height-large);
5015
+ padding-block-end: 1px;
5016
+ }
5017
+ .navds-list--small .navds-list__item-marker--icon {
4977
5018
  height: var(--a-font-line-height-medium);
4978
5019
  }
4979
5020
  .navds-list__item-marker--icon svg {
@@ -4984,6 +5025,7 @@ button.navds-stepper__step {
4984
5025
  }
4985
5026
  .navds-list ol {
4986
5027
  padding-left: var(--a-spacing-2);
5028
+ list-style: decimal;
4987
5029
  }
4988
5030
  .navds-list ol li {
4989
5031
  padding-left: var(--a-spacing-1);
@@ -4991,7 +5033,11 @@ button.navds-stepper__step {
4991
5033
  }
4992
5034
  .navds-list ol li::marker {
4993
5035
  font-weight: var(--a-font-weight-bold);
4994
- font-size: var(--a-font-size-medium);
4995
- /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
5036
+ font-size: var(--a-font-size-large);
4996
5037
  color: var(--ac-list-marker-ol-color, var(--ac-list-marker-color, var(--a-icon-default)));
5038
+ line-height: var(--a-font-line-height-large);
5039
+ }
5040
+ .navds-list--small ol li::marker {
5041
+ font-size: var(--a-font-size-small);
5042
+ line-height: var(--a-font-line-height-medium);
4997
5043
  }