@kickstartds/ds-agency-premium 1.6.71--canary.45.1960.0 → 1.6.71--canary.1962.c009890.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.
Files changed (86) hide show
  1. package/dist/{BlogOverviewProps-d62a0a9a.d.ts → BlogOverviewProps-9f207f1c.d.ts} +2 -2
  2. package/dist/{BlogPostProps-c760fd2a.d.ts → BlogPostProps-6b3cff22.d.ts} +2 -2
  3. package/dist/PageProps-aa29c554.d.ts +1 -1
  4. package/dist/{SectionProps-21d04028.d.ts → SectionProps-2fd5dbde.d.ts} +1 -1
  5. package/dist/components/blog-head/index.d.ts +1 -1
  6. package/dist/components/blog-overview/blog-overview.schema.dereffed.json +3 -1
  7. package/dist/components/blog-overview/index.d.ts +1 -1
  8. package/dist/components/blog-post/blog-post.schema.dereffed.json +3 -1
  9. package/dist/components/blog-post/index.d.ts +1 -1
  10. package/dist/components/blog-teaser/index.d.ts +1 -1
  11. package/dist/components/button/button.css +2 -2
  12. package/dist/components/footer/footer.css +3 -3
  13. package/dist/components/footer/footer.schema.dereffed.json +20 -12
  14. package/dist/components/header/header.schema.dereffed.json +20 -12
  15. package/dist/components/headline/headline.css +44 -2
  16. package/dist/components/hero/hero.css +22 -0
  17. package/dist/components/index/index.d.ts +2 -2
  18. package/dist/components/nav-dropdown/nav-dropdown.css +3 -3
  19. package/dist/components/nav-flyout/nav-flyout.schema.dereffed.json +20 -12
  20. package/dist/components/nav-main/nav-main.schema.dereffed.json +20 -12
  21. package/dist/components/nav-main/nav-main.schema.json +20 -12
  22. package/dist/components/nav-topbar/nav-topbar.css +3 -3
  23. package/dist/components/nav-topbar/nav-topbar.schema.dereffed.json +20 -12
  24. package/dist/components/page/page.schema.dereffed.json +3 -1
  25. package/dist/components/page-wrapper/index.js +6 -0
  26. package/dist/components/page-wrapper/tokens.css +249 -249
  27. package/dist/components/presets.json +42 -26
  28. package/dist/components/section/index.d.ts +1 -1
  29. package/dist/components/section/index.js +3 -1
  30. package/dist/components/section/section.css +60 -19
  31. package/dist/components/section/section.schema.dereffed.json +3 -1
  32. package/dist/components/section/section.schema.json +1 -1
  33. package/dist/components/settings/settings.schema.dereffed.json +40 -24
  34. package/dist/components/stats/stats.css +4 -4
  35. package/dist/components/teaser-card/teaser-card.css +10 -12
  36. package/dist/global.css +2 -2
  37. package/dist/static/favicon/android-chrome-192x192.png +0 -0
  38. package/dist/static/favicon/android-chrome-512x512.png +0 -0
  39. package/dist/static/favicon/apple-touch-icon.png +0 -0
  40. package/dist/static/favicon/favicon-16x16.png +0 -0
  41. package/dist/static/favicon/favicon-32x32.png +0 -0
  42. package/dist/static/favicon/favicon.ico +0 -0
  43. package/dist/static/favicon/site.webmanifest +1 -19
  44. package/dist/static/guenther/brands/cadillac.png +0 -0
  45. package/dist/static/guenther/brands/corvette.png +0 -0
  46. package/dist/static/guenther/brands/infiniti.png +0 -0
  47. package/dist/static/guenther/brands/isuzu.png +0 -0
  48. package/dist/static/guenther/brands/kia.png +0 -0
  49. package/dist/static/guenther/brands/maserati.png +0 -0
  50. package/dist/static/guenther/brands/micro.png +0 -0
  51. package/dist/static/guenther/brands/msg.png +0 -0
  52. package/dist/static/guenther/brands/nissan.png +0 -0
  53. package/dist/static/guenther/brands/saab.png +0 -0
  54. package/dist/static/guenther/brands/subaru.png +0 -0
  55. package/dist/static/guenther/car-1.webp +0 -0
  56. package/dist/static/guenther/car-2.webp +0 -0
  57. package/dist/static/guenther/car-cutout-1.avif +0 -0
  58. package/dist/static/guenther/car-cutout-2.avif +0 -0
  59. package/dist/static/guenther/car-cutout-3.png +0 -0
  60. package/dist/static/guenther/car-red.png +0 -0
  61. package/dist/static/guenther/car-store.png +0 -0
  62. package/dist/static/guenther/car-yellow.webp +0 -0
  63. package/dist/static/guenther/contact.jpg +0 -0
  64. package/dist/static/guenther/header-2.png +0 -0
  65. package/dist/static/guenther/header.jpg +0 -0
  66. package/dist/static/guenther/header.png +0 -0
  67. package/dist/static/guenther/kia-header.webp +0 -0
  68. package/dist/static/guenther/visual.png +0 -0
  69. package/dist/static/logo-inverted.svg +27 -12
  70. package/dist/static/logo.svg +27 -12
  71. package/dist/tokens/IconSprite.js +6 -0
  72. package/dist/tokens/icon-sprite.html +2 -0
  73. package/dist/tokens/themes.css +4 -4
  74. package/dist/tokens/tokens.css +249 -249
  75. package/dist/tokens/tokens.js +377 -376
  76. package/package.json +1 -1
  77. package/dist/static/favicon/browserconfig.xml +0 -9
  78. package/dist/static/favicon/favicon-192-192.png +0 -20
  79. package/dist/static/favicon/mstile-144x144.png +0 -0
  80. package/dist/static/favicon/mstile-150x150.png +0 -0
  81. package/dist/static/favicon/mstile-310x150.png +0 -0
  82. package/dist/static/favicon/mstile-310x310.png +0 -0
  83. package/dist/static/favicon/mstile-70x70.png +0 -0
  84. package/dist/static/favicon/safari-pinned-tab.svg +0 -30
  85. /package/dist/{BlogHeadProps-f5855e93.d.ts → BlogHeadProps-c04a5ed8.d.ts} +0 -0
  86. /package/dist/{BlogTeaserProps-d62a0a9a.d.ts → BlogTeaserProps-f5855e93.d.ts} +0 -0
@@ -3,8 +3,8 @@
3
3
  * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
4
4
  * and run json-schema-to-typescript to regenerate this file.
5
5
  */
6
- import { SectionProps } from "./SectionProps-21d04028.js";
7
- import { BlogTeaserProps } from "./BlogTeaserProps-d62a0a9a.js";
6
+ import { SectionProps } from "./SectionProps-2fd5dbde.js";
7
+ import { BlogTeaserProps } from "./BlogTeaserProps-f5855e93.js";
8
8
  import { CtaProps } from "./CtaProps-789f8508.js";
9
9
  import { SeoProps } from "./SeoProps-f2d6dcaa.js";
10
10
  /**
@@ -3,9 +3,9 @@
3
3
  * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
4
4
  * and run json-schema-to-typescript to regenerate this file.
5
5
  */
6
- import { BlogHeadProps } from "./BlogHeadProps-f5855e93.js";
6
+ import { BlogHeadProps } from "./BlogHeadProps-c04a5ed8.js";
7
7
  import { BlogAsideProps } from "./BlogAsideProps-c760fd2a.js";
8
- import { SectionProps } from "./SectionProps-21d04028.js";
8
+ import { SectionProps } from "./SectionProps-2fd5dbde.js";
9
9
  import { CtaProps } from "./CtaProps-789f8508.js";
10
10
  import { SeoProps } from "./SeoProps-f2d6dcaa.js";
11
11
  /**
@@ -3,7 +3,7 @@
3
3
  * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
4
4
  * and run json-schema-to-typescript to regenerate this file.
5
5
  */
6
- import { SectionProps } from "./SectionProps-21d04028.js";
6
+ import { SectionProps } from "./SectionProps-2fd5dbde.js";
7
7
  import { SeoProps } from "./SeoProps-f2d6dcaa.js";
8
8
  /**
9
9
  * Collection of sections (with their contents) to render on the page
@@ -28,7 +28,7 @@ type Width = "full" | "max" | "wide" | "default" | "narrow";
28
28
  /**
29
29
  * Style of background
30
30
  */
31
- type Style = "default" | "framed" | "deko";
31
+ type Style = "default" | "framed" | "shine-left" | "shine-right" | "carbon";
32
32
  /**
33
33
  * Color of background
34
34
  */
@@ -1,5 +1,5 @@
1
1
  /// <reference types="react" />
2
- import { BlogHeadProps } from "../../BlogHeadProps-f5855e93.js";
2
+ import { BlogHeadProps } from "../../BlogHeadProps-c04a5ed8.js";
3
3
  declare const BlogHeadContextDefault: import("react").ForwardRefExoticComponent<BlogHeadProps & import("react").RefAttributes<HTMLDivElement>>;
4
4
  declare const BlogHeadContext: import("react").Context<import("react").ForwardRefExoticComponent<BlogHeadProps & import("react").RefAttributes<HTMLDivElement>>>;
5
5
  declare const BlogHead: import("react").ForwardRefExoticComponent<BlogHeadProps & import("react").RefAttributes<HTMLDivElement>>;
@@ -39,7 +39,9 @@
39
39
  "enum": [
40
40
  "default",
41
41
  "framed",
42
- "deko"
42
+ "shine-left",
43
+ "shine-right",
44
+ "carbon"
43
45
  ],
44
46
  "default": "default"
45
47
  },
@@ -1,4 +1,4 @@
1
- import { BlogOverviewProps } from "../../BlogOverviewProps-d62a0a9a.js";
1
+ import { BlogOverviewProps } from "../../BlogOverviewProps-9f207f1c.js";
2
2
  import { FC, PropsWithChildren } from "react";
3
3
  declare const BlogOverview: FC<PropsWithChildren<BlogOverviewProps>>;
4
4
  export type { BlogOverviewProps };
@@ -311,7 +311,9 @@
311
311
  "enum": [
312
312
  "default",
313
313
  "framed",
314
- "deko"
314
+ "shine-left",
315
+ "shine-right",
316
+ "carbon"
315
317
  ],
316
318
  "default": "default"
317
319
  },
@@ -1,4 +1,4 @@
1
- import { BlogPostProps } from "../../BlogPostProps-c760fd2a.js";
1
+ import { BlogPostProps } from "../../BlogPostProps-6b3cff22.js";
2
2
  import { FC, PropsWithChildren } from "react";
3
3
  declare const BlogPost: FC<PropsWithChildren<BlogPostProps>>;
4
4
  export type { BlogPostProps };
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import { HTMLAttributes } from "react";
3
- import { BlogTeaserProps } from "../../BlogTeaserProps-d62a0a9a.js";
3
+ import { BlogTeaserProps } from "../../BlogTeaserProps-f5855e93.js";
4
4
  declare const BlogTeaserContextDefault: import("react").ForwardRefExoticComponent<BlogTeaserProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
5
5
  declare const BlogTeaserContext: import("react").Context<import("react").ForwardRefExoticComponent<BlogTeaserProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;
6
6
  declare const BlogTeaser: import("react").ForwardRefExoticComponent<BlogTeaserProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
@@ -1,8 +1,8 @@
1
1
  .dsa-button {
2
- --dsa-button--padding: 0.75em 1.5em;
2
+ --dsa-button--padding: 0.65em 1.5em;
3
3
  --dsa-button--border-width: var(--ks-border-width-default);
4
4
  --dsa-button--border-radius: var(--ks-border-radius-control);
5
- --dsa-button--font-weight: var(--ks-font-weight-semi-bold);
5
+ --dsa-button--font-weight: var(--ks-font-weight-regular);
6
6
  --dsa-button--text-transform: default;
7
7
  --dsa-button_small--font: var(--ks-font-interface-s);
8
8
  --dsa-button_medium--font: var(--ks-font-interface-m);
@@ -1,6 +1,6 @@
1
1
  .dsa-footer {
2
2
  --dsa-footer--background-color: var(--ks-background-color-default);
3
- --dsa-footer--border-top: 1px solid var(--ks-border-color-default);
3
+ --dsa-footer--border-top: none;
4
4
  --dsa-footer--max-width: var(--dsa-content--width_wide);
5
5
  --dsa-footer--gap-vertical: var(--ks-spacing-stack-m);
6
6
  --dsa-footer__byline--font: var(--ks-font-copy-xs);
@@ -8,9 +8,9 @@
8
8
  --dsa-footer__links--gap: var(--ks-spacing-stack-s) var(--ks-spacing-inline-m);
9
9
  --dsa-footer__link--font: var(--ks-font-interface-s);
10
10
  --dsa-footer__link--font-weight: var(--dsa-link--font-weight);
11
- --dsa-footer__link--color: var(--dsa-link--color);
11
+ --dsa-footer__link--color: var(--ks-text-color-interface-interactive);
12
12
  --dsa-footer__link--text-tecoration: none;
13
- --dsa-footer__link--text-tecoration_hover: underline;
13
+ --dsa-footer__link--text-tecoration_hover: none;
14
14
  --dsa-footer__logo--height: 1.5rem;
15
15
  }
16
16
  @media (min-width: 62em) {
@@ -107,43 +107,51 @@
107
107
  "examples": [
108
108
  [
109
109
  {
110
- "label": "Active Item",
110
+ "label": "Fahrzeugsuche",
111
111
  "url": "#",
112
112
  "active": true
113
113
  },
114
114
  {
115
- "label": "Navigation Item",
116
- "url": "#"
117
- },
118
- {
119
- "label": "Dropdown",
115
+ "label": "Marken",
120
116
  "url": "#",
121
117
  "items": [
122
118
  {
123
- "label": "Level 2 Item",
119
+ "label": "Nissan",
124
120
  "url": "#"
125
121
  },
126
122
  {
127
- "label": "Active Item",
123
+ "label": "Kia",
128
124
  "active": true,
129
125
  "url": "#"
130
126
  },
131
127
  {
132
- "label": "An Item with a longer Label",
128
+ "label": "Maserati",
133
129
  "url": "#"
134
130
  },
135
131
  {
136
- "label": "And One last one",
132
+ "label": "Corvette",
137
133
  "url": "#"
138
134
  }
139
135
  ]
140
136
  },
141
137
  {
142
- "label": "One more Item",
138
+ "label": "Standorte",
139
+ "url": "#"
140
+ },
141
+ {
142
+ "label": "Bonusprogramm",
143
+ "url": "#"
144
+ },
145
+ {
146
+ "label": "News",
147
+ "url": "#"
148
+ },
149
+ {
150
+ "label": "Jobs",
143
151
  "url": "#"
144
152
  },
145
153
  {
146
- "label": "Last Item",
154
+ "label": "Kontakt",
147
155
  "url": "#"
148
156
  }
149
157
  ]
@@ -120,43 +120,51 @@
120
120
  "examples": [
121
121
  [
122
122
  {
123
- "label": "Active Item",
123
+ "label": "Fahrzeugsuche",
124
124
  "url": "#",
125
125
  "active": true
126
126
  },
127
127
  {
128
- "label": "Navigation Item",
129
- "url": "#"
130
- },
131
- {
132
- "label": "Dropdown",
128
+ "label": "Marken",
133
129
  "url": "#",
134
130
  "items": [
135
131
  {
136
- "label": "Level 2 Item",
132
+ "label": "Nissan",
137
133
  "url": "#"
138
134
  },
139
135
  {
140
- "label": "Active Item",
136
+ "label": "Kia",
141
137
  "active": true,
142
138
  "url": "#"
143
139
  },
144
140
  {
145
- "label": "An Item with a longer Label",
141
+ "label": "Maserati",
146
142
  "url": "#"
147
143
  },
148
144
  {
149
- "label": "And One last one",
145
+ "label": "Corvette",
150
146
  "url": "#"
151
147
  }
152
148
  ]
153
149
  },
154
150
  {
155
- "label": "One more Item",
151
+ "label": "Standorte",
152
+ "url": "#"
153
+ },
154
+ {
155
+ "label": "Bonusprogramm",
156
+ "url": "#"
157
+ },
158
+ {
159
+ "label": "News",
160
+ "url": "#"
161
+ },
162
+ {
163
+ "label": "Jobs",
156
164
  "url": "#"
157
165
  },
158
166
  {
159
- "label": "Last Item",
167
+ "label": "Kontakt",
160
168
  "url": "#"
161
169
  }
162
170
  ]
@@ -2,12 +2,12 @@
2
2
  --dsa-headline--color: var(--ks-text-color-display);
3
3
  --dsa-headline--font-weight: var(--ks-font-weight-semi-bold);
4
4
  --dsa-headline--text-transform: none;
5
- --dsa-headline--gap: 0.35em;
5
+ --dsa-headline--gap: 0.5em;
6
6
  --dsa-headline--space-after_large: var(--ks-spacing-stack-l);
7
7
  --dsa-headline--space-after_small: var(--ks-spacing-stack-m);
8
8
  --dsa-headline--space-after_minimum: var(--ks-spacing-stack-s);
9
9
  --dsa-headline--higlight-background: var(--dsa-typo--highlight);
10
- --dsa-headline__subheadline--color: var(--ks-color-fg-alpha-4);
10
+ --dsa-headline__subheadline--color: var(--ks-color-fg-to-bg-4);
11
11
  --dsa-headline__subheadline--font-weight: var(--ks-font-weight-bold);
12
12
  --dsa-headline__subheadline--text-transform: uppercase;
13
13
  --dsa-headline__subheadline--letter-spacing: 0.045em;
@@ -64,6 +64,48 @@
64
64
  --headline--space-after_small: var(--dsa-headline_h1--space-after_small);
65
65
  --headline--space-after_large: var(--dsa-headline_h1--space-after_large);
66
66
  }
67
+ .dsa-headline--h1 .dsa-headline__headline:not(:last-child),
68
+ .dsa-headline--h1 .dsa-headline__headline:only-child {
69
+ display: flex;
70
+ flex-direction: column;
71
+ }
72
+ .dsa-headline--h1 .dsa-headline__headline:not(:last-child):after,
73
+ .dsa-headline--h1 .dsa-headline__headline:only-child:after {
74
+ content: "";
75
+ font-size: inherit;
76
+ background-color: var(--ks-color-primary);
77
+ height: 3px;
78
+ width: 17%;
79
+ min-width: 5rem;
80
+ max-width: 10rem;
81
+ margin-top: var(--dsa-headline--gap);
82
+ }
83
+ .dsa-headline--h1 .dsa-headline__headline:not(:first-child) {
84
+ display: flex;
85
+ flex-direction: column;
86
+ }
87
+ .dsa-headline--h1 .dsa-headline__headline:not(:first-child):before {
88
+ content: "";
89
+ font-size: inherit;
90
+ background-color: var(--ks-color-primary);
91
+ height: 3px;
92
+ width: 30%;
93
+ min-width: 3rem;
94
+ max-width: 4rem;
95
+ margin-bottom: var(--dsa-headline--gap);
96
+ }
97
+ .dsa-headline--h1.dsa-headline--align-center .dsa-headline__headline,
98
+ .dsa-headline--h1.dsa-headline--align-center .dsa-headline__subheadline {
99
+ align-items: center;
100
+ }
101
+ .dsa-headline--h1.dsa-headline--align-left .dsa-headline__headline,
102
+ .dsa-headline--h1.dsa-headline--align-left .dsa-headline__subheadline {
103
+ align-items: flex-start;
104
+ }
105
+ .dsa-headline--h1.dsa-headline--align-right .dsa-headline__headline,
106
+ .dsa-headline--h1.dsa-headline--align-right .dsa-headline__subheadline {
107
+ align-items: flex-end;
108
+ }
67
109
  .dsa-headline--h2 {
68
110
  font: var(--dsa-headline_h2--font, var(--ks-font-display-xl));
69
111
  --subheadline--font-size: var(--dsa-headline_h2__subheadline--font-size, 50%);
@@ -32,6 +32,16 @@
32
32
  var(--ks-color-primary-alpha-5) 0%,
33
33
  var(--ks-color-bg-alpha-4) 100%
34
34
  );
35
+ --dsa-hero_corner__overlay--background: linear-gradient(
36
+ 40deg,
37
+ var(--ks-background-color-default) 15%,
38
+ transparent 50%
39
+ );
40
+ --dsa-hero_left__overlay--background: radial-gradient(
41
+ 100% 200% at 0% 50%,
42
+ var(--ks-color-bg-alpha-3) 15%,
43
+ var(--ks-color-bg-alpha-9) 50%
44
+ );
35
45
  --dsa-hero_offset__textbox--max-width: var(--dsa-content--width_default);
36
46
  --dsa-hero_offset__textbox--offset: -10%;
37
47
  --dsa-hero_offset__overlay--background: linear-gradient(
@@ -128,6 +138,18 @@
128
138
  .c-visual.dsa-hero .dsa-headline .dsa-headline__subheadline {
129
139
  color: var(--dsa-hero__subheadline--color, var(--dsa-headline__subheadline--color, var(--ks-text-color-primary)));
130
140
  }
141
+ .c-visual.dsa-hero--content-corner {
142
+ --c-visual_overlay--background: var(
143
+ --dsa-hero_corner__overlay--background,
144
+ linear-gradient(40deg, var(--ks-background-color-default) 15%, transparent 50%)
145
+ );
146
+ }
147
+ .c-visual.dsa-hero--content-left {
148
+ --c-visual_overlay--background: var(
149
+ --dsa-hero_left__overlay--background,
150
+ linear-gradient(40deg, var(--ks-background-color-default) 15%, transparent 50%)
151
+ );
152
+ }
131
153
  .c-visual.dsa-hero .c-button-group {
132
154
  --c-button-group--vertical-gutter: var(--ks-spacing-stack-m);
133
155
  --c-button-group--horizontal-gutter: var(--ks-spacing-inline-m);
@@ -29,8 +29,8 @@ interface SettingsProps {
29
29
  seo: SeoProps;
30
30
  iconSprite?: IconSprite;
31
31
  }
32
- export * from "../../BlogPostProps-c760fd2a.js";
33
- export * from "../../BlogOverviewProps-d62a0a9a.js";
32
+ export * from "../../BlogPostProps-6b3cff22.js";
33
+ export * from "../../BlogOverviewProps-9f207f1c.js";
34
34
  export * from "../../PageProps-aa29c554.js";
35
35
  export { IconSprite, SettingsProps };
36
36
  export * from "../../EventDetailProps-42a7eebe.js";
@@ -1,5 +1,5 @@
1
1
  .dsa-nav-dropdown {
2
- --dsa-nav-dropdown--padding: var(--ks-spacing-xxs) var(--ks-spacing-xxs) var(--ks-spacing-m) var(--ks-spacing-xxs);
2
+ --dsa-nav-dropdown--padding: var(--ks-spacing-xs) var(--ks-spacing-xxs);
3
3
  --dsa-nav-dropdown--background: var(--ks-background-color-default);
4
4
  --dsa-nav-dropdown--border-radius: var(--ks-border-radius-card);
5
5
  --dsa-nav-dropdown--box-shadow: var(--ks-box-shadow-card);
@@ -8,7 +8,7 @@
8
8
  --dsa-nav-dropdown__label--color: var(--ks-color-fg);
9
9
  --dsa-nav-dropdown__label--color_hover: var(--ks-text-color-interface-interactive-hover);
10
10
  --dsa-nav-dropdown__label--color_active: var(--ks-text-color-interface-interactive-active);
11
- --dsa-nav-dropdown__label--background-color_hover: var(--ks-color-fg-alpha-8);
11
+ --dsa-nav-dropdown__label--background-color_hover: unset;
12
12
  --dsa-nav-dropdown__label--background-color_active: unset;
13
13
  --dsa-nav-dropdown__label--border-radius: var(--ks-border-radius-control);
14
14
  --dsa-nav-dropdown__label--font: var(--ks-font-interface-s);
@@ -16,7 +16,7 @@
16
16
  --dsa-nav-dropdown__label--font-weight: var(--ks-font-weight-semi-bold);
17
17
  --dsa-nav-dropdown__label--font-weight_active: var(--ks-font-weight-bold);
18
18
  --dsa-nav-dropdown__label--padding: 0.45em 0.75em;
19
- --dsa-nav-dropdown__label_dimmed--opacity: 1;
19
+ --dsa-nav-dropdown__label_dimmed--opacity: 0.6;
20
20
  }
21
21
  .dsa-nav-dropdown[ks-inverted=true] {
22
22
  --dsa-nav-dropdown--background: var(--ks-color-fg-inverted);
@@ -48,43 +48,51 @@
48
48
  "examples": [
49
49
  [
50
50
  {
51
- "label": "Active Item",
51
+ "label": "Fahrzeugsuche",
52
52
  "url": "#",
53
53
  "active": true
54
54
  },
55
55
  {
56
- "label": "Navigation Item",
57
- "url": "#"
58
- },
59
- {
60
- "label": "Dropdown",
56
+ "label": "Marken",
61
57
  "url": "#",
62
58
  "items": [
63
59
  {
64
- "label": "Level 2 Item",
60
+ "label": "Nissan",
65
61
  "url": "#"
66
62
  },
67
63
  {
68
- "label": "Active Item",
64
+ "label": "Kia",
69
65
  "active": true,
70
66
  "url": "#"
71
67
  },
72
68
  {
73
- "label": "An Item with a longer Label",
69
+ "label": "Maserati",
74
70
  "url": "#"
75
71
  },
76
72
  {
77
- "label": "And One last one",
73
+ "label": "Corvette",
78
74
  "url": "#"
79
75
  }
80
76
  ]
81
77
  },
82
78
  {
83
- "label": "One more Item",
79
+ "label": "Standorte",
80
+ "url": "#"
81
+ },
82
+ {
83
+ "label": "Bonusprogramm",
84
+ "url": "#"
85
+ },
86
+ {
87
+ "label": "News",
88
+ "url": "#"
89
+ },
90
+ {
91
+ "label": "Jobs",
84
92
  "url": "#"
85
93
  },
86
94
  {
87
- "label": "Last Item",
95
+ "label": "Kontakt",
88
96
  "url": "#"
89
97
  }
90
98
  ]
@@ -119,43 +119,51 @@
119
119
  "examples": [
120
120
  [
121
121
  {
122
- "label": "Active Item",
122
+ "label": "Fahrzeugsuche",
123
123
  "url": "#",
124
124
  "active": true
125
125
  },
126
126
  {
127
- "label": "Navigation Item",
128
- "url": "#"
129
- },
130
- {
131
- "label": "Dropdown",
127
+ "label": "Marken",
132
128
  "url": "#",
133
129
  "items": [
134
130
  {
135
- "label": "Level 2 Item",
131
+ "label": "Nissan",
136
132
  "url": "#"
137
133
  },
138
134
  {
139
- "label": "Active Item",
135
+ "label": "Kia",
140
136
  "active": true,
141
137
  "url": "#"
142
138
  },
143
139
  {
144
- "label": "An Item with a longer Label",
140
+ "label": "Maserati",
145
141
  "url": "#"
146
142
  },
147
143
  {
148
- "label": "And One last one",
144
+ "label": "Corvette",
149
145
  "url": "#"
150
146
  }
151
147
  ]
152
148
  },
153
149
  {
154
- "label": "One more Item",
150
+ "label": "Standorte",
151
+ "url": "#"
152
+ },
153
+ {
154
+ "label": "Bonusprogramm",
155
+ "url": "#"
156
+ },
157
+ {
158
+ "label": "News",
159
+ "url": "#"
160
+ },
161
+ {
162
+ "label": "Jobs",
155
163
  "url": "#"
156
164
  },
157
165
  {
158
- "label": "Last Item",
166
+ "label": "Kontakt",
159
167
  "url": "#"
160
168
  }
161
169
  ]
@@ -45,43 +45,51 @@
45
45
  "examples": [
46
46
  [
47
47
  {
48
- "label": "Active Item",
48
+ "label": "Fahrzeugsuche",
49
49
  "url": "#",
50
50
  "active": true
51
51
  },
52
52
  {
53
- "label": "Navigation Item",
54
- "url": "#"
55
- },
56
- {
57
- "label": "Dropdown",
53
+ "label": "Marken",
58
54
  "url": "#",
59
55
  "items": [
60
56
  {
61
- "label": "Level 2 Item",
57
+ "label": "Nissan",
62
58
  "url": "#"
63
59
  },
64
60
  {
65
- "label": "Active Item",
61
+ "label": "Kia",
66
62
  "active": true,
67
63
  "url": "#"
68
64
  },
69
65
  {
70
- "label": "An Item with a longer Label",
66
+ "label": "Maserati",
71
67
  "url": "#"
72
68
  },
73
69
  {
74
- "label": "And One last one",
70
+ "label": "Corvette",
75
71
  "url": "#"
76
72
  }
77
73
  ]
78
74
  },
79
75
  {
80
- "label": "One more Item",
76
+ "label": "Standorte",
77
+ "url": "#"
78
+ },
79
+ {
80
+ "label": "Bonusprogramm",
81
+ "url": "#"
82
+ },
83
+ {
84
+ "label": "News",
85
+ "url": "#"
86
+ },
87
+ {
88
+ "label": "Jobs",
81
89
  "url": "#"
82
90
  },
83
91
  {
84
- "label": "Last Item",
92
+ "label": "Kontakt",
85
93
  "url": "#"
86
94
  }
87
95
  ]
@@ -3,16 +3,16 @@
3
3
  --dsa-nav-topbar__label--color_hover: var(--ks-text-color-interface-interactive-hover);
4
4
  --dsa-nav-topbar__label--color_active: var(--ks-text-color-interface-interactive-active);
5
5
  --dsa-nav-topbar__label--background-color: transparent;
6
- --dsa-nav-topbar__label--background-color_hover: var(--ks-color-fg-alpha-8);
6
+ --dsa-nav-topbar__label--background-color_hover: transparent;
7
7
  --dsa-nav-topbar__label--background-color_active: transparent;
8
- --dsa-nav-topbar__label--font-size: var(--ks-font-size-interface-s);
8
+ --dsa-nav-topbar__label--font-size: calc(var(--ks-font-size-interface-s) * 1.15);
9
9
  --dsa-nav-topbar__label--font-family: var(--ks-font-family-display);
10
10
  --dsa-nav-topbar__label--font-weight: var(--ks-font-weight-semi-bold);
11
11
  --dsa-nav-topbar__label--font-weight_active: var(--ks-font-weight-bold);
12
12
  --dsa-nav-topbar__label--padding: 0.45em 0.75em;
13
13
  --dsa-nav-topbar__label--text-decoration: none;
14
14
  --dsa-nav-topbar__label--text-decoration_hover: none;
15
- --dsa-nav-topbar__label_dimmed--opacity: 1;
15
+ --dsa-nav-topbar__label_dimmed--opacity: 0.6;
16
16
  --dsa-nav-topbar__label--transition: var(--ks-transition-hover);
17
17
  --dsa-nav-topbar__label--transition-property: background-color, color, opacity;
18
18
  --dsa-nav-topbar__label__icon--size: 1.5em;