@navikt/ds-css 7.6.0 → 7.8.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 +12 -0
- package/darkside/alert.darkside.css +2 -2
- package/darkside/button.darkside.css +12 -14
- package/darkside/chat.darkside.css +2 -2
- package/darkside/date.darkside.css +171 -232
- package/darkside/expansioncard.darkside.css +1 -0
- package/darkside/form/combobox.darkside.css +0 -21
- package/darkside/form/error-summary.darkside.css +2 -2
- package/darkside/form/file-upload.darkside.css +3 -4
- package/darkside/form/form-progress.darkside.css +1 -1
- package/darkside/form/form-summary.darkside.css +2 -2
- package/darkside/form/search.darkside.css +84 -158
- package/darkside/form/text-field.darkside.css +1 -1
- package/darkside/guide-panel.darkside.css +78 -60
- package/darkside/index.css +1 -4
- package/darkside/modal.darkside.css +6 -6
- package/darkside/popover.darkside.css +1 -1
- package/darkside/primitives/base.darkside.css +350 -350
- package/darkside/primitives/bleed.darkside.css +52 -52
- package/darkside/primitives/box.darkside.css +21 -21
- package/darkside/primitives/hgrid.darkside.css +28 -28
- package/darkside/primitives/index.css +0 -25
- package/darkside/primitives/page.darkside.css +6 -9
- package/darkside/primitives/stack.darkside.css +58 -58
- package/darkside/table.darkside.css +52 -97
- package/darkside/toggle-group.darkside.css +52 -120
- package/dist/component/form.css +2 -21
- package/dist/component/form.min.css +1 -1
- package/dist/component/index.css +3 -23
- package/dist/component/index.min.css +2 -2
- package/dist/components.css +3 -982
- package/dist/components.min.css +2 -4
- package/dist/global/tokens.css +1 -1
- package/dist/global/tokens.min.css +1 -1
- package/dist/index.css +3 -23
- package/dist/index.min.css +2 -2
- package/form/combobox.css +2 -22
- package/package.json +2 -2
- package/tokens.json +0 -3
|
@@ -1,103 +1,103 @@
|
|
|
1
1
|
.navds-bleed {
|
|
2
|
-
--
|
|
3
|
-
--
|
|
4
|
-
--
|
|
5
|
-
--
|
|
6
|
-
--
|
|
7
|
-
--
|
|
8
|
-
--
|
|
9
|
-
--
|
|
10
|
-
--
|
|
11
|
-
--
|
|
12
|
-
--
|
|
13
|
-
--
|
|
2
|
+
--__axc-bleed-margin-inline-xs: initial;
|
|
3
|
+
--__axc-bleed-margin-inline-sm: var(--__axc-bleed-margin-inline-xs);
|
|
4
|
+
--__axc-bleed-margin-inline-md: var(--__axc-bleed-margin-inline-sm);
|
|
5
|
+
--__axc-bleed-margin-inline-lg: var(--__axc-bleed-margin-inline-md);
|
|
6
|
+
--__axc-bleed-margin-inline-xl: var(--__axc-bleed-margin-inline-lg);
|
|
7
|
+
--__axc-bleed-margin-inline-2xl: var(--__axc-bleed-margin-inline-xl);
|
|
8
|
+
--__axc-bleed-margin-block-xs: initial;
|
|
9
|
+
--__axc-bleed-margin-block-sm: var(--__axc-bleed-margin-block-xs);
|
|
10
|
+
--__axc-bleed-margin-block-md: var(--__axc-bleed-margin-block-sm);
|
|
11
|
+
--__axc-bleed-margin-block-lg: var(--__axc-bleed-margin-block-md);
|
|
12
|
+
--__axc-bleed-margin-block-xl: var(--__axc-bleed-margin-block-lg);
|
|
13
|
+
--__axc-bleed-margin-block-2xl: var(--__axc-bleed-margin-block-xl);
|
|
14
14
|
|
|
15
15
|
/** defaults */
|
|
16
|
-
--
|
|
17
|
-
--
|
|
16
|
+
--__axc-bleed-margin-inline: var(--__axc-bleed-margin-inline-xs);
|
|
17
|
+
--__axc-bleed-margin-block: var(--__axc-bleed-margin-block-xs);
|
|
18
18
|
|
|
19
|
-
margin-inline: var(--
|
|
20
|
-
margin-block: var(--
|
|
19
|
+
margin-inline: var(--__axc-bleed-margin-inline);
|
|
20
|
+
margin-block: var(--__axc-bleed-margin-block);
|
|
21
21
|
}
|
|
22
22
|
|
|
23
23
|
.navds-bleed--padding {
|
|
24
|
-
--
|
|
25
|
-
--
|
|
26
|
-
--
|
|
27
|
-
--
|
|
28
|
-
--
|
|
29
|
-
--
|
|
30
|
-
--
|
|
31
|
-
--
|
|
32
|
-
--
|
|
33
|
-
--
|
|
34
|
-
--
|
|
35
|
-
--
|
|
24
|
+
--__axc-bleed-padding-inline-xs: initial;
|
|
25
|
+
--__axc-bleed-padding-inline-sm: var(--__axc-bleed-padding-inline-xs);
|
|
26
|
+
--__axc-bleed-padding-inline-md: var(--__axc-bleed-padding-inline-sm);
|
|
27
|
+
--__axc-bleed-padding-inline-lg: var(--__axc-bleed-padding-inline-md);
|
|
28
|
+
--__axc-bleed-padding-inline-xl: var(--__axc-bleed-padding-inline-lg);
|
|
29
|
+
--__axc-bleed-padding-inline-2xl: var(--__axc-bleed-padding-inline-xl);
|
|
30
|
+
--__axc-bleed-padding-block-xs: initial;
|
|
31
|
+
--__axc-bleed-padding-block-sm: var(--__axc-bleed-padding-block-xs);
|
|
32
|
+
--__axc-bleed-padding-block-md: var(--__axc-bleed-padding-block-sm);
|
|
33
|
+
--__axc-bleed-padding-block-lg: var(--__axc-bleed-padding-block-md);
|
|
34
|
+
--__axc-bleed-padding-block-xl: var(--__axc-bleed-padding-block-lg);
|
|
35
|
+
--__axc-bleed-padding-block-2xl: var(--__axc-bleed-padding-block-xl);
|
|
36
36
|
|
|
37
37
|
/** defaults */
|
|
38
|
-
--
|
|
39
|
-
--
|
|
38
|
+
--__axc-bleed-padding-inline: var(--__axc-bleed-padding-inline-xs);
|
|
39
|
+
--__axc-bleed-padding-block: var(--__axc-bleed-padding-block-xs);
|
|
40
40
|
|
|
41
|
-
padding-inline: var(--
|
|
42
|
-
padding-block: var(--
|
|
41
|
+
padding-inline: var(--__axc-bleed-padding-inline);
|
|
42
|
+
padding-block: var(--__axc-bleed-padding-block);
|
|
43
43
|
}
|
|
44
44
|
|
|
45
45
|
@media (min-width: 480px) {
|
|
46
46
|
.navds-bleed {
|
|
47
|
-
--
|
|
48
|
-
--
|
|
47
|
+
--__axc-bleed-margin-inline: var(--__axc-bleed-margin-inline-sm);
|
|
48
|
+
--__axc-bleed-margin-block: var(--__axc-bleed-margin-block-sm);
|
|
49
49
|
}
|
|
50
50
|
|
|
51
51
|
.navds-bleed--padding {
|
|
52
|
-
--
|
|
53
|
-
--
|
|
52
|
+
--__axc-bleed-padding-inline: var(--__axc-bleed-padding-inline-sm);
|
|
53
|
+
--__axc-bleed-padding-block: var(--__axc-bleed-padding-block-sm);
|
|
54
54
|
}
|
|
55
55
|
}
|
|
56
56
|
|
|
57
57
|
@media (min-width: 768px) {
|
|
58
58
|
.navds-bleed {
|
|
59
|
-
--
|
|
60
|
-
--
|
|
59
|
+
--__axc-bleed-margin-inline: var(--__axc-bleed-margin-inline-md);
|
|
60
|
+
--__axc-bleed-margin-block: var(--__axc-bleed-margin-block-md);
|
|
61
61
|
}
|
|
62
62
|
|
|
63
63
|
.navds-bleed--padding {
|
|
64
|
-
--
|
|
65
|
-
--
|
|
64
|
+
--__axc-bleed-padding-inline: var(--__axc-bleed-padding-inline-md);
|
|
65
|
+
--__axc-bleed-padding-block: var(--__axc-bleed-padding-block-md);
|
|
66
66
|
}
|
|
67
67
|
}
|
|
68
68
|
|
|
69
69
|
@media (min-width: 1024px) {
|
|
70
70
|
.navds-bleed {
|
|
71
|
-
--
|
|
72
|
-
--
|
|
71
|
+
--__axc-bleed-margin-inline: var(--__axc-bleed-margin-inline-lg);
|
|
72
|
+
--__axc-bleed-margin-block: var(--__axc-bleed-margin-block-lg);
|
|
73
73
|
}
|
|
74
74
|
|
|
75
75
|
.navds-bleed--padding {
|
|
76
|
-
--
|
|
77
|
-
--
|
|
76
|
+
--__axc-bleed-padding-inline: var(--__axc-bleed-padding-inline-lg);
|
|
77
|
+
--__axc-bleed-padding-block: var(--__axc-bleed-padding-block-lg);
|
|
78
78
|
}
|
|
79
79
|
}
|
|
80
80
|
|
|
81
81
|
@media (min-width: 1280px) {
|
|
82
82
|
.navds-bleed {
|
|
83
|
-
--
|
|
84
|
-
--
|
|
83
|
+
--__axc-bleed-margin-inline: var(--__axc-bleed-margin-inline-xl);
|
|
84
|
+
--__axc-bleed-margin-block: var(--__axc-bleed-margin-block-xl);
|
|
85
85
|
}
|
|
86
86
|
|
|
87
87
|
.navds-bleed--padding {
|
|
88
|
-
--
|
|
89
|
-
--
|
|
88
|
+
--__axc-bleed-padding-inline: var(--__axc-bleed-padding-inline-xl);
|
|
89
|
+
--__axc-bleed-padding-block: var(--__axc-bleed-padding-block-xl);
|
|
90
90
|
}
|
|
91
91
|
}
|
|
92
92
|
|
|
93
93
|
@media (min-width: 1440px) {
|
|
94
94
|
.navds-bleed {
|
|
95
|
-
--
|
|
96
|
-
--
|
|
95
|
+
--__axc-bleed-margin-inline: var(--__axc-bleed-margin-inline-2xl);
|
|
96
|
+
--__axc-bleed-margin-block: var(--__axc-bleed-margin-block-2xl);
|
|
97
97
|
}
|
|
98
98
|
|
|
99
99
|
.navds-bleed--padding {
|
|
100
|
-
--
|
|
101
|
-
--
|
|
100
|
+
--__axc-bleed-padding-inline: var(--__axc-bleed-padding-inline-2xl);
|
|
101
|
+
--__axc-bleed-padding-block: var(--__axc-bleed-padding-block-2xl);
|
|
102
102
|
}
|
|
103
103
|
}
|
|
@@ -1,66 +1,66 @@
|
|
|
1
1
|
.navds-box-bg {
|
|
2
|
-
--
|
|
2
|
+
--__axc-box-background: initial;
|
|
3
3
|
|
|
4
|
-
background-color: var(--
|
|
4
|
+
background-color: var(--__axc-box-background);
|
|
5
5
|
}
|
|
6
6
|
|
|
7
7
|
.navds-box-border-color {
|
|
8
|
-
--
|
|
8
|
+
--__axc-box-border-color: initial;
|
|
9
9
|
|
|
10
|
-
border-color: var(--
|
|
10
|
+
border-color: var(--__axc-box-border-color);
|
|
11
11
|
}
|
|
12
12
|
|
|
13
13
|
.navds-box-border-width {
|
|
14
|
-
--
|
|
14
|
+
--__axc-box-border-width: initial;
|
|
15
15
|
|
|
16
16
|
border-style: solid;
|
|
17
|
-
border-width: var(--
|
|
17
|
+
border-width: var(--__axc-box-border-width, 0);
|
|
18
18
|
}
|
|
19
19
|
|
|
20
20
|
.navds-box-border-radius {
|
|
21
|
-
--
|
|
22
|
-
--
|
|
23
|
-
--
|
|
24
|
-
--
|
|
25
|
-
--
|
|
26
|
-
--
|
|
27
|
-
--
|
|
21
|
+
--__axc-box-border-radius-xs: initial;
|
|
22
|
+
--__axc-box-border-radius-sm: var(--__axc-box-border-radius-xs);
|
|
23
|
+
--__axc-box-border-radius-md: var(--__axc-box-border-radius-sm);
|
|
24
|
+
--__axc-box-border-radius-lg: var(--__axc-box-border-radius-md);
|
|
25
|
+
--__axc-box-border-radius-xl: var(--__axc-box-border-radius-lg);
|
|
26
|
+
--__axc-box-border-radius-2xl: var(--__axc-box-border-radius-xl);
|
|
27
|
+
--__axc-box-border-radius: var(--__axc-box-border-radius-xs);
|
|
28
28
|
|
|
29
|
-
border-radius: var(--
|
|
29
|
+
border-radius: var(--__axc-box-border-radius);
|
|
30
30
|
}
|
|
31
31
|
|
|
32
32
|
.navds-box-shadow {
|
|
33
|
-
--
|
|
33
|
+
--__axc-box-shadow: initial;
|
|
34
34
|
|
|
35
|
-
box-shadow: var(--
|
|
35
|
+
box-shadow: var(--__axc-box-shadow);
|
|
36
36
|
}
|
|
37
37
|
|
|
38
38
|
@media (min-width: 480px) {
|
|
39
39
|
.navds-box-border-radius {
|
|
40
|
-
--
|
|
40
|
+
--__axc-box-border-radius: var(--__axc-box-border-radius-sm);
|
|
41
41
|
}
|
|
42
42
|
}
|
|
43
43
|
|
|
44
44
|
@media (min-width: 768px) {
|
|
45
45
|
.navds-box-border-radius {
|
|
46
|
-
--
|
|
46
|
+
--__axc-box-border-radius: var(--__axc-box-border-radius-md);
|
|
47
47
|
}
|
|
48
48
|
}
|
|
49
49
|
|
|
50
50
|
@media (min-width: 1024px) {
|
|
51
51
|
.navds-box-border-radius {
|
|
52
|
-
--
|
|
52
|
+
--__axc-box-border-radius: var(--__axc-box-border-radius-lg);
|
|
53
53
|
}
|
|
54
54
|
}
|
|
55
55
|
|
|
56
56
|
@media (min-width: 1280px) {
|
|
57
57
|
.navds-box-border-radius {
|
|
58
|
-
--
|
|
58
|
+
--__axc-box-border-radius: var(--__axc-box-border-radius-xl);
|
|
59
59
|
}
|
|
60
60
|
}
|
|
61
61
|
|
|
62
62
|
@media (min-width: 1440px) {
|
|
63
63
|
.navds-box-border-radius {
|
|
64
|
-
--
|
|
64
|
+
--__axc-box-border-radius: var(--__axc-box-border-radius-2xl);
|
|
65
65
|
}
|
|
66
66
|
}
|
|
@@ -1,80 +1,80 @@
|
|
|
1
1
|
.navds-hgrid {
|
|
2
|
-
--
|
|
3
|
-
--
|
|
4
|
-
--
|
|
5
|
-
--
|
|
6
|
-
--
|
|
7
|
-
--
|
|
8
|
-
--
|
|
2
|
+
--__axc-hgrid-columns-xs: initial;
|
|
3
|
+
--__axc-hgrid-columns-sm: var(--__axc-hgrid-columns-xs);
|
|
4
|
+
--__axc-hgrid-columns-md: var(--__axc-hgrid-columns-sm);
|
|
5
|
+
--__axc-hgrid-columns-lg: var(--__axc-hgrid-columns-md);
|
|
6
|
+
--__axc-hgrid-columns-xl: var(--__axc-hgrid-columns-lg);
|
|
7
|
+
--__axc-hgrid-columns-2xl: var(--__axc-hgrid-columns-xl);
|
|
8
|
+
--__axc-hgrid-columns: var(--__axc-hgrid-columns-xs);
|
|
9
9
|
|
|
10
10
|
display: grid;
|
|
11
|
-
grid-template-columns: var(--
|
|
11
|
+
grid-template-columns: var(--__axc-hgrid-columns);
|
|
12
12
|
}
|
|
13
13
|
|
|
14
14
|
.navds-hgrid-gap {
|
|
15
|
-
--
|
|
16
|
-
--
|
|
17
|
-
--
|
|
18
|
-
--
|
|
19
|
-
--
|
|
20
|
-
--
|
|
21
|
-
--
|
|
15
|
+
--__axc-hgrid-gap-xs: initial;
|
|
16
|
+
--__axc-hgrid-gap-sm: var(--__axc-hgrid-gap-xs);
|
|
17
|
+
--__axc-hgrid-gap-md: var(--__axc-hgrid-gap-sm);
|
|
18
|
+
--__axc-hgrid-gap-lg: var(--__axc-hgrid-gap-md);
|
|
19
|
+
--__axc-hgrid-gap-xl: var(--__axc-hgrid-gap-lg);
|
|
20
|
+
--__axc-hgrid-gap-2xl: var(--__axc-hgrid-gap-xl);
|
|
21
|
+
--__axc-hgrid-gap: var(--__axc-hgrid-gap-xs);
|
|
22
22
|
|
|
23
|
-
gap: var(--
|
|
23
|
+
gap: var(--__axc-hgrid-gap);
|
|
24
24
|
}
|
|
25
25
|
|
|
26
26
|
.navds-hgrid-align {
|
|
27
|
-
--
|
|
27
|
+
--__axc-hgrid-align: initial;
|
|
28
28
|
|
|
29
|
-
align-items: var(--
|
|
29
|
+
align-items: var(--__axc-hgrid-align);
|
|
30
30
|
}
|
|
31
31
|
|
|
32
32
|
@media (min-width: 480px) {
|
|
33
33
|
.navds-hgrid {
|
|
34
|
-
--
|
|
34
|
+
--__axc-hgrid-columns: var(--__axc-hgrid-columns-sm);
|
|
35
35
|
}
|
|
36
36
|
|
|
37
37
|
.navds-hgrid-gap {
|
|
38
|
-
--
|
|
38
|
+
--__axc-hgrid-gap: var(--__axc-hgrid-gap-sm);
|
|
39
39
|
}
|
|
40
40
|
}
|
|
41
41
|
|
|
42
42
|
@media (min-width: 768px) {
|
|
43
43
|
.navds-hgrid {
|
|
44
|
-
--
|
|
44
|
+
--__axc-hgrid-columns: var(--__axc-hgrid-columns-md);
|
|
45
45
|
}
|
|
46
46
|
|
|
47
47
|
.navds-hgrid-gap {
|
|
48
|
-
--
|
|
48
|
+
--__axc-hgrid-gap: var(--__axc-hgrid-gap-md);
|
|
49
49
|
}
|
|
50
50
|
}
|
|
51
51
|
|
|
52
52
|
@media (min-width: 1024px) {
|
|
53
53
|
.navds-hgrid {
|
|
54
|
-
--
|
|
54
|
+
--__axc-hgrid-columns: var(--__axc-hgrid-columns-lg);
|
|
55
55
|
}
|
|
56
56
|
|
|
57
57
|
.navds-hgrid-gap {
|
|
58
|
-
--
|
|
58
|
+
--__axc-hgrid-gap: var(--__axc-hgrid-gap-lg);
|
|
59
59
|
}
|
|
60
60
|
}
|
|
61
61
|
|
|
62
62
|
@media (min-width: 1280px) {
|
|
63
63
|
.navds-hgrid {
|
|
64
|
-
--
|
|
64
|
+
--__axc-hgrid-columns: var(--__axc-hgrid-columns-xl);
|
|
65
65
|
}
|
|
66
66
|
|
|
67
67
|
.navds-hgrid-gap {
|
|
68
|
-
--
|
|
68
|
+
--__axc-hgrid-gap: var(--__axc-hgrid-gap-xl);
|
|
69
69
|
}
|
|
70
70
|
}
|
|
71
71
|
|
|
72
72
|
@media (min-width: 1440px) {
|
|
73
73
|
.navds-hgrid {
|
|
74
|
-
--
|
|
74
|
+
--__axc-hgrid-columns: var(--__axc-hgrid-columns-2xl);
|
|
75
75
|
}
|
|
76
76
|
|
|
77
77
|
.navds-hgrid-gap {
|
|
78
|
-
--
|
|
78
|
+
--__axc-hgrid-gap: var(--__axc-hgrid-gap-2xl);
|
|
79
79
|
}
|
|
80
80
|
}
|
|
@@ -5,28 +5,3 @@
|
|
|
5
5
|
@import "./hgrid.darkside.css";
|
|
6
6
|
@import "./stack.darkside.css";
|
|
7
7
|
@import "./responsive.darkside.css";
|
|
8
|
-
|
|
9
|
-
/* TODO: Custom override to avoid having to edit react-syntax in Primtives. Remove after fix */
|
|
10
|
-
:root {
|
|
11
|
-
--a-spacing-1-alt: var(--ax-spacing-1-alt);
|
|
12
|
-
--a-spacing-05: var(--ax-spacing-05);
|
|
13
|
-
--a-spacing-32: var(--ax-spacing-32);
|
|
14
|
-
--a-spacing-24: var(--ax-spacing-24);
|
|
15
|
-
--a-spacing-20: var(--ax-spacing-20);
|
|
16
|
-
--a-spacing-18: var(--ax-spacing-18);
|
|
17
|
-
--a-spacing-16: var(--ax-spacing-16);
|
|
18
|
-
--a-spacing-14: var(--ax-spacing-14);
|
|
19
|
-
--a-spacing-12: var(--ax-spacing-12);
|
|
20
|
-
--a-spacing-11: var(--ax-spacing-11);
|
|
21
|
-
--a-spacing-10: var(--ax-spacing-10);
|
|
22
|
-
--a-spacing-9: var(--ax-spacing-9);
|
|
23
|
-
--a-spacing-8: var(--ax-spacing-8);
|
|
24
|
-
--a-spacing-7: var(--ax-spacing-7);
|
|
25
|
-
--a-spacing-6: var(--ax-spacing-6);
|
|
26
|
-
--a-spacing-5: var(--ax-spacing-5);
|
|
27
|
-
--a-spacing-4: var(--ax-spacing-4);
|
|
28
|
-
--a-spacing-3: var(--ax-spacing-3);
|
|
29
|
-
--a-spacing-2: var(--ax-spacing-2);
|
|
30
|
-
--a-spacing-1: var(--ax-spacing-1);
|
|
31
|
-
--a-spacing-0: var(--ax-spacing-0);
|
|
32
|
-
}
|
|
@@ -3,15 +3,12 @@
|
|
|
3
3
|
flex-direction: column;
|
|
4
4
|
min-height: 100vh;
|
|
5
5
|
min-height: 100lvh;
|
|
6
|
-
|
|
7
|
-
/* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
|
|
8
|
-
background-color: var(--__ac-page-background);
|
|
9
6
|
}
|
|
10
7
|
|
|
11
8
|
/* Page.Block */
|
|
12
9
|
.navds-pageblock {
|
|
13
10
|
/* stylelint-disable-next-line length-zero-no-unit */
|
|
14
|
-
--
|
|
11
|
+
--__axc-page-padding-inline: 0px;
|
|
15
12
|
|
|
16
13
|
margin-inline: auto;
|
|
17
14
|
width: 100%;
|
|
@@ -27,11 +24,11 @@
|
|
|
27
24
|
}
|
|
28
25
|
|
|
29
26
|
.navds-page__content--padding {
|
|
30
|
-
padding-block-end: var(--
|
|
27
|
+
padding-block-end: var(--ax-spacing-16);
|
|
31
28
|
}
|
|
32
29
|
|
|
33
30
|
.navds-pageblock--text {
|
|
34
|
-
max-width: calc(
|
|
31
|
+
max-width: calc(576px + var(--__axc-page-padding-inline) + var(--__axc-page-padding-inline));
|
|
35
32
|
}
|
|
36
33
|
|
|
37
34
|
.navds-pageblock--md {
|
|
@@ -51,13 +48,13 @@
|
|
|
51
48
|
}
|
|
52
49
|
|
|
53
50
|
.navds-pageblock--gutters {
|
|
54
|
-
--
|
|
51
|
+
--__axc-page-padding-inline: var(--a-spacing-4);
|
|
55
52
|
|
|
56
|
-
padding-inline: var(--
|
|
53
|
+
padding-inline: var(--__axc-page-padding-inline);
|
|
57
54
|
}
|
|
58
55
|
|
|
59
56
|
@media (min-width: 1024px) {
|
|
60
57
|
.navds-pageblock--gutters {
|
|
61
|
-
--
|
|
58
|
+
--__axc-page-padding-inline: var(--a-spacing-12);
|
|
62
59
|
}
|
|
63
60
|
}
|
|
@@ -3,51 +3,51 @@
|
|
|
3
3
|
}
|
|
4
4
|
|
|
5
5
|
.navds-stack-gap {
|
|
6
|
-
--
|
|
7
|
-
--
|
|
8
|
-
--
|
|
9
|
-
--
|
|
10
|
-
--
|
|
11
|
-
--
|
|
12
|
-
--
|
|
13
|
-
|
|
14
|
-
gap: var(--
|
|
6
|
+
--__axc-stack-gap-xs: initial;
|
|
7
|
+
--__axc-stack-gap-sm: var(--__axc-stack-gap-xs);
|
|
8
|
+
--__axc-stack-gap-md: var(--__axc-stack-gap-sm);
|
|
9
|
+
--__axc-stack-gap-lg: var(--__axc-stack-gap-md);
|
|
10
|
+
--__axc-stack-gap-xl: var(--__axc-stack-gap-lg);
|
|
11
|
+
--__axc-stack-gap-2xl: var(--__axc-stack-gap-xl);
|
|
12
|
+
--__axc-stack-gap: var(--__axc-stack-gap-xs);
|
|
13
|
+
|
|
14
|
+
gap: var(--__axc-stack-gap);
|
|
15
15
|
}
|
|
16
16
|
|
|
17
17
|
.navds-stack-align {
|
|
18
|
-
--
|
|
19
|
-
--
|
|
20
|
-
--
|
|
21
|
-
--
|
|
22
|
-
--
|
|
23
|
-
--
|
|
24
|
-
--
|
|
25
|
-
|
|
26
|
-
align-items: var(--
|
|
18
|
+
--__axc-stack-align-xs: initial;
|
|
19
|
+
--__axc-stack-align-sm: var(--__axc-stack-align-xs);
|
|
20
|
+
--__axc-stack-align-md: var(--__axc-stack-align-sm);
|
|
21
|
+
--__axc-stack-align-lg: var(--__axc-stack-align-md);
|
|
22
|
+
--__axc-stack-align-xl: var(--__axc-stack-align-lg);
|
|
23
|
+
--__axc-stack-align-2xl: var(--__axc-stack-align-xl);
|
|
24
|
+
--__axc-stack-align: var(--__axc-stack-align-xs);
|
|
25
|
+
|
|
26
|
+
align-items: var(--__axc-stack-align);
|
|
27
27
|
}
|
|
28
28
|
|
|
29
29
|
.navds-stack-justify {
|
|
30
|
-
--
|
|
31
|
-
--
|
|
32
|
-
--
|
|
33
|
-
--
|
|
34
|
-
--
|
|
35
|
-
--
|
|
36
|
-
--
|
|
37
|
-
|
|
38
|
-
justify-content: var(--
|
|
30
|
+
--__axc-stack-justify-xs: initial;
|
|
31
|
+
--__axc-stack-justify-sm: var(--__axc-stack-justify-xs);
|
|
32
|
+
--__axc-stack-justify-md: var(--__axc-stack-justify-sm);
|
|
33
|
+
--__axc-stack-justify-lg: var(--__axc-stack-justify-md);
|
|
34
|
+
--__axc-stack-justify-xl: var(--__axc-stack-justify-lg);
|
|
35
|
+
--__axc-stack-justify-2xl: var(--__axc-stack-justify-xl);
|
|
36
|
+
--__axc-stack-justify: var(--__axc-stack-justify-xs);
|
|
37
|
+
|
|
38
|
+
justify-content: var(--__axc-stack-justify);
|
|
39
39
|
}
|
|
40
40
|
|
|
41
41
|
.navds-stack-direction {
|
|
42
|
-
--
|
|
43
|
-
--
|
|
44
|
-
--
|
|
45
|
-
--
|
|
46
|
-
--
|
|
47
|
-
--
|
|
48
|
-
--
|
|
49
|
-
|
|
50
|
-
flex-direction: var(--
|
|
42
|
+
--__axc-stack-direction-xs: initial;
|
|
43
|
+
--__axc-stack-direction-sm: var(--__axc-stack-direction-xs);
|
|
44
|
+
--__axc-stack-direction-md: var(--__axc-stack-direction-sm);
|
|
45
|
+
--__axc-stack-direction-lg: var(--__axc-stack-direction-md);
|
|
46
|
+
--__axc-stack-direction-xl: var(--__axc-stack-direction-lg);
|
|
47
|
+
--__axc-stack-direction-2xl: var(--__axc-stack-direction-xl);
|
|
48
|
+
--__axc-stack-direction: var(--__axc-stack-direction-xs);
|
|
49
|
+
|
|
50
|
+
flex-direction: var(--__axc-stack-direction);
|
|
51
51
|
}
|
|
52
52
|
|
|
53
53
|
.navds-stack-wrap {
|
|
@@ -60,96 +60,96 @@
|
|
|
60
60
|
}
|
|
61
61
|
|
|
62
62
|
.navds-stack > .navds-stack__spacer {
|
|
63
|
-
margin-block-start: calc(var(--
|
|
64
|
-
margin-inline-start: calc(var(--
|
|
63
|
+
margin-block-start: calc(var(--__axc-stack-gap) * -1);
|
|
64
|
+
margin-inline-start: calc(var(--__axc-stack-gap) * -1);
|
|
65
65
|
}
|
|
66
66
|
|
|
67
67
|
@media (min-width: 480px) {
|
|
68
68
|
.navds-stack-gap {
|
|
69
|
-
--
|
|
69
|
+
--__axc-stack-gap: var(--__axc-stack-gap-sm);
|
|
70
70
|
}
|
|
71
71
|
|
|
72
72
|
.navds-stack-align {
|
|
73
|
-
--
|
|
73
|
+
--__axc-stack-align: var(--__axc-stack-align-sm);
|
|
74
74
|
}
|
|
75
75
|
|
|
76
76
|
.navds-stack-justify {
|
|
77
|
-
--
|
|
77
|
+
--__axc-stack-justify: var(--__axc-stack-justify-sm);
|
|
78
78
|
}
|
|
79
79
|
|
|
80
80
|
.navds-stack-direction {
|
|
81
|
-
--
|
|
81
|
+
--__axc-stack-direction: var(--__axc-stack-direction-sm);
|
|
82
82
|
}
|
|
83
83
|
}
|
|
84
84
|
|
|
85
85
|
@media (min-width: 768px) {
|
|
86
86
|
.navds-stack-gap {
|
|
87
|
-
--
|
|
87
|
+
--__axc-stack-gap: var(--__axc-stack-gap-md);
|
|
88
88
|
}
|
|
89
89
|
|
|
90
90
|
.navds-stack-align {
|
|
91
|
-
--
|
|
91
|
+
--__axc-stack-align: var(--__axc-stack-align-md);
|
|
92
92
|
}
|
|
93
93
|
|
|
94
94
|
.navds-stack-justify {
|
|
95
|
-
--
|
|
95
|
+
--__axc-stack-justify: var(--__axc-stack-justify-md);
|
|
96
96
|
}
|
|
97
97
|
|
|
98
98
|
.navds-stack-direction {
|
|
99
|
-
--
|
|
99
|
+
--__axc-stack-direction: var(--__axc-stack-direction-md);
|
|
100
100
|
}
|
|
101
101
|
}
|
|
102
102
|
|
|
103
103
|
@media (min-width: 1024px) {
|
|
104
104
|
.navds-stack-gap {
|
|
105
|
-
--
|
|
105
|
+
--__axc-stack-gap: var(--__axc-stack-gap-lg);
|
|
106
106
|
}
|
|
107
107
|
|
|
108
108
|
.navds-stack-align {
|
|
109
|
-
--
|
|
109
|
+
--__axc-stack-align: var(--__axc-stack-align-lg);
|
|
110
110
|
}
|
|
111
111
|
|
|
112
112
|
.navds-stack-justify {
|
|
113
|
-
--
|
|
113
|
+
--__axc-stack-justify: var(--__axc-stack-justify-lg);
|
|
114
114
|
}
|
|
115
115
|
|
|
116
116
|
.navds-stack-direction {
|
|
117
|
-
--
|
|
117
|
+
--__axc-stack-direction: var(--__axc-stack-direction-lg);
|
|
118
118
|
}
|
|
119
119
|
}
|
|
120
120
|
|
|
121
121
|
@media (min-width: 1280px) {
|
|
122
122
|
.navds-stack-gap {
|
|
123
|
-
--
|
|
123
|
+
--__axc-stack-gap: var(--__axc-stack-gap-xl);
|
|
124
124
|
}
|
|
125
125
|
|
|
126
126
|
.navds-stack-align {
|
|
127
|
-
--
|
|
127
|
+
--__axc-stack-align: var(--__axc-stack-align-xl);
|
|
128
128
|
}
|
|
129
129
|
|
|
130
130
|
.navds-stack-justify {
|
|
131
|
-
--
|
|
131
|
+
--__axc-stack-justify: var(--__axc-stack-justify-xl);
|
|
132
132
|
}
|
|
133
133
|
|
|
134
134
|
.navds-stack-direction {
|
|
135
|
-
--
|
|
135
|
+
--__axc-stack-direction: var(--__axc-stack-direction-xl);
|
|
136
136
|
}
|
|
137
137
|
}
|
|
138
138
|
|
|
139
139
|
@media (min-width: 1440px) {
|
|
140
140
|
.navds-stack-gap {
|
|
141
|
-
--
|
|
141
|
+
--__axc-stack-gap: var(--__axc-stack-gap-2xl);
|
|
142
142
|
}
|
|
143
143
|
|
|
144
144
|
.navds-stack-align {
|
|
145
|
-
--
|
|
145
|
+
--__axc-stack-align: var(--__axc-stack-align-2xl);
|
|
146
146
|
}
|
|
147
147
|
|
|
148
148
|
.navds-stack-justify {
|
|
149
|
-
--
|
|
149
|
+
--__axc-stack-justify: var(--__axc-stack-justify-2xl);
|
|
150
150
|
}
|
|
151
151
|
|
|
152
152
|
.navds-stack-direction {
|
|
153
|
-
--
|
|
153
|
+
--__axc-stack-direction: var(--__axc-stack-direction-2xl);
|
|
154
154
|
}
|
|
155
155
|
}
|