@navikt/ds-css 8.11.1 → 8.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 (10) hide show
  1. package/dist/component/actionmenu.css +34 -11
  2. package/dist/component/actionmenu.min.css +1 -1
  3. package/dist/components.css +34 -11
  4. package/dist/components.min.css +1 -1
  5. package/dist/global/tokens.css +1 -1
  6. package/dist/global/tokens.min.css +1 -1
  7. package/dist/index.css +35 -12
  8. package/dist/index.min.css +1 -1
  9. package/package.json +2 -2
  10. package/src/action-menu.css +33 -10
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@navikt/ds-css",
3
- "version": "8.11.1",
3
+ "version": "8.12.0",
4
4
  "description": "CSS for Nav Designsystem",
5
5
  "author": "Aksel | Nav designsystem team",
6
6
  "keywords": [
@@ -32,7 +32,7 @@
32
32
  "css:get-version": "node config/get-version.js"
33
33
  },
34
34
  "devDependencies": {
35
- "@navikt/ds-tokens": "^8.11.1",
35
+ "@navikt/ds-tokens": "^8.12.0",
36
36
  "browserslist": "^4.25.0",
37
37
  "esbuild": "^0.28.0",
38
38
  "fast-glob": "3.3.3",
package/src/action-menu.css CHANGED
@@ -1,5 +1,19 @@
1
1
  /* --------------------------- ActionMenu content --------------------------- */
2
2
  .aksel-action-menu__content {
3
+ --__axc-action-menu-content-p-block: var(--ax-space-6);
4
+ --__axc-action-menu-content-p-inline: var(--ax-space-8);
5
+ --__axc-action-menu-item-height: 2rem;
6
+ --__axc-action-menu-item-font-size: var(--ax-font-size-medium);
7
+ --__axc-action-menu-content-group-label-pt: var(--ax-space-2);
8
+
9
+ &[data-size="medium"] {
10
+ --__axc-action-menu-content-p-block: var(--ax-space-8);
11
+ --__axc-action-menu-content-p-inline: var(--ax-space-12);
12
+ --__axc-action-menu-item-height: var(--ax-space-40);
13
+ --__axc-action-menu-item-font-size: var(--ax-font-size-large);
14
+ --__axc-action-menu-content-group-label-pt: var(--ax-space-4);
15
+ }
16
+
3
17
  overflow: hidden;
4
18
  border-radius: var(--ax-radius-12);
5
19
  border: 1px solid var(--ax-border-neutral-subtleA);
@@ -19,10 +33,8 @@
19
33
  }
20
34
 
21
35
  .aksel-action-menu__content > .aksel-action-menu__content-inner {
22
- --__axc-action-menu-content-p: var(--ax-space-8);
23
36
  --__axc-action-menu-item-pr: var(--ax-space-8);
24
37
  --__axc-action-menu-item-pl: var(--ax-space-8);
25
- --__axc-action-menu-item-height: 2rem;
26
38
 
27
39
  border-radius: var(--ax-radius-12);
28
40
  background-color: var(--ax-bg-raised);
@@ -30,7 +42,8 @@
30
42
  max-width: min(95vw, 640px);
31
43
  animation-duration: 160ms;
32
44
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
33
- padding: var(--__axc-action-menu-content-p);
45
+ padding-block: var(--__axc-action-menu-content-p-block);
46
+ padding-inline: var(--__axc-action-menu-content-p-inline);
34
47
  overflow: auto;
35
48
  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
36
49
  max-height: var(--__axc-action-menu-content-available-height);
@@ -47,8 +60,8 @@
47
60
  position: relative;
48
61
  padding-left: var(--__axc-action-menu-item-pl);
49
62
  padding-right: var(--__axc-action-menu-item-pr);
50
- font-size: var(--ax-font-size-medium);
51
- scroll-margin-block: var(--__axc-action-menu-content-p);
63
+ font-size: var(--__axc-action-menu-item-font-size);
64
+ scroll-margin-block: var(--__axc-action-menu-content-p-block);
52
65
  line-height: 1.5;
53
66
  color: var(--ax-text-neutral);
54
67
  text-decoration: none;
@@ -68,8 +81,14 @@
68
81
  pointer-events: none;
69
82
  }
70
83
 
84
+ /* Indent items with left marker or if data-indent is set to true */
85
+ &[data-indent="true"],
71
86
  &[data-marker="left"] {
72
- --__axc-action-menu-item-pl: var(--ax-space-24);
87
+ --__axc-action-menu-item-pl: var(--ax-space-28); /* 28px */
88
+
89
+ .aksel-action-menu__content[data-size="medium"] & {
90
+ --__axc-action-menu-item-pl: var(--ax-space-32); /* 32px */
91
+ }
73
92
  }
74
93
  }
75
94
 
@@ -152,19 +171,23 @@
152
171
  .aksel-action-menu__label {
153
172
  display: flex;
154
173
  align-items: center;
155
- min-height: calc(var(--__axc-action-menu-item-height) - 6px);
174
+ min-height: var(--__axc-action-menu-item-height);
156
175
  padding-right: var(--__axc-action-menu-item-pr);
157
176
  padding-left: var(--__axc-action-menu-item-pl);
158
- color: var(--ax-text-neutral-subtle);
159
177
  border-radius: var(--ax-radius-4);
160
178
  user-select: none;
161
179
  cursor: default;
162
- font-size: var(--ax-font-size-small);
180
+ font-size: var(--ax-font-size-medium);
181
+ font-weight: var(--ax-font-weight-bold);
182
+ }
183
+
184
+ .aksel-action-menu__group:not(:first-child) .aksel-action-menu__label {
185
+ padding-top: var(--__axc-action-menu-content-group-label-pt);
163
186
  }
164
187
 
165
188
  .aksel-action-menu__divider {
166
189
  height: 1px;
167
- margin-block: var(--ax-space-8);
190
+ margin-block: var(--ax-space-4);
168
191
  background-color: var(--ax-border-neutral-subtleA);
169
192
  }
170
193