@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/form/combobox.css CHANGED
@@ -20,6 +20,36 @@
20
20
  --__ac-combobox-input-height: 1.5rem;
21
21
  }
22
22
 
23
+ .navds-combobox--disabled {
24
+ opacity: 0.3;
25
+ }
26
+
27
+ .navds-combobox--disabled .navds-combobox__wrapper *:hover {
28
+ cursor: not-allowed;
29
+ }
30
+
31
+ .navds-combobox--disabled .navds-text-field__input {
32
+ border: 1px solid var(--a-border-default);
33
+ }
34
+
35
+ .navds-combobox--disabled .navds-combobox__selected-options {
36
+ pointer-events: none;
37
+ }
38
+
39
+ .navds-combobox--readonly {
40
+ pointer-events: none;
41
+ }
42
+
43
+ .navds-combobox--readonly .navds-combobox__button-toggle-list {
44
+ color: var(--a-gray-500);
45
+ }
46
+
47
+ .navds-combobox--readonly .navds-text-field__input,
48
+ .navds-combobox--readonly .navds-combobox__input {
49
+ background-color: var(--a-surface-subtle);
50
+ border-color: var(--a-border-subtle);
51
+ }
52
+
23
53
  .navds-combobox__button-clear svg,
24
54
  .navds-combobox__button-toggle-list svg,
25
55
  .navds-combobox__list svg {
package/form/select.css CHANGED
@@ -109,3 +109,7 @@
109
109
  border-color: var(--a-border-subtle);
110
110
  cursor: default;
111
111
  }
112
+
113
+ .navds-select--readonly .navds-select__chevron {
114
+ color: var(--a-gray-500);
115
+ }
package/list.css CHANGED
@@ -4,92 +4,81 @@
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 */
26
+ /* stylelint-disable selector-type-no-unknown */
36
27
 
37
- .navds-list ol .navds-list__item-marker--icon {
38
- grid-column: 1 / 2;
39
- display: flex;
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
+ /* stylelint-enable selector-type-no-unknown */
42
+
43
+ .navds-list__item {
44
+ margin-block-end: var(--a-spacing-2);
52
45
  }
53
46
 
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;
47
+ .navds-list__item:last-child {
48
+ margin-block-end: 0;
61
49
  }
62
50
 
63
- .navds-list--small .navds-list__item-marker--icon {
64
- height: var(--a-font-line-height-large);
51
+ .navds-list ul > .navds-list__item {
52
+ display: grid;
53
+ grid-template-columns: auto 1fr;
54
+ gap: var(--a-spacing-2);
65
55
  }
66
56
 
67
- .navds-list__item-marker--icon svg {
68
- flex-shrink: 0;
57
+ .navds-list ol li::marker {
58
+ font-weight: var(--a-font-weight-bold);
59
+ color: var(--ac-list-marker-ol-color, var(--ac-list-marker-color, var(--a-icon-default)));
69
60
  }
70
61
 
71
- .navds-list ul .navds-list__item-content {
72
- grid-column: 2 / 3;
62
+ .navds-list__item-marker {
63
+ width: 1.5rem;
73
64
  }
74
65
 
75
- .navds-list ol {
76
- padding-left: var(--a-spacing-2);
77
- list-style: decimal;
66
+ .navds-list ul > li > .navds-list__item-marker {
67
+ display: flex;
68
+ align-items: center;
69
+ height: var(--a-font-line-height-xlarge);
78
70
  }
79
71
 
80
- .navds-list ol li {
81
- padding-left: var(--a-spacing-1);
82
- margin-left: var(--a-spacing-2);
72
+ .navds-list--small ul > li > .navds-list__item-marker {
73
+ height: var(--a-font-line-height-large);
83
74
  }
84
75
 
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);
76
+ .navds-list__item-marker--bullet {
77
+ padding-left: 0.8rem;
78
+ color: var(--ac-list-marker-ul-color, var(--ac-list-marker-color, var(--a-icon-default)));
90
79
  }
91
80
 
92
- .navds-list--small ol li::marker {
93
- font-size: var(--a-font-size-small);
94
- line-height: var(--a-font-line-height-large);
81
+ .navds-list__item-marker--icon {
82
+ font-size: 1.5rem;
83
+ color: var(--ac-list-marker-icon-color, var(--ac-list-marker-color, var(--a-icon-default)));
95
84
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@navikt/ds-css",
3
- "version": "7.1.0",
3
+ "version": "7.1.2",
4
4
  "description": "CSS for NAV Designsystem",
5
5
  "author": "Aksel | NAV designsystem team",
6
6
  "keywords": [
@@ -27,7 +27,7 @@
27
27
  "css:get-version": "node config/get-version.js"
28
28
  },
29
29
  "devDependencies": {
30
- "@navikt/ds-tokens": "^7.1.0",
30
+ "@navikt/ds-tokens": "^7.1.2",
31
31
  "cssnano": "6.0.0",
32
32
  "fast-glob": "3.2.11",
33
33
  "lodash": "4.17.21",