@navikt/ds-css 7.5.3 → 7.6.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 (43) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/darkside/action-menu.darkside.css +1 -6
  3. package/darkside/button.darkside.css +128 -141
  4. package/darkside/expansioncard.darkside.css +2 -9
  5. package/darkside/form/combobox.darkside.css +12 -20
  6. package/darkside/form/file-upload.darkside.css +9 -9
  7. package/darkside/form/form-summary.darkside.css +1 -0
  8. package/darkside/form/index.css +14 -16
  9. package/darkside/form/select.darkside.css +74 -68
  10. package/darkside/form/switch.darkside.css +125 -132
  11. package/darkside/form/text-field.darkside.css +1 -1
  12. package/darkside/form/textarea.darkside.css +36 -78
  13. package/darkside/help-text.darkside.css +0 -6
  14. package/darkside/index.css +24 -12
  15. package/darkside/internalheader.darkside.css +45 -49
  16. package/darkside/modal.darkside.css +1 -4
  17. package/darkside/popover.darkside.css +1 -4
  18. package/darkside/primitives/index.css +30 -34
  19. package/darkside/read-more.darkside.css +68 -57
  20. package/darkside/skeleton.darkside.css +21 -24
  21. package/darkside/stepper.darkside.css +181 -221
  22. package/darkside/tabs.darkside.css +67 -74
  23. package/dist/component/form.css +22 -18
  24. package/dist/component/form.min.css +2 -2
  25. package/dist/component/index.css +40 -22
  26. package/dist/component/index.min.css +3 -3
  27. package/dist/component/modal.css +8 -0
  28. package/dist/component/modal.min.css +1 -1
  29. package/dist/component/readmore.css +4 -0
  30. package/dist/component/readmore.min.css +1 -1
  31. package/dist/components.css +40 -22
  32. package/dist/components.min.css +3 -3
  33. package/dist/global/tokens.css +1 -1
  34. package/dist/global/tokens.min.css +1 -1
  35. package/dist/index.css +40 -22
  36. package/dist/index.min.css +3 -3
  37. package/form/combobox.css +9 -2
  38. package/form/file-upload.css +7 -9
  39. package/form/select.css +2 -9
  40. package/form/switch.css +8 -0
  41. package/modal.css +8 -0
  42. package/package.json +2 -2
  43. package/read-more.css +4 -0
package/form/combobox.css CHANGED
@@ -96,7 +96,7 @@
96
96
  }
97
97
 
98
98
  .navds-combobox__selected-options {
99
- gap: var(--__ac-combobox-wrapper-inner-padding);
99
+ gap: 0;
100
100
  align-items: center;
101
101
  }
102
102
 
@@ -120,6 +120,14 @@
120
120
  padding-left: 0.25rem;
121
121
  }
122
122
 
123
+ .navds-combobox__selected-options[data-type="multiple"] {
124
+ gap: var(--__ac-combobox-wrapper-inner-padding);
125
+ }
126
+
127
+ .navds-combobox__selected-options > li:only-child > .navds-combobox__input {
128
+ margin-left: var(--a-spacing-1);
129
+ }
130
+
123
131
  .navds-combobox__input-wrapper {
124
132
  width: 100%;
125
133
  }
@@ -129,7 +137,6 @@
129
137
  border: none;
130
138
  padding: 0;
131
139
  margin: 0;
132
- margin-left: var(--a-spacing-1);
133
140
  min-width: 10ch;
134
141
  width: 100%;
135
142
  height: var(--__ac-combobox-input-height);
package/form/file-upload.css CHANGED
@@ -1,12 +1,3 @@
1
- /**
2
- * Makes it easier for user to use FileItem in semantic lists
3
- */
4
- .navds-file-upload :is(ul, li) {
5
- list-style: none;
6
- margin: 0;
7
- padding: 0;
8
- }
9
-
10
1
  /**
11
2
  * FileUpload.Dropzone
12
3
  */
@@ -163,6 +154,13 @@
163
154
  /**
164
155
  * FileUpload.Item
165
156
  */
157
+ .navds-file-upload :is(ul, li),
158
+ ul:has(> li.navds-file-item),
159
+ li.navds-file-item {
160
+ list-style: none;
161
+ margin: 0;
162
+ padding: 0;
163
+ }
166
164
 
167
165
  .navds-file-item__inner {
168
166
  outline: 1px solid var(--a-border-subtle);
package/form/select.css CHANGED
@@ -22,7 +22,7 @@
22
22
  box-shadow: none;
23
23
  }
24
24
 
25
- .navds-select__input.navds-select__input.navds-select__input:focus-visible {
25
+ .navds-select__input.navds-select__input.navds-select__input:focus {
26
26
  outline: 2px solid highlight;
27
27
  outline-offset: 2px;
28
28
  }
@@ -33,19 +33,12 @@
33
33
  cursor: pointer;
34
34
  }
35
35
 
36
- .navds-select__input:focus-visible {
36
+ .navds-select__input:focus {
37
37
  outline: none;
38
38
  border-color: var(--ac-select-active-border, var(--a-border-action-selected));
39
39
  box-shadow: var(--a-shadow-focus);
40
40
  }
41
41
 
42
- @supports not selector(:focus-visible) {
43
- .navds-select__input:focus {
44
- outline: none;
45
- box-shadow: var(--a-shadow-focus);
46
- }
47
- }
48
-
49
42
  .navds-select__container {
50
43
  position: relative;
51
44
  display: flex;
package/form/switch.css CHANGED
@@ -149,6 +149,14 @@
149
149
  color: var(--ac-switch-thumb-icon-checked, var(--a-icon-action-selected));
150
150
  }
151
151
 
152
+ .navds-switch__input:checked ~ .navds-switch__track .navds-switch__checkmark {
153
+ visibility: visible;
154
+ }
155
+
156
+ .navds-switch__checkmark {
157
+ visibility: hidden;
158
+ }
159
+
152
160
  @media (hover: hover) and (pointer: fine) {
153
161
  .navds-switch__input:hover ~ .navds-switch__track > .navds-switch__thumb {
154
162
  transform: translateX(0.125rem);
package/modal.css CHANGED
@@ -14,6 +14,10 @@
14
14
  max-height: 100%;
15
15
  max-width: 100%;
16
16
  color: var(--a-text-default);
17
+
18
+ /* In case Modal is opened with `show()`, in eg. Vergic screensharing */
19
+ inset: 0;
20
+ z-index: 9999;
17
21
  }
18
22
 
19
23
  .navds-modal[open] {
@@ -24,6 +28,7 @@
24
28
 
25
29
  .navds-modal--polyfilled {
26
30
  top: 50%;
31
+ bottom: unset; /* Overrides inset: 0 from .navds-modal */
27
32
  transform: translate(0, -50%);
28
33
 
29
34
  /* From polyfill (dialog-polyfill/dist/dialog-polyfill.css): */
@@ -132,6 +137,9 @@
132
137
  overflow: auto;
133
138
  overscroll-behavior: contain;
134
139
  position: relative; /* Needed to make sr-only elements position correctly - see Storybook */
140
+ }
141
+
142
+ .navds-modal:not(.navds-modal--polyfilled) .navds-modal__body {
135
143
  background:
136
144
  linear-gradient(var(--__ac-modal-bg) 30%, transparent) top,
137
145
  linear-gradient(transparent, var(--__ac-modal-bg) 60%) bottom,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@navikt/ds-css",
3
- "version": "7.5.3",
3
+ "version": "7.6.0",
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.5.3",
30
+ "@navikt/ds-tokens": "^7.6.0",
31
31
  "autoprefixer": "^10.4.20",
32
32
  "cssnano": "6.0.0",
33
33
  "fast-glob": "3.2.11",
package/read-more.css CHANGED
@@ -16,6 +16,10 @@
16
16
  padding: var(--a-spacing-05) var(--a-spacing-1-alt) var(--a-spacing-05) var(--a-spacing-05);
17
17
  }
18
18
 
19
+ .navds-read-more--large .navds-read-more__button {
20
+ padding: var(--a-spacing-3) var(--a-spacing-1-alt) var(--a-spacing-3) var(--a-spacing-05);
21
+ }
22
+
19
23
  @media (forced-colors: active) {
20
24
  .navds-read-more__button {
21
25
  background-color: ButtonFace;