@navikt/ds-css 5.3.0 → 5.3.2
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 +14 -0
- package/accordion.css +4 -1
- package/dist/component/accordion.css +4 -1
- package/dist/component/accordion.min.css +1 -1
- package/dist/component/guidepanel.css +83 -49
- package/dist/component/guidepanel.min.css +1 -1
- package/dist/component/index.css +76 -52
- package/dist/component/index.min.css +3 -3
- package/dist/component/skeleton.css +0 -1
- package/dist/component/skeleton.min.css +1 -1
- package/dist/components.css +75 -51
- package/dist/components.min.css +3 -3
- package/dist/global/tokens.css +1 -1
- package/dist/index.css +76 -52
- package/dist/index.min.css +3 -3
- package/guide-panel.css +74 -50
- package/package.json +2 -2
- package/skeleton.css +0 -1
- package/tokens.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,19 @@
|
|
|
1
1
|
# @navikt/ds-css
|
|
2
2
|
|
|
3
|
+
## 5.3.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Skeleton: Lagt til as-prop for inline brk av Skeleton med span ([#2239](https://github.com/navikt/aksel/pull/2239))
|
|
8
|
+
|
|
9
|
+
## 5.3.1
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- :bug: fix missing accordion bottom box-shadow on last element (when opened) ([#2229](https://github.com/navikt/aksel/pull/2229))
|
|
14
|
+
|
|
15
|
+
- :lipstick: GuidePanel: justert design ([#2227](https://github.com/navikt/aksel/pull/2227))
|
|
16
|
+
|
|
3
17
|
## 5.3.0
|
|
4
18
|
|
|
5
19
|
### Minor Changes
|
package/accordion.css
CHANGED
|
@@ -1,3 +1,7 @@
|
|
|
1
|
+
.navds-accordion {
|
|
2
|
+
--__ac-accordion-header-shadow-color: var(--ac-accordion-header-border, var(--a-border-divider));
|
|
3
|
+
}
|
|
4
|
+
|
|
1
5
|
.navds-accordion__item:focus-within {
|
|
2
6
|
position: relative;
|
|
3
7
|
}
|
|
@@ -6,7 +10,6 @@
|
|
|
6
10
|
* Header *
|
|
7
11
|
*************************/
|
|
8
12
|
.navds-accordion__header {
|
|
9
|
-
--__ac-accordion-header-shadow-color: var(--ac-accordion-header-border, var(--a-border-divider));
|
|
10
13
|
--__ac-accordion-header-shadow: inset 2px 0 0 0 var(--a-transparent), inset -2px 0 0 0 var(--a-transparent),
|
|
11
14
|
inset 0 2px 0 0 var(--__ac-accordion-header-shadow-color);
|
|
12
15
|
|
|
@@ -1,3 +1,7 @@
|
|
|
1
|
+
.navds-accordion {
|
|
2
|
+
--__ac-accordion-header-shadow-color: var(--ac-accordion-header-border, var(--a-border-divider));
|
|
3
|
+
}
|
|
4
|
+
|
|
1
5
|
.navds-accordion__item:focus-within {
|
|
2
6
|
position: relative;
|
|
3
7
|
}
|
|
@@ -7,7 +11,6 @@
|
|
|
7
11
|
*************************/
|
|
8
12
|
|
|
9
13
|
.navds-accordion__header {
|
|
10
|
-
--__ac-accordion-header-shadow-color: var(--ac-accordion-header-border, var(--a-border-divider));
|
|
11
14
|
--__ac-accordion-header-shadow: inset 2px 0 0 0 var(--a-transparent), inset -2px 0 0 0 var(--a-transparent),
|
|
12
15
|
inset 0 2px 0 0 var(--__ac-accordion-header-shadow-color);
|
|
13
16
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.navds-
|
|
1
|
+
.navds-accordion{--__ac-accordion-header-shadow-color:var(--ac-accordion-header-border,var(--a-border-divider))}.navds-accordion__item:focus-within{position:relative}.navds-accordion__header{--__ac-accordion-header-shadow:inset 2px 0 0 0 var(--a-transparent),inset -2px 0 0 0 var(--a-transparent),inset 0 2px 0 0 var(--__ac-accordion-header-shadow-color);align-items:flex-start;background:var(--ac-accordion-header-bg,var(--a-surface-transparent));border:none;box-shadow:var(--__ac-accordion-header-shadow);cursor:pointer;display:flex;gap:var(--a-spacing-2);justify-content:flex-start;margin:0;padding:var(--a-spacing-3);position:relative;text-align:left;width:100%;z-index:1}.navds-accordion__header:hover{background-color:var(--ac-accordion-header-bg-hover,var(--a-surface-hover));color:var(--ac-accordion-header-text-hover,inherit);text-decoration:underline}.navds-accordion--small .navds-accordion__header{padding:var(--a-spacing-2) var(--a-spacing-3)}.navds-accordion--medium .navds-accordion__header{padding:var(--a-spacing-3)}.navds-accordion--large .navds-accordion__header{padding:var(--a-spacing-4) var(--a-spacing-3)}.navds-accordion__item:last-child>:where(.navds-accordion__header){box-shadow:var(--__ac-accordion-header-shadow),inset 0 -2px 0 0 var(--__ac-accordion-header-shadow-color)}.navds-accordion__item:last-child:where(.navds-accordion__item--open) :where(.navds-accordion__header){box-shadow:inset 2px 0 0 0 var(--a-transparent),inset -2px 0 0 0 var(--a-transparent),inset 0 2px 0 0 var(--a-transparent),inset 0 2px 0 0 var(--__ac-accordion-header-shadow-color)}.navds-accordion__item:last-child:where(.navds-accordion__item--open){box-shadow:inset 2px 0 0 0 var(--a-transparent),inset -2px 0 0 0 var(--a-transparent),inset 0 2px 0 0 var(--a-transparent),inset 0 -2px 0 0 var(--__ac-accordion-header-shadow-color)}.navds-accordion__item--open>:where(.navds-accordion__header){box-shadow:var(--__ac-accordion-header-shadow)}.navds-accordion__header:focus-visible{border-radius:var(--a-border-radius-large);box-shadow:var(--a-shadow-focus);outline:none}@supports not selector(:focus-visible){.navds-accordion__header:focus{border-radius:var(--a-border-radius-large);box-shadow:var(--a-shadow-focus);outline:none}}.navds-accordion__header-content{overflow:hidden;text-overflow:ellipsis}.navds-accordion__icon-wrapper{align-self:center;border-radius:var(--a-border-radius-medium);display:grid;height:var(--a-spacing-6);place-content:center;width:var(--a-spacing-6)}.navds-accordion__header:hover>.navds-accordion__icon-wrapper{background-color:var(--ac-accordion-header-icon-bg-hover,var(--a-surface-neutral-subtle-hover))}.navds-accordion__header-chevron{align-self:center;border-radius:var(--a-border-radius-medium);flex-shrink:0;font-size:1.5rem;height:1.75rem;transition:-webkit-transform .15s ease-in-out;transition:transform .15s ease-in-out;transition:transform .15s ease-in-out,-webkit-transform .15s ease-in-out}:where(.navds-accordion__header):hover>:where(.navds-accordion__icon-wrapper)>:where(.navds-accordion__header-chevron){-webkit-transform:translateY(1px);transform:translateY(1px)}.navds-accordion__item--open>:where(.navds-accordion__header)>:where(.navds-accordion__icon-wrapper)>:where(.navds-accordion__header-chevron){-webkit-transform:translateY(0) rotate(-180deg);transform:translateY(0) rotate(-180deg)}.navds-accordion__item--open>:where(.navds-accordion__header):hover>:where(.navds-accordion__icon-wrapper)>:where(.navds-accordion__header-chevron){-webkit-transform:translateY(-1px) rotate(-180deg);transform:translateY(-1px) rotate(-180deg)}.navds-accordion__item--open{background-color:var(--ac-accordion-item-bg-open,var(--a-transparent))}.navds-accordion__item--open.navds-accordion__item--neutral{background-color:var(--ac-accordion-neutral-item-bg-open,var(--a-surface-neutral-subtle))}.navds-accordion__content{-webkit-animation:fadeAccordionContent .25s ease;animation:fadeAccordionContent .25s ease;padding:0 var(--a-spacing-3) var(--a-spacing-5)}.navds-accordion--indent>:where(.navds-accordion__item)>:where(.navds-accordion__content){padding:0 var(--a-spacing-3) var(--a-spacing-5) var(--a-spacing-11)}.navds-accordion__content--closed{display:none}.navds-accordion__item--no-animation :where(.navds-accordion__content){-webkit-animation:none;animation:none}@-webkit-keyframes fadeAccordionContent{0%{opacity:.25;-webkit-transform:translateY(-8px);transform:translateY(-8px)}40%{opacity:.7}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes fadeAccordionContent{0%{opacity:.25;-webkit-transform:translateY(-8px);transform:translateY(-8px)}40%{opacity:.7}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}
|
|
@@ -1,62 +1,96 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* GuidePanel component
|
|
3
|
-
*/
|
|
4
1
|
.navds-guide-panel {
|
|
2
|
+
--__ac-guide-panel-guide-size: 4rem;
|
|
3
|
+
|
|
5
4
|
position: relative;
|
|
6
|
-
padding-
|
|
5
|
+
padding-top: calc(var(--__ac-guide-panel-guide-size) / 2);
|
|
7
6
|
}
|
|
7
|
+
|
|
8
|
+
.navds-guide {
|
|
9
|
+
background: var(--ac-guide-panel-illustration-bg, var(--a-surface-alt-3-subtle));
|
|
10
|
+
border: 2px solid var(--ac-guide-panel-border, var(--a-border-alt-3));
|
|
11
|
+
border-radius: var(--a-border-radius-full);
|
|
12
|
+
overflow: hidden;
|
|
13
|
+
position: absolute;
|
|
14
|
+
width: var(--__ac-guide-panel-guide-size);
|
|
15
|
+
height: var(--__ac-guide-panel-guide-size);
|
|
16
|
+
left: 50%;
|
|
17
|
+
transform: translate(-50%, -50%);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.navds-guide svg,
|
|
21
|
+
.navds-guide img {
|
|
22
|
+
height: 100%;
|
|
23
|
+
width: 100%;
|
|
24
|
+
}
|
|
25
|
+
|
|
8
26
|
.navds-guide-panel__content {
|
|
9
27
|
background-color: var(--ac-guide-panel-bg, var(--a-surface-default));
|
|
10
|
-
border
|
|
11
|
-
border:
|
|
12
|
-
|
|
13
|
-
padding: var(--a-spacing-6);
|
|
14
|
-
padding-left: var(--a-spacing-14);
|
|
15
|
-
}
|
|
16
|
-
.navds-guide-panel--poster {
|
|
17
|
-
padding-left: 0;
|
|
28
|
+
border: 2px solid var(--ac-guide-panel-border, var(--a-border-alt-3));
|
|
29
|
+
border-radius: var(--a-border-radius-large);
|
|
30
|
+
padding: var(--a-spacing-4);
|
|
18
31
|
padding-top: var(--a-spacing-12);
|
|
19
32
|
}
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
33
|
+
|
|
34
|
+
@media (min-width: 480px) {
|
|
35
|
+
.navds-guide-panel {
|
|
36
|
+
--__ac-guide-panel-guide-size: 6.25rem;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.navds-guide-panel__content {
|
|
40
|
+
padding: var(--a-spacing-8);
|
|
41
|
+
padding-top: 4.25rem;
|
|
42
|
+
}
|
|
23
43
|
}
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
44
|
+
|
|
45
|
+
/* not-poster */
|
|
46
|
+
|
|
47
|
+
.navds-guide-panel--not-poster {
|
|
48
|
+
padding-top: 0;
|
|
49
|
+
padding-left: calc(var(--__ac-guide-panel-guide-size) / 2);
|
|
29
50
|
}
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
* Guide component
|
|
36
|
-
*/
|
|
37
|
-
.navds-guide {
|
|
38
|
-
display: flex;
|
|
39
|
-
align-items: center;
|
|
40
|
-
justify-content: center;
|
|
41
|
-
border-radius: var(--a-border-radius-full);
|
|
42
|
-
}
|
|
43
|
-
/* Guide illustration frame */
|
|
44
|
-
.navds-guide__illustration {
|
|
45
|
-
background: var(--ac-guide-panel-illustration-bg, var(--a-surface-action-subtle));
|
|
46
|
-
border-radius: var(--a-border-radius-full);
|
|
47
|
-
overflow: hidden;
|
|
51
|
+
|
|
52
|
+
.navds-guide-panel--not-poster .navds-guide {
|
|
53
|
+
left: 0;
|
|
54
|
+
top: var(--a-spacing-5);
|
|
55
|
+
transform: none;
|
|
48
56
|
}
|
|
49
|
-
|
|
50
|
-
.navds-
|
|
51
|
-
|
|
52
|
-
|
|
57
|
+
|
|
58
|
+
.navds-guide-panel--not-poster .navds-guide-panel__content {
|
|
59
|
+
padding: var(--a-spacing-4);
|
|
60
|
+
padding-left: var(--a-spacing-10);
|
|
61
|
+
min-height: calc(var(--__ac-guide-panel-guide-size) + var(--a-spacing-5) + var(--a-spacing-5));
|
|
53
62
|
}
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
63
|
+
|
|
64
|
+
@media (min-width: 480px) {
|
|
65
|
+
.navds-guide-panel--not-poster {
|
|
66
|
+
--__ac-guide-panel-guide-size: 5rem;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.navds-guide-panel--not-poster .navds-guide-panel__content {
|
|
70
|
+
padding: var(--a-spacing-6);
|
|
71
|
+
padding-left: var(--a-spacing-14);
|
|
72
|
+
}
|
|
58
73
|
}
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
74
|
+
|
|
75
|
+
/* responsive-poster (on desktop) */
|
|
76
|
+
|
|
77
|
+
@media (min-width: 480px) {
|
|
78
|
+
.navds-guide-panel--responsive-poster {
|
|
79
|
+
--__ac-guide-panel-guide-size: 5rem;
|
|
80
|
+
|
|
81
|
+
padding-top: 0;
|
|
82
|
+
padding-left: calc(var(--__ac-guide-panel-guide-size) / 2);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.navds-guide-panel--responsive-poster .navds-guide {
|
|
86
|
+
left: 0;
|
|
87
|
+
top: var(--a-spacing-5);
|
|
88
|
+
transform: none;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.navds-guide-panel--responsive-poster .navds-guide-panel__content {
|
|
92
|
+
padding: var(--a-spacing-6);
|
|
93
|
+
padding-left: var(--a-spacing-14);
|
|
94
|
+
min-height: calc(var(--__ac-guide-panel-guide-size) + var(--a-spacing-5) + var(--a-spacing-5));
|
|
95
|
+
}
|
|
62
96
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.navds-guide-panel{padding-
|
|
1
|
+
.navds-guide-panel{--__ac-guide-panel-guide-size:4rem;padding-top:calc(var(--__ac-guide-panel-guide-size)/2);position:relative}.navds-guide{background:var(--ac-guide-panel-illustration-bg,var(--a-surface-alt-3-subtle));border:2px solid var(--ac-guide-panel-border,var(--a-border-alt-3));border-radius:var(--a-border-radius-full);height:var(--__ac-guide-panel-guide-size);left:50%;overflow:hidden;position:absolute;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:var(--__ac-guide-panel-guide-size)}.navds-guide img,.navds-guide svg{height:100%;width:100%}.navds-guide-panel__content{background-color:var(--ac-guide-panel-bg,var(--a-surface-default));border:2px solid var(--ac-guide-panel-border,var(--a-border-alt-3));border-radius:var(--a-border-radius-large);padding:var(--a-spacing-4);padding-top:var(--a-spacing-12)}@media (min-width:480px){.navds-guide-panel{--__ac-guide-panel-guide-size:6.25rem}.navds-guide-panel__content{padding:var(--a-spacing-8);padding-top:4.25rem}}.navds-guide-panel--not-poster{padding-left:calc(var(--__ac-guide-panel-guide-size)/2);padding-top:0}.navds-guide-panel--not-poster .navds-guide{left:0;top:var(--a-spacing-5);-webkit-transform:none;transform:none}.navds-guide-panel--not-poster .navds-guide-panel__content{min-height:calc(var(--__ac-guide-panel-guide-size) + var(--a-spacing-5) + var(--a-spacing-5));padding:var(--a-spacing-4);padding-left:var(--a-spacing-10)}@media (min-width:480px){.navds-guide-panel--not-poster{--__ac-guide-panel-guide-size:5rem}.navds-guide-panel--not-poster .navds-guide-panel__content{padding:var(--a-spacing-6);padding-left:var(--a-spacing-14)}.navds-guide-panel--responsive-poster{--__ac-guide-panel-guide-size:5rem;padding-left:calc(var(--__ac-guide-panel-guide-size)/2);padding-top:0}.navds-guide-panel--responsive-poster .navds-guide{left:0;top:var(--a-spacing-5);-webkit-transform:none;transform:none}.navds-guide-panel--responsive-poster .navds-guide-panel__content{min-height:calc(var(--__ac-guide-panel-guide-size) + var(--a-spacing-5) + var(--a-spacing-5));padding:var(--a-spacing-6);padding-left:var(--a-spacing-14)}}
|
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 Wed, 06 Sep 2023 09:14:55 GMT
|
|
5
5
|
*/
|
|
6
6
|
:root, :host {
|
|
7
7
|
--a-spacing-05: 0.125rem;
|
|
@@ -1199,6 +1199,9 @@ body,
|
|
|
1199
1199
|
grid-column: span 12;
|
|
1200
1200
|
}
|
|
1201
1201
|
}
|
|
1202
|
+
.navds-accordion {
|
|
1203
|
+
--__ac-accordion-header-shadow-color: var(--ac-accordion-header-border, var(--a-border-divider));
|
|
1204
|
+
}
|
|
1202
1205
|
.navds-accordion__item:focus-within {
|
|
1203
1206
|
position: relative;
|
|
1204
1207
|
}
|
|
@@ -1206,7 +1209,6 @@ body,
|
|
|
1206
1209
|
* Header *
|
|
1207
1210
|
*************************/
|
|
1208
1211
|
.navds-accordion__header {
|
|
1209
|
-
--__ac-accordion-header-shadow-color: var(--ac-accordion-header-border, var(--a-border-divider));
|
|
1210
1212
|
--__ac-accordion-header-shadow: inset 2px 0 0 0 var(--a-transparent), inset -2px 0 0 0 var(--a-transparent),
|
|
1211
1213
|
inset 0 2px 0 0 var(--__ac-accordion-header-shadow-color);
|
|
1212
1214
|
|
|
@@ -2367,67 +2369,90 @@ body,
|
|
|
2367
2369
|
transform: translateY(0);
|
|
2368
2370
|
}
|
|
2369
2371
|
}
|
|
2370
|
-
/**
|
|
2371
|
-
* GuidePanel component
|
|
2372
|
-
*/
|
|
2373
2372
|
.navds-guide-panel {
|
|
2373
|
+
--__ac-guide-panel-guide-size: 4rem;
|
|
2374
|
+
|
|
2374
2375
|
position: relative;
|
|
2375
|
-
padding-
|
|
2376
|
+
padding-top: calc(var(--__ac-guide-panel-guide-size) / 2);
|
|
2377
|
+
}
|
|
2378
|
+
.navds-guide {
|
|
2379
|
+
background: var(--ac-guide-panel-illustration-bg, var(--a-surface-alt-3-subtle));
|
|
2380
|
+
border: 2px solid var(--ac-guide-panel-border, var(--a-border-alt-3));
|
|
2381
|
+
border-radius: var(--a-border-radius-full);
|
|
2382
|
+
overflow: hidden;
|
|
2383
|
+
position: absolute;
|
|
2384
|
+
width: var(--__ac-guide-panel-guide-size);
|
|
2385
|
+
height: var(--__ac-guide-panel-guide-size);
|
|
2386
|
+
left: 50%;
|
|
2387
|
+
transform: translate(-50%, -50%);
|
|
2388
|
+
}
|
|
2389
|
+
.navds-guide svg,
|
|
2390
|
+
.navds-guide img {
|
|
2391
|
+
height: 100%;
|
|
2392
|
+
width: 100%;
|
|
2376
2393
|
}
|
|
2377
2394
|
.navds-guide-panel__content {
|
|
2378
2395
|
background-color: var(--ac-guide-panel-bg, var(--a-surface-default));
|
|
2379
|
-
border
|
|
2380
|
-
border:
|
|
2381
|
-
|
|
2382
|
-
padding: var(--a-spacing-6);
|
|
2383
|
-
padding-left: var(--a-spacing-14);
|
|
2384
|
-
}
|
|
2385
|
-
.navds-guide-panel--poster {
|
|
2386
|
-
padding-left: 0;
|
|
2396
|
+
border: 2px solid var(--ac-guide-panel-border, var(--a-border-alt-3));
|
|
2397
|
+
border-radius: var(--a-border-radius-large);
|
|
2398
|
+
padding: var(--a-spacing-4);
|
|
2387
2399
|
padding-top: var(--a-spacing-12);
|
|
2388
2400
|
}
|
|
2389
|
-
|
|
2390
|
-
|
|
2391
|
-
|
|
2392
|
-
}
|
|
2393
|
-
|
|
2394
|
-
|
|
2395
|
-
|
|
2396
|
-
|
|
2397
|
-
|
|
2401
|
+
@media (min-width: 480px) {
|
|
2402
|
+
.navds-guide-panel {
|
|
2403
|
+
--__ac-guide-panel-guide-size: 6.25rem;
|
|
2404
|
+
}
|
|
2405
|
+
|
|
2406
|
+
.navds-guide-panel__content {
|
|
2407
|
+
padding: var(--a-spacing-8);
|
|
2408
|
+
padding-top: 4.25rem;
|
|
2409
|
+
}
|
|
2398
2410
|
}
|
|
2399
|
-
|
|
2400
|
-
|
|
2401
|
-
top: 0;
|
|
2411
|
+
/* not-poster */
|
|
2412
|
+
.navds-guide-panel--not-poster {
|
|
2413
|
+
padding-top: 0;
|
|
2414
|
+
padding-left: calc(var(--__ac-guide-panel-guide-size) / 2);
|
|
2402
2415
|
}
|
|
2403
|
-
|
|
2404
|
-
|
|
2405
|
-
|
|
2406
|
-
|
|
2407
|
-
display: flex;
|
|
2408
|
-
align-items: center;
|
|
2409
|
-
justify-content: center;
|
|
2410
|
-
border-radius: var(--a-border-radius-full);
|
|
2411
|
-
}
|
|
2412
|
-
/* Guide illustration frame */
|
|
2413
|
-
.navds-guide__illustration {
|
|
2414
|
-
background: var(--ac-guide-panel-illustration-bg, var(--a-surface-action-subtle));
|
|
2415
|
-
border-radius: var(--a-border-radius-full);
|
|
2416
|
-
overflow: hidden;
|
|
2416
|
+
.navds-guide-panel--not-poster .navds-guide {
|
|
2417
|
+
left: 0;
|
|
2418
|
+
top: var(--a-spacing-5);
|
|
2419
|
+
transform: none;
|
|
2417
2420
|
}
|
|
2418
|
-
.navds-
|
|
2419
|
-
|
|
2420
|
-
|
|
2421
|
-
|
|
2421
|
+
.navds-guide-panel--not-poster .navds-guide-panel__content {
|
|
2422
|
+
padding: var(--a-spacing-4);
|
|
2423
|
+
padding-left: var(--a-spacing-10);
|
|
2424
|
+
min-height: calc(var(--__ac-guide-panel-guide-size) + var(--a-spacing-5) + var(--a-spacing-5));
|
|
2422
2425
|
}
|
|
2423
|
-
|
|
2424
|
-
.navds-
|
|
2425
|
-
|
|
2426
|
-
|
|
2426
|
+
@media (min-width: 480px) {
|
|
2427
|
+
.navds-guide-panel--not-poster {
|
|
2428
|
+
--__ac-guide-panel-guide-size: 5rem;
|
|
2429
|
+
}
|
|
2430
|
+
|
|
2431
|
+
.navds-guide-panel--not-poster .navds-guide-panel__content {
|
|
2432
|
+
padding: var(--a-spacing-6);
|
|
2433
|
+
padding-left: var(--a-spacing-14);
|
|
2434
|
+
}
|
|
2427
2435
|
}
|
|
2428
|
-
|
|
2429
|
-
|
|
2430
|
-
|
|
2436
|
+
/* responsive-poster (on desktop) */
|
|
2437
|
+
@media (min-width: 480px) {
|
|
2438
|
+
.navds-guide-panel--responsive-poster {
|
|
2439
|
+
--__ac-guide-panel-guide-size: 5rem;
|
|
2440
|
+
|
|
2441
|
+
padding-top: 0;
|
|
2442
|
+
padding-left: calc(var(--__ac-guide-panel-guide-size) / 2);
|
|
2443
|
+
}
|
|
2444
|
+
|
|
2445
|
+
.navds-guide-panel--responsive-poster .navds-guide {
|
|
2446
|
+
left: 0;
|
|
2447
|
+
top: var(--a-spacing-5);
|
|
2448
|
+
transform: none;
|
|
2449
|
+
}
|
|
2450
|
+
|
|
2451
|
+
.navds-guide-panel--responsive-poster .navds-guide-panel__content {
|
|
2452
|
+
padding: var(--a-spacing-6);
|
|
2453
|
+
padding-left: var(--a-spacing-14);
|
|
2454
|
+
min-height: calc(var(--__ac-guide-panel-guide-size) + var(--a-spacing-5) + var(--a-spacing-5));
|
|
2455
|
+
}
|
|
2431
2456
|
}
|
|
2432
2457
|
/*
|
|
2433
2458
|
Order matters; rearrange with care
|
|
@@ -5224,7 +5249,6 @@ button.navds-internalheader__title:active,
|
|
|
5224
5249
|
transform: translateY(-1px) rotate(-180deg);
|
|
5225
5250
|
}
|
|
5226
5251
|
.navds-skeleton {
|
|
5227
|
-
display: block;
|
|
5228
5252
|
background-color: var(--ac-skeleton-bg, var(--a-surface-neutral-moderate));
|
|
5229
5253
|
height: 1.3em;
|
|
5230
5254
|
animation: akselSkeletonAnimation 0.8s linear infinite alternate;
|