@kickstartds/ds-agency-premium 1.6.71--canary.1962.c009890.0 → 1.6.71--canary.45.1966.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/BlogOverviewProps-9f207f1c.d.ts +1 -1
- package/dist/BlogPostProps-6b3cff22.d.ts +1 -1
- package/dist/PageProps-aa29c554.d.ts +1 -1
- package/dist/{SectionProps-2fd5dbde.d.ts → SectionProps-21d04028.d.ts} +1 -1
- package/dist/components/blog-overview/blog-overview.schema.dereffed.json +1 -3
- package/dist/components/blog-post/blog-post.schema.dereffed.json +1 -3
- package/dist/components/business-card/business-card.css +3 -0
- package/dist/components/button/button.css +2 -2
- package/dist/components/footer/footer.css +3 -3
- package/dist/components/footer/footer.schema.dereffed.json +12 -20
- package/dist/components/header/header.schema.dereffed.json +12 -20
- package/dist/components/headline/headline.css +2 -44
- package/dist/components/hero/hero.css +0 -22
- package/dist/components/nav-dropdown/nav-dropdown.css +3 -3
- package/dist/components/nav-flyout/nav-flyout.schema.dereffed.json +12 -20
- package/dist/components/nav-main/nav-main.schema.dereffed.json +12 -20
- package/dist/components/nav-main/nav-main.schema.json +12 -20
- package/dist/components/nav-topbar/nav-topbar.css +3 -3
- package/dist/components/nav-topbar/nav-topbar.schema.dereffed.json +12 -20
- package/dist/components/page/page.schema.dereffed.json +1 -3
- package/dist/components/page-wrapper/index.js +0 -6
- package/dist/components/page-wrapper/tokens.css +249 -249
- package/dist/components/presets.json +26 -42
- package/dist/components/section/index.d.ts +1 -1
- package/dist/components/section/index.js +1 -3
- package/dist/components/section/section.css +19 -60
- package/dist/components/section/section.schema.dereffed.json +1 -3
- package/dist/components/section/section.schema.json +1 -1
- package/dist/components/settings/settings.schema.dereffed.json +24 -40
- package/dist/components/stats/stats.css +4 -4
- package/dist/components/teaser-card/teaser-card.css +12 -10
- package/dist/global.css +2 -2
- package/dist/static/favicon/android-chrome-192x192.png +0 -0
- package/dist/static/favicon/android-chrome-512x512.png +0 -0
- package/dist/static/favicon/apple-touch-icon.png +0 -0
- package/dist/static/favicon/browserconfig.xml +9 -0
- package/dist/static/favicon/favicon-16x16.png +0 -0
- package/dist/static/favicon/favicon-192-192.png +20 -0
- package/dist/static/favicon/favicon-32x32.png +0 -0
- package/dist/static/favicon/favicon.ico +0 -0
- package/dist/static/favicon/mstile-144x144.png +0 -0
- package/dist/static/favicon/mstile-150x150.png +0 -0
- package/dist/static/favicon/mstile-310x150.png +0 -0
- package/dist/static/favicon/mstile-310x310.png +0 -0
- package/dist/static/favicon/mstile-70x70.png +0 -0
- package/dist/static/favicon/safari-pinned-tab.svg +30 -0
- package/dist/static/favicon/site.webmanifest +19 -1
- package/dist/static/logo-inverted.svg +12 -27
- package/dist/static/logo.svg +12 -27
- package/dist/tokens/IconSprite.js +0 -6
- package/dist/tokens/icon-sprite.html +0 -2
- package/dist/tokens/themes.css +4 -4
- package/dist/tokens/tokens.css +249 -249
- package/dist/tokens/tokens.js +376 -377
- package/package.json +1 -1
- package/dist/static/guenther/brands/cadillac.png +0 -0
- package/dist/static/guenther/brands/corvette.png +0 -0
- package/dist/static/guenther/brands/infiniti.png +0 -0
- package/dist/static/guenther/brands/isuzu.png +0 -0
- package/dist/static/guenther/brands/kia.png +0 -0
- package/dist/static/guenther/brands/maserati.png +0 -0
- package/dist/static/guenther/brands/micro.png +0 -0
- package/dist/static/guenther/brands/msg.png +0 -0
- package/dist/static/guenther/brands/nissan.png +0 -0
- package/dist/static/guenther/brands/saab.png +0 -0
- package/dist/static/guenther/brands/subaru.png +0 -0
- package/dist/static/guenther/car-1.webp +0 -0
- package/dist/static/guenther/car-2.webp +0 -0
- package/dist/static/guenther/car-cutout-1.avif +0 -0
- package/dist/static/guenther/car-cutout-2.avif +0 -0
- package/dist/static/guenther/car-cutout-3.png +0 -0
- package/dist/static/guenther/car-red.png +0 -0
- package/dist/static/guenther/car-store.png +0 -0
- package/dist/static/guenther/car-yellow.webp +0 -0
- package/dist/static/guenther/contact.jpg +0 -0
- package/dist/static/guenther/header-2.png +0 -0
- package/dist/static/guenther/header.jpg +0 -0
- package/dist/static/guenther/header.png +0 -0
- package/dist/static/guenther/kia-header.webp +0 -0
- package/dist/static/guenther/visual.png +0 -0
|
@@ -2692,7 +2692,7 @@
|
|
|
2692
2692
|
"id": "layout-footer--footer",
|
|
2693
2693
|
"group": "Layout/Footer",
|
|
2694
2694
|
"name": "Footer",
|
|
2695
|
-
"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 active: true,\n label: '
|
|
2695
|
+
"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 active: true,\n label: 'Active Item',\n url: '#'\n },\n {\n label: 'Navigation Item',\n url: '#'\n },\n {\n items: [\n {\n label: 'Level 2 Item',\n url: '#'\n },\n {\n active: true,\n label: 'Active Item',\n url: '#'\n },\n {\n label: 'An Item with a longer Label',\n url: '#'\n },\n {\n label: 'And One last one',\n url: '#'\n }\n ],\n label: 'Dropdown',\n url: '#'\n },\n {\n label: 'One more Item',\n url: '#'\n },\n {\n label: 'Last Item',\n url: '#'\n }\n ]}\n/>",
|
|
2696
2696
|
"args": {
|
|
2697
2697
|
"logo": {
|
|
2698
2698
|
"src": "/logo.svg",
|
|
@@ -2708,51 +2708,43 @@
|
|
|
2708
2708
|
"navItems": [
|
|
2709
2709
|
{
|
|
2710
2710
|
"url": "#",
|
|
2711
|
-
"label": "
|
|
2711
|
+
"label": "Active Item",
|
|
2712
2712
|
"active": true
|
|
2713
2713
|
},
|
|
2714
2714
|
{
|
|
2715
2715
|
"url": "#",
|
|
2716
|
-
"label": "
|
|
2716
|
+
"label": "Navigation Item"
|
|
2717
|
+
},
|
|
2718
|
+
{
|
|
2719
|
+
"url": "#",
|
|
2720
|
+
"label": "Dropdown",
|
|
2717
2721
|
"items": [
|
|
2718
2722
|
{
|
|
2719
2723
|
"url": "#",
|
|
2720
|
-
"label": "
|
|
2724
|
+
"label": "Level 2 Item"
|
|
2721
2725
|
},
|
|
2722
2726
|
{
|
|
2723
2727
|
"url": "#",
|
|
2724
|
-
"label": "
|
|
2728
|
+
"label": "Active Item",
|
|
2725
2729
|
"active": true
|
|
2726
2730
|
},
|
|
2727
2731
|
{
|
|
2728
2732
|
"url": "#",
|
|
2729
|
-
"label": "
|
|
2733
|
+
"label": "An Item with a longer Label"
|
|
2730
2734
|
},
|
|
2731
2735
|
{
|
|
2732
2736
|
"url": "#",
|
|
2733
|
-
"label": "
|
|
2737
|
+
"label": "And One last one"
|
|
2734
2738
|
}
|
|
2735
2739
|
]
|
|
2736
2740
|
},
|
|
2737
2741
|
{
|
|
2738
2742
|
"url": "#",
|
|
2739
|
-
"label": "
|
|
2740
|
-
},
|
|
2741
|
-
{
|
|
2742
|
-
"url": "#",
|
|
2743
|
-
"label": "Bonusprogramm"
|
|
2744
|
-
},
|
|
2745
|
-
{
|
|
2746
|
-
"url": "#",
|
|
2747
|
-
"label": "News"
|
|
2748
|
-
},
|
|
2749
|
-
{
|
|
2750
|
-
"url": "#",
|
|
2751
|
-
"label": "Jobs"
|
|
2743
|
+
"label": "One more Item"
|
|
2752
2744
|
},
|
|
2753
2745
|
{
|
|
2754
2746
|
"url": "#",
|
|
2755
|
-
"label": "
|
|
2747
|
+
"label": "Last Item"
|
|
2756
2748
|
}
|
|
2757
2749
|
]
|
|
2758
2750
|
},
|
|
@@ -2933,7 +2925,7 @@
|
|
|
2933
2925
|
"id": "layout-header--header",
|
|
2934
2926
|
"group": "Layout/Header",
|
|
2935
2927
|
"name": "Header",
|
|
2936
|
-
"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 active: true,\n label: '
|
|
2928
|
+
"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 active: true,\n label: 'Active Item',\n url: '#'\n },\n {\n label: 'Navigation Item',\n url: '#'\n },\n {\n items: [\n {\n label: 'Level 2 Item',\n url: '#'\n },\n {\n active: true,\n label: 'Active Item',\n url: '#'\n },\n {\n label: 'An Item with a longer Label',\n url: '#'\n },\n {\n label: 'And One last one',\n url: '#'\n }\n ],\n label: 'Dropdown',\n url: '#'\n },\n {\n label: 'One more Item',\n url: '#'\n },\n {\n label: 'Last Item',\n url: '#'\n }\n ]}\n/>",
|
|
2937
2929
|
"args": {
|
|
2938
2930
|
"logo": {
|
|
2939
2931
|
"src": "/logo.svg",
|
|
@@ -2950,51 +2942,43 @@
|
|
|
2950
2942
|
"navItems": [
|
|
2951
2943
|
{
|
|
2952
2944
|
"url": "#",
|
|
2953
|
-
"label": "
|
|
2945
|
+
"label": "Active Item",
|
|
2954
2946
|
"active": true
|
|
2955
2947
|
},
|
|
2956
2948
|
{
|
|
2957
2949
|
"url": "#",
|
|
2958
|
-
"label": "
|
|
2950
|
+
"label": "Navigation Item"
|
|
2951
|
+
},
|
|
2952
|
+
{
|
|
2953
|
+
"url": "#",
|
|
2954
|
+
"label": "Dropdown",
|
|
2959
2955
|
"items": [
|
|
2960
2956
|
{
|
|
2961
2957
|
"url": "#",
|
|
2962
|
-
"label": "
|
|
2958
|
+
"label": "Level 2 Item"
|
|
2963
2959
|
},
|
|
2964
2960
|
{
|
|
2965
2961
|
"url": "#",
|
|
2966
|
-
"label": "
|
|
2962
|
+
"label": "Active Item",
|
|
2967
2963
|
"active": true
|
|
2968
2964
|
},
|
|
2969
2965
|
{
|
|
2970
2966
|
"url": "#",
|
|
2971
|
-
"label": "
|
|
2967
|
+
"label": "An Item with a longer Label"
|
|
2972
2968
|
},
|
|
2973
2969
|
{
|
|
2974
2970
|
"url": "#",
|
|
2975
|
-
"label": "
|
|
2971
|
+
"label": "And One last one"
|
|
2976
2972
|
}
|
|
2977
2973
|
]
|
|
2978
2974
|
},
|
|
2979
2975
|
{
|
|
2980
2976
|
"url": "#",
|
|
2981
|
-
"label": "
|
|
2982
|
-
},
|
|
2983
|
-
{
|
|
2984
|
-
"url": "#",
|
|
2985
|
-
"label": "Bonusprogramm"
|
|
2986
|
-
},
|
|
2987
|
-
{
|
|
2988
|
-
"url": "#",
|
|
2989
|
-
"label": "News"
|
|
2990
|
-
},
|
|
2991
|
-
{
|
|
2992
|
-
"url": "#",
|
|
2993
|
-
"label": "Jobs"
|
|
2977
|
+
"label": "One more Item"
|
|
2994
2978
|
},
|
|
2995
2979
|
{
|
|
2996
2980
|
"url": "#",
|
|
2997
|
-
"label": "
|
|
2981
|
+
"label": "Last Item"
|
|
2998
2982
|
}
|
|
2999
2983
|
]
|
|
3000
2984
|
},
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { HTMLAttributes, FC, PropsWithChildren } from "react";
|
|
3
|
-
import { SectionProps } from "../../SectionProps-
|
|
3
|
+
import { SectionProps } from "../../SectionProps-21d04028.js";
|
|
4
4
|
declare const SectionContextDefault: import("react").ForwardRefExoticComponent<SectionProps & Omit<HTMLAttributes<HTMLElement>, "style" | "content"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
5
5
|
declare const SectionContext: import("react").Context<import("react").ForwardRefExoticComponent<SectionProps & Omit<HTMLAttributes<HTMLElement>, "style" | "content"> & import("react").RefAttributes<HTMLDivElement>>>;
|
|
6
6
|
declare const Section: import("react").ForwardRefExoticComponent<SectionProps & Omit<HTMLAttributes<HTMLElement>, "style" | "content"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -42,9 +42,7 @@ const SectionContextDefault = forwardRef(({ headline, content, headerSpacing, wi
|
|
|
42
42
|
spotlight,
|
|
43
43
|
content?.mode === "slider",
|
|
44
44
|
]);
|
|
45
|
-
return (jsx(SectionContextDefault$1, { ...props, ...componentProps, className: classnames("dsa-section", style &&
|
|
46
|
-
style !== "default" &&
|
|
47
|
-
`dsa-section--style dsa-section--style-${style}`, transition &&
|
|
45
|
+
return (jsx(SectionContextDefault$1, { ...props, ...componentProps, className: classnames("dsa-section", style && style !== "default" && `dsa-section-style--${style}`, transition &&
|
|
48
46
|
transition !== "none" &&
|
|
49
47
|
`dsa-section--transition-${transition}`, headerSpacing && "dsa-section--header-spacing", spotlight && "dsa-section--spotlight", className), background: backgroundColor === "default"
|
|
50
48
|
? "default"
|
|
@@ -26,20 +26,18 @@
|
|
|
26
26
|
--dsa-section--background-color_default: var(--ks-background-color-default);
|
|
27
27
|
--dsa-section--background-color_accent: var(--ks-background-color-accent);
|
|
28
28
|
--dsa-section--background-color_bold: var(--ks-background-color-bold);
|
|
29
|
-
--dsa-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
var(--ks-color-
|
|
29
|
+
--dsa-section--transition_to-default: linear-gradient(
|
|
30
|
+
178deg,
|
|
31
|
+
transparent 75%,
|
|
32
|
+
var(--ks-background-color-default) 75%
|
|
33
33
|
);
|
|
34
|
-
--dsa-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
34
|
+
--dsa-section--transition_to-accent: linear-gradient(178deg, transparent 75%, var(--ks-background-color-accent) 75%);
|
|
35
|
+
--dsa-section--transition_to-bold: linear-gradient(178deg, transparent 75%, var(--ks-background-color-bold) 75%);
|
|
36
|
+
--dsa-section--transition_to-inverted: linear-gradient(
|
|
37
|
+
178deg,
|
|
38
|
+
transparent 75%,
|
|
39
|
+
var(--ks-background-color-default-inverted) 75%
|
|
38
40
|
);
|
|
39
|
-
--dsa-section--transition_to-default: linear-gradient(transparent, var(--ks-background-color-default));
|
|
40
|
-
--dsa-section--transition_to-accent: linear-gradient(transparent, var(--ks-background-color-accent));
|
|
41
|
-
--dsa-section--transition_to-bold: linear-gradient(transparent, var(--ks-background-color-bold));
|
|
42
|
-
--dsa-section--transition_to-inverted: linear-gradient(transparent, var(--ks-background-color-default-inverted));
|
|
43
41
|
--dsa-section__slider-arrow--color: var(--ks-text-color-interface-interactive);
|
|
44
42
|
--dsa-section__slider-arrow--size: 2rem;
|
|
45
43
|
--dsa-section__slider-arrow--padding: 0.5em;
|
|
@@ -51,18 +49,6 @@
|
|
|
51
49
|
--dsa-section__spotlight--blur: 0%;
|
|
52
50
|
--dsa-section__spotlight--color: var(--ks-color-primary-alpha-5);
|
|
53
51
|
}
|
|
54
|
-
.dsa-section[ks-inverted=true] {
|
|
55
|
-
--dsa-section_shine-left--background-image: radial-gradient(
|
|
56
|
-
70% 150% at 20% 50%,
|
|
57
|
-
var(--ks-color-fg-inverted-alpha-8-base),
|
|
58
|
-
var(--ks-color-bg)
|
|
59
|
-
);
|
|
60
|
-
--dsa-section_shine-right--background-image: radial-gradient(
|
|
61
|
-
70% 150% at 80% 50%,
|
|
62
|
-
var(--ks-color-fg-inverted-alpha-87-base),
|
|
63
|
-
var(--ks-color-bg)
|
|
64
|
-
);
|
|
65
|
-
}
|
|
66
52
|
|
|
67
53
|
.l-section.dsa-section {
|
|
68
54
|
--l-section_buttons--space-before: var(--dsa-section__buttons--space-before, var(--l-section--gutter));
|
|
@@ -95,14 +81,11 @@
|
|
|
95
81
|
}
|
|
96
82
|
|
|
97
83
|
.l-section.dsa-section {
|
|
98
|
-
--dsa-section--background-color: var(--dsa-section--background-color_default, var(--ks-color-bg));
|
|
99
84
|
background-image: var(--dsa-section--background-image);
|
|
100
|
-
background-color: var(--dsa-section--background-
|
|
85
|
+
background-color: var(--dsa-section--background-color_default, var(--ks-color-bg));
|
|
101
86
|
position: relative;
|
|
102
87
|
}
|
|
103
88
|
.l-section.dsa-section .l-section__container {
|
|
104
|
-
position: relative;
|
|
105
|
-
z-index: 2;
|
|
106
89
|
font: var(--ks-font-copy-m);
|
|
107
90
|
}
|
|
108
91
|
.l-section.dsa-section.l-section--gutter-large {
|
|
@@ -115,10 +98,10 @@
|
|
|
115
98
|
--l-section--gutter: var(--dsa-section--gutter_none);
|
|
116
99
|
}
|
|
117
100
|
.l-section.dsa-section.l-section--accent {
|
|
118
|
-
|
|
101
|
+
background-color: var(--dsa-section--background-color_accent, var(--ks-background-color-accent));
|
|
119
102
|
}
|
|
120
103
|
.l-section.dsa-section.l-section--bold {
|
|
121
|
-
|
|
104
|
+
background-color: var(--dsa-section--background-color_bold, var(--ks-background-color-bold));
|
|
122
105
|
}
|
|
123
106
|
.l-section.dsa-section.dsa-section--transition-to-accent {
|
|
124
107
|
background-image: var(--dsa-section--transition_to-accent, linear-gradient(180deg, transparent 0%, var(--ks-background-color-accent) 100%));
|
|
@@ -141,43 +124,19 @@
|
|
|
141
124
|
.l-section.dsa-section--header-spacing.l-section--space-before-small {
|
|
142
125
|
padding-top: calc(var(--dsa-header--height) + var(--dsa-section--space-small));
|
|
143
126
|
}
|
|
144
|
-
.l-section.dsa-section--
|
|
145
|
-
content: "";
|
|
146
|
-
position: absolute;
|
|
147
|
-
top: 0;
|
|
148
|
-
left: 0;
|
|
149
|
-
width: 100%;
|
|
150
|
-
height: 100%;
|
|
151
|
-
z-index: 0;
|
|
152
|
-
}
|
|
153
|
-
.l-section.dsa-section--style-framed {
|
|
127
|
+
.l-section.dsa-section-style--framed {
|
|
154
128
|
background-color: var(--ks-background-color-accent);
|
|
155
129
|
}
|
|
156
|
-
.l-section.dsa-section--
|
|
130
|
+
.l-section.dsa-section-style--framed .l-section__container--content .l-section__content {
|
|
157
131
|
padding: var(--dsa-section--space_default);
|
|
158
132
|
background-color: var(--ks-background-color-default);
|
|
159
133
|
border-radius: var(--ks-border-radius-surface);
|
|
160
134
|
}
|
|
161
|
-
.l-section.dsa-section--
|
|
162
|
-
background-image: var(--dsa-
|
|
163
|
-
}
|
|
164
|
-
.l-section.dsa-section--style-shine-right::before {
|
|
165
|
-
background-image: var(--dsa-section_shine-right--background-image, radial-gradient(70% 150% at 80% 50%, var(--ks-color-fg-inverted-alpha-8-base), var(--ks-color-bg)));
|
|
135
|
+
.l-section.dsa-section-style--deko {
|
|
136
|
+
background-image: var(--dsa-section_deko--background-image, radial-gradient(180deg, transparent 0%, var(--ks-background-color-default) 100%));
|
|
166
137
|
}
|
|
167
|
-
.l-section.dsa-section--
|
|
168
|
-
background:
|
|
169
|
-
background-size: 16px 16px;
|
|
170
|
-
z-index: 1;
|
|
171
|
-
}
|
|
172
|
-
.l-section.dsa-section--style-carbon::after {
|
|
173
|
-
content: "";
|
|
174
|
-
position: absolute;
|
|
175
|
-
top: 0;
|
|
176
|
-
left: 0;
|
|
177
|
-
width: 100%;
|
|
178
|
-
height: 100%;
|
|
179
|
-
z-index: 0;
|
|
180
|
-
background: linear-gradient(180deg, var(--ks-color-fg-alpha-9) 0%, transparent 10px), linear-gradient(180deg, transparent calc(100% - 10px), var(--ks-color-fg-alpha-9) 100%), radial-gradient(100% 100% at 50% 50%, var(--ks-color-bg), var(--ks-color-bg-to-fg-1));
|
|
138
|
+
.l-section.dsa-section-style--colorful {
|
|
139
|
+
background-image: var(--dsa-section_colorful--background-image, linear-gradient(145deg, var(--ks-color-primary) 30%, #4aaea9 100%));
|
|
181
140
|
}
|
|
182
141
|
.l-section.dsa-section--spotlight {
|
|
183
142
|
position: relative;
|
|
@@ -132,51 +132,43 @@
|
|
|
132
132
|
"examples": [
|
|
133
133
|
[
|
|
134
134
|
{
|
|
135
|
-
"label": "
|
|
135
|
+
"label": "Active Item",
|
|
136
136
|
"url": "#",
|
|
137
137
|
"active": true
|
|
138
138
|
},
|
|
139
139
|
{
|
|
140
|
-
"label": "
|
|
140
|
+
"label": "Navigation Item",
|
|
141
|
+
"url": "#"
|
|
142
|
+
},
|
|
143
|
+
{
|
|
144
|
+
"label": "Dropdown",
|
|
141
145
|
"url": "#",
|
|
142
146
|
"items": [
|
|
143
147
|
{
|
|
144
|
-
"label": "
|
|
148
|
+
"label": "Level 2 Item",
|
|
145
149
|
"url": "#"
|
|
146
150
|
},
|
|
147
151
|
{
|
|
148
|
-
"label": "
|
|
152
|
+
"label": "Active Item",
|
|
149
153
|
"active": true,
|
|
150
154
|
"url": "#"
|
|
151
155
|
},
|
|
152
156
|
{
|
|
153
|
-
"label": "
|
|
157
|
+
"label": "An Item with a longer Label",
|
|
154
158
|
"url": "#"
|
|
155
159
|
},
|
|
156
160
|
{
|
|
157
|
-
"label": "
|
|
161
|
+
"label": "And One last one",
|
|
158
162
|
"url": "#"
|
|
159
163
|
}
|
|
160
164
|
]
|
|
161
165
|
},
|
|
162
166
|
{
|
|
163
|
-
"label": "
|
|
164
|
-
"url": "#"
|
|
165
|
-
},
|
|
166
|
-
{
|
|
167
|
-
"label": "Bonusprogramm",
|
|
168
|
-
"url": "#"
|
|
169
|
-
},
|
|
170
|
-
{
|
|
171
|
-
"label": "News",
|
|
172
|
-
"url": "#"
|
|
173
|
-
},
|
|
174
|
-
{
|
|
175
|
-
"label": "Jobs",
|
|
167
|
+
"label": "One more Item",
|
|
176
168
|
"url": "#"
|
|
177
169
|
},
|
|
178
170
|
{
|
|
179
|
-
"label": "
|
|
171
|
+
"label": "Last Item",
|
|
180
172
|
"url": "#"
|
|
181
173
|
}
|
|
182
174
|
]
|
|
@@ -294,51 +286,43 @@
|
|
|
294
286
|
"examples": [
|
|
295
287
|
[
|
|
296
288
|
{
|
|
297
|
-
"label": "
|
|
289
|
+
"label": "Active Item",
|
|
298
290
|
"url": "#",
|
|
299
291
|
"active": true
|
|
300
292
|
},
|
|
301
293
|
{
|
|
302
|
-
"label": "
|
|
294
|
+
"label": "Navigation Item",
|
|
295
|
+
"url": "#"
|
|
296
|
+
},
|
|
297
|
+
{
|
|
298
|
+
"label": "Dropdown",
|
|
303
299
|
"url": "#",
|
|
304
300
|
"items": [
|
|
305
301
|
{
|
|
306
|
-
"label": "
|
|
302
|
+
"label": "Level 2 Item",
|
|
307
303
|
"url": "#"
|
|
308
304
|
},
|
|
309
305
|
{
|
|
310
|
-
"label": "
|
|
306
|
+
"label": "Active Item",
|
|
311
307
|
"active": true,
|
|
312
308
|
"url": "#"
|
|
313
309
|
},
|
|
314
310
|
{
|
|
315
|
-
"label": "
|
|
311
|
+
"label": "An Item with a longer Label",
|
|
316
312
|
"url": "#"
|
|
317
313
|
},
|
|
318
314
|
{
|
|
319
|
-
"label": "
|
|
315
|
+
"label": "And One last one",
|
|
320
316
|
"url": "#"
|
|
321
317
|
}
|
|
322
318
|
]
|
|
323
319
|
},
|
|
324
320
|
{
|
|
325
|
-
"label": "
|
|
326
|
-
"url": "#"
|
|
327
|
-
},
|
|
328
|
-
{
|
|
329
|
-
"label": "Bonusprogramm",
|
|
330
|
-
"url": "#"
|
|
331
|
-
},
|
|
332
|
-
{
|
|
333
|
-
"label": "News",
|
|
334
|
-
"url": "#"
|
|
335
|
-
},
|
|
336
|
-
{
|
|
337
|
-
"label": "Jobs",
|
|
321
|
+
"label": "One more Item",
|
|
338
322
|
"url": "#"
|
|
339
323
|
},
|
|
340
324
|
{
|
|
341
|
-
"label": "
|
|
325
|
+
"label": "Last Item",
|
|
342
326
|
"url": "#"
|
|
343
327
|
}
|
|
344
328
|
]
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
.dsa-stats {
|
|
2
2
|
--dsa-stats--gap-vertical: var(--ks-spacing-stack-l);
|
|
3
3
|
--dsa-stats--gap-horizontal: var(--ks-spacing-inline-m);
|
|
4
|
-
--dsa-stats__item--gap: var(--ks-spacing-stack-
|
|
4
|
+
--dsa-stats__item--gap: var(--ks-spacing-stack-xs);
|
|
5
5
|
--dsa-stats__icon--color: var(--ks-text-color-primary);
|
|
6
|
-
--dsa-stats__icon--size:
|
|
7
|
-
--dsa-stats__number--font: var(--ks-font-display-
|
|
6
|
+
--dsa-stats__icon--size: 5em;
|
|
7
|
+
--dsa-stats__number--font: var(--ks-font-display-xl);
|
|
8
8
|
--dsa-stats__number--font-weight: var(--ks-font-weight-semi-bold);
|
|
9
9
|
--dsa-stats__number--background: var(--dsa-typo--highlight);
|
|
10
10
|
--dsa-stats__topic__font: var(--ks-font-interface-xl);
|
|
11
11
|
--dsa-stats__topic--color: var(--ks-text-color-display);
|
|
12
|
-
--dsa-stats__copy--font: var(--ks-font-copy-
|
|
12
|
+
--dsa-stats__copy--font: var(--ks-font-copy-s);
|
|
13
13
|
--dsa-stats__copy--color: var(--ks-text-color-default);
|
|
14
14
|
}
|
|
15
15
|
|
|
@@ -8,26 +8,27 @@
|
|
|
8
8
|
--dsa-teaser-card--border-width: var(--ks-border-width-default);
|
|
9
9
|
--dsa-teaser-card--border-color: var(--ks-border-color-card-interactive);
|
|
10
10
|
--dsa-teaser-card--border-color_hover: var(--ks-border-color-card-interactive-hover);
|
|
11
|
-
--dsa-teaser-card--border-radius: var(--ks-border-radius-card)
|
|
11
|
+
--dsa-teaser-card--border-radius: var(--ks-border-radius-card) var(--ks-border-radius-card)
|
|
12
|
+
var(--ks-border-radius-card) calc(var(--ks-border-radius-card) * 3);
|
|
12
13
|
--dsa-teaser-card--shadow: none;
|
|
13
14
|
--dsa-teaser-card--shadow_hover: none;
|
|
14
|
-
--dsa-teaser-card__image--transform_hover: scale(1.
|
|
15
|
-
--dsa-teaser-card__image--transition: transform var(--ks-transition-
|
|
15
|
+
--dsa-teaser-card__image--transform_hover: scale(1.05);
|
|
16
|
+
--dsa-teaser-card__image--transition: transform var(--ks-transition-hover);
|
|
16
17
|
--dsa-teaser-card__topic--color: var(--dsa-topic--color);
|
|
17
|
-
--dsa-teaser-card__label--font: var(--ks-font-interface-
|
|
18
|
+
--dsa-teaser-card__label--font: var(--ks-font-interface-s);
|
|
18
19
|
--dsa-teaser-card__label--font-weight: var(--ks-font-weight-semi-bold);
|
|
19
|
-
--dsa-teaser-card__label--color: var(--
|
|
20
|
-
--dsa-teaser-card__label--background-color: var(--ks-background-color-
|
|
20
|
+
--dsa-teaser-card__label--color: var(--ks-text-color-primary);
|
|
21
|
+
--dsa-teaser-card__label--background-color: var(--ks-background-color-bold);
|
|
21
22
|
--dsa-teaser-card__label--padding: 0.5em 1em;
|
|
22
23
|
--dsa-teaser-card__label--border-radius: var(--ks-border-radius-pill);
|
|
23
|
-
--dsa-teaser-card__label--border:
|
|
24
|
+
--dsa-teaser-card__label--border: 1px solid var(--ks-border-color-interface);
|
|
24
25
|
--dsa-teaser-card__button--font: var(--ks-font-interface-m);
|
|
25
26
|
--dsa-teaser-card--padding: var(--ks-spacing-inset-m);
|
|
26
27
|
--dsa-teaser-card__topic--font: var(--ks-font-display-m);
|
|
27
28
|
--dsa-teaser-card__topic--font-weight: var(--dsa-topic--font-weight);
|
|
28
29
|
--dsa-teaser-card__copy--font: var(--ks-font-copy-s);
|
|
29
30
|
--dsa-teaser-card__copy--color: var(--ks-text-color-default);
|
|
30
|
-
--dsa-teaser-card__copy--margin-top: 0.
|
|
31
|
+
--dsa-teaser-card__copy--margin-top: 0.5em;
|
|
31
32
|
--dsa-teaser-card__button--font: var(--ks-font-interface-s);
|
|
32
33
|
}
|
|
33
34
|
@container teaser-card (min-width: 400px) {
|
|
@@ -123,12 +124,13 @@
|
|
|
123
124
|
.dsa-teaser-card .dsa-teaser-card__label {
|
|
124
125
|
position: absolute;
|
|
125
126
|
z-index: 1;
|
|
126
|
-
top:
|
|
127
|
-
right:
|
|
127
|
+
top: 0;
|
|
128
|
+
right: 0;
|
|
128
129
|
border-radius: var(--dsa-teaser-card__label--border-radius);
|
|
129
130
|
border: var(--dsa-teaser-card__label--border, 0);
|
|
130
131
|
pointer-events: initial;
|
|
131
132
|
padding: var(--dsa-teaser-card__label--padding);
|
|
133
|
+
transform: translate(0.5em, -50%);
|
|
132
134
|
font: var(--dsa-teaser-card__label--font);
|
|
133
135
|
text-align: center;
|
|
134
136
|
font-weight: var(--dsa-teaser-card__label--font-weight);
|
package/dist/global.css
CHANGED
|
@@ -312,7 +312,7 @@ h3 {
|
|
|
312
312
|
--dsa-link--color_hover: var(--ks-text-color-default-interactive-hover);
|
|
313
313
|
--dsa-link--text-decoration: none;
|
|
314
314
|
--dsa-link--text-decoration_hover: none;
|
|
315
|
-
--dsa-typo--highlight: var(--ks-
|
|
315
|
+
--dsa-typo--highlight: var(--ks-color-primary);
|
|
316
316
|
--dsa-content--horizontal-spacing: var(--ks-spacing-inset-l);
|
|
317
317
|
--dsa-content--vertical-spacing: var(--ks-spacing-xxl);
|
|
318
318
|
--dsa-content--width_narrow: calc(var(--ks-font-size-copy-m) * 34);
|
|
@@ -340,7 +340,7 @@ h3 {
|
|
|
340
340
|
}
|
|
341
341
|
@media (min-width: 62em) {
|
|
342
342
|
:root, [ks-inverted], [ks-theme] {
|
|
343
|
-
--dsa-logo--height:
|
|
343
|
+
--dsa-logo--height: 2.5rem;
|
|
344
344
|
}
|
|
345
345
|
}
|
|
346
346
|
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|