@navikt/ds-css 5.12.2 → 5.12.3
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/expansioncard.css +26 -8
- package/dist/component/expansioncard.min.css +2 -2
- package/dist/component/index.css +25 -8
- package/dist/component/index.min.css +2 -2
- package/dist/components.css +26 -8
- package/dist/components.min.css +2 -2
- package/dist/global/tokens.css +1 -1
- package/dist/index.css +25 -8
- package/dist/index.min.css +2 -2
- package/expansioncard.css +26 -8
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
--__ac-expansioncard-border-color: var(--ac-expansioncard-border-color, var(--a-border-default));
|
|
3
3
|
--__ac-expansioncard-border-radius: var(--ac-expansioncard-border-radius, var(--a-border-radius-large));
|
|
4
4
|
--__ac-expansioncard-border-width: 1px;
|
|
5
|
+
--__ac-expansioncard-padding-block: var(--a-spacing-4);
|
|
6
|
+
--__ac-expansioncard-padding-inline: var(--a-spacing-6);
|
|
5
7
|
|
|
6
8
|
border-radius: var(--__ac-expansioncard-border-radius);
|
|
7
9
|
background-color: var(--ac-expansioncard-bg, var(--a-surface-default));
|
|
@@ -31,7 +33,7 @@
|
|
|
31
33
|
width: 100%;
|
|
32
34
|
display: flex;
|
|
33
35
|
gap: var(--a-spacing-4);
|
|
34
|
-
padding: var(--
|
|
36
|
+
padding: var(--__ac-expansioncard-padding-block) var(--__ac-expansioncard-padding-inline);
|
|
35
37
|
border-radius: var(--__ac-expansioncard-border-radius);
|
|
36
38
|
background-color: var(--ac-expansioncard-header-bg, var(--a-surface-transparent));
|
|
37
39
|
position: relative;
|
|
@@ -39,8 +41,9 @@
|
|
|
39
41
|
justify-content: space-between;
|
|
40
42
|
}
|
|
41
43
|
|
|
42
|
-
.navds-expansioncard--small
|
|
43
|
-
padding: var(--a-spacing-3)
|
|
44
|
+
.navds-expansioncard--small {
|
|
45
|
+
--__ac-expansioncard-padding-block: var(--a-spacing-3);
|
|
46
|
+
--__ac-expansioncard-padding-inline: var(--a-spacing-4);
|
|
44
47
|
}
|
|
45
48
|
|
|
46
49
|
.navds-expansioncard__header:hover {
|
|
@@ -62,6 +65,22 @@
|
|
|
62
65
|
0 -1px 0 0 var(--__ac-expansioncard-border-color);
|
|
63
66
|
}
|
|
64
67
|
|
|
68
|
+
.navds-expansioncard--open > :where(.navds-expansioncard__header)::after {
|
|
69
|
+
content: "";
|
|
70
|
+
background-color: var(--a-border-divider);
|
|
71
|
+
bottom: 0;
|
|
72
|
+
left: var(--__ac-expansioncard-padding-inline);
|
|
73
|
+
height: 1px;
|
|
74
|
+
width: calc(100% - 2 * var(--__ac-expansioncard-padding-inline));
|
|
75
|
+
position: absolute;
|
|
76
|
+
opacity: 1;
|
|
77
|
+
transition: opacity 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.navds-expansioncard--open > :where(.navds-expansioncard__header:hover)::after {
|
|
81
|
+
opacity: 0;
|
|
82
|
+
}
|
|
83
|
+
|
|
65
84
|
/*************************
|
|
66
85
|
* Header/Typography *
|
|
67
86
|
*************************/
|
|
@@ -159,17 +178,16 @@
|
|
|
159
178
|
*************************/
|
|
160
179
|
|
|
161
180
|
.navds-expansioncard__content {
|
|
181
|
+
--__ac-expansioncard-padding-block: var(--a-spacing-3);
|
|
182
|
+
|
|
162
183
|
border-end-end-radius: var(--__ac-expansioncard-border-radius);
|
|
163
184
|
border-end-start-radius: var(--__ac-expansioncard-border-radius);
|
|
164
|
-
padding: var(--
|
|
185
|
+
padding: var(--__ac-expansioncard-padding-block) var(--__ac-expansioncard-padding-inline)
|
|
186
|
+
var(--__ac-expansioncard-padding-inline);
|
|
165
187
|
border: var(--__ac-expansioncard-border-width) solid var(--__ac-expansioncard-border-color);
|
|
166
188
|
border-top: none;
|
|
167
189
|
}
|
|
168
190
|
|
|
169
|
-
.navds-expansioncard--small > :where(.navds-expansioncard__content) {
|
|
170
|
-
padding: var(--a-spacing-3) var(--a-spacing-4) var(--a-spacing-4);
|
|
171
|
-
}
|
|
172
|
-
|
|
173
191
|
.navds-expansioncard__content--closed {
|
|
174
192
|
display: none;
|
|
175
193
|
}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
.navds-expansioncard{--__ac-expansioncard-border-color:var(--ac-expansioncard-border-color,var(--a-border-default));--__ac-expansioncard-border-radius:var(--ac-expansioncard-border-radius,var(--a-border-radius-large));--__ac-expansioncard-border-width:1px;background-color:var(--ac-expansioncard-bg,var(--a-surface-default));border-radius:var(--__ac-expansioncard-border-radius);height:-webkit-fit-content;height:-moz-fit-content;height:fit-content}.navds-expansioncard--open{--__ac-expansioncard-border-color:var(
|
|
1
|
+
.navds-expansioncard{--__ac-expansioncard-border-color:var(--ac-expansioncard-border-color,var(--a-border-default));--__ac-expansioncard-border-radius:var(--ac-expansioncard-border-radius,var(--a-border-radius-large));--__ac-expansioncard-border-width:1px;--__ac-expansioncard-padding-block:var(--a-spacing-4);--__ac-expansioncard-padding-inline:var(--a-spacing-6);background-color:var(--ac-expansioncard-bg,var(--a-surface-default));border-radius:var(--__ac-expansioncard-border-radius);height:-webkit-fit-content;height:-moz-fit-content;height:fit-content}.navds-expansioncard--open{--__ac-expansioncard-border-color:var(
|
|
2
2
|
--ac-expansioncard-border-open-color,var(--ac-expansioncard-border-color,var(--a-border-default))
|
|
3
|
-
)}.navds-expansioncard:hover{--__ac-expansioncard-border-color:var(--ac-expansioncard-border-hover-color,var(--a-border-strong))}:where(.navds-expansioncard.navds-expansioncard--open):hover{--__ac-expansioncard-border-color:var(--ac-expansioncard-border-hover-color,var(--a-border-strong))}.navds-expansioncard__header{background-color:var(--ac-expansioncard-header-bg,var(--a-surface-transparent));border:var(--__ac-expansioncard-border-width) solid var(--__ac-expansioncard-border-color);border-radius:var(--__ac-expansioncard-border-radius);display:flex;gap:var(--a-spacing-4);justify-content:space-between;padding:var(--
|
|
3
|
+
)}.navds-expansioncard:hover{--__ac-expansioncard-border-color:var(--ac-expansioncard-border-hover-color,var(--a-border-strong))}:where(.navds-expansioncard.navds-expansioncard--open):hover{--__ac-expansioncard-border-color:var(--ac-expansioncard-border-hover-color,var(--a-border-strong))}.navds-expansioncard__header{background-color:var(--ac-expansioncard-header-bg,var(--a-surface-transparent));border:var(--__ac-expansioncard-border-width) solid var(--__ac-expansioncard-border-color);border-radius:var(--__ac-expansioncard-border-radius);display:flex;gap:var(--a-spacing-4);justify-content:space-between;padding:var(--__ac-expansioncard-padding-block) var(--__ac-expansioncard-padding-inline);position:relative;width:100%}.navds-expansioncard--small{--__ac-expansioncard-padding-block:var(--a-spacing-3);--__ac-expansioncard-padding-inline:var(--a-spacing-4)}.navds-expansioncard__header:hover{background-color:var(--ac-expansioncard-header-bg-hover,var(--a-surface-hover));box-shadow:0 0 0 1px var(--__ac-expansioncard-border-color)}.navds-expansioncard--open>:where(.navds-expansioncard__header){background-color:var(--ac-expansioncard-header-open-bg,var(--a-surface-transparent));border:var(--__ac-expansioncard-border-width) solid var(--__ac-expansioncard-border-color);border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.navds-expansioncard--open>:where(.navds-expansioncard__header):hover{background-color:var(--ac-expansioncard-header-bg-hover,var(--a-surface-hover));box-shadow:1px 0 0 0 var(--__ac-expansioncard-border-color),-1px 0 0 0 var(--__ac-expansioncard-border-color),0 -1px 0 0 var(--__ac-expansioncard-border-color)}.navds-expansioncard--open>:where(.navds-expansioncard__header):after{background-color:var(--a-border-divider);bottom:0;content:"";height:1px;left:var(--__ac-expansioncard-padding-inline);opacity:1;position:absolute;transition:opacity .1s cubic-bezier(.175,.885,.32,1.275);width:calc(100% - var(--__ac-expansioncard-padding-inline)*2)}.navds-expansioncard--open>:where(.navds-expansioncard__header:hover):after{opacity:0}.navds-expansioncard__title--small{margin-top:.625rem}.navds-expansioncard__title--medium{margin-top:var(--a-spacing-2)}.navds-expansioncard__title--large{margin-top:var(--a-spacing-1)}.navds-expansioncard--small>:where(.navds-expansioncard__header) :where(.navds-expansioncard__title--small){margin-top:var(--a-spacing-05)}.navds-expansioncard--small :where(.navds-expansioncard__title--medium,.navds-expansioncard__title--large){margin-top:0}.navds-expansioncard__header-button{align-self:flex-start;background:transparent;border:none;border-radius:var(--ac-expansioncard-button-border-radius,var(--a-border-radius-medium));cursor:pointer;display:grid;font-size:1.5rem;margin:0;min-height:3rem;min-width:3rem;place-content:center}.navds-expansioncard--small>:where(.navds-expansioncard__header)>:where(.navds-expansioncard__header-button){min-height:2rem;min-width:2rem}:where(.navds-expansioncard__header):hover>:where(.navds-expansioncard__header-button){background-color:var(--a-surface-hover)}.navds-expansioncard__header-chevron{transition:transform .15s ease-in-out}.navds-expansioncard--open>:where(.navds-expansioncard__header) :where(.navds-expansioncard__header-chevron){transform:translateY(0) rotate(180deg)}.navds-expansioncard__header-button:hover>:where(.navds-expansioncard__header-chevron){transform:translateY(1px)}.navds-expansioncard__header-button:focus-visible{box-shadow:var(--a-shadow-focus);outline:none}@supports not selector(:focus-visible){.navds-expansioncard__header-button:focus{box-shadow:var(--a-shadow-focus);outline:none}}.navds-expansioncard--open>:where(.navds-expansioncard__header)>:where(.navds-expansioncard__header-button):hover :where(.navds-expansioncard__header-chevron){transform:translateY(-1px) rotate(180deg)}.navds-expansioncard__header-button:after{content:"";cursor:pointer;height:100%;inset:0;position:absolute;width:100%;z-index:1}.navds-expansioncard__content{--__ac-expansioncard-padding-block:var(--a-spacing-3);border:var(--__ac-expansioncard-border-width) solid var(--__ac-expansioncard-border-color);border-end-end-radius:var(--__ac-expansioncard-border-radius);border-end-start-radius:var(--__ac-expansioncard-border-radius);border-top:none;padding:var(--__ac-expansioncard-padding-block) var(--__ac-expansioncard-padding-inline) var(--__ac-expansioncard-padding-inline)}.navds-expansioncard__content--closed{display:none}:where(.navds-expansioncard__header):hover+.navds-expansioncard__content{box-shadow:1px 0 0 0 var(--__ac-expansioncard-border-color),-1px 0 0 0 var(--__ac-expansioncard-border-color),0 1px 0 0 var(--__ac-expansioncard-border-color)}.navds-expansioncard__content-inner{animation:fadeExpansionCard .25s ease}.navds-expansioncard--no-animation :where(.navds-expansioncard__content-inner){animation:none}@keyframes fadeExpansionCard{0%{opacity:.25;transform:translateY(-8px)}40%{opacity:.7}to{opacity:1;transform:translateY(0)}}
|
package/dist/component/index.css
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
@charset "UTF-8";
|
|
2
2
|
/**
|
|
3
3
|
* Do not edit directly
|
|
4
|
-
* Generated on
|
|
4
|
+
* Generated on Thu, 04 Jan 2024 19:18:28 GMT
|
|
5
5
|
*/
|
|
6
6
|
:root, :host {
|
|
7
7
|
--a-spacing-1-alt: 0.375rem;
|
|
@@ -2305,6 +2305,8 @@ body,
|
|
|
2305
2305
|
--__ac-expansioncard-border-color: var(--ac-expansioncard-border-color, var(--a-border-default));
|
|
2306
2306
|
--__ac-expansioncard-border-radius: var(--ac-expansioncard-border-radius, var(--a-border-radius-large));
|
|
2307
2307
|
--__ac-expansioncard-border-width: 1px;
|
|
2308
|
+
--__ac-expansioncard-padding-block: var(--a-spacing-4);
|
|
2309
|
+
--__ac-expansioncard-padding-inline: var(--a-spacing-6);
|
|
2308
2310
|
|
|
2309
2311
|
border-radius: var(--__ac-expansioncard-border-radius);
|
|
2310
2312
|
background-color: var(--ac-expansioncard-bg, var(--a-surface-default));
|
|
@@ -2329,15 +2331,16 @@ body,
|
|
|
2329
2331
|
width: 100%;
|
|
2330
2332
|
display: flex;
|
|
2331
2333
|
gap: var(--a-spacing-4);
|
|
2332
|
-
padding: var(--
|
|
2334
|
+
padding: var(--__ac-expansioncard-padding-block) var(--__ac-expansioncard-padding-inline);
|
|
2333
2335
|
border-radius: var(--__ac-expansioncard-border-radius);
|
|
2334
2336
|
background-color: var(--ac-expansioncard-header-bg, var(--a-surface-transparent));
|
|
2335
2337
|
position: relative;
|
|
2336
2338
|
border: var(--__ac-expansioncard-border-width) solid var(--__ac-expansioncard-border-color);
|
|
2337
2339
|
justify-content: space-between;
|
|
2338
2340
|
}
|
|
2339
|
-
.navds-expansioncard--small
|
|
2340
|
-
padding: var(--a-spacing-3)
|
|
2341
|
+
.navds-expansioncard--small {
|
|
2342
|
+
--__ac-expansioncard-padding-block: var(--a-spacing-3);
|
|
2343
|
+
--__ac-expansioncard-padding-inline: var(--a-spacing-4);
|
|
2341
2344
|
}
|
|
2342
2345
|
.navds-expansioncard__header:hover {
|
|
2343
2346
|
background-color: var(--ac-expansioncard-header-bg-hover, var(--a-surface-hover));
|
|
@@ -2355,6 +2358,20 @@ body,
|
|
|
2355
2358
|
box-shadow: 1px 0 0 0 var(--__ac-expansioncard-border-color), -1px 0 0 0 var(--__ac-expansioncard-border-color),
|
|
2356
2359
|
0 -1px 0 0 var(--__ac-expansioncard-border-color);
|
|
2357
2360
|
}
|
|
2361
|
+
.navds-expansioncard--open > :where(.navds-expansioncard__header)::after {
|
|
2362
|
+
content: "";
|
|
2363
|
+
background-color: var(--a-border-divider);
|
|
2364
|
+
bottom: 0;
|
|
2365
|
+
left: var(--__ac-expansioncard-padding-inline);
|
|
2366
|
+
height: 1px;
|
|
2367
|
+
width: calc(100% - 2 * var(--__ac-expansioncard-padding-inline));
|
|
2368
|
+
position: absolute;
|
|
2369
|
+
opacity: 1;
|
|
2370
|
+
transition: opacity 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
2371
|
+
}
|
|
2372
|
+
.navds-expansioncard--open > :where(.navds-expansioncard__header:hover)::after {
|
|
2373
|
+
opacity: 0;
|
|
2374
|
+
}
|
|
2358
2375
|
/*************************
|
|
2359
2376
|
* Header/Typography *
|
|
2360
2377
|
*************************/
|
|
@@ -2434,15 +2451,15 @@ body,
|
|
|
2434
2451
|
* Content *
|
|
2435
2452
|
*************************/
|
|
2436
2453
|
.navds-expansioncard__content {
|
|
2454
|
+
--__ac-expansioncard-padding-block: var(--a-spacing-3);
|
|
2455
|
+
|
|
2437
2456
|
border-end-end-radius: var(--__ac-expansioncard-border-radius);
|
|
2438
2457
|
border-end-start-radius: var(--__ac-expansioncard-border-radius);
|
|
2439
|
-
padding: var(--
|
|
2458
|
+
padding: var(--__ac-expansioncard-padding-block) var(--__ac-expansioncard-padding-inline)
|
|
2459
|
+
var(--__ac-expansioncard-padding-inline);
|
|
2440
2460
|
border: var(--__ac-expansioncard-border-width) solid var(--__ac-expansioncard-border-color);
|
|
2441
2461
|
border-top: none;
|
|
2442
2462
|
}
|
|
2443
|
-
.navds-expansioncard--small > :where(.navds-expansioncard__content) {
|
|
2444
|
-
padding: var(--a-spacing-3) var(--a-spacing-4) var(--a-spacing-4);
|
|
2445
|
-
}
|
|
2446
2463
|
.navds-expansioncard__content--closed {
|
|
2447
2464
|
display: none;
|
|
2448
2465
|
}
|