@navikt/ds-css 8.2.2 → 8.4.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 +16 -0
- package/dist/component/actionmenu.css +14 -23
- package/dist/component/actionmenu.min.css +1 -1
- package/dist/component/chat.css +1 -0
- package/dist/component/chat.min.css +1 -1
- package/dist/components.css +15 -23
- 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 +16 -24
- package/dist/index.min.css +1 -1
- package/package.json +3 -3
- package/src/action-menu.css +16 -26
- package/src/chat.css +1 -0
- package/src/data-table.css +133 -17
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,21 @@
|
|
|
1
1
|
# @navikt/ds-css
|
|
2
2
|
|
|
3
|
+
## 8.4.0
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- ActionMenu: SubTrigger-icon is now right aligned, updated open-transition effect. ([#4612](https://github.com/navikt/aksel/pull/4612))
|
|
8
|
+
|
|
9
|
+
## 8.3.0
|
|
10
|
+
|
|
11
|
+
### Minor Changes
|
|
12
|
+
|
|
13
|
+
- Tooltip: Updated prop 'keys' to allow for multiple shortcuts. ([#4604](https://github.com/navikt/aksel/pull/4604))
|
|
14
|
+
|
|
15
|
+
### Patch Changes
|
|
16
|
+
|
|
17
|
+
- Chat: Fix avatar size when using icon from aksel-icons ([#4608](https://github.com/navikt/aksel/pull/4608))
|
|
18
|
+
|
|
3
19
|
## 8.2.2
|
|
4
20
|
|
|
5
21
|
### Patch Changes
|
|
@@ -5,31 +5,16 @@
|
|
|
5
5
|
border-radius: var(--ax-radius-12);
|
|
6
6
|
border: 1px solid var(--ax-border-neutral-subtleA);
|
|
7
7
|
box-shadow: var(--ax-shadow-dialog);
|
|
8
|
-
|
|
8
|
+
transform-origin: var(--__axc-action-menu-content-transform-origin);
|
|
9
|
+
transition: transform .15s ease allow-discrete,
|
|
10
|
+
opacity .15s ease allow-discrete;
|
|
9
11
|
overflow: hidden;
|
|
10
12
|
}
|
|
11
13
|
|
|
12
14
|
@starting-style {
|
|
13
|
-
.aksel-action-menu__content[data-state="open"]
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
@starting-style {
|
|
19
|
-
.aksel-action-menu__content[data-state="open"][data-side="top"] {
|
|
20
|
-
transform: translateY(4px);
|
|
21
|
-
}
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
@starting-style {
|
|
25
|
-
.aksel-action-menu__content[data-state="open"][data-side="right"] {
|
|
26
|
-
transform: translateX(-4px);
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
@starting-style {
|
|
31
|
-
.aksel-action-menu__content[data-state="open"][data-side="left"] {
|
|
32
|
-
transform: translateX(4px);
|
|
15
|
+
.aksel-action-menu__content[data-state="open"] {
|
|
16
|
+
opacity: .8;
|
|
17
|
+
transform: scale3d(.94, .94, .94);
|
|
33
18
|
}
|
|
34
19
|
}
|
|
35
20
|
|
|
@@ -42,7 +27,6 @@
|
|
|
42
27
|
background-color: var(--ax-bg-raised);
|
|
43
28
|
min-width: 128px;
|
|
44
29
|
max-width: min(95vw, 640px);
|
|
45
|
-
transform-origin: var(--__axc-action-menu-content-transform-origin);
|
|
46
30
|
padding: var(--__axc-action-menu-content-p);
|
|
47
31
|
max-height: var(--__axc-action-menu-content-available-height);
|
|
48
32
|
animation-duration: .16s;
|
|
@@ -128,7 +112,7 @@
|
|
|
128
112
|
|
|
129
113
|
.aksel-action-menu__marker-icon svg {
|
|
130
114
|
flex-shrink: 0;
|
|
131
|
-
font-size:
|
|
115
|
+
font-size: 1.125rem;
|
|
132
116
|
}
|
|
133
117
|
|
|
134
118
|
.aksel-action-menu__marker-icon.aksel-action-menu__marker--right {
|
|
@@ -136,6 +120,13 @@
|
|
|
136
120
|
padding-left: 0;
|
|
137
121
|
}
|
|
138
122
|
|
|
123
|
+
.aksel-action-menu__sub-icon {
|
|
124
|
+
place-content: center;
|
|
125
|
+
margin-left: auto;
|
|
126
|
+
font-size: 1.125rem;
|
|
127
|
+
display: grid;
|
|
128
|
+
}
|
|
129
|
+
|
|
139
130
|
.aksel-action-menu__shortcut {
|
|
140
131
|
background-color: var(--ax-bg-neutral-moderateA);
|
|
141
132
|
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 .
|
|
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-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);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: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: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;
|
package/dist/component/chat.css
CHANGED
|
@@ -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-chat{align-items:flex-end;gap:var(--ax-space-12);max-width:40.75rem;display:flex}.aksel-chat .aksel-chat__bubble,.aksel-chat .aksel-chat__avatar{background-color:var(--ax-bg-moderateA);border:1px solid var(--ax-border-subtleA)}.aksel-chat[data-variant=subtle] .aksel-chat__bubble,.aksel-chat[data-variant=subtle] .aksel-chat__avatar{background-color:var(--ax-bg-softA);border:1px solid var(--ax-border-subtleA)}.aksel-chat[data-color=neutral][data-variant=subtle] .aksel-chat__bubble,.aksel-chat[data-color=neutral][data-variant=subtle] .aksel-chat__avatar{background-color:var(--ax-bg-raised);border:1px solid var(--ax-border-neutral-subtleA)}.aksel-chat--right{flex-direction:row-reverse}.aksel-chat--right .aksel-chat__bubble-wrapper{align-items:flex-end}.aksel-chat--right .aksel-chat__bubble{border-radius:var(--ax-radius-12);border-bottom-right-radius:var(--ax-radius-2)}.aksel-chat__avatar{border-radius:var(--ax-radius-full);color:var(--ax-text-neutral);letter-spacing:.024rem;flex-shrink:0;justify-content:center;align-items:center;width:2.5rem;height:2.5rem;font-size:1.06rem;line-height:2.5rem;display:flex;overflow:hidden}.aksel-chat__avatar svg{align-self:center;width:100%;max-width:1.5rem;max-height:1.5rem}.aksel-chat__bubble-wrapper{gap:var(--ax-space-12);flex-direction:column;display:flex}.aksel-chat__bubble{padding:var(--ax-space-16) var(--ax-space-20);gap:var(--ax-space-8);border-radius:var(--ax-radius-12);border-bottom-left-radius:var(--ax-radius-2);flex-direction:column;width:-webkit-fit-content;width:fit-content;display:flex}.aksel-chat--small .aksel-chat__bubble{padding:var(--ax-space-12) var(--ax-space-16)}.aksel-chat__top-text{color:var(--ax-text-neutral);gap:var(--ax-space-8);align-items:baseline;margin:0;font-weight:400;display:flex}.aksel-chat--right .aksel-chat__top-text{align-self:flex-end}.aksel-chat--top-text-left .aksel-chat__top-text{align-self:flex-start}.aksel-chat--top-text-right .aksel-chat__top-text,.aksel-chat--left .aksel-chat__top-text--right{align-self:flex-end}.aksel-chat--right .aksel-chat__top-text--left{align-self:flex-start}}@layer aksel.layout;
|
|
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-chat{align-items:flex-end;gap:var(--ax-space-12);max-width:40.75rem;display:flex}.aksel-chat .aksel-chat__bubble,.aksel-chat .aksel-chat__avatar{background-color:var(--ax-bg-moderateA);border:1px solid var(--ax-border-subtleA)}.aksel-chat[data-variant=subtle] .aksel-chat__bubble,.aksel-chat[data-variant=subtle] .aksel-chat__avatar{background-color:var(--ax-bg-softA);border:1px solid var(--ax-border-subtleA)}.aksel-chat[data-color=neutral][data-variant=subtle] .aksel-chat__bubble,.aksel-chat[data-color=neutral][data-variant=subtle] .aksel-chat__avatar{background-color:var(--ax-bg-raised);border:1px solid var(--ax-border-neutral-subtleA)}.aksel-chat--right{flex-direction:row-reverse}.aksel-chat--right .aksel-chat__bubble-wrapper{align-items:flex-end}.aksel-chat--right .aksel-chat__bubble{border-radius:var(--ax-radius-12);border-bottom-right-radius:var(--ax-radius-2)}.aksel-chat__avatar{border-radius:var(--ax-radius-full);color:var(--ax-text-neutral);letter-spacing:.024rem;flex-shrink:0;justify-content:center;align-items:center;width:2.5rem;height:2.5rem;font-size:1.06rem;line-height:2.5rem;display:flex;overflow:hidden}.aksel-chat__avatar svg{align-self:center;width:100%;max-width:1.5rem;max-height:1.5rem;font-size:1.5rem}.aksel-chat__bubble-wrapper{gap:var(--ax-space-12);flex-direction:column;display:flex}.aksel-chat__bubble{padding:var(--ax-space-16) var(--ax-space-20);gap:var(--ax-space-8);border-radius:var(--ax-radius-12);border-bottom-left-radius:var(--ax-radius-2);flex-direction:column;width:-webkit-fit-content;width:fit-content;display:flex}.aksel-chat--small .aksel-chat__bubble{padding:var(--ax-space-12) var(--ax-space-16)}.aksel-chat__top-text{color:var(--ax-text-neutral);gap:var(--ax-space-8);align-items:baseline;margin:0;font-weight:400;display:flex}.aksel-chat--right .aksel-chat__top-text{align-self:flex-end}.aksel-chat--top-text-left .aksel-chat__top-text{align-self:flex-start}.aksel-chat--top-text-right .aksel-chat__top-text,.aksel-chat--left .aksel-chat__top-text--right{align-self:flex-end}.aksel-chat--right .aksel-chat__top-text--left{align-self:flex-start}}@layer aksel.layout;
|
package/dist/components.css
CHANGED
|
@@ -3285,6 +3285,7 @@
|
|
|
3285
3285
|
width: 100%;
|
|
3286
3286
|
max-width: 1.5rem;
|
|
3287
3287
|
max-height: 1.5rem;
|
|
3288
|
+
font-size: 1.5rem;
|
|
3288
3289
|
}
|
|
3289
3290
|
|
|
3290
3291
|
.aksel-chat__bubble-wrapper {
|
|
@@ -4035,31 +4036,16 @@
|
|
|
4035
4036
|
border-radius: var(--ax-radius-12);
|
|
4036
4037
|
border: 1px solid var(--ax-border-neutral-subtleA);
|
|
4037
4038
|
box-shadow: var(--ax-shadow-dialog);
|
|
4038
|
-
|
|
4039
|
+
transform-origin: var(--__axc-action-menu-content-transform-origin);
|
|
4040
|
+
transition: transform .15s ease allow-discrete,
|
|
4041
|
+
opacity .15s ease allow-discrete;
|
|
4039
4042
|
overflow: hidden;
|
|
4040
4043
|
}
|
|
4041
4044
|
|
|
4042
4045
|
@starting-style {
|
|
4043
|
-
.aksel-action-menu__content[data-state="open"]
|
|
4044
|
-
|
|
4045
|
-
|
|
4046
|
-
}
|
|
4047
|
-
|
|
4048
|
-
@starting-style {
|
|
4049
|
-
.aksel-action-menu__content[data-state="open"][data-side="top"] {
|
|
4050
|
-
transform: translateY(4px);
|
|
4051
|
-
}
|
|
4052
|
-
}
|
|
4053
|
-
|
|
4054
|
-
@starting-style {
|
|
4055
|
-
.aksel-action-menu__content[data-state="open"][data-side="right"] {
|
|
4056
|
-
transform: translateX(-4px);
|
|
4057
|
-
}
|
|
4058
|
-
}
|
|
4059
|
-
|
|
4060
|
-
@starting-style {
|
|
4061
|
-
.aksel-action-menu__content[data-state="open"][data-side="left"] {
|
|
4062
|
-
transform: translateX(4px);
|
|
4046
|
+
.aksel-action-menu__content[data-state="open"] {
|
|
4047
|
+
opacity: .8;
|
|
4048
|
+
transform: scale3d(.94, .94, .94);
|
|
4063
4049
|
}
|
|
4064
4050
|
}
|
|
4065
4051
|
|
|
@@ -4072,7 +4058,6 @@
|
|
|
4072
4058
|
background-color: var(--ax-bg-raised);
|
|
4073
4059
|
min-width: 128px;
|
|
4074
4060
|
max-width: min(95vw, 640px);
|
|
4075
|
-
transform-origin: var(--__axc-action-menu-content-transform-origin);
|
|
4076
4061
|
padding: var(--__axc-action-menu-content-p);
|
|
4077
4062
|
max-height: var(--__axc-action-menu-content-available-height);
|
|
4078
4063
|
animation-duration: .16s;
|
|
@@ -4158,7 +4143,7 @@
|
|
|
4158
4143
|
|
|
4159
4144
|
.aksel-action-menu__marker-icon svg {
|
|
4160
4145
|
flex-shrink: 0;
|
|
4161
|
-
font-size:
|
|
4146
|
+
font-size: 1.125rem;
|
|
4162
4147
|
}
|
|
4163
4148
|
|
|
4164
4149
|
.aksel-action-menu__marker-icon.aksel-action-menu__marker--right {
|
|
@@ -4166,6 +4151,13 @@
|
|
|
4166
4151
|
padding-left: 0;
|
|
4167
4152
|
}
|
|
4168
4153
|
|
|
4154
|
+
.aksel-action-menu__sub-icon {
|
|
4155
|
+
place-content: center;
|
|
4156
|
+
margin-left: auto;
|
|
4157
|
+
font-size: 1.125rem;
|
|
4158
|
+
display: grid;
|
|
4159
|
+
}
|
|
4160
|
+
|
|
4169
4161
|
.aksel-action-menu__shortcut {
|
|
4170
4162
|
background-color: var(--ax-bg-neutral-moderateA);
|
|
4171
4163
|
color: var(--ax-text-neutral);
|