@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.
- package/dist/component/actionmenu.css +34 -11
- package/dist/component/actionmenu.min.css +1 -1
- package/dist/components.css +34 -11
- package/dist/components.min.css +1 -1
- package/dist/global/tokens.css +1 -1
- package/dist/global/tokens.min.css +1 -1
- package/dist/index.css +35 -12
- package/dist/index.min.css +1 -1
- package/package.json +2 -2
- package/src/action-menu.css +33 -10
|
@@ -1,6 +1,22 @@
|
|
|
1
1
|
@layer aksel.reset, aksel.theming, aksel.baseline, aksel.print, aksel.typography, aksel.components.core, aksel.components.core.loader, aksel.components.core.button, aksel.components.form;
|
|
2
2
|
|
|
3
3
|
@layer aksel.components.modules {
|
|
4
|
+
.aksel-action-menu__content {
|
|
5
|
+
--__axc-action-menu-content-p-block: var(--ax-space-6);
|
|
6
|
+
--__axc-action-menu-content-p-inline: var(--ax-space-8);
|
|
7
|
+
--__axc-action-menu-item-height: 2rem;
|
|
8
|
+
--__axc-action-menu-item-font-size: var(--ax-font-size-medium);
|
|
9
|
+
--__axc-action-menu-content-group-label-pt: var(--ax-space-2);
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.aksel-action-menu__content[data-size="medium"] {
|
|
13
|
+
--__axc-action-menu-content-p-block: var(--ax-space-8);
|
|
14
|
+
--__axc-action-menu-content-p-inline: var(--ax-space-12);
|
|
15
|
+
--__axc-action-menu-item-height: var(--ax-space-40);
|
|
16
|
+
--__axc-action-menu-item-font-size: var(--ax-font-size-large);
|
|
17
|
+
--__axc-action-menu-content-group-label-pt: var(--ax-space-4);
|
|
18
|
+
}
|
|
19
|
+
|
|
4
20
|
.aksel-action-menu__content {
|
|
5
21
|
border-radius: var(--ax-radius-12);
|
|
6
22
|
border: 1px solid var(--ax-border-neutral-subtleA);
|
|
@@ -19,15 +35,14 @@
|
|
|
19
35
|
}
|
|
20
36
|
|
|
21
37
|
.aksel-action-menu__content > .aksel-action-menu__content-inner {
|
|
22
|
-
--__axc-action-menu-content-p: var(--ax-space-8);
|
|
23
38
|
--__axc-action-menu-item-pr: var(--ax-space-8);
|
|
24
39
|
--__axc-action-menu-item-pl: var(--ax-space-8);
|
|
25
|
-
--__axc-action-menu-item-height: 2rem;
|
|
26
40
|
border-radius: var(--ax-radius-12);
|
|
27
41
|
background-color: var(--ax-bg-raised);
|
|
28
42
|
min-width: 128px;
|
|
29
43
|
max-width: min(95vw, 640px);
|
|
30
|
-
padding: var(--__axc-action-menu-content-p);
|
|
44
|
+
padding-block: var(--__axc-action-menu-content-p-block);
|
|
45
|
+
padding-inline: var(--__axc-action-menu-content-p-inline);
|
|
31
46
|
max-height: var(--__axc-action-menu-content-available-height);
|
|
32
47
|
animation-duration: .16s;
|
|
33
48
|
animation-timing-function: cubic-bezier(.16, 1, .3, 1);
|
|
@@ -42,8 +57,8 @@
|
|
|
42
57
|
border-radius: var(--ax-radius-8);
|
|
43
58
|
padding-left: var(--__axc-action-menu-item-pl);
|
|
44
59
|
padding-right: var(--__axc-action-menu-item-pr);
|
|
45
|
-
font-size: var(--
|
|
46
|
-
scroll-margin-block: var(--__axc-action-menu-content-p);
|
|
60
|
+
font-size: var(--__axc-action-menu-item-font-size);
|
|
61
|
+
scroll-margin-block: var(--__axc-action-menu-content-p-block);
|
|
47
62
|
color: var(--ax-text-neutral);
|
|
48
63
|
line-height: 1.5;
|
|
49
64
|
text-decoration: none;
|
|
@@ -66,8 +81,12 @@
|
|
|
66
81
|
pointer-events: none;
|
|
67
82
|
}
|
|
68
83
|
|
|
69
|
-
.aksel-action-menu__item[data-marker="left"] {
|
|
70
|
-
--__axc-action-menu-item-pl: var(--ax-space-
|
|
84
|
+
.aksel-action-menu__item[data-indent="true"], .aksel-action-menu__item[data-marker="left"] {
|
|
85
|
+
--__axc-action-menu-item-pl: var(--ax-space-28);
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.aksel-action-menu__content[data-size="medium"] :is(.aksel-action-menu__item[data-indent="true"], .aksel-action-menu__item[data-marker="left"]) {
|
|
89
|
+
--__axc-action-menu-item-pl: var(--ax-space-32);
|
|
71
90
|
}
|
|
72
91
|
|
|
73
92
|
.aksel-action-menu__sub-trigger {
|
|
@@ -142,22 +161,26 @@
|
|
|
142
161
|
}
|
|
143
162
|
|
|
144
163
|
.aksel-action-menu__label {
|
|
145
|
-
min-height:
|
|
164
|
+
min-height: var(--__axc-action-menu-item-height);
|
|
146
165
|
padding-right: var(--__axc-action-menu-item-pr);
|
|
147
166
|
padding-left: var(--__axc-action-menu-item-pl);
|
|
148
|
-
color: var(--ax-text-neutral-subtle);
|
|
149
167
|
border-radius: var(--ax-radius-4);
|
|
150
168
|
-webkit-user-select: none;
|
|
151
169
|
user-select: none;
|
|
152
170
|
cursor: default;
|
|
153
|
-
font-size: var(--ax-font-size-
|
|
171
|
+
font-size: var(--ax-font-size-medium);
|
|
172
|
+
font-weight: var(--ax-font-weight-bold);
|
|
154
173
|
align-items: center;
|
|
155
174
|
display: flex;
|
|
156
175
|
}
|
|
157
176
|
|
|
177
|
+
.aksel-action-menu__group:not(:first-child) .aksel-action-menu__label {
|
|
178
|
+
padding-top: var(--__axc-action-menu-content-group-label-pt);
|
|
179
|
+
}
|
|
180
|
+
|
|
158
181
|
.aksel-action-menu__divider {
|
|
159
182
|
height: 1px;
|
|
160
|
-
margin-block: var(--ax-space-
|
|
183
|
+
margin-block: var(--ax-space-4);
|
|
161
184
|
background-color: var(--ax-border-neutral-subtleA);
|
|
162
185
|
}
|
|
163
186
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer aksel.reset,aksel.theming,aksel.baseline,aksel.print,aksel.typography,aksel.components.core,aksel.components.core.loader,aksel.components.core.button,aksel.components.form;@layer aksel.components.modules{.aksel-action-menu__content{border-radius:var(--ax-radius-12);border:1px solid var(--ax-border-neutral-subtleA);box-shadow:var(--ax-shadow-dialog);transform-origin:var(--__axc-action-menu-content-transform-origin);transition:transform .15s ease allow-discrete,opacity .15s ease allow-discrete;overflow:hidden}@starting-style{.aksel-action-menu__content[data-state=open]{opacity:.8;transform:scale3d(.94,.94,.94)}}.aksel-action-menu__content>.aksel-action-menu__content-inner{--__axc-action-menu-
|
|
1
|
+
@layer aksel.reset,aksel.theming,aksel.baseline,aksel.print,aksel.typography,aksel.components.core,aksel.components.core.loader,aksel.components.core.button,aksel.components.form;@layer aksel.components.modules{.aksel-action-menu__content{--__axc-action-menu-content-p-block: var(--ax-space-6);--__axc-action-menu-content-p-inline: var(--ax-space-8);--__axc-action-menu-item-height: 2rem;--__axc-action-menu-item-font-size: var(--ax-font-size-medium);--__axc-action-menu-content-group-label-pt: var(--ax-space-2)}.aksel-action-menu__content[data-size=medium]{--__axc-action-menu-content-p-block: var(--ax-space-8);--__axc-action-menu-content-p-inline: var(--ax-space-12);--__axc-action-menu-item-height: var(--ax-space-40);--__axc-action-menu-item-font-size: var(--ax-font-size-large);--__axc-action-menu-content-group-label-pt: var(--ax-space-4)}.aksel-action-menu__content{border-radius:var(--ax-radius-12);border:1px solid var(--ax-border-neutral-subtleA);box-shadow:var(--ax-shadow-dialog);transform-origin:var(--__axc-action-menu-content-transform-origin);transition:transform .15s ease allow-discrete,opacity .15s ease allow-discrete;overflow:hidden}@starting-style{.aksel-action-menu__content[data-state=open]{opacity:.8;transform:scale3d(.94,.94,.94)}}.aksel-action-menu__content>.aksel-action-menu__content-inner{--__axc-action-menu-item-pr: var(--ax-space-8);--__axc-action-menu-item-pl: var(--ax-space-8);border-radius:var(--ax-radius-12);background-color:var(--ax-bg-raised);min-width:128px;max-width:min(95vw,640px);padding-block:var(--__axc-action-menu-content-p-block);padding-inline:var(--__axc-action-menu-content-p-inline);max-height:var(--__axc-action-menu-content-available-height);animation-duration:.16s;animation-timing-function:cubic-bezier(.16,1,.3,1);overflow:auto}.aksel-action-menu__item{align-items:center;gap:var(--ax-space-8);min-height:var(--__axc-action-menu-item-height);cursor:default;border-radius:var(--ax-radius-8);padding-left:var(--__axc-action-menu-item-pl);padding-right:var(--__axc-action-menu-item-pr);font-size:var(--__axc-action-menu-item-font-size);scroll-margin-block:var(--__axc-action-menu-content-p-block);color:var(--ax-text-neutral);line-height:1.5;text-decoration:none;display:flex;position:relative}.aksel-action-menu__item svg{flex-shrink:0}.aksel-action-menu__item:focus{background-color:var(--ax-bg-moderate-hoverA);color:var(--ax-text-neutral);outline:none}.aksel-action-menu__item[aria-disabled=true]{opacity:.5;pointer-events:none}.aksel-action-menu__item[data-indent=true],.aksel-action-menu__item[data-marker=left]{--__axc-action-menu-item-pl: var(--ax-space-28)}.aksel-action-menu__content[data-size=medium] :is(.aksel-action-menu__item[data-indent=true],.aksel-action-menu__item[data-marker=left]){--__axc-action-menu-item-pl: var(--ax-space-32)}.aksel-action-menu__sub-trigger{--__axc-action-menu-item-pr: var(--ax-space-2)}.aksel-action-menu__sub-trigger[data-state=open]{background-color:var(--ax-bg-neutral-moderate-pressedA)}.aksel-action-menu__sub-trigger:focus{background-color:var(--ax-bg-moderate-hoverA)}.aksel-action-menu__item--danger{color:var(--ax-text-danger-subtle)}.aksel-action-menu__item--danger:focus{background-color:var(--ax-bg-danger-moderate-hoverA);color:var(--ax-text-danger-subtle)}.aksel-action-menu__marker{align-items:center;gap:var(--ax-space-4);display:flex}.aksel-action-menu__marker--right{padding-left:var(--ax-space-16);margin-left:auto}.aksel-action-menu__marker--left{width:var(--__axc-action-menu-item-pl);justify-content:center;display:inline-flex;position:absolute;left:0}.aksel-action-menu__marker-icon svg{flex-shrink:0;font-size:1.125rem}.aksel-action-menu__marker-icon.aksel-action-menu__marker--right{margin-left:0;padding-left:0}.aksel-action-menu__sub-icon{place-content:center;margin-left:auto;font-size:1.125rem;display:grid}.aksel-action-menu__shortcut{background-color:var(--ax-bg-neutral-moderateA);color:var(--ax-text-neutral);border-radius:var(--ax-radius-2);padding:0 var(--ax-space-4);min-width:1.125rem;height:1.125rem;line-height:1;font-size:var(--ax-font-size-small);justify-content:center;align-items:center;display:inline-flex}.aksel-action-menu__label{min-height:var(--__axc-action-menu-item-height);padding-right:var(--__axc-action-menu-item-pr);padding-left:var(--__axc-action-menu-item-pl);border-radius:var(--ax-radius-4);-webkit-user-select:none;user-select:none;cursor:default;font-size:var(--ax-font-size-medium);font-weight:var(--ax-font-weight-bold);align-items:center;display:flex}.aksel-action-menu__group:not(:first-child) .aksel-action-menu__label{padding-top:var(--__axc-action-menu-content-group-label-pt)}.aksel-action-menu__divider{height:1px;margin-block:var(--ax-space-4);background-color:var(--ax-border-neutral-subtleA)}.aksel-action-menu__indicator-icon--unchecked,.aksel-action-menu__indicator-icon--checked,.aksel-action-menu__indicator-icon--indeterminate{display:none}.aksel-action-menu__indicator{place-content:center;display:grid}.aksel-action-menu__indicator[data-state=unchecked] .aksel-action-menu__indicator-icon--unchecked,.aksel-action-menu__indicator[data-state=checked] .aksel-action-menu__indicator-icon--checked,.aksel-action-menu__indicator[data-state=indeterminate] .aksel-action-menu__indicator-icon--indeterminate{display:block}.aksel-action-menu__indicator-icon{font-size:14px}}@layer aksel.layout;
|
package/dist/components.css
CHANGED
|
@@ -4447,6 +4447,22 @@
|
|
|
4447
4447
|
}
|
|
4448
4448
|
}
|
|
4449
4449
|
|
|
4450
|
+
.aksel-action-menu__content {
|
|
4451
|
+
--__axc-action-menu-content-p-block: var(--ax-space-6);
|
|
4452
|
+
--__axc-action-menu-content-p-inline: var(--ax-space-8);
|
|
4453
|
+
--__axc-action-menu-item-height: 2rem;
|
|
4454
|
+
--__axc-action-menu-item-font-size: var(--ax-font-size-medium);
|
|
4455
|
+
--__axc-action-menu-content-group-label-pt: var(--ax-space-2);
|
|
4456
|
+
}
|
|
4457
|
+
|
|
4458
|
+
.aksel-action-menu__content[data-size="medium"] {
|
|
4459
|
+
--__axc-action-menu-content-p-block: var(--ax-space-8);
|
|
4460
|
+
--__axc-action-menu-content-p-inline: var(--ax-space-12);
|
|
4461
|
+
--__axc-action-menu-item-height: var(--ax-space-40);
|
|
4462
|
+
--__axc-action-menu-item-font-size: var(--ax-font-size-large);
|
|
4463
|
+
--__axc-action-menu-content-group-label-pt: var(--ax-space-4);
|
|
4464
|
+
}
|
|
4465
|
+
|
|
4450
4466
|
.aksel-action-menu__content {
|
|
4451
4467
|
border-radius: var(--ax-radius-12);
|
|
4452
4468
|
border: 1px solid var(--ax-border-neutral-subtleA);
|
|
@@ -4465,15 +4481,14 @@
|
|
|
4465
4481
|
}
|
|
4466
4482
|
|
|
4467
4483
|
.aksel-action-menu__content > .aksel-action-menu__content-inner {
|
|
4468
|
-
--__axc-action-menu-content-p: var(--ax-space-8);
|
|
4469
4484
|
--__axc-action-menu-item-pr: var(--ax-space-8);
|
|
4470
4485
|
--__axc-action-menu-item-pl: var(--ax-space-8);
|
|
4471
|
-
--__axc-action-menu-item-height: 2rem;
|
|
4472
4486
|
border-radius: var(--ax-radius-12);
|
|
4473
4487
|
background-color: var(--ax-bg-raised);
|
|
4474
4488
|
min-width: 128px;
|
|
4475
4489
|
max-width: min(95vw, 640px);
|
|
4476
|
-
padding: var(--__axc-action-menu-content-p);
|
|
4490
|
+
padding-block: var(--__axc-action-menu-content-p-block);
|
|
4491
|
+
padding-inline: var(--__axc-action-menu-content-p-inline);
|
|
4477
4492
|
max-height: var(--__axc-action-menu-content-available-height);
|
|
4478
4493
|
animation-duration: .16s;
|
|
4479
4494
|
animation-timing-function: cubic-bezier(.16, 1, .3, 1);
|
|
@@ -4488,8 +4503,8 @@
|
|
|
4488
4503
|
border-radius: var(--ax-radius-8);
|
|
4489
4504
|
padding-left: var(--__axc-action-menu-item-pl);
|
|
4490
4505
|
padding-right: var(--__axc-action-menu-item-pr);
|
|
4491
|
-
font-size: var(--
|
|
4492
|
-
scroll-margin-block: var(--__axc-action-menu-content-p);
|
|
4506
|
+
font-size: var(--__axc-action-menu-item-font-size);
|
|
4507
|
+
scroll-margin-block: var(--__axc-action-menu-content-p-block);
|
|
4493
4508
|
color: var(--ax-text-neutral);
|
|
4494
4509
|
line-height: 1.5;
|
|
4495
4510
|
text-decoration: none;
|
|
@@ -4512,8 +4527,12 @@
|
|
|
4512
4527
|
pointer-events: none;
|
|
4513
4528
|
}
|
|
4514
4529
|
|
|
4515
|
-
.aksel-action-menu__item[data-marker="left"] {
|
|
4516
|
-
--__axc-action-menu-item-pl: var(--ax-space-
|
|
4530
|
+
.aksel-action-menu__item[data-indent="true"], .aksel-action-menu__item[data-marker="left"] {
|
|
4531
|
+
--__axc-action-menu-item-pl: var(--ax-space-28);
|
|
4532
|
+
}
|
|
4533
|
+
|
|
4534
|
+
.aksel-action-menu__content[data-size="medium"] :is(.aksel-action-menu__item[data-indent="true"], .aksel-action-menu__item[data-marker="left"]) {
|
|
4535
|
+
--__axc-action-menu-item-pl: var(--ax-space-32);
|
|
4517
4536
|
}
|
|
4518
4537
|
|
|
4519
4538
|
.aksel-action-menu__sub-trigger {
|
|
@@ -4588,22 +4607,26 @@
|
|
|
4588
4607
|
}
|
|
4589
4608
|
|
|
4590
4609
|
.aksel-action-menu__label {
|
|
4591
|
-
min-height:
|
|
4610
|
+
min-height: var(--__axc-action-menu-item-height);
|
|
4592
4611
|
padding-right: var(--__axc-action-menu-item-pr);
|
|
4593
4612
|
padding-left: var(--__axc-action-menu-item-pl);
|
|
4594
|
-
color: var(--ax-text-neutral-subtle);
|
|
4595
4613
|
border-radius: var(--ax-radius-4);
|
|
4596
4614
|
-webkit-user-select: none;
|
|
4597
4615
|
user-select: none;
|
|
4598
4616
|
cursor: default;
|
|
4599
|
-
font-size: var(--ax-font-size-
|
|
4617
|
+
font-size: var(--ax-font-size-medium);
|
|
4618
|
+
font-weight: var(--ax-font-weight-bold);
|
|
4600
4619
|
align-items: center;
|
|
4601
4620
|
display: flex;
|
|
4602
4621
|
}
|
|
4603
4622
|
|
|
4623
|
+
.aksel-action-menu__group:not(:first-child) .aksel-action-menu__label {
|
|
4624
|
+
padding-top: var(--__axc-action-menu-content-group-label-pt);
|
|
4625
|
+
}
|
|
4626
|
+
|
|
4604
4627
|
.aksel-action-menu__divider {
|
|
4605
4628
|
height: 1px;
|
|
4606
|
-
margin-block: var(--ax-space-
|
|
4629
|
+
margin-block: var(--ax-space-4);
|
|
4607
4630
|
background-color: var(--ax-border-neutral-subtleA);
|
|
4608
4631
|
}
|
|
4609
4632
|
|