@navikt/ds-css 8.1.0 → 8.2.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/CHANGELOG.md +6 -0
- package/dist/component/actionmenu.css +6 -1
- package/dist/component/actionmenu.min.css +1 -1
- package/dist/component/datatoolbar.css +27 -0
- package/dist/component/datatoolbar.min.css +1 -0
- package/dist/components.css +28 -1
- 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 +29 -2
- package/dist/index.min.css +1 -1
- package/package.json +3 -3
- package/src/action-menu.css +13 -6
- package/src/data-toolbar.css +21 -0
- package/src/index.css +1 -0
package/CHANGELOG.md
CHANGED
|
@@ -82,7 +82,7 @@
|
|
|
82
82
|
pointer-events: none;
|
|
83
83
|
}
|
|
84
84
|
|
|
85
|
-
.aksel-action-menu__item
|
|
85
|
+
.aksel-action-menu__item[data-marker="left"] {
|
|
86
86
|
--__axc-action-menu-item-pl: var(--ax-space-24);
|
|
87
87
|
}
|
|
88
88
|
|
|
@@ -131,6 +131,11 @@
|
|
|
131
131
|
font-size: 18px;
|
|
132
132
|
}
|
|
133
133
|
|
|
134
|
+
.aksel-action-menu__marker-icon.aksel-action-menu__marker--right {
|
|
135
|
+
margin-left: 0;
|
|
136
|
+
padding-left: 0;
|
|
137
|
+
}
|
|
138
|
+
|
|
134
139
|
.aksel-action-menu__shortcut {
|
|
135
140
|
background-color: var(--ax-bg-neutral-moderateA);
|
|
136
141
|
color: var(--ax-text-neutral);
|
|
@@ -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);transition:transform .25s cubic-bezier(0,0,0,1) allow-discrete;overflow:hidden}@starting-style{.aksel-action-menu__content[data-state=open][data-side=bottom]{transform:translateY(-4px)}}@starting-style{.aksel-action-menu__content[data-state=open][data-side=top]{transform:translateY(4px)}}@starting-style{.aksel-action-menu__content[data-state=open][data-side=right]{transform:translate(-4px)}}@starting-style{.aksel-action-menu__content[data-state=open][data-side=left]{transform:translate(4px)}}.aksel-action-menu__content>.aksel-action-menu__content-inner{--__axc-action-menu-content-p: var(--ax-space-8);--__axc-action-menu-item-pr: var(--ax-space-8);--__axc-action-menu-item-pl: var(--ax-space-8);--__axc-action-menu-item-height: 2rem;border-radius:var(--ax-radius-12);background-color:var(--ax-bg-raised);min-width:128px;max-width:min(95vw,640px);transform-origin:var(--__axc-action-menu-content-transform-origin);padding:var(--__axc-action-menu-content-p);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(--ax-font-size-medium);scroll-margin-block:var(--__axc-action-menu-content-p);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
|
|
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);transition:transform .25s cubic-bezier(0,0,0,1) allow-discrete;overflow:hidden}@starting-style{.aksel-action-menu__content[data-state=open][data-side=bottom]{transform:translateY(-4px)}}@starting-style{.aksel-action-menu__content[data-state=open][data-side=top]{transform:translateY(4px)}}@starting-style{.aksel-action-menu__content[data-state=open][data-side=right]{transform:translate(-4px)}}@starting-style{.aksel-action-menu__content[data-state=open][data-side=left]{transform:translate(4px)}}.aksel-action-menu__content>.aksel-action-menu__content-inner{--__axc-action-menu-content-p: var(--ax-space-8);--__axc-action-menu-item-pr: var(--ax-space-8);--__axc-action-menu-item-pl: var(--ax-space-8);--__axc-action-menu-item-height: 2rem;border-radius:var(--ax-radius-12);background-color:var(--ax-bg-raised);min-width:128px;max-width:min(95vw,640px);transform-origin:var(--__axc-action-menu-content-transform-origin);padding:var(--__axc-action-menu-content-p);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(--ax-font-size-medium);scroll-margin-block:var(--__axc-action-menu-content-p);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-marker=left]{--__axc-action-menu-item-pl: var(--ax-space-24)}.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:18px}.aksel-action-menu__marker-icon.aksel-action-menu__marker--right{margin-left:0;padding-left:0}.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:calc(var(--__axc-action-menu-item-height) - 6px);padding-right:var(--__axc-action-menu-item-pr);padding-left:var(--__axc-action-menu-item-pl);color:var(--ax-text-neutral-subtle);border-radius:var(--ax-radius-4);-webkit-user-select:none;user-select:none;cursor:default;font-size:var(--ax-font-size-small);align-items:center;display:flex}.aksel-action-menu__divider{height:1px;margin-block:var(--ax-space-8);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;
|
|
@@ -0,0 +1,27 @@
|
|
|
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
|
+
|
|
3
|
+
@layer aksel.components.modules {
|
|
4
|
+
.aksel-data-toolbar {
|
|
5
|
+
padding: var(--ax-space-16);
|
|
6
|
+
align-items: center;
|
|
7
|
+
gap: var(--ax-space-16);
|
|
8
|
+
border: 1px solid var(--ax-border-neutral);
|
|
9
|
+
border-radius: var(--ax-radius-16);
|
|
10
|
+
background-color: var(--ax-bg-raised);
|
|
11
|
+
display: flex;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.aksel-data-toolbar__toggle-button {
|
|
15
|
+
background-color: var(--ax-bg-neutral-moderate);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.aksel-data-toolbar__toggle-button:hover {
|
|
19
|
+
background-color: var(--ax-bg-neutral-moderate-hover);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.aksel-data-toolbar__toggle-button[aria-pressed="true"] {
|
|
23
|
+
background-color: var(--ax-bg-neutral-strong-pressed);
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
@layer aksel.layout;
|
|
@@ -0,0 +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-data-toolbar{padding:var(--ax-space-16);align-items:center;gap:var(--ax-space-16);border:1px solid var(--ax-border-neutral);border-radius:var(--ax-radius-16);background-color:var(--ax-bg-raised);display:flex}.aksel-data-toolbar__toggle-button{background-color:var(--ax-bg-neutral-moderate)}.aksel-data-toolbar__toggle-button:hover{background-color:var(--ax-bg-neutral-moderate-hover)}.aksel-data-toolbar__toggle-button[aria-pressed=true]{background-color:var(--ax-bg-neutral-strong-pressed)}}@layer aksel.layout;
|
package/dist/components.css
CHANGED
|
@@ -3359,6 +3359,28 @@
|
|
|
3359
3359
|
}
|
|
3360
3360
|
}
|
|
3361
3361
|
|
|
3362
|
+
.aksel-data-toolbar {
|
|
3363
|
+
padding: var(--ax-space-16);
|
|
3364
|
+
align-items: center;
|
|
3365
|
+
gap: var(--ax-space-16);
|
|
3366
|
+
border: 1px solid var(--ax-border-neutral);
|
|
3367
|
+
border-radius: var(--ax-radius-16);
|
|
3368
|
+
background-color: var(--ax-bg-raised);
|
|
3369
|
+
display: flex;
|
|
3370
|
+
}
|
|
3371
|
+
|
|
3372
|
+
.aksel-data-toolbar__toggle-button {
|
|
3373
|
+
background-color: var(--ax-bg-neutral-moderate);
|
|
3374
|
+
}
|
|
3375
|
+
|
|
3376
|
+
.aksel-data-toolbar__toggle-button:hover {
|
|
3377
|
+
background-color: var(--ax-bg-neutral-moderate-hover);
|
|
3378
|
+
}
|
|
3379
|
+
|
|
3380
|
+
.aksel-data-toolbar__toggle-button[aria-pressed="true"] {
|
|
3381
|
+
background-color: var(--ax-bg-neutral-strong-pressed);
|
|
3382
|
+
}
|
|
3383
|
+
|
|
3362
3384
|
.aksel-date {
|
|
3363
3385
|
padding: var(--ax-space-16);
|
|
3364
3386
|
}
|
|
@@ -4116,7 +4138,7 @@
|
|
|
4116
4138
|
pointer-events: none;
|
|
4117
4139
|
}
|
|
4118
4140
|
|
|
4119
|
-
.aksel-action-menu__item
|
|
4141
|
+
.aksel-action-menu__item[data-marker="left"] {
|
|
4120
4142
|
--__axc-action-menu-item-pl: var(--ax-space-24);
|
|
4121
4143
|
}
|
|
4122
4144
|
|
|
@@ -4165,6 +4187,11 @@
|
|
|
4165
4187
|
font-size: 18px;
|
|
4166
4188
|
}
|
|
4167
4189
|
|
|
4190
|
+
.aksel-action-menu__marker-icon.aksel-action-menu__marker--right {
|
|
4191
|
+
margin-left: 0;
|
|
4192
|
+
padding-left: 0;
|
|
4193
|
+
}
|
|
4194
|
+
|
|
4168
4195
|
.aksel-action-menu__shortcut {
|
|
4169
4196
|
background-color: var(--ax-bg-neutral-moderateA);
|
|
4170
4197
|
color: var(--ax-text-neutral);
|