@kickstartds/ds-agency-premium 1.3.50--canary.663.b100f6e.0 → 1.3.50--canary.667.9377ecb.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/dist/components/footer/footer.schema.dereffed.json +14 -14
- package/dist/components/header/header.schema.dereffed.json +14 -14
- package/dist/components/nav-dropdown/index.js +2 -1
- package/dist/components/nav-dropdown/nav-dropdown.css +45 -0
- package/dist/components/nav-flyout/index.js +5 -3
- package/dist/components/nav-flyout/nav-flyout.css +88 -54
- package/dist/components/nav-main/nav-main.schema.dereffed.json +14 -14
- package/dist/components/nav-main/nav-main.schema.json +14 -14
- package/dist/components/nav-topbar/index.js +2 -2
- package/dist/components/nav-topbar/nav-topbar.css +8 -65
- package/dist/components/page-wrapper/tokens.css +1 -1
- package/dist/components/presets.json +30 -30
- package/dist/components/settings/settings.schema.dereffed.json +28 -28
- package/dist/tokens/themes.css +4 -4
- package/dist/tokens/tokens.css +1 -1
- package/dist/tokens/tokens.js +1 -1
- package/package.json +1 -1
|
@@ -110,30 +110,30 @@
|
|
|
110
110
|
"examples": [
|
|
111
111
|
[
|
|
112
112
|
{
|
|
113
|
-
"label": "
|
|
113
|
+
"label": "Navigation Item",
|
|
114
|
+
"href": "#"
|
|
115
|
+
},
|
|
116
|
+
{
|
|
117
|
+
"label": "Active Item",
|
|
118
|
+
"href": "#",
|
|
119
|
+
"active": true
|
|
120
|
+
},
|
|
121
|
+
{
|
|
122
|
+
"label": "Item With Children",
|
|
114
123
|
"href": "#",
|
|
115
124
|
"items": [
|
|
116
125
|
{
|
|
117
|
-
"label": "
|
|
126
|
+
"label": "Level 2 Item",
|
|
118
127
|
"href": "#",
|
|
119
|
-
"id": "
|
|
128
|
+
"id": ""
|
|
120
129
|
},
|
|
121
130
|
{
|
|
122
|
-
"label": "
|
|
131
|
+
"label": "Another One",
|
|
123
132
|
"href": "#",
|
|
124
|
-
"id": "
|
|
133
|
+
"id": ""
|
|
125
134
|
}
|
|
126
135
|
]
|
|
127
136
|
},
|
|
128
|
-
{
|
|
129
|
-
"label": "Active Item",
|
|
130
|
-
"href": "#",
|
|
131
|
-
"active": true
|
|
132
|
-
},
|
|
133
|
-
{
|
|
134
|
-
"label": "Another Item",
|
|
135
|
-
"href": "#"
|
|
136
|
-
},
|
|
137
137
|
{
|
|
138
138
|
"label": "One more Item",
|
|
139
139
|
"href": "#"
|
|
@@ -123,30 +123,30 @@
|
|
|
123
123
|
"examples": [
|
|
124
124
|
[
|
|
125
125
|
{
|
|
126
|
-
"label": "
|
|
126
|
+
"label": "Navigation Item",
|
|
127
|
+
"href": "#"
|
|
128
|
+
},
|
|
129
|
+
{
|
|
130
|
+
"label": "Active Item",
|
|
131
|
+
"href": "#",
|
|
132
|
+
"active": true
|
|
133
|
+
},
|
|
134
|
+
{
|
|
135
|
+
"label": "Item With Children",
|
|
127
136
|
"href": "#",
|
|
128
137
|
"items": [
|
|
129
138
|
{
|
|
130
|
-
"label": "
|
|
139
|
+
"label": "Level 2 Item",
|
|
131
140
|
"href": "#",
|
|
132
|
-
"id": "
|
|
141
|
+
"id": ""
|
|
133
142
|
},
|
|
134
143
|
{
|
|
135
|
-
"label": "
|
|
144
|
+
"label": "Another One",
|
|
136
145
|
"href": "#",
|
|
137
|
-
"id": "
|
|
146
|
+
"id": ""
|
|
138
147
|
}
|
|
139
148
|
]
|
|
140
149
|
},
|
|
141
|
-
{
|
|
142
|
-
"label": "Active Item",
|
|
143
|
-
"href": "#",
|
|
144
|
-
"active": true
|
|
145
|
-
},
|
|
146
|
-
{
|
|
147
|
-
"label": "Another Item",
|
|
148
|
-
"href": "#"
|
|
149
|
-
},
|
|
150
150
|
{
|
|
151
151
|
"label": "One more Item",
|
|
152
152
|
"href": "#"
|
|
@@ -1,8 +1,9 @@
|
|
|
1
|
+
import "./nav-dropdown.css";
|
|
1
2
|
import { jsx } from 'react/jsx-runtime';
|
|
2
3
|
import classnames from 'classnames';
|
|
3
4
|
import { Link } from '@kickstartds/base/lib/link';
|
|
4
5
|
|
|
5
|
-
const NavDropdown = ({ items, inverted }) => (jsx("ul", {
|
|
6
|
+
const NavDropdown = ({ items, inverted }) => (jsx("ul", { className: classnames(`dsa-nav-dropdown`), "ks-inverted": inverted?.toString(), children: items.map(({ label, href, id }) => {
|
|
6
7
|
return (jsx("li", { className: classnames("dsa-nav-dropdown__item"), children: jsx(Link, { href: href, className: `dsa-nav-dropdown__link `, children: label }) }, id));
|
|
7
8
|
}) }));
|
|
8
9
|
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
.dsa-nav-dropdown {
|
|
2
|
+
--dsa-nav-dropdown--padding: var(--ks-spacing-inset-stretch-xs);
|
|
3
|
+
--dsa-nav-dropdown--background: var(--ks-background-color-default);
|
|
4
|
+
--dsa-nav-dropdown--border-radius: var(--ks-border-radius-card);
|
|
5
|
+
--dsa-nav-dropdown--box-shadow: var(--ks-box-shadow-card);
|
|
6
|
+
--dsa-nav-dropdown--border: 1px solid var(--ks-border-color-card);
|
|
7
|
+
--dsa-nav-dropdown__link--color: var(--ks-color-fg);
|
|
8
|
+
--dsa-nav-dropdown__link--color_hover: var(--ks-text-color-interface-interactive-hover);
|
|
9
|
+
--dsa-nav-dropdown__link--color_active: var(--ks-text-color-interface-interactive-active);
|
|
10
|
+
--dsa-nav-dropdown__link--font: var(--ks-font-interface-m);
|
|
11
|
+
--dsa-nav-dropdown__link--font-weight: var(--ks-font-weight-semi-bold);
|
|
12
|
+
--dsa-nav-dropdown__link--font-weight_active: var(--ks-font-weight-semi-bold);
|
|
13
|
+
--dsa-nav-dropdown__link--padding: 0.35em 0.25em;
|
|
14
|
+
--dsa-nav-dropdown__link_dimmed--opacity: 0.6;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.dsa-nav-dropdown {
|
|
18
|
+
display: none;
|
|
19
|
+
padding: var(--dsa-nav-dropdown--padding);
|
|
20
|
+
position: absolute;
|
|
21
|
+
flex-direction: column;
|
|
22
|
+
align-items: flex-start;
|
|
23
|
+
background-color: var(--dsa-nav-dropdown--background);
|
|
24
|
+
border-radius: var(--dsa-nav-dropdown--border-radius);
|
|
25
|
+
box-shadow: var(--dsa-nav-dropdown--box-shadow);
|
|
26
|
+
border: var(--dsa-nav-dropdown--border);
|
|
27
|
+
}
|
|
28
|
+
.dsa-nav-dropdown:hover .dsa-nav-dropdown__link:not(:hover) {
|
|
29
|
+
opacity: var(--dsa-nav-dropdown__link_dimmed--opacity);
|
|
30
|
+
}
|
|
31
|
+
.dsa-nav-dropdown .dsa-nav-dropdown__link {
|
|
32
|
+
font: var(--dsa-nav-dropdown__link--font);
|
|
33
|
+
font-weight: var(--dsa-nav-dropdown__link--font-weight);
|
|
34
|
+
color: var(--dsa-nav-dropdown__link--color);
|
|
35
|
+
position: relative;
|
|
36
|
+
display: block;
|
|
37
|
+
padding: var(--dsa-nav-dropdown__link--padding);
|
|
38
|
+
text-align: left;
|
|
39
|
+
}
|
|
40
|
+
.dsa-nav-dropdown .dsa-nav-dropdown__link:hover {
|
|
41
|
+
color: var(--dsa-nav-dropdown__link--color_hover);
|
|
42
|
+
}
|
|
43
|
+
.dsa-nav-dropdown .dsa-nav-dropdown__link:active {
|
|
44
|
+
color: var(--dsa-nav-dropdown__link--color_active);
|
|
45
|
+
}
|
|
@@ -1,15 +1,17 @@
|
|
|
1
1
|
import "./nav-flyout.css";
|
|
2
|
-
import { jsxs, jsx
|
|
2
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
3
3
|
import classnames from 'classnames';
|
|
4
4
|
import { Link } from '@kickstartds/base/lib/link';
|
|
5
5
|
import { Icon } from '@kickstartds/base/lib/icon';
|
|
6
6
|
import { Logo } from '../logo/index.js';
|
|
7
7
|
import '@kickstartds/base/lib/picture';
|
|
8
8
|
|
|
9
|
-
const NavFlyout = ({ items, inverted, logo, active }) => items && items.length > 0 ? (jsxs("nav", { className: "dsa-nav-flyout", "ks-inverted": inverted.toString(), id: "dsa-nav-
|
|
9
|
+
const NavFlyout = ({ items, inverted, logo, active }) => items && items.length > 0 ? (jsxs("nav", { className: "dsa-nav-flyout", "ks-inverted": inverted.toString(), id: "dsa-nav-flyout", "aria-label": "Hauptnavigation", children: [jsx(Logo, { ...logo, className: "dsa-nav-flyout__logo" }), jsx("ul", { className: "dsa-nav-flyout-list", children: items.map(({ label, href, id, items: subItems }) => {
|
|
10
10
|
const isActive = active === href ||
|
|
11
11
|
subItems?.some((navItem) => active === navItem.href);
|
|
12
|
-
return (jsxs("li", { className: classnames("dsa-nav-
|
|
12
|
+
return (jsxs("li", { className: classnames("dsa-nav-flyout__item", isActive && "dsa-nav-flyout__item--active"), children: [jsxs(Link, { href: href, className: `dsa-nav-flyout__link`, children: [label, subItems?.length ? (jsx(Icon, { className: "dsa-nav-flyout__link__icon", icon: "chevron-down" })) : ("")] }), subItems?.length ? (jsx("ul", { className: "dsa-nav-flyout__sublist", children: subItems.map(({ label, href, id }) => {
|
|
13
|
+
return (jsx("li", { className: classnames("dsa-nav-flyout__item"), children: jsx(Link, { href: href, className: `dsa-nav-flyout__link `, children: label }) }, id));
|
|
14
|
+
}) })) : null] }, id));
|
|
13
15
|
}) })] })) : null;
|
|
14
16
|
|
|
15
17
|
export { NavFlyout };
|
|
@@ -1,63 +1,97 @@
|
|
|
1
|
+
.dsa-nav-flyout {
|
|
2
|
+
--dsa-nav-flyout--padding: 0 var(--l-section--content-padding);
|
|
3
|
+
--dsa-nav-flyout--background: linear-gradient(
|
|
4
|
+
125deg,
|
|
5
|
+
var(--ks-background-color-default),
|
|
6
|
+
var(--ks-color-primary-to-bg-6)
|
|
7
|
+
);
|
|
8
|
+
--dsa-nav-flyout--shadow: 20px 0px 30px var(--ks-color-fg-inverted-base);
|
|
9
|
+
--dsa-nav-flyout__link--color: var(--ks-color-fg);
|
|
10
|
+
--dsa-nav-flyout__link--color_hover: var(--ks-text-color-interface-interactive-hover);
|
|
11
|
+
--dsa-nav-flyout__link--color_active: var(--ks-text-color-interface-interactive-active);
|
|
12
|
+
--dsa-nav-flyout__link--font: var(--ks-font-interface-l);
|
|
13
|
+
--dsa-nav-flyout__link--font-weight: var(--ks-font-weight-semi-bold);
|
|
14
|
+
--dsa-nav-flyout__link--font-weight_active: var(--ks-font-weight-semi-bold);
|
|
15
|
+
--dsa-nav-flyout__link--padding: 0.25em 0;
|
|
16
|
+
--dsa-nav-flyout__link_dimmed--opacity: 0.6;
|
|
17
|
+
--dsa-nav-flyout__sublist--padding-left: 1em;
|
|
18
|
+
}
|
|
19
|
+
|
|
1
20
|
.dsa-nav-flyout {
|
|
2
21
|
display: none;
|
|
22
|
+
left: -100%;
|
|
23
|
+
height: 100vh;
|
|
24
|
+
overflow: hidden;
|
|
25
|
+
position: fixed;
|
|
26
|
+
width: 77vw;
|
|
27
|
+
max-width: 23rem;
|
|
28
|
+
transition: all var(--ks-duration-slow);
|
|
29
|
+
padding: var(--dsa-nav-flyout--padding);
|
|
30
|
+
right: 0;
|
|
31
|
+
bottom: 0;
|
|
32
|
+
top: 0;
|
|
33
|
+
overflow-y: auto;
|
|
34
|
+
background: var(--dsa-nav-flyout--background);
|
|
35
|
+
backface-visibility: hidden;
|
|
36
|
+
-webkit-overflow-scrolling: touch;
|
|
3
37
|
}
|
|
4
38
|
@media (max-width: 62rem) {
|
|
5
39
|
.dsa-nav-flyout {
|
|
6
40
|
display: block;
|
|
7
41
|
}
|
|
8
42
|
}
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
43
|
+
.dsa-nav-flyout ul {
|
|
44
|
+
padding: 0;
|
|
45
|
+
margin: 0;
|
|
46
|
+
}
|
|
47
|
+
.overlay-open .dsa-nav-flyout {
|
|
48
|
+
left: 0;
|
|
49
|
+
box-shadow: var(--dsa-nav-flyout--shadow);
|
|
50
|
+
}
|
|
51
|
+
.dsa-nav-flyout .dsa-nav-flyout__logo {
|
|
52
|
+
margin-top: var(--dsa-header--spacing-vertical);
|
|
53
|
+
margin-bottom: var(--dsa-header--spacing-vertical);
|
|
54
|
+
}
|
|
55
|
+
.dsa-nav-flyout .dsa-nav-flyout__list {
|
|
56
|
+
padding-top: calc(var(--dsa-header--spacing-vertical) - var(--ks-spacing-s));
|
|
57
|
+
}
|
|
58
|
+
.dsa-nav-flyout .dsa-nav-flyout__item {
|
|
59
|
+
flex-shrink: 0;
|
|
60
|
+
position: relative;
|
|
61
|
+
outline: 0;
|
|
62
|
+
}
|
|
63
|
+
.dsa-nav-flyout .dsa-nav-flyout__item:hover > .dsa-nav-sublist {
|
|
64
|
+
display: flex;
|
|
65
|
+
}
|
|
66
|
+
.dsa-nav-flyout .dsa-nav-flyout__link {
|
|
67
|
+
font: var(--dsa-nav-flyout__link--font);
|
|
68
|
+
font-weight: var(--dsa-nav-flyout__link--font-weight);
|
|
69
|
+
color: var(--dsa-nav-flyout__link--color);
|
|
70
|
+
position: relative;
|
|
71
|
+
display: flex;
|
|
72
|
+
height: 100%;
|
|
73
|
+
align-items: center;
|
|
74
|
+
padding: var(--dsa-nav-flyout__link--padding);
|
|
75
|
+
}
|
|
76
|
+
.dsa-nav-flyout .dsa-nav-flyout__link:hover {
|
|
77
|
+
color: var(--dsa-nav-flyout__link--color_hover);
|
|
78
|
+
}
|
|
79
|
+
.dsa-nav-flyout .dsa-nav-flyout__link:active {
|
|
80
|
+
color: var(--dsa-nav-flyout__link--color_active);
|
|
81
|
+
}
|
|
82
|
+
.dsa-nav-flyout .dsa-nav-flyout__sublist {
|
|
83
|
+
padding-left: var(--dsa-nav-flyout__sublist--padding-left);
|
|
84
|
+
}
|
|
85
|
+
.dsa-nav-flyout .dsa-nav-flyout__sublist:hover .dsa-nav-sublist__link:not(:hover) {
|
|
86
|
+
opacity: var(--dsa-nav-sublist__link_dimmed--opacity);
|
|
87
|
+
}
|
|
88
|
+
.dsa-nav-flyout ul {
|
|
89
|
+
box-sizing: border-box;
|
|
90
|
+
margin: 0;
|
|
91
|
+
padding: 0;
|
|
92
|
+
list-style: none;
|
|
93
|
+
}
|
|
94
|
+
.dsa-nav-flyout ul li {
|
|
95
|
+
display: block;
|
|
96
|
+
margin: 0;
|
|
63
97
|
}
|
|
@@ -125,30 +125,30 @@
|
|
|
125
125
|
"examples": [
|
|
126
126
|
[
|
|
127
127
|
{
|
|
128
|
-
"label": "
|
|
128
|
+
"label": "Navigation Item",
|
|
129
|
+
"href": "#"
|
|
130
|
+
},
|
|
131
|
+
{
|
|
132
|
+
"label": "Active Item",
|
|
133
|
+
"href": "#",
|
|
134
|
+
"active": true
|
|
135
|
+
},
|
|
136
|
+
{
|
|
137
|
+
"label": "Item With Children",
|
|
129
138
|
"href": "#",
|
|
130
139
|
"items": [
|
|
131
140
|
{
|
|
132
|
-
"label": "
|
|
141
|
+
"label": "Level 2 Item",
|
|
133
142
|
"href": "#",
|
|
134
|
-
"id": "
|
|
143
|
+
"id": ""
|
|
135
144
|
},
|
|
136
145
|
{
|
|
137
|
-
"label": "
|
|
146
|
+
"label": "Another One",
|
|
138
147
|
"href": "#",
|
|
139
|
-
"id": "
|
|
148
|
+
"id": ""
|
|
140
149
|
}
|
|
141
150
|
]
|
|
142
151
|
},
|
|
143
|
-
{
|
|
144
|
-
"label": "Active Item",
|
|
145
|
-
"href": "#",
|
|
146
|
-
"active": true
|
|
147
|
-
},
|
|
148
|
-
{
|
|
149
|
-
"label": "Another Item",
|
|
150
|
-
"href": "#"
|
|
151
|
-
},
|
|
152
152
|
{
|
|
153
153
|
"label": "One more Item",
|
|
154
154
|
"href": "#"
|
|
@@ -46,30 +46,30 @@
|
|
|
46
46
|
"examples": [
|
|
47
47
|
[
|
|
48
48
|
{
|
|
49
|
-
"label": "
|
|
49
|
+
"label": "Navigation Item",
|
|
50
|
+
"href": "#"
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
"label": "Active Item",
|
|
54
|
+
"href": "#",
|
|
55
|
+
"active": true
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
"label": "Item With Children",
|
|
50
59
|
"href": "#",
|
|
51
60
|
"items": [
|
|
52
61
|
{
|
|
53
|
-
"label": "
|
|
62
|
+
"label": "Level 2 Item",
|
|
54
63
|
"href": "#",
|
|
55
|
-
"id": "
|
|
64
|
+
"id": ""
|
|
56
65
|
},
|
|
57
66
|
{
|
|
58
|
-
"label": "
|
|
67
|
+
"label": "Another One",
|
|
59
68
|
"href": "#",
|
|
60
|
-
"id": "
|
|
69
|
+
"id": ""
|
|
61
70
|
}
|
|
62
71
|
]
|
|
63
72
|
},
|
|
64
|
-
{
|
|
65
|
-
"label": "Active Item",
|
|
66
|
-
"href": "#",
|
|
67
|
-
"active": true
|
|
68
|
-
},
|
|
69
|
-
{
|
|
70
|
-
"label": "Another Item",
|
|
71
|
-
"href": "#"
|
|
72
|
-
},
|
|
73
73
|
{
|
|
74
74
|
"label": "One more Item",
|
|
75
75
|
"href": "#"
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import "./nav-topbar.css";
|
|
2
|
-
import { jsx, jsxs
|
|
2
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
3
3
|
import classnames from 'classnames';
|
|
4
4
|
import { Link } from '@kickstartds/base/lib/link';
|
|
5
5
|
import { Icon } from '@kickstartds/base/lib/icon';
|
|
6
6
|
import { NavDropdown } from '../nav-dropdown/index.js';
|
|
7
7
|
|
|
8
8
|
const NavTopbar = ({ items, active, dropdownInverted }) => items && items.length > 0 ? (jsx("nav", { className: "dsa-nav-topbar", id: "dsa-nav-main", "aria-label": "Hauptnavigation", children: jsx("ul", { className: "dsa-nav-list", children: items.map(({ label, href, id, items: subItems }) => {
|
|
9
|
-
return (jsxs("li", { className: classnames("dsa-nav-topbar__item", active && "dsa-nav-topbar__item--active"), children: [jsxs(Link, { href: href, className: `dsa-nav-topbar__link`, children: [label, subItems?.length ? (jsx(Icon, { className: "dsa-nav-topbar__link__icon", icon: "chevron-down" })) : ("")] }), subItems?.length ? (jsx(
|
|
9
|
+
return (jsxs("li", { className: classnames("dsa-nav-topbar__item", active && "dsa-nav-topbar__item--active"), children: [jsxs(Link, { href: href, className: `dsa-nav-topbar__link`, children: [label, subItems?.length ? (jsx(Icon, { className: "dsa-nav-topbar__link__icon", icon: "chevron-down" })) : ("")] }), subItems?.length ? (jsx(NavDropdown, { items: subItems, inverted: dropdownInverted })) : null] }, id));
|
|
10
10
|
}) }) })) : null;
|
|
11
11
|
|
|
12
12
|
export { NavTopbar };
|
|
@@ -1,9 +1,4 @@
|
|
|
1
1
|
.dsa-nav-topbar {
|
|
2
|
-
--dsa-nav-topbar--background: linear-gradient(
|
|
3
|
-
125deg,
|
|
4
|
-
var(--ks-background-color-default),
|
|
5
|
-
var(--ks-color-primary-to-bg-6)
|
|
6
|
-
);
|
|
7
2
|
--dsa-nav-topbar__link--color: var(--ks-color-fg);
|
|
8
3
|
--dsa-nav-topbar__link--color_hover: var(--ks-text-color-interface-interactive-hover);
|
|
9
4
|
--dsa-nav-topbar__link--color_active: var(--ks-text-color-interface-interactive-active);
|
|
@@ -14,53 +9,24 @@
|
|
|
14
9
|
--dsa-nav-topbar__link_dimmed--opacity: 0.6;
|
|
15
10
|
--dsa-nav-topbar_floating__link_dimmed--opacity: 0.75;
|
|
16
11
|
--dsa-nav-topbar_floating__link--color: var(--ks-color-fg);
|
|
17
|
-
--dsa-nav-dropdown--padding: var(--ks-spacing-inset-stretch-xs);
|
|
18
|
-
--dsa-nav-dropdown--background: var(--ks-background-color-default);
|
|
19
|
-
--dsa-nav-dropdown--border-radius: var(--ks-border-radius-card);
|
|
20
|
-
--dsa-nav-dropdown--box-shadow: var(--ks-box-shadow-card);
|
|
21
|
-
--dsa-nav-dropdown--border: 1px solid var(--ks-border-color-card);
|
|
22
|
-
--dsa-nav-dropdown__link--color: var(--ks-color-fg);
|
|
23
|
-
--dsa-nav-dropdown__link--color_hover: var(--ks-text-color-interface-interactive-hover);
|
|
24
|
-
--dsa-nav-dropdown__link--color_active: var(--ks-text-color-interface-interactive-active);
|
|
25
|
-
--dsa-nav-dropdown__link--font: var(--ks-font-interface-m);
|
|
26
|
-
--dsa-nav-dropdown__link--font-weight: var(--ks-font-weight-semi-bold);
|
|
27
|
-
--dsa-nav-dropdown__link--font-weight_active: var(--ks-font-weight-semi-bold);
|
|
28
|
-
--dsa-nav-dropdown__link--padding: 0.35em 0.25em;
|
|
29
|
-
--dsa-nav-dropdown__link_dimmed--opacity: 0.6;
|
|
30
12
|
}
|
|
31
13
|
|
|
32
14
|
.dsa-nav-topbar {
|
|
33
|
-
/* critical:start */
|
|
34
15
|
display: none;
|
|
35
16
|
--g-link--text-decoration: none;
|
|
36
17
|
--g-link--text-decoration_hover: none;
|
|
37
18
|
flex-direction: column;
|
|
38
19
|
justify-content: flex-start;
|
|
39
|
-
/* critical:end */
|
|
40
20
|
}
|
|
41
21
|
@media (min-width: 62rem) {
|
|
42
22
|
.dsa-nav-topbar {
|
|
43
23
|
display: flex;
|
|
44
24
|
}
|
|
45
25
|
}
|
|
46
|
-
.dsa-nav-topbar ul {
|
|
47
|
-
/* critical:start */
|
|
48
|
-
box-sizing: border-box;
|
|
49
|
-
margin: 0;
|
|
50
|
-
padding: 0;
|
|
51
|
-
list-style: none;
|
|
52
|
-
/* critical:end */
|
|
53
|
-
}
|
|
54
|
-
.dsa-nav-topbar ul li {
|
|
55
|
-
display: block;
|
|
56
|
-
margin: 0;
|
|
57
|
-
}
|
|
58
26
|
.dsa-nav-topbar .dsa-nav-list {
|
|
59
|
-
/* critical:start */
|
|
60
27
|
display: flex;
|
|
61
28
|
flex-wrap: nowrap;
|
|
62
29
|
align-items: stretch;
|
|
63
|
-
/* critical:end */
|
|
64
30
|
}
|
|
65
31
|
.dsa-nav-topbar .dsa-nav-list > ul.dsa-nav-main__list {
|
|
66
32
|
display: none;
|
|
@@ -72,9 +38,7 @@
|
|
|
72
38
|
opacity: var(--dsa-nav-topbar_floating__link_dimmed--opacity);
|
|
73
39
|
}
|
|
74
40
|
.dsa-nav-topbar .dsa-nav-topbar__item {
|
|
75
|
-
/* critical:start */
|
|
76
41
|
flex-shrink: 0;
|
|
77
|
-
/* critical:end */
|
|
78
42
|
position: relative;
|
|
79
43
|
outline: 0;
|
|
80
44
|
}
|
|
@@ -82,7 +46,6 @@
|
|
|
82
46
|
display: flex;
|
|
83
47
|
}
|
|
84
48
|
.dsa-nav-topbar .dsa-nav-topbar__link {
|
|
85
|
-
/* critical:start */
|
|
86
49
|
font: var(--dsa-nav-topbar__link--font);
|
|
87
50
|
font-weight: var(--dsa-nav-topbar__link--font-weight);
|
|
88
51
|
color: var(--dsa-nav-topbar__link--color);
|
|
@@ -91,7 +54,6 @@
|
|
|
91
54
|
height: 100%;
|
|
92
55
|
align-items: center;
|
|
93
56
|
padding: var(--dsa-nav-topbar__link--padding);
|
|
94
|
-
/* critical:end */
|
|
95
57
|
}
|
|
96
58
|
.dsa-nav-topbar .dsa-nav-topbar__link:hover {
|
|
97
59
|
color: var(--dsa-nav-topbar__link--color_hover);
|
|
@@ -108,32 +70,13 @@
|
|
|
108
70
|
.dsa-header--floating .dsa-nav-topbar .dsa-nav-topbar__link:active {
|
|
109
71
|
color: var(--dsa-nav-topbar__link--color_active);
|
|
110
72
|
}
|
|
111
|
-
.dsa-nav-topbar
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
align-items: flex-start;
|
|
117
|
-
background-color: var(--dsa-nav-dropdown--background);
|
|
118
|
-
border-radius: var(--dsa-nav-dropdown--border-radius);
|
|
119
|
-
box-shadow: var(--dsa-nav-dropdown--box-shadow);
|
|
120
|
-
border: var(--dsa-nav-dropdown--border);
|
|
121
|
-
}
|
|
122
|
-
.dsa-nav-topbar .dsa-nav-dropdown:hover .dsa-nav-dropdown__link:not(:hover) {
|
|
123
|
-
opacity: var(--dsa-nav-dropdown__link_dimmed--opacity);
|
|
124
|
-
}
|
|
125
|
-
.dsa-nav-topbar .dsa-nav-dropdown__link {
|
|
126
|
-
font: var(--dsa-nav-dropdown__link--font);
|
|
127
|
-
font-weight: var(--dsa-nav-dropdown__link--font-weight);
|
|
128
|
-
color: var(--dsa-nav-dropdown__link--color);
|
|
129
|
-
position: relative;
|
|
130
|
-
display: block;
|
|
131
|
-
padding: var(--dsa-nav-dropdown__link--padding);
|
|
132
|
-
text-align: left;
|
|
133
|
-
}
|
|
134
|
-
.dsa-nav-topbar .dsa-nav-dropdown__link:hover {
|
|
135
|
-
color: var(--dsa-nav-dropdown__link--color_hover);
|
|
73
|
+
.dsa-nav-topbar ul {
|
|
74
|
+
box-sizing: border-box;
|
|
75
|
+
margin: 0;
|
|
76
|
+
padding: 0;
|
|
77
|
+
list-style: none;
|
|
136
78
|
}
|
|
137
|
-
.dsa-nav-topbar
|
|
138
|
-
|
|
79
|
+
.dsa-nav-topbar ul li {
|
|
80
|
+
display: block;
|
|
81
|
+
margin: 0;
|
|
139
82
|
}
|
|
@@ -1284,7 +1284,7 @@
|
|
|
1284
1284
|
"id": "layout-footer--footer",
|
|
1285
1285
|
"group": "Layout/Footer",
|
|
1286
1286
|
"name": "Footer",
|
|
1287
|
-
"code": "<Footer\n byline=\"© 2024 systemics Inc. All rights reserved.\"\n logo={{\n alt: 'Systemics Logo',\n height: 40,\n homepageHref: '#',\n inverted: false,\n src: '/logo.svg',\n srcInverted: '/logo-inverted.svg',\n width: 176\n }}\n navItems={[\n {\n href: '#',\n
|
|
1287
|
+
"code": "<Footer\n byline=\"© 2024 systemics Inc. All rights reserved.\"\n logo={{\n alt: 'Systemics Logo',\n height: 40,\n homepageHref: '#',\n inverted: false,\n src: '/logo.svg',\n srcInverted: '/logo-inverted.svg',\n width: 176\n }}\n navItems={[\n {\n href: '#',\n label: 'Navigation Item'\n },\n {\n active: true,\n href: '#',\n label: 'Active Item'\n },\n {\n href: '#',\n items: [\n {\n href: '#',\n id: '',\n label: 'Level 2 Item'\n },\n {\n href: '#',\n id: '',\n label: 'Another One'\n }\n ],\n label: 'Item With Children'\n },\n {\n href: '#',\n label: 'One more Item'\n },\n {\n href: '#',\n label: 'Last Item'\n }\n ]}\n/>",
|
|
1288
1288
|
"args": {
|
|
1289
1289
|
"logo": {
|
|
1290
1290
|
"src": "/logo.svg",
|
|
@@ -1300,19 +1300,7 @@
|
|
|
1300
1300
|
"navItems": [
|
|
1301
1301
|
{
|
|
1302
1302
|
"href": "#",
|
|
1303
|
-
"label": "
|
|
1304
|
-
"items": [
|
|
1305
|
-
{
|
|
1306
|
-
"href": "#",
|
|
1307
|
-
"id": "TEST1",
|
|
1308
|
-
"label": "TEST1"
|
|
1309
|
-
},
|
|
1310
|
-
{
|
|
1311
|
-
"href": "#",
|
|
1312
|
-
"id": "TEST2",
|
|
1313
|
-
"label": "TEST2"
|
|
1314
|
-
}
|
|
1315
|
-
]
|
|
1303
|
+
"label": "Navigation Item"
|
|
1316
1304
|
},
|
|
1317
1305
|
{
|
|
1318
1306
|
"href": "#",
|
|
@@ -1321,7 +1309,19 @@
|
|
|
1321
1309
|
},
|
|
1322
1310
|
{
|
|
1323
1311
|
"href": "#",
|
|
1324
|
-
"label": "
|
|
1312
|
+
"label": "Item With Children",
|
|
1313
|
+
"items": [
|
|
1314
|
+
{
|
|
1315
|
+
"href": "#",
|
|
1316
|
+
"id": "",
|
|
1317
|
+
"label": "Level 2 Item"
|
|
1318
|
+
},
|
|
1319
|
+
{
|
|
1320
|
+
"href": "#",
|
|
1321
|
+
"id": "",
|
|
1322
|
+
"label": "Another One"
|
|
1323
|
+
}
|
|
1324
|
+
]
|
|
1325
1325
|
},
|
|
1326
1326
|
{
|
|
1327
1327
|
"href": "#",
|
|
@@ -1510,7 +1510,7 @@
|
|
|
1510
1510
|
"id": "layout-header--header",
|
|
1511
1511
|
"group": "Layout/Header",
|
|
1512
1512
|
"name": "Header",
|
|
1513
|
-
"code": "<Header\n logo={{\n alt: 'Systemics Logo',\n height: 40,\n homepageHref: '#',\n src: '/logo.svg',\n srcInverted: '/logo-inverted.svg',\n width: 176\n }}\n navItems={[\n {\n href: '#',\n
|
|
1513
|
+
"code": "<Header\n logo={{\n alt: 'Systemics Logo',\n height: 40,\n homepageHref: '#',\n src: '/logo.svg',\n srcInverted: '/logo-inverted.svg',\n width: 176\n }}\n navItems={[\n {\n href: '#',\n label: 'Navigation Item'\n },\n {\n active: true,\n href: '#',\n label: 'Active Item'\n },\n {\n href: '#',\n items: [\n {\n href: '#',\n id: '',\n label: 'Level 2 Item'\n },\n {\n href: '#',\n id: '',\n label: 'Another One'\n }\n ],\n label: 'Item With Children'\n },\n {\n href: '#',\n label: 'One more Item'\n },\n {\n href: '#',\n label: 'Last Item'\n }\n ]}\n/>",
|
|
1514
1514
|
"args": {
|
|
1515
1515
|
"logo": {
|
|
1516
1516
|
"src": "/logo.svg",
|
|
@@ -1527,19 +1527,7 @@
|
|
|
1527
1527
|
"navItems": [
|
|
1528
1528
|
{
|
|
1529
1529
|
"href": "#",
|
|
1530
|
-
"label": "
|
|
1531
|
-
"items": [
|
|
1532
|
-
{
|
|
1533
|
-
"href": "#",
|
|
1534
|
-
"id": "TEST1",
|
|
1535
|
-
"label": "TEST1"
|
|
1536
|
-
},
|
|
1537
|
-
{
|
|
1538
|
-
"href": "#",
|
|
1539
|
-
"id": "TEST2",
|
|
1540
|
-
"label": "TEST2"
|
|
1541
|
-
}
|
|
1542
|
-
]
|
|
1530
|
+
"label": "Navigation Item"
|
|
1543
1531
|
},
|
|
1544
1532
|
{
|
|
1545
1533
|
"href": "#",
|
|
@@ -1548,7 +1536,19 @@
|
|
|
1548
1536
|
},
|
|
1549
1537
|
{
|
|
1550
1538
|
"href": "#",
|
|
1551
|
-
"label": "
|
|
1539
|
+
"label": "Item With Children",
|
|
1540
|
+
"items": [
|
|
1541
|
+
{
|
|
1542
|
+
"href": "#",
|
|
1543
|
+
"id": "",
|
|
1544
|
+
"label": "Level 2 Item"
|
|
1545
|
+
},
|
|
1546
|
+
{
|
|
1547
|
+
"href": "#",
|
|
1548
|
+
"id": "",
|
|
1549
|
+
"label": "Another One"
|
|
1550
|
+
}
|
|
1551
|
+
]
|
|
1552
1552
|
},
|
|
1553
1553
|
{
|
|
1554
1554
|
"href": "#",
|
|
@@ -135,30 +135,30 @@
|
|
|
135
135
|
"examples": [
|
|
136
136
|
[
|
|
137
137
|
{
|
|
138
|
-
"label": "
|
|
138
|
+
"label": "Navigation Item",
|
|
139
|
+
"href": "#"
|
|
140
|
+
},
|
|
141
|
+
{
|
|
142
|
+
"label": "Active Item",
|
|
143
|
+
"href": "#",
|
|
144
|
+
"active": true
|
|
145
|
+
},
|
|
146
|
+
{
|
|
147
|
+
"label": "Item With Children",
|
|
139
148
|
"href": "#",
|
|
140
149
|
"items": [
|
|
141
150
|
{
|
|
142
|
-
"label": "
|
|
151
|
+
"label": "Level 2 Item",
|
|
143
152
|
"href": "#",
|
|
144
|
-
"id": "
|
|
153
|
+
"id": ""
|
|
145
154
|
},
|
|
146
155
|
{
|
|
147
|
-
"label": "
|
|
156
|
+
"label": "Another One",
|
|
148
157
|
"href": "#",
|
|
149
|
-
"id": "
|
|
158
|
+
"id": ""
|
|
150
159
|
}
|
|
151
160
|
]
|
|
152
161
|
},
|
|
153
|
-
{
|
|
154
|
-
"label": "Active Item",
|
|
155
|
-
"href": "#",
|
|
156
|
-
"active": true
|
|
157
|
-
},
|
|
158
|
-
{
|
|
159
|
-
"label": "Another Item",
|
|
160
|
-
"href": "#"
|
|
161
|
-
},
|
|
162
162
|
{
|
|
163
163
|
"label": "One more Item",
|
|
164
164
|
"href": "#"
|
|
@@ -288,30 +288,30 @@
|
|
|
288
288
|
"examples": [
|
|
289
289
|
[
|
|
290
290
|
{
|
|
291
|
-
"label": "
|
|
291
|
+
"label": "Navigation Item",
|
|
292
|
+
"href": "#"
|
|
293
|
+
},
|
|
294
|
+
{
|
|
295
|
+
"label": "Active Item",
|
|
296
|
+
"href": "#",
|
|
297
|
+
"active": true
|
|
298
|
+
},
|
|
299
|
+
{
|
|
300
|
+
"label": "Item With Children",
|
|
292
301
|
"href": "#",
|
|
293
302
|
"items": [
|
|
294
303
|
{
|
|
295
|
-
"label": "
|
|
304
|
+
"label": "Level 2 Item",
|
|
296
305
|
"href": "#",
|
|
297
|
-
"id": "
|
|
306
|
+
"id": ""
|
|
298
307
|
},
|
|
299
308
|
{
|
|
300
|
-
"label": "
|
|
309
|
+
"label": "Another One",
|
|
301
310
|
"href": "#",
|
|
302
|
-
"id": "
|
|
311
|
+
"id": ""
|
|
303
312
|
}
|
|
304
313
|
]
|
|
305
314
|
},
|
|
306
|
-
{
|
|
307
|
-
"label": "Active Item",
|
|
308
|
-
"href": "#",
|
|
309
|
-
"active": true
|
|
310
|
-
},
|
|
311
|
-
{
|
|
312
|
-
"label": "Another Item",
|
|
313
|
-
"href": "#"
|
|
314
|
-
},
|
|
315
315
|
{
|
|
316
316
|
"label": "One more Item",
|
|
317
317
|
"href": "#"
|
package/dist/tokens/themes.css
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on Wed, 21 Aug 2024
|
|
3
|
+
* Generated on Wed, 21 Aug 2024 13:20:44 GMT
|
|
4
4
|
*/
|
|
5
5
|
:root [ks-theme=business] {
|
|
6
6
|
--ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
|
|
@@ -2727,7 +2727,7 @@
|
|
|
2727
2727
|
}
|
|
2728
2728
|
/**
|
|
2729
2729
|
* Do not edit directly
|
|
2730
|
-
* Generated on Wed, 21 Aug 2024
|
|
2730
|
+
* Generated on Wed, 21 Aug 2024 13:20:48 GMT
|
|
2731
2731
|
*/
|
|
2732
2732
|
:root [ks-theme=google] {
|
|
2733
2733
|
--ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
|
|
@@ -5458,7 +5458,7 @@
|
|
|
5458
5458
|
}
|
|
5459
5459
|
/**
|
|
5460
5460
|
* Do not edit directly
|
|
5461
|
-
* Generated on Wed, 21 Aug 2024
|
|
5461
|
+
* Generated on Wed, 21 Aug 2024 13:20:46 GMT
|
|
5462
5462
|
*/
|
|
5463
5463
|
:root [ks-theme=ngo] {
|
|
5464
5464
|
--ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
|
|
@@ -8459,7 +8459,7 @@
|
|
|
8459
8459
|
}
|
|
8460
8460
|
/**
|
|
8461
8461
|
* Do not edit directly
|
|
8462
|
-
* Generated on Wed, 21 Aug 2024
|
|
8462
|
+
* Generated on Wed, 21 Aug 2024 13:20:50 GMT
|
|
8463
8463
|
*/
|
|
8464
8464
|
:root [ks-theme=telekom] {
|
|
8465
8465
|
--ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
|
package/dist/tokens/tokens.css
CHANGED
package/dist/tokens/tokens.js
CHANGED
package/package.json
CHANGED