@navikt/ds-css 7.38.0 → 7.39.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/alert.css +19 -7
- package/darkside/alert.darkside.css +19 -8
- package/darkside/dialog.darkside.css +16 -1
- package/darkside/read-more.darkside.css +0 -5
- package/dialog.css +17 -2
- package/dist/component/alert.css +19 -7
- package/dist/component/alert.min.css +1 -1
- package/dist/component/dialog.css +21 -6
- package/dist/component/dialog.min.css +1 -1
- package/dist/component/readmore.css +3 -6
- package/dist/component/readmore.min.css +1 -1
- package/dist/components.css +43 -19
- package/dist/components.min.css +3 -3
- package/dist/darkside/component/alert.css +20 -9
- package/dist/darkside/component/alert.min.css +1 -1
- package/dist/darkside/component/dialog.css +9 -0
- package/dist/darkside/component/dialog.min.css +1 -1
- package/dist/darkside/component/readmore.css +0 -5
- package/dist/darkside/component/readmore.min.css +1 -1
- package/dist/darkside/components.css +29 -14
- package/dist/darkside/components.min.css +1 -1
- package/dist/darkside/global/tokens.css +1 -1
- package/dist/darkside/global/tokens.min.css +1 -1
- package/dist/darkside/index.css +30 -15
- package/dist/darkside/index.min.css +1 -1
- package/dist/darkside/version/{7.38.0 → 7.39.0}/component/alert.css +20 -9
- package/dist/darkside/version/7.39.0/component/alert.min.css +1 -0
- package/dist/darkside/version/{7.38.0 → 7.39.0}/component/dialog.css +9 -0
- package/dist/darkside/version/{7.38.0 → 7.39.0}/component/dialog.min.css +1 -1
- package/dist/darkside/version/{7.38.0 → 7.39.0}/component/readmore.css +0 -5
- package/dist/darkside/version/{7.38.0 → 7.39.0}/component/readmore.min.css +1 -1
- package/dist/darkside/version/{7.38.0 → 7.39.0}/components.css +29 -14
- package/dist/darkside/version/7.39.0/components.min.css +1 -0
- package/dist/darkside/version/{7.38.0 → 7.39.0}/global/tokens.css +1 -1
- package/dist/darkside/version/{7.38.0 → 7.39.0}/global/tokens.min.css +1 -1
- package/dist/darkside/version/{7.38.0 → 7.39.0}/index.css +30 -15
- package/dist/darkside/version/7.39.0/index.min.css +1 -0
- package/dist/global/tokens.css +1 -1
- package/dist/global/tokens.min.css +1 -1
- package/dist/index.css +44 -20
- package/dist/index.min.css +4 -4
- package/package.json +3 -3
- package/read-more.css +3 -6
- package/dist/darkside/version/7.38.0/component/alert.min.css +0 -1
- package/dist/darkside/version/7.38.0/components.min.css +0 -1
- package/dist/darkside/version/7.38.0/index.min.css +0 -1
- /package/dist/darkside/version/{7.38.0 → 7.39.0}/component/accordion.css +0 -0
- /package/dist/darkside/version/{7.38.0 → 7.39.0}/component/accordion.min.css +0 -0
- /package/dist/darkside/version/{7.38.0 → 7.39.0}/component/actionmenu.css +0 -0
- /package/dist/darkside/version/{7.38.0 → 7.39.0}/component/actionmenu.min.css +0 -0
- /package/dist/darkside/version/{7.38.0 → 7.39.0}/component/button.css +0 -0
- /package/dist/darkside/version/{7.38.0 → 7.39.0}/component/button.min.css +0 -0
- /package/dist/darkside/version/{7.38.0 → 7.39.0}/component/chat.css +0 -0
- /package/dist/darkside/version/{7.38.0 → 7.39.0}/component/chat.min.css +0 -0
- /package/dist/darkside/version/{7.38.0 → 7.39.0}/component/chips.css +0 -0
- /package/dist/darkside/version/{7.38.0 → 7.39.0}/component/chips.min.css +0 -0
- /package/dist/darkside/version/{7.38.0 → 7.39.0}/component/copybutton.css +0 -0
- /package/dist/darkside/version/{7.38.0 → 7.39.0}/component/copybutton.min.css +0 -0
- /package/dist/darkside/version/{7.38.0 → 7.39.0}/component/date.css +0 -0
- /package/dist/darkside/version/{7.38.0 → 7.39.0}/component/date.min.css +0 -0
- /package/dist/darkside/version/{7.38.0 → 7.39.0}/component/dropdown.css +0 -0
- /package/dist/darkside/version/{7.38.0 → 7.39.0}/component/dropdown.min.css +0 -0
- /package/dist/darkside/version/{7.38.0 → 7.39.0}/component/expansioncard.css +0 -0
- /package/dist/darkside/version/{7.38.0 → 7.39.0}/component/expansioncard.min.css +0 -0
- /package/dist/darkside/version/{7.38.0 → 7.39.0}/component/form.css +0 -0
- /package/dist/darkside/version/{7.38.0 → 7.39.0}/component/form.min.css +0 -0
- /package/dist/darkside/version/{7.38.0 → 7.39.0}/component/guidepanel.css +0 -0
- /package/dist/darkside/version/{7.38.0 → 7.39.0}/component/guidepanel.min.css +0 -0
- /package/dist/darkside/version/{7.38.0 → 7.39.0}/component/helptext.css +0 -0
- /package/dist/darkside/version/{7.38.0 → 7.39.0}/component/helptext.min.css +0 -0
- /package/dist/darkside/version/{7.38.0 → 7.39.0}/component/inlinemessage.css +0 -0
- /package/dist/darkside/version/{7.38.0 → 7.39.0}/component/inlinemessage.min.css +0 -0
- /package/dist/darkside/version/{7.38.0 → 7.39.0}/component/internalheader.css +0 -0
- /package/dist/darkside/version/{7.38.0 → 7.39.0}/component/internalheader.min.css +0 -0
- /package/dist/darkside/version/{7.38.0 → 7.39.0}/component/link.css +0 -0
- /package/dist/darkside/version/{7.38.0 → 7.39.0}/component/link.min.css +0 -0
- /package/dist/darkside/version/{7.38.0 → 7.39.0}/component/linkanchor.css +0 -0
- /package/dist/darkside/version/{7.38.0 → 7.39.0}/component/linkanchor.min.css +0 -0
- /package/dist/darkside/version/{7.38.0 → 7.39.0}/component/linkcard.css +0 -0
- /package/dist/darkside/version/{7.38.0 → 7.39.0}/component/linkcard.min.css +0 -0
- /package/dist/darkside/version/{7.38.0 → 7.39.0}/component/linkpanel.css +0 -0
- /package/dist/darkside/version/{7.38.0 → 7.39.0}/component/linkpanel.min.css +0 -0
- /package/dist/darkside/version/{7.38.0 → 7.39.0}/component/list.css +0 -0
- /package/dist/darkside/version/{7.38.0 → 7.39.0}/component/list.min.css +0 -0
- /package/dist/darkside/version/{7.38.0 → 7.39.0}/component/loader.css +0 -0
- /package/dist/darkside/version/{7.38.0 → 7.39.0}/component/loader.min.css +0 -0
- /package/dist/darkside/version/{7.38.0 → 7.39.0}/component/modal.css +0 -0
- /package/dist/darkside/version/{7.38.0 → 7.39.0}/component/modal.min.css +0 -0
- /package/dist/darkside/version/{7.38.0 → 7.39.0}/component/pagination.css +0 -0
- /package/dist/darkside/version/{7.38.0 → 7.39.0}/component/pagination.min.css +0 -0
- /package/dist/darkside/version/{7.38.0 → 7.39.0}/component/panel.css +0 -0
- /package/dist/darkside/version/{7.38.0 → 7.39.0}/component/panel.min.css +0 -0
- /package/dist/darkside/version/{7.38.0 → 7.39.0}/component/popover.css +0 -0
- /package/dist/darkside/version/{7.38.0 → 7.39.0}/component/popover.min.css +0 -0
- /package/dist/darkside/version/{7.38.0 → 7.39.0}/component/primitives.css +0 -0
- /package/dist/darkside/version/{7.38.0 → 7.39.0}/component/primitives.min.css +0 -0
- /package/dist/darkside/version/{7.38.0 → 7.39.0}/component/process.css +0 -0
- /package/dist/darkside/version/{7.38.0 → 7.39.0}/component/process.min.css +0 -0
- /package/dist/darkside/version/{7.38.0 → 7.39.0}/component/progressbar.css +0 -0
- /package/dist/darkside/version/{7.38.0 → 7.39.0}/component/progressbar.min.css +0 -0
- /package/dist/darkside/version/{7.38.0 → 7.39.0}/component/skeleton.css +0 -0
- /package/dist/darkside/version/{7.38.0 → 7.39.0}/component/skeleton.min.css +0 -0
- /package/dist/darkside/version/{7.38.0 → 7.39.0}/component/stepper.css +0 -0
- /package/dist/darkside/version/{7.38.0 → 7.39.0}/component/stepper.min.css +0 -0
- /package/dist/darkside/version/{7.38.0 → 7.39.0}/component/table.css +0 -0
- /package/dist/darkside/version/{7.38.0 → 7.39.0}/component/table.min.css +0 -0
- /package/dist/darkside/version/{7.38.0 → 7.39.0}/component/tabs.css +0 -0
- /package/dist/darkside/version/{7.38.0 → 7.39.0}/component/tabs.min.css +0 -0
- /package/dist/darkside/version/{7.38.0 → 7.39.0}/component/tag.css +0 -0
- /package/dist/darkside/version/{7.38.0 → 7.39.0}/component/tag.min.css +0 -0
- /package/dist/darkside/version/{7.38.0 → 7.39.0}/component/theme.css +0 -0
- /package/dist/darkside/version/{7.38.0 → 7.39.0}/component/theme.min.css +0 -0
- /package/dist/darkside/version/{7.38.0 → 7.39.0}/component/timeline.css +0 -0
- /package/dist/darkside/version/{7.38.0 → 7.39.0}/component/timeline.min.css +0 -0
- /package/dist/darkside/version/{7.38.0 → 7.39.0}/component/togglegroup.css +0 -0
- /package/dist/darkside/version/{7.38.0 → 7.39.0}/component/togglegroup.min.css +0 -0
- /package/dist/darkside/version/{7.38.0 → 7.39.0}/component/tooltip.css +0 -0
- /package/dist/darkside/version/{7.38.0 → 7.39.0}/component/tooltip.min.css +0 -0
- /package/dist/darkside/version/{7.38.0 → 7.39.0}/component/typography.css +0 -0
- /package/dist/darkside/version/{7.38.0 → 7.39.0}/component/typography.min.css +0 -0
- /package/dist/darkside/version/{7.38.0 → 7.39.0}/global/baseline.css +0 -0
- /package/dist/darkside/version/{7.38.0 → 7.39.0}/global/baseline.min.css +0 -0
- /package/dist/darkside/version/{7.38.0 → 7.39.0}/global/fonts.css +0 -0
- /package/dist/darkside/version/{7.38.0 → 7.39.0}/global/fonts.min.css +0 -0
- /package/dist/darkside/version/{7.38.0 → 7.39.0}/global/print.css +0 -0
- /package/dist/darkside/version/{7.38.0 → 7.39.0}/global/print.min.css +0 -0
- /package/dist/darkside/version/{7.38.0 → 7.39.0}/global/reset.css +0 -0
- /package/dist/darkside/version/{7.38.0 → 7.39.0}/global/reset.min.css +0 -0
|
@@ -77,17 +77,27 @@
|
|
|
77
77
|
border-radius: var(--ax-radius-12);
|
|
78
78
|
--__axc-base-alert-pi: var(--ax-space-20);
|
|
79
79
|
--__axc-base-alert-content-p: var(--ax-space-12) var(--__axc-base-alert-pi) var(--ax-space-16) var(--__axc-base-alert-pi);
|
|
80
|
-
--__axc-base-alert-title-pb: var(--ax-space-2);
|
|
81
80
|
--__axc-base-alert-header-max-width: 37.5rem;
|
|
81
|
+
--__axc-base-alert-header-icon-margin-block-start: var(--ax-space-8);
|
|
82
|
+
--__axc-base-alert-header-close-button-margin-block-start: var(--ax-space-4);
|
|
83
|
+
--__axc-global-alert-alignment: max(var(--__axc-base-alert-pi), calc((100% - var(--__axc-base-alert-header-max-width)) / 2));
|
|
82
84
|
height: fit-content;
|
|
83
85
|
display: grid;
|
|
84
86
|
overflow: clip;
|
|
85
87
|
}
|
|
86
88
|
|
|
89
|
+
.aksel-base-alert[data-centered="false"] {
|
|
90
|
+
--__axc-global-alert-alignment: var(--ax-space-20);
|
|
91
|
+
}
|
|
92
|
+
|
|
87
93
|
.aksel-base-alert[data-size="small"] {
|
|
88
|
-
--__axc-base-alert-pi: var(--ax-space-16);
|
|
89
94
|
--__axc-base-alert-content-p: var(--ax-space-8) var(--ax-space-16) var(--ax-space-12) var(--ax-space-16);
|
|
90
|
-
--__axc-base-alert-
|
|
95
|
+
--__axc-base-alert-header-icon-margin-block-start: var(--ax-space-6);
|
|
96
|
+
--__axc-base-alert-header-close-button-margin-block-start: var(--ax-space-2);
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.aksel-base-alert[data-size="small"][data-centered="false"] {
|
|
100
|
+
--__axc-global-alert-alignment: var(--ax-space-16);
|
|
91
101
|
}
|
|
92
102
|
|
|
93
103
|
.aksel-base-alert[data-variant="moderate"] {
|
|
@@ -111,13 +121,13 @@
|
|
|
111
121
|
.aksel-base-alert__header {
|
|
112
122
|
align-items: flex-start;
|
|
113
123
|
gap: var(--ax-space-8);
|
|
114
|
-
padding:
|
|
124
|
+
padding: 0 var(--__axc-base-alert-pi);
|
|
115
125
|
border-bottom: 1px solid;
|
|
116
126
|
display: flex;
|
|
117
127
|
}
|
|
118
128
|
|
|
119
129
|
.aksel-base-alert[data-global="true"] .aksel-base-alert__header {
|
|
120
|
-
padding-inline:
|
|
130
|
+
padding-inline: var(--__axc-global-alert-alignment);
|
|
121
131
|
}
|
|
122
132
|
|
|
123
133
|
.aksel-base-alert[data-variant="moderate"] .aksel-base-alert__header {
|
|
@@ -137,13 +147,13 @@
|
|
|
137
147
|
}
|
|
138
148
|
|
|
139
149
|
.aksel-base-alert__icon {
|
|
140
|
-
margin-top: var(--
|
|
150
|
+
margin-top: var(--__axc-base-alert-header-icon-margin-block-start);
|
|
141
151
|
font-size: 1.5rem;
|
|
142
152
|
display: grid;
|
|
143
153
|
}
|
|
144
154
|
|
|
145
155
|
.aksel-base-alert__title {
|
|
146
|
-
padding-block: var(--
|
|
156
|
+
padding-block: var(--ax-space-6);
|
|
147
157
|
}
|
|
148
158
|
|
|
149
159
|
.aksel-base-alert__content {
|
|
@@ -152,12 +162,13 @@
|
|
|
152
162
|
}
|
|
153
163
|
|
|
154
164
|
.aksel-base-alert[data-global="true"] .aksel-base-alert__content {
|
|
155
|
-
padding-inline:
|
|
165
|
+
padding-inline: var(--__axc-global-alert-alignment);
|
|
156
166
|
}
|
|
157
167
|
|
|
158
168
|
.aksel-base-alert__close-button {
|
|
159
|
-
z-index: 1;
|
|
160
169
|
margin-left: auto;
|
|
170
|
+
z-index: 1;
|
|
171
|
+
margin-block-start: var(--__axc-base-alert-header-close-button-margin-block-start);
|
|
161
172
|
}
|
|
162
173
|
|
|
163
174
|
.aksel-base-alert__close-button:focus-visible {
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer aksel.components{.aksel-alert{border-radius:var(--ax-radius-12);padding:var(--ax-space-16) var(--ax-space-20);gap:var(--ax-space-12);border:1px solid;border-color:var(--ax-border-default);background-color:var(--ax-bg-moderate);align-items:center;display:flex}.aksel-alert>.aksel-alert__icon{color:var(--ax-text-decoration)}@media(forced-colors:active){.aksel-alert{color:canvastext;background-color:canvas;border:1px solid canvastext}}.aksel-alert__wrapper--maxwidth{max-width:43.5rem}.aksel-alert__icon{height:var(--ax-font-line-height-xlarge);flex-shrink:0;align-self:flex-start;font-size:1.5rem}.aksel-alert--small{padding:var(--ax-space-12) var(--ax-space-16);gap:var(--ax-space-8)}.aksel-alert--small>.aksel-alert__icon{height:var(--ax-font-line-height-large);margin-block-start:0}.aksel-alert--full-width{border-radius:0}.aksel-alert--inline{background-color:#0000;border:none;padding:0}.aksel-alert__button-wrapper{flex-flow:row;flex:1;justify-content:flex-end;align-self:flex-start;display:flex}.aksel-alert--close-button>.aksel-alert__wrapper,.aksel-alert--close-button>.aksel-alert__icon{margin-block-start:var(--ax-space-2)}.aksel-alert--close-button.aksel-alert--small{align-items:flex-start}.aksel-alert--close-button.aksel-alert--small>.aksel-alert__wrapper,.aksel-alert--close-button.aksel-alert--small>.aksel-alert__icon{margin-block-start:var(--ax-space-4)}.aksel-base-alert{border-radius:var(--ax-radius-12);--__axc-base-alert-pi: var(--ax-space-20);--__axc-base-alert-content-p: var(--ax-space-12) var(--__axc-base-alert-pi) var(--ax-space-16) var(--__axc-base-alert-pi);--__axc-base-alert-header-max-width: 37.5rem;--__axc-base-alert-header-icon-margin-block-start: var(--ax-space-8);--__axc-base-alert-header-close-button-margin-block-start: var(--ax-space-4);--__axc-global-alert-alignment: max(var(--__axc-base-alert-pi), calc((100% - var(--__axc-base-alert-header-max-width)) / 2));height:fit-content;display:grid;overflow:clip}.aksel-base-alert[data-centered=false]{--__axc-global-alert-alignment: var(--ax-space-20)}.aksel-base-alert[data-size=small]{--__axc-base-alert-content-p: var(--ax-space-8) var(--ax-space-16) var(--ax-space-12) var(--ax-space-16);--__axc-base-alert-header-icon-margin-block-start: var(--ax-space-6);--__axc-base-alert-header-close-button-margin-block-start: var(--ax-space-2)}.aksel-base-alert[data-size=small][data-centered=false]{--__axc-global-alert-alignment: var(--ax-space-16)}.aksel-base-alert[data-variant=moderate]{outline:1px solid var(--ax-border-default);outline-offset:-1px}.aksel-base-alert[data-variant=strong]{outline:4px solid var(--ax-border-default);outline-offset:-4px}.aksel-base-alert[data-variant=strong][data-color=neutral]{outline-color:var(--ax-border-strong)}.aksel-base-alert[data-global=true]{border-radius:0}.aksel-base-alert__header{align-items:flex-start;gap:var(--ax-space-8);padding:0 var(--__axc-base-alert-pi);border-bottom:1px solid;display:flex}.aksel-base-alert[data-global=true] .aksel-base-alert__header{padding-inline:var(--__axc-global-alert-alignment)}.aksel-base-alert[data-variant=moderate] .aksel-base-alert__header{background:var(--ax-bg-moderate);color:var(--ax-text-default);border-color:var(--ax-border-subtleA)}.aksel-base-alert[data-variant=strong] .aksel-base-alert__header{background:var(--ax-bg-strong);color:var(--ax-text-contrast);border-bottom:none}.aksel-base-alert__header:only-child{border-bottom:none}.aksel-base-alert__icon{margin-top:var(--__axc-base-alert-header-icon-margin-block-start);font-size:1.5rem;display:grid}.aksel-base-alert__title{padding-block:var(--ax-space-6)}.aksel-base-alert__content{padding:var(--__axc-base-alert-content-p);background-color:var(--ax-bg-default)}.aksel-base-alert[data-global=true] .aksel-base-alert__content{padding-inline:var(--__axc-global-alert-alignment)}.aksel-base-alert__close-button{margin-left:auto;z-index:1;margin-block-start:var(--__axc-base-alert-header-close-button-margin-block-start)}.aksel-base-alert__close-button:focus-visible{outline-color:var(--ax-bg-default)}.aksel-base-alert__close-button.aksel-base-alert__close-button.aksel-base-alert__close-button{color:var(--ax-text-neutral-contrast)}}
|
|
@@ -187,6 +187,8 @@
|
|
|
187
187
|
.aksel-dialog__body {
|
|
188
188
|
padding-block: var(--__axc-dialog-p-b);
|
|
189
189
|
padding-inline: var(--__axc-dialog-p-i);
|
|
190
|
+
overscroll-behavior: contain;
|
|
191
|
+
position: relative;
|
|
190
192
|
overflow: auto;
|
|
191
193
|
}
|
|
192
194
|
|
|
@@ -194,6 +196,13 @@
|
|
|
194
196
|
padding-block-start: 0;
|
|
195
197
|
}
|
|
196
198
|
|
|
199
|
+
.aksel-dialog__body {
|
|
200
|
+
background: linear-gradient(var(--ax-bg-raised) 30%, transparent) top, linear-gradient(transparent, var(--ax-bg-raised) 60%) bottom, radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .3), transparent) top, radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .3), transparent) bottom;
|
|
201
|
+
background-repeat: no-repeat;
|
|
202
|
+
background-size: 100% 40px, 100% 50px, 100% 16px, 100% 16px;
|
|
203
|
+
background-attachment: local, local, scroll, scroll;
|
|
204
|
+
}
|
|
205
|
+
|
|
197
206
|
.aksel-dialog__footer {
|
|
198
207
|
justify-content: flex-end;
|
|
199
208
|
gap: var(--ax-space-8);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer aksel.components{.aksel-dialog__popup{--__axc-dialog-transform: ;--__axc-dialog-p-b: var(--ax-space-16);--__axc-dialog-p-i: var(--ax-space-20);background-color:var(--ax-bg-raised);border-radius:var(--ax-radius-12);color:var(--ax-text-neutral);box-shadow:var(--ax-shadow-dialog);border:1px solid var(--ax-border-neutral-subtleA);z-index:2000;flex-direction:column;transition:transform .2s cubic-bezier(.25,.46,.45,.94),opacity .2s cubic-bezier(.25,.46,.45,.94),translate .2s cubic-bezier(.25,.46,.45,.94);display:flex;position:fixed;overflow:hidden}.aksel-dialog__popup:focus{outline:none}.aksel-dialog__popup[data-size=small]{--__axc-dialog-p-b: var(--ax-space-12);--__axc-dialog-p-i: var(--ax-space-16)}.aksel-dialog__popup[data-entering-style],.aksel-dialog__popup[data-exiting-style]{opacity:.001;transform:var(--__axc-dialog-transform)}.aksel-dialog__popup[data-exiting-style]{transition-duration:.1s}.aksel-dialog__popup[data-exiting-style]:after{transition-timing-function:cubic-bezier(.55,.09,.68,.53)}.aksel-dialog__popup[data-nested-dialog-open=true]{box-shadow:none}.aksel-dialog__popup[data-nested-dialog-open=true]:after{opacity:.9}.aksel-dialog__popup:after{content:"";border-radius:inherit;background-color:var(--ax-bg-overlay);opacity:0;z-index:1;pointer-events:none;transition:opacity cubic-bezier(.25,.46,.45,.94);position:absolute;inset:0}.aksel-dialog__popup[data-position=center]{--__axc-dialog-center-margin: 3rem;--__axc-dialog-transform: scale(.98);max-width:calc(100dvw - 3rem);max-height:calc(90dvh - var(--__axc-dialog-center-margin));margin-inline:auto;margin-block:max(var(--__axc-dialog-center-margin),10dvh) auto;top:0;left:0;right:0}.aksel-dialog__popup[data-position=center][data-nested=true][data-entering-style],.aksel-dialog__popup[data-position=center][data-nested=true][data-exiting-style]{opacity:1;transition-duration:0s;transform:scale(1)}.aksel-dialog__popup[data-position=center][data-nested-dialog-open=true]{transform:translateY(calc(1rem * var(--__axc-nested-level) * -1)) scale(calc(1 - .02 * var(--__axc-nested-level)))}@media(max-width:768px)or (max-height:479px){.aksel-dialog__popup[data-position=center]{--__axc-dialog-transform: translateY(35%);border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0;max-width:95dvw;height:auto;max-height:calc(100dvh - max(16px,10dvh));margin-block:0;margin-inline:auto;inset:auto 0 0}}.aksel-dialog__popup[data-position=right],.aksel-dialog__popup[data-position=left]{max-width:calc(100vw - max(16px,10vw));top:0;bottom:0}:is(.aksel-dialog__popup[data-position=right],.aksel-dialog__popup[data-position=left])[data-nested-dialog-open=true]:after{opacity:1;transition-duration:.1s}.aksel-dialog__popup[data-position=right]{--__axc-dialog-transform: translateX(35%);border-right:0;border-top-right-radius:0;border-bottom-right-radius:0;right:0}.aksel-dialog__popup[data-position=left]{--__axc-dialog-transform: translateX(-35%);border-left:0;border-top-left-radius:0;border-bottom-left-radius:0;left:0}.aksel-dialog__popup[data-position=bottom]{--__axc-dialog-transform: translateY(35%);border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0;max-width:95dvw;height:auto;max-height:calc(100dvh - max(16px,10dvh));margin-inline:auto;bottom:0;left:0;right:0}.aksel-dialog__popup[data-position=bottom][data-nested-dialog-open=true]{transform:translateY(calc(1rem * var(--__axc-nested-level) * -1)) scale(calc(1 - .02 * var(--__axc-nested-level)))}.aksel-dialog__popup[data-position=fullscreen]{--__axc-dialog-transform: scale(.98);border:0;border-radius:0;width:100%;max-width:100dvw;height:100%;max-height:100dvh;inset:0}.aksel-dialog__backdrop{background-color:var(--ax-bg-overlay);z-index:2000;min-height:100dvh;transition:opacity .2s cubic-bezier(.25,.46,.45,.94);position:fixed;inset:0}@supports (-webkit-touch-callout: none){.aksel-dialog__backdrop{position:absolute}}.aksel-dialog__backdrop[data-entering-style],.aksel-dialog__backdrop[data-exiting-style]{opacity:.001}.aksel-dialog__header{padding-block:var(--__axc-dialog-p-b);padding-inline:var(--__axc-dialog-p-i)}.aksel-dialog__title{margin-block-end:var(--ax-space-4)}.aksel-dialog__close-button{float:right;align-self:start}.aksel-dialog__body{padding-block:var(--__axc-dialog-p-b);padding-inline:var(--__axc-dialog-p-i);overflow:auto}.aksel-dialog__header~.aksel-dialog__body{padding-block-start:0}.aksel-dialog__footer{justify-content:flex-end;gap:var(--ax-space-8);padding-block:var(--__axc-dialog-p-b);padding-inline:var(--__axc-dialog-p-i);flex-flow:wrap;display:flex}@media(forced-colors:active){.aksel-dialog__popup{outline:2px solid var(--ax-border-neutral-strong)!important}}}
|
|
1
|
+
@layer aksel.components{.aksel-dialog__popup{--__axc-dialog-transform: ;--__axc-dialog-p-b: var(--ax-space-16);--__axc-dialog-p-i: var(--ax-space-20);background-color:var(--ax-bg-raised);border-radius:var(--ax-radius-12);color:var(--ax-text-neutral);box-shadow:var(--ax-shadow-dialog);border:1px solid var(--ax-border-neutral-subtleA);z-index:2000;flex-direction:column;transition:transform .2s cubic-bezier(.25,.46,.45,.94),opacity .2s cubic-bezier(.25,.46,.45,.94),translate .2s cubic-bezier(.25,.46,.45,.94);display:flex;position:fixed;overflow:hidden}.aksel-dialog__popup:focus{outline:none}.aksel-dialog__popup[data-size=small]{--__axc-dialog-p-b: var(--ax-space-12);--__axc-dialog-p-i: var(--ax-space-16)}.aksel-dialog__popup[data-entering-style],.aksel-dialog__popup[data-exiting-style]{opacity:.001;transform:var(--__axc-dialog-transform)}.aksel-dialog__popup[data-exiting-style]{transition-duration:.1s}.aksel-dialog__popup[data-exiting-style]:after{transition-timing-function:cubic-bezier(.55,.09,.68,.53)}.aksel-dialog__popup[data-nested-dialog-open=true]{box-shadow:none}.aksel-dialog__popup[data-nested-dialog-open=true]:after{opacity:.9}.aksel-dialog__popup:after{content:"";border-radius:inherit;background-color:var(--ax-bg-overlay);opacity:0;z-index:1;pointer-events:none;transition:opacity cubic-bezier(.25,.46,.45,.94);position:absolute;inset:0}.aksel-dialog__popup[data-position=center]{--__axc-dialog-center-margin: 3rem;--__axc-dialog-transform: scale(.98);max-width:calc(100dvw - 3rem);max-height:calc(90dvh - var(--__axc-dialog-center-margin));margin-inline:auto;margin-block:max(var(--__axc-dialog-center-margin),10dvh) auto;top:0;left:0;right:0}.aksel-dialog__popup[data-position=center][data-nested=true][data-entering-style],.aksel-dialog__popup[data-position=center][data-nested=true][data-exiting-style]{opacity:1;transition-duration:0s;transform:scale(1)}.aksel-dialog__popup[data-position=center][data-nested-dialog-open=true]{transform:translateY(calc(1rem * var(--__axc-nested-level) * -1)) scale(calc(1 - .02 * var(--__axc-nested-level)))}@media(max-width:768px)or (max-height:479px){.aksel-dialog__popup[data-position=center]{--__axc-dialog-transform: translateY(35%);border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0;max-width:95dvw;height:auto;max-height:calc(100dvh - max(16px,10dvh));margin-block:0;margin-inline:auto;inset:auto 0 0}}.aksel-dialog__popup[data-position=right],.aksel-dialog__popup[data-position=left]{max-width:calc(100vw - max(16px,10vw));top:0;bottom:0}:is(.aksel-dialog__popup[data-position=right],.aksel-dialog__popup[data-position=left])[data-nested-dialog-open=true]:after{opacity:1;transition-duration:.1s}.aksel-dialog__popup[data-position=right]{--__axc-dialog-transform: translateX(35%);border-right:0;border-top-right-radius:0;border-bottom-right-radius:0;right:0}.aksel-dialog__popup[data-position=left]{--__axc-dialog-transform: translateX(-35%);border-left:0;border-top-left-radius:0;border-bottom-left-radius:0;left:0}.aksel-dialog__popup[data-position=bottom]{--__axc-dialog-transform: translateY(35%);border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0;max-width:95dvw;height:auto;max-height:calc(100dvh - max(16px,10dvh));margin-inline:auto;bottom:0;left:0;right:0}.aksel-dialog__popup[data-position=bottom][data-nested-dialog-open=true]{transform:translateY(calc(1rem * var(--__axc-nested-level) * -1)) scale(calc(1 - .02 * var(--__axc-nested-level)))}.aksel-dialog__popup[data-position=fullscreen]{--__axc-dialog-transform: scale(.98);border:0;border-radius:0;width:100%;max-width:100dvw;height:100%;max-height:100dvh;inset:0}.aksel-dialog__backdrop{background-color:var(--ax-bg-overlay);z-index:2000;min-height:100dvh;transition:opacity .2s cubic-bezier(.25,.46,.45,.94);position:fixed;inset:0}@supports (-webkit-touch-callout: none){.aksel-dialog__backdrop{position:absolute}}.aksel-dialog__backdrop[data-entering-style],.aksel-dialog__backdrop[data-exiting-style]{opacity:.001}.aksel-dialog__header{padding-block:var(--__axc-dialog-p-b);padding-inline:var(--__axc-dialog-p-i)}.aksel-dialog__title{margin-block-end:var(--ax-space-4)}.aksel-dialog__close-button{float:right;align-self:start}.aksel-dialog__body{padding-block:var(--__axc-dialog-p-b);padding-inline:var(--__axc-dialog-p-i);overscroll-behavior:contain;position:relative;overflow:auto}.aksel-dialog__header~.aksel-dialog__body{padding-block-start:0}.aksel-dialog__body{background:linear-gradient(var(--ax-bg-raised) 30%,transparent) top,linear-gradient(transparent,var(--ax-bg-raised) 60%) bottom,radial-gradient(farthest-side at 50% 0,rgba(0,0,0,.3),transparent) top,radial-gradient(farthest-side at 50% 100%,rgba(0,0,0,.3),transparent) bottom;background-repeat:no-repeat;background-size:100% 40px,100% 50px,100% 16px,100% 16px;background-attachment:local,local,scroll,scroll}.aksel-dialog__footer{justify-content:flex-end;gap:var(--ax-space-8);padding-block:var(--__axc-dialog-p-b);padding-inline:var(--__axc-dialog-p-i);flex-flow:wrap;display:flex}@media(forced-colors:active){.aksel-dialog__popup{outline:2px solid var(--ax-border-neutral-strong)!important}}}
|
|
@@ -65,11 +65,6 @@
|
|
|
65
65
|
padding-left: calc(var(--__axc-read-more-icon-size) / 2 - 1px + var(--ax-space-4));
|
|
66
66
|
}
|
|
67
67
|
|
|
68
|
-
.aksel-read-more__content:focus-visible {
|
|
69
|
-
outline: 3px solid var(--ax-border-focus);
|
|
70
|
-
outline-offset: 3px;
|
|
71
|
-
}
|
|
72
|
-
|
|
73
68
|
.aksel-read-more__content[data-state="closed"] {
|
|
74
69
|
display: none;
|
|
75
70
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer aksel.components{.aksel-read-more{--__axc-read-more-icon-size: 1.5rem;--__axc-read-more-pi-start: 0px;--__axc-read-more-pi-end: var(--ax-space-4);--__axc-read-more-pb: var(--ax-space-4)}.aksel-read-more__button{cursor:pointer;align-items:flex-start;gap:var(--ax-space-4);color:var(--ax-text-subtle);padding-inline:var(--__axc-read-more-pi-start) var(--__axc-read-more-pi-end);padding-block:var(--__axc-read-more-pb);text-align:start;background:none;border:none;margin:0;display:flex}.aksel-read-more__button:focus-visible{outline:3px solid var(--ax-border-focus);outline-offset:3px}.aksel-read-more__button[data-state=open] .aksel-read-more__expand-icon{transform:rotateX(-180deg)}.aksel-read-more:is([data-volume=low],:not([data-volume])) .aksel-read-more__button{border-radius:var(--ax-radius-4)}.aksel-read-more:is([data-volume=low],:not([data-volume])) .aksel-read-more__button:hover{background-color:var(--ax-bg-neutral-moderate-hoverA)}.aksel-read-more[data-volume=high] .aksel-read-more__button{background-color:var(--ax-bg-moderate);border-radius:var(--ax-radius-full)}.aksel-read-more[data-volume=high] .aksel-read-more__button:hover{background-color:var(--ax-bg-moderate-hoverA);color:var(--ax-text-default)}.aksel-read-more[data-volume=high].aksel-read-more--large{--__axc-read-more-pi-start: var(--ax-space-12);--__axc-read-more-pi-end: var(--ax-space-24)}.aksel-read-more[data-volume=high].aksel-read-more--small,.aksel-read-more[data-volume=high].aksel-read-more--medium{--__axc-read-more-pi-start: var(--ax-space-8);--__axc-read-more-pi-end: var(--ax-space-16)}.aksel-read-more__content{margin-top:var(--ax-space-8);border-left:2px solid var(--ax-border-neutral-subtleA);color:var(--ax-text-neutral);margin-left:calc(var(--__axc-read-more-pi-start) + var(--__axc-read-more-icon-size) / 2 - 1px);padding-left:calc(var(--__axc-read-more-icon-size) / 2 - 1px + var(--ax-space-4))}.aksel-read-more__content
|
|
1
|
+
@layer aksel.components{.aksel-read-more{--__axc-read-more-icon-size: 1.5rem;--__axc-read-more-pi-start: 0px;--__axc-read-more-pi-end: var(--ax-space-4);--__axc-read-more-pb: var(--ax-space-4)}.aksel-read-more__button{cursor:pointer;align-items:flex-start;gap:var(--ax-space-4);color:var(--ax-text-subtle);padding-inline:var(--__axc-read-more-pi-start) var(--__axc-read-more-pi-end);padding-block:var(--__axc-read-more-pb);text-align:start;background:none;border:none;margin:0;display:flex}.aksel-read-more__button:focus-visible{outline:3px solid var(--ax-border-focus);outline-offset:3px}.aksel-read-more__button[data-state=open] .aksel-read-more__expand-icon{transform:rotateX(-180deg)}.aksel-read-more:is([data-volume=low],:not([data-volume])) .aksel-read-more__button{border-radius:var(--ax-radius-4)}.aksel-read-more:is([data-volume=low],:not([data-volume])) .aksel-read-more__button:hover{background-color:var(--ax-bg-neutral-moderate-hoverA)}.aksel-read-more[data-volume=high] .aksel-read-more__button{background-color:var(--ax-bg-moderate);border-radius:var(--ax-radius-full)}.aksel-read-more[data-volume=high] .aksel-read-more__button:hover{background-color:var(--ax-bg-moderate-hoverA);color:var(--ax-text-default)}.aksel-read-more[data-volume=high].aksel-read-more--large{--__axc-read-more-pi-start: var(--ax-space-12);--__axc-read-more-pi-end: var(--ax-space-24)}.aksel-read-more[data-volume=high].aksel-read-more--small,.aksel-read-more[data-volume=high].aksel-read-more--medium{--__axc-read-more-pi-start: var(--ax-space-8);--__axc-read-more-pi-end: var(--ax-space-16)}.aksel-read-more__content{margin-top:var(--ax-space-8);border-left:2px solid var(--ax-border-neutral-subtleA);color:var(--ax-text-neutral);margin-left:calc(var(--__axc-read-more-pi-start) + var(--__axc-read-more-icon-size) / 2 - 1px);padding-left:calc(var(--__axc-read-more-icon-size) / 2 - 1px + var(--ax-space-4))}.aksel-read-more__content[data-state=closed]{display:none}.aksel-read-more__expand-icon{font-size:var(--__axc-read-more-icon-size);flex-shrink:0;transition:transform .1s cubic-bezier(.2,0,0,1)}.aksel-read-more--large{--__axc-read-more-pb: var(--ax-space-12)}.aksel-read-more--small{--__axc-read-more-icon-size: 1.25rem;--__axc-read-more-pb: var(--ax-space-2)}@media(forced-colors:active){.aksel-read-more__button{color:buttontext;background-color:buttonface;border:1px solid buttontext}}}
|
|
@@ -2756,17 +2756,27 @@
|
|
|
2756
2756
|
border-radius: var(--ax-radius-12);
|
|
2757
2757
|
--__axc-base-alert-pi: var(--ax-space-20);
|
|
2758
2758
|
--__axc-base-alert-content-p: var(--ax-space-12) var(--__axc-base-alert-pi) var(--ax-space-16) var(--__axc-base-alert-pi);
|
|
2759
|
-
--__axc-base-alert-title-pb: var(--ax-space-2);
|
|
2760
2759
|
--__axc-base-alert-header-max-width: 37.5rem;
|
|
2760
|
+
--__axc-base-alert-header-icon-margin-block-start: var(--ax-space-8);
|
|
2761
|
+
--__axc-base-alert-header-close-button-margin-block-start: var(--ax-space-4);
|
|
2762
|
+
--__axc-global-alert-alignment: max(var(--__axc-base-alert-pi), calc((100% - var(--__axc-base-alert-header-max-width)) / 2));
|
|
2761
2763
|
height: fit-content;
|
|
2762
2764
|
display: grid;
|
|
2763
2765
|
overflow: clip;
|
|
2764
2766
|
}
|
|
2765
2767
|
|
|
2768
|
+
.aksel-base-alert[data-centered="false"] {
|
|
2769
|
+
--__axc-global-alert-alignment: var(--ax-space-20);
|
|
2770
|
+
}
|
|
2771
|
+
|
|
2766
2772
|
.aksel-base-alert[data-size="small"] {
|
|
2767
|
-
--__axc-base-alert-pi: var(--ax-space-16);
|
|
2768
2773
|
--__axc-base-alert-content-p: var(--ax-space-8) var(--ax-space-16) var(--ax-space-12) var(--ax-space-16);
|
|
2769
|
-
--__axc-base-alert-
|
|
2774
|
+
--__axc-base-alert-header-icon-margin-block-start: var(--ax-space-6);
|
|
2775
|
+
--__axc-base-alert-header-close-button-margin-block-start: var(--ax-space-2);
|
|
2776
|
+
}
|
|
2777
|
+
|
|
2778
|
+
.aksel-base-alert[data-size="small"][data-centered="false"] {
|
|
2779
|
+
--__axc-global-alert-alignment: var(--ax-space-16);
|
|
2770
2780
|
}
|
|
2771
2781
|
|
|
2772
2782
|
.aksel-base-alert[data-variant="moderate"] {
|
|
@@ -2790,13 +2800,13 @@
|
|
|
2790
2800
|
.aksel-base-alert__header {
|
|
2791
2801
|
align-items: flex-start;
|
|
2792
2802
|
gap: var(--ax-space-8);
|
|
2793
|
-
padding:
|
|
2803
|
+
padding: 0 var(--__axc-base-alert-pi);
|
|
2794
2804
|
border-bottom: 1px solid;
|
|
2795
2805
|
display: flex;
|
|
2796
2806
|
}
|
|
2797
2807
|
|
|
2798
2808
|
.aksel-base-alert[data-global="true"] .aksel-base-alert__header {
|
|
2799
|
-
padding-inline:
|
|
2809
|
+
padding-inline: var(--__axc-global-alert-alignment);
|
|
2800
2810
|
}
|
|
2801
2811
|
|
|
2802
2812
|
.aksel-base-alert[data-variant="moderate"] .aksel-base-alert__header {
|
|
@@ -2816,13 +2826,13 @@
|
|
|
2816
2826
|
}
|
|
2817
2827
|
|
|
2818
2828
|
.aksel-base-alert__icon {
|
|
2819
|
-
margin-top: var(--
|
|
2829
|
+
margin-top: var(--__axc-base-alert-header-icon-margin-block-start);
|
|
2820
2830
|
font-size: 1.5rem;
|
|
2821
2831
|
display: grid;
|
|
2822
2832
|
}
|
|
2823
2833
|
|
|
2824
2834
|
.aksel-base-alert__title {
|
|
2825
|
-
padding-block: var(--
|
|
2835
|
+
padding-block: var(--ax-space-6);
|
|
2826
2836
|
}
|
|
2827
2837
|
|
|
2828
2838
|
.aksel-base-alert__content {
|
|
@@ -2831,12 +2841,13 @@
|
|
|
2831
2841
|
}
|
|
2832
2842
|
|
|
2833
2843
|
.aksel-base-alert[data-global="true"] .aksel-base-alert__content {
|
|
2834
|
-
padding-inline:
|
|
2844
|
+
padding-inline: var(--__axc-global-alert-alignment);
|
|
2835
2845
|
}
|
|
2836
2846
|
|
|
2837
2847
|
.aksel-base-alert__close-button {
|
|
2838
|
-
z-index: 1;
|
|
2839
2848
|
margin-left: auto;
|
|
2849
|
+
z-index: 1;
|
|
2850
|
+
margin-block-start: var(--__axc-base-alert-header-close-button-margin-block-start);
|
|
2840
2851
|
}
|
|
2841
2852
|
|
|
2842
2853
|
.aksel-base-alert__close-button:focus-visible {
|
|
@@ -3426,6 +3437,8 @@
|
|
|
3426
3437
|
.aksel-dialog__body {
|
|
3427
3438
|
padding-block: var(--__axc-dialog-p-b);
|
|
3428
3439
|
padding-inline: var(--__axc-dialog-p-i);
|
|
3440
|
+
overscroll-behavior: contain;
|
|
3441
|
+
position: relative;
|
|
3429
3442
|
overflow: auto;
|
|
3430
3443
|
}
|
|
3431
3444
|
|
|
@@ -3433,6 +3446,13 @@
|
|
|
3433
3446
|
padding-block-start: 0;
|
|
3434
3447
|
}
|
|
3435
3448
|
|
|
3449
|
+
.aksel-dialog__body {
|
|
3450
|
+
background: linear-gradient(var(--ax-bg-raised) 30%, transparent) top, linear-gradient(transparent, var(--ax-bg-raised) 60%) bottom, radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .3), transparent) top, radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .3), transparent) bottom;
|
|
3451
|
+
background-repeat: no-repeat;
|
|
3452
|
+
background-size: 100% 40px, 100% 50px, 100% 16px, 100% 16px;
|
|
3453
|
+
background-attachment: local, local, scroll, scroll;
|
|
3454
|
+
}
|
|
3455
|
+
|
|
3436
3456
|
.aksel-dialog__footer {
|
|
3437
3457
|
justify-content: flex-end;
|
|
3438
3458
|
gap: var(--ax-space-8);
|
|
@@ -5430,11 +5450,6 @@
|
|
|
5430
5450
|
padding-left: calc(var(--__axc-read-more-icon-size) / 2 - 1px + var(--ax-space-4));
|
|
5431
5451
|
}
|
|
5432
5452
|
|
|
5433
|
-
.aksel-read-more__content:focus-visible {
|
|
5434
|
-
outline: 3px solid var(--ax-border-focus);
|
|
5435
|
-
outline-offset: 3px;
|
|
5436
|
-
}
|
|
5437
|
-
|
|
5438
5453
|
.aksel-read-more__content[data-state="closed"] {
|
|
5439
5454
|
display: none;
|
|
5440
5455
|
}
|