comand-component-library 3.1.92 → 3.1.94
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/comand-component-library.css +1 -1
- package/dist/comand-component-library.umd.min.js +1 -1
- package/package.json +2 -2
- package/src/App.vue +71 -23
- package/src/assets/data/company-logo.json +5 -2
- package/src/assets/data/main-navigation.json +36 -34
- package/src/assets/fonts/iconfonts/logos-iconfont/icomoon.woff +0 -0
- package/src/assets/fonts/iconfonts/logos-iconfont/images/flags/flag-cn.svg +26 -0
- package/src/assets/fonts/iconfonts/logos-iconfont/images/flags/flag-de.svg +76 -0
- package/src/assets/fonts/iconfonts/logos-iconfont/images/flags/flag-en.svg +76 -0
- package/src/assets/fonts/iconfonts/logos-iconfont/images/flags/flag-es.svg +83 -0
- package/src/assets/fonts/iconfonts/logos-iconfont/images/flags/flag-fr.svg +76 -0
- package/src/assets/fonts/iconfonts/logos-iconfont/images/flags/flag-it.svg +76 -0
- package/src/assets/fonts/iconfonts/logos-iconfont/images/flags/flag-ru.svg +76 -0
- package/src/assets/styles/logos-iconfont.css +29 -23
- package/src/components/CmdBox.vue +4 -1
- package/src/components/CmdCompanyLogo.vue +2 -0
- package/src/components/CmdFormElement.vue +20 -19
- package/src/components/CmdLoginForm.vue +1 -1
- package/src/components/CmdMainNavigation.vue +2 -0
- package/src/components/CmdSiteHeader.vue +87 -11
- package/src/documentation/generated/CmdSiteHeaderPropertyDescriptions.json +15 -0
- package/src/assets/images/logo-darkmode.svg +0 -44
- package/src/assets/images/logo.svg +0 -209
@@ -0,0 +1,76 @@
|
|
1
|
+
<?xml version="1.0" encoding="utf-8"?>
|
2
|
+
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
3
|
+
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
4
|
+
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
5
|
+
width="850.394px" height="566.929px" viewBox="0 0 850.394 566.929" enable-background="new 0 0 850.394 566.929"
|
6
|
+
xml:space="preserve">
|
7
|
+
<g id="it">
|
8
|
+
<g>
|
9
|
+
<rect fill="#078E46" width="283.465" height="566.929"/>
|
10
|
+
<rect x="283.465" fill="#FBFDFF" width="283.465" height="566.929"/>
|
11
|
+
<rect x="566.93" fill="#D3242C" width="283.465" height="566.929"/>
|
12
|
+
</g>
|
13
|
+
</g>
|
14
|
+
<g id="de" display="none">
|
15
|
+
<g display="inline">
|
16
|
+
<desc>Flag of Germany</desc>
|
17
|
+
<rect id="black_stripe" x="0.901" fill="#010202" width="849.492" height="566.929"/>
|
18
|
+
<rect id="red_stripe" x="0.901" y="188.977" fill="#DD0B15" width="849.492" height="377.953"/>
|
19
|
+
<rect id="gold_stripe" x="0.901" y="377.953" fill="#FFCE05" width="849.492" height="188.976"/>
|
20
|
+
</g>
|
21
|
+
</g>
|
22
|
+
<g id="fr" display="none">
|
23
|
+
<g display="inline">
|
24
|
+
<rect x="0.901" fill="#CF1327" width="849.492" height="566.929"/>
|
25
|
+
<rect x="0.901" fill="#FFFFFF" width="566.328" height="566.929"/>
|
26
|
+
<rect x="0.901" fill="#1D2C4E" width="283.164" height="566.929"/>
|
27
|
+
</g>
|
28
|
+
</g>
|
29
|
+
<g id="ru" display="none">
|
30
|
+
<g display="inline">
|
31
|
+
<rect fill="#FFFFFF" width="850.395" height="283.465"/>
|
32
|
+
<rect y="283.465" fill="#D52D1E" width="850.395" height="283.464"/>
|
33
|
+
<rect y="188.977" fill="#1E4295" width="850.395" height="188.977"/>
|
34
|
+
</g>
|
35
|
+
</g>
|
36
|
+
<g id="cn" display="none">
|
37
|
+
<g display="inline">
|
38
|
+
<rect x="0.901" fill="#DF2B14" width="849.493" height="566.929"/>
|
39
|
+
<g transform="translate(5,5) scale(3)">
|
40
|
+
<path id="s" fill="#FFDE08" d="M142.483,56.693l49.932,153.838L61.692,115.454h161.583L92.551,210.531L142.483,56.693z"/>
|
41
|
+
</g>
|
42
|
+
<g transform="translate(10,2) rotate(23.036243)">
|
43
|
+
<path id="s_1_" fill="#FFDE08" d="M295.146,30.607l-4.728,53.71l-27.711-46.234l49.566,21.099l-52.488,12.096L295.146,30.607z"/>
|
44
|
+
</g>
|
45
|
+
<g transform="translate(12,4) rotate(45.869898)">
|
46
|
+
<path id="s_2_" fill="#FFDE08" d="M361.022,93.648l-25.178,47.665l-7.617-53.376l37.503,38.701l-53.064-9.243L361.022,93.648z"/>
|
47
|
+
</g>
|
48
|
+
<g transform="translate(12,7) rotate(69.945396)">
|
49
|
+
<path id="s_3_" fill="#FFDE08" d="M367.298,188.705l-42.412,33.236l14.797-51.844l18.47,50.649l-44.682-30.108L367.298,188.705z"
|
50
|
+
/>
|
51
|
+
</g>
|
52
|
+
<g transform="translate(10,9) rotate(20.659808)">
|
53
|
+
<path id="s_4_" fill="#FFDE08" d="M294.056,228.595l-2.5,53.86l-29.603-45.045l50.397,19.024l-51.942,14.264L294.056,228.595z"/>
|
54
|
+
</g>
|
55
|
+
</g>
|
56
|
+
</g>
|
57
|
+
<g id="uk" display="none">
|
58
|
+
<g display="inline">
|
59
|
+
<rect y="0.002" fill="#FFFFFF" width="850.16" height="566.865"/>
|
60
|
+
<polygon fill="#CF172C" points="382.569,0 382.569,226.625 0,226.625 0,339.948 382.569,339.948 382.569,566.863 467.592,566.863
|
61
|
+
467.592,339.948 850.16,339.948 850.16,226.625 467.592,226.625 467.592,0 "/>
|
62
|
+
<polygon fill="#25346C" points="495.946,0 495.946,183.497 771.202,0 "/>
|
63
|
+
<polygon fill="#25346C" points="495.946,566.863 771.202,566.863 495.946,383.368 "/>
|
64
|
+
<polygon fill="#25346C" points="78.96,566.863 354.214,566.863 354.214,383.368 "/>
|
65
|
+
<polygon fill="#25346C" points="78.96,0 354.214,183.497 354.214,0 "/>
|
66
|
+
<polygon fill="#25346C" points="0.003,188.95 204.392,188.95 0.003,52.699 "/>
|
67
|
+
<polygon fill="#25346C" points="645.768,188.95 850.16,188.95 850.16,52.699 "/>
|
68
|
+
<polygon fill="#25346C" points="645.768,377.913 850.16,514.171 850.16,377.913 "/>
|
69
|
+
<polygon fill="#25346C" points="0,377.913 0,514.171 204.392,377.913 "/>
|
70
|
+
<polygon fill="#CF172C" points="802.938,0 520.004,188.95 567.223,188.95 850.605,0 "/>
|
71
|
+
<polygon fill="#CF172C" points="330.156,377.909 282.937,377.909 0,566.852 47.219,566.852 330.602,377.909 "/>
|
72
|
+
<polygon fill="#CF172C" points="0,0 0,31.692 236.091,189.098 283.311,189.098 "/>
|
73
|
+
<polygon fill="#CF172C" points="566.696,377.832 850.008,566.929 850.01,535.239 613.92,377.832 "/>
|
74
|
+
</g>
|
75
|
+
</g>
|
76
|
+
</svg>
|
@@ -0,0 +1,76 @@
|
|
1
|
+
<?xml version="1.0" encoding="utf-8"?>
|
2
|
+
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
3
|
+
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
4
|
+
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
5
|
+
width="850.394px" height="566.929px" viewBox="0 0 850.394 566.929" enable-background="new 0 0 850.394 566.929"
|
6
|
+
xml:space="preserve">
|
7
|
+
<g id="it">
|
8
|
+
<g>
|
9
|
+
<rect fill="#078E46" width="283.465" height="566.929"/>
|
10
|
+
<rect x="283.465" fill="#FBFDFF" width="283.465" height="566.929"/>
|
11
|
+
<rect x="566.93" fill="#D3242C" width="283.465" height="566.929"/>
|
12
|
+
</g>
|
13
|
+
</g>
|
14
|
+
<g id="de">
|
15
|
+
<g>
|
16
|
+
<desc>Flag of Germany</desc>
|
17
|
+
<rect id="black_stripe" x="0.901" fill="#010202" width="849.492" height="566.929"/>
|
18
|
+
<rect id="red_stripe" x="0.901" y="188.977" fill="#DD0B15" width="849.492" height="377.953"/>
|
19
|
+
<rect id="gold_stripe" x="0.901" y="377.953" fill="#FFCE05" width="849.492" height="188.976"/>
|
20
|
+
</g>
|
21
|
+
</g>
|
22
|
+
<g id="fr">
|
23
|
+
<g>
|
24
|
+
<rect x="0.901" fill="#CF1327" width="849.492" height="566.929"/>
|
25
|
+
<rect x="0.901" fill="#FFFFFF" width="566.328" height="566.929"/>
|
26
|
+
<rect x="0.901" fill="#1D2C4E" width="283.164" height="566.929"/>
|
27
|
+
</g>
|
28
|
+
</g>
|
29
|
+
<g id="ru">
|
30
|
+
<g>
|
31
|
+
<rect fill="#FFFFFF" width="850.395" height="283.465"/>
|
32
|
+
<rect y="283.465" fill="#D52D1E" width="850.395" height="283.464"/>
|
33
|
+
<rect y="188.977" fill="#1E4295" width="850.395" height="188.977"/>
|
34
|
+
</g>
|
35
|
+
</g>
|
36
|
+
<g id="cn" display="none">
|
37
|
+
<g display="inline">
|
38
|
+
<rect x="0.901" fill="#DF2B14" width="849.493" height="566.929"/>
|
39
|
+
<g transform="translate(5,5) scale(3)">
|
40
|
+
<path id="s" fill="#FFDE08" d="M142.483,56.693l49.932,153.838L61.692,115.454h161.583L92.551,210.531L142.483,56.693z"/>
|
41
|
+
</g>
|
42
|
+
<g transform="translate(10,2) rotate(23.036243)">
|
43
|
+
<path id="s_1_" fill="#FFDE08" d="M295.146,30.607l-4.728,53.71l-27.711-46.234l49.566,21.099l-52.488,12.096L295.146,30.607z"/>
|
44
|
+
</g>
|
45
|
+
<g transform="translate(12,4) rotate(45.869898)">
|
46
|
+
<path id="s_2_" fill="#FFDE08" d="M361.022,93.648l-25.178,47.665l-7.617-53.376l37.503,38.701l-53.064-9.243L361.022,93.648z"/>
|
47
|
+
</g>
|
48
|
+
<g transform="translate(12,7) rotate(69.945396)">
|
49
|
+
<path id="s_3_" fill="#FFDE08" d="M367.298,188.705l-42.412,33.236l14.797-51.844l18.47,50.649l-44.682-30.108L367.298,188.705z"
|
50
|
+
/>
|
51
|
+
</g>
|
52
|
+
<g transform="translate(10,9) rotate(20.659808)">
|
53
|
+
<path id="s_4_" fill="#FFDE08" d="M294.056,228.595l-2.5,53.86l-29.603-45.045l50.397,19.024l-51.942,14.264L294.056,228.595z"/>
|
54
|
+
</g>
|
55
|
+
</g>
|
56
|
+
</g>
|
57
|
+
<g id="uk" display="none">
|
58
|
+
<g display="inline">
|
59
|
+
<rect y="0.002" fill="#FFFFFF" width="850.16" height="566.865"/>
|
60
|
+
<polygon fill="#CF172C" points="382.569,0 382.569,226.625 0,226.625 0,339.948 382.569,339.948 382.569,566.863 467.592,566.863
|
61
|
+
467.592,339.948 850.16,339.948 850.16,226.625 467.592,226.625 467.592,0 "/>
|
62
|
+
<polygon fill="#25346C" points="495.946,0 495.946,183.497 771.202,0 "/>
|
63
|
+
<polygon fill="#25346C" points="495.946,566.863 771.202,566.863 495.946,383.368 "/>
|
64
|
+
<polygon fill="#25346C" points="78.96,566.863 354.214,566.863 354.214,383.368 "/>
|
65
|
+
<polygon fill="#25346C" points="78.96,0 354.214,183.497 354.214,0 "/>
|
66
|
+
<polygon fill="#25346C" points="0.003,188.95 204.392,188.95 0.003,52.699 "/>
|
67
|
+
<polygon fill="#25346C" points="645.768,188.95 850.16,188.95 850.16,52.699 "/>
|
68
|
+
<polygon fill="#25346C" points="645.768,377.913 850.16,514.171 850.16,377.913 "/>
|
69
|
+
<polygon fill="#25346C" points="0,377.913 0,514.171 204.392,377.913 "/>
|
70
|
+
<polygon fill="#CF172C" points="802.938,0 520.004,188.95 567.223,188.95 850.605,0 "/>
|
71
|
+
<polygon fill="#CF172C" points="330.156,377.909 282.937,377.909 0,566.852 47.219,566.852 330.602,377.909 "/>
|
72
|
+
<polygon fill="#CF172C" points="0,0 0,31.692 236.091,189.098 283.311,189.098 "/>
|
73
|
+
<polygon fill="#CF172C" points="566.696,377.832 850.008,566.929 850.01,535.239 613.92,377.832 "/>
|
74
|
+
</g>
|
75
|
+
</g>
|
76
|
+
</svg>
|
@@ -1,8 +1,8 @@
|
|
1
|
-
/* logos-iconfont.css - last update:
|
1
|
+
/* logos-iconfont.css - last update: 2022/09/22 - IT IS NOT RECOMMENDED TO EDIT THIS FILE (TO AVOID TROUBLESHOOTING AFTER UPDATING) - DO CHANGES IN template.css OR YOUR OWN iconfont-css-file */
|
2
2
|
|
3
3
|
@font-face {
|
4
4
|
font-family: 'icomoon';
|
5
|
-
src: url('../fonts/iconfonts/logos-iconfont/icomoon.woff?
|
5
|
+
src: url('../fonts/iconfonts/logos-iconfont/icomoon.woff?fgweog') format('woff');
|
6
6
|
font-weight: normal;
|
7
7
|
font-style: normal;
|
8
8
|
font-display: block;
|
@@ -56,66 +56,72 @@
|
|
56
56
|
.icon-git:before {
|
57
57
|
content: "\b10a";
|
58
58
|
}
|
59
|
-
.icon-
|
59
|
+
.icon-github:before {
|
60
60
|
content: "\b10b";
|
61
61
|
}
|
62
|
-
.icon-
|
62
|
+
.icon-google-analytics:before {
|
63
63
|
content: "\b10c";
|
64
64
|
}
|
65
|
-
.icon-
|
65
|
+
.icon-html5:before {
|
66
66
|
content: "\b10d";
|
67
67
|
}
|
68
|
-
.icon-
|
68
|
+
.icon-instagram:before {
|
69
69
|
content: "\b10e";
|
70
70
|
}
|
71
|
-
.icon-linkedin
|
71
|
+
.icon-linkedin:before {
|
72
72
|
content: "\b10f";
|
73
73
|
}
|
74
|
-
.icon-
|
74
|
+
.icon-linkedin-square:before {
|
75
75
|
content: "\b110";
|
76
76
|
}
|
77
|
-
.icon-
|
77
|
+
.icon-linux:before {
|
78
78
|
content: "\b111";
|
79
79
|
}
|
80
|
-
.icon-
|
80
|
+
.icon-meta:before {
|
81
81
|
content: "\b112";
|
82
82
|
}
|
83
|
-
.icon-
|
83
|
+
.icon-opera:before {
|
84
84
|
content: "\b113";
|
85
85
|
}
|
86
|
-
.icon-
|
86
|
+
.icon-paypal:before {
|
87
87
|
content: "\b114";
|
88
88
|
}
|
89
|
-
.icon-
|
89
|
+
.icon-safari:before {
|
90
90
|
content: "\b115";
|
91
91
|
}
|
92
|
-
.icon-
|
92
|
+
.icon-skype:before {
|
93
93
|
content: "\b116";
|
94
94
|
}
|
95
|
-
.icon-tumblr
|
95
|
+
.icon-tumblr:before {
|
96
96
|
content: "\b117";
|
97
97
|
}
|
98
|
-
.icon-
|
98
|
+
.icon-tumblr-square:before {
|
99
99
|
content: "\b118";
|
100
100
|
}
|
101
|
-
.icon-
|
101
|
+
.icon-twitch:before {
|
102
102
|
content: "\b119";
|
103
103
|
}
|
104
|
-
.icon-twitter
|
104
|
+
.icon-twitter:before {
|
105
105
|
content: "\b11a";
|
106
106
|
}
|
107
|
-
.icon-
|
107
|
+
.icon-twitter-square:before {
|
108
108
|
content: "\b11b";
|
109
109
|
}
|
110
|
-
.icon-
|
110
|
+
.icon-vue:before {
|
111
111
|
content: "\b11c";
|
112
112
|
}
|
113
|
-
.icon-
|
113
|
+
.icon-whatsapp:before {
|
114
114
|
content: "\b11d";
|
115
115
|
}
|
116
|
-
.icon-
|
116
|
+
.icon-windows8:before {
|
117
117
|
content: "\b11e";
|
118
118
|
}
|
119
|
-
.icon-
|
119
|
+
.icon-xing:before {
|
120
120
|
content: "\b11f";
|
121
121
|
}
|
122
|
+
.icon-xing-square:before {
|
123
|
+
content: "\b120";
|
124
|
+
}
|
125
|
+
.icon-youtube:before {
|
126
|
+
content: "\b121";
|
127
|
+
}
|
@@ -26,7 +26,10 @@
|
|
26
26
|
<!-- begin header for collapsible -->
|
27
27
|
<a v-if="collapsible" class="box-header" href="#" :title="open ? iconOpen.tooltip : iconClosed.tooltip" @click.prevent="toggleContentVisibility">
|
28
28
|
<!-- begin CmdHeadline -->
|
29
|
-
<CmdHeadline
|
29
|
+
<CmdHeadline
|
30
|
+
v-if="cmdHeadline?.headlineText"
|
31
|
+
v-bind="cmdHeadline"
|
32
|
+
/>
|
30
33
|
<!-- end CmdHeadline -->
|
31
34
|
<span class="toggle-icon" :class="[open ? iconOpen.iconClass : iconClosed.iconClass]"></span>
|
32
35
|
</a>
|
@@ -1,23 +1,24 @@
|
|
1
1
|
<template>
|
2
|
-
<label
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
2
|
+
<label
|
3
|
+
v-if="(element === 'input' || element === 'select' || element === 'textarea')"
|
4
|
+
:class="[
|
5
|
+
'cmd-form-element',
|
6
|
+
validationStatus,
|
7
|
+
$attrs.class,
|
8
|
+
{
|
9
|
+
disabled: $attrs.disabled,
|
10
|
+
inline : displayLabelInline,
|
11
|
+
checked: isChecked,
|
12
|
+
'toggle-switch': toggleSwitch,
|
13
|
+
colored: colored,
|
14
|
+
on: colored && isChecked,
|
15
|
+
off: colored && !isChecked,
|
16
|
+
'has-state': validationStatus
|
17
|
+
}
|
18
|
+
]"
|
19
|
+
:for="htmlId"
|
20
|
+
:title="$attrs.title"
|
21
|
+
ref="label">
|
21
22
|
|
22
23
|
<!-- begin label-text (+ required asterisk) -->
|
23
24
|
<span v-if="(labelText || $slots.labeltext) && $attrs.type !== 'checkbox' && $attrs.type !== 'radio'"
|
@@ -1,34 +1,47 @@
|
|
1
1
|
<template>
|
2
|
-
<div :class="['cmd-site-header', { sticky: sticky }]" role="banner">
|
2
|
+
<div :class="['cmd-site-header', { sticky: sticky, 'navigation-inline': navigationInline }]" role="banner">
|
3
3
|
<!-- begin slot for elements above header -->
|
4
|
-
<div class="top-header">
|
5
|
-
<slot name="
|
4
|
+
<div v-if="$slots.topheader" class="top-header">
|
5
|
+
<slot name="topheader"></slot>
|
6
6
|
</div>
|
7
7
|
<!-- end for elements above header -->
|
8
8
|
|
9
9
|
<!-- begin header-wrapper with slots for logo and other header elements -->
|
10
|
-
<header v-if="$slots.logo || $slots.header" :class="useGrid ? 'grid-container-create-columns': 'flex-container'">
|
10
|
+
<header v-if="$slots.logo || $slots.header || $slots.navigation" :class="useGrid ? 'grid-container-create-columns': 'flex-container'">
|
11
11
|
<slot name="logo"></slot>
|
12
12
|
<slot name="header"></slot>
|
13
|
+
<slot name="navigation"></slot>
|
13
14
|
</header>
|
14
15
|
<!-- end header-wrapper with slots for logo and other header elements -->
|
15
16
|
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
17
|
+
<header v-if="cmdCompanyLogo || cmdMainNavigation?.navigationEntries?.length" :class="useGrid ? 'grid-container-create-columns': 'flex-container'">
|
18
|
+
<!-- begin CmdCompanyLogo -->
|
19
|
+
<CmdCompanyLogo
|
20
|
+
v-if="cmdCompanyLogo"
|
21
|
+
v-bind="cmdCompanyLogo"
|
22
|
+
/>
|
23
|
+
<!-- end CmdCompanyLogo -->
|
24
|
+
|
25
|
+
<!-- begin CmdMainNavigation -->
|
26
|
+
<CmdMainNavigation
|
27
|
+
v-if="cmdMainNavigation?.navigationEntries?.length"
|
28
|
+
:navigationEntries="cmdMainNavigation.navigationEntries"
|
29
|
+
:closeOffcanvas="closeOffcanvas"
|
30
|
+
/>
|
31
|
+
<!-- end CmdMainNavigation -->
|
32
|
+
</header>
|
22
33
|
</div>
|
23
34
|
</template>
|
24
35
|
|
25
36
|
<script>
|
26
37
|
// import components
|
38
|
+
import CmdCompanyLogo from "./CmdCompanyLogo"
|
27
39
|
import CmdMainNavigation from "./CmdMainNavigation"
|
28
40
|
|
29
41
|
export default {
|
30
42
|
name: "CmdSiteHeader",
|
31
43
|
components: {
|
44
|
+
CmdCompanyLogo,
|
32
45
|
CmdMainNavigation
|
33
46
|
},
|
34
47
|
props: {
|
@@ -46,6 +59,15 @@ export default {
|
|
46
59
|
type: Boolean,
|
47
60
|
default: true
|
48
61
|
},
|
62
|
+
/**
|
63
|
+
* activate if navigation should be displayed inline to logo (otherwise it will be displayed below)
|
64
|
+
*
|
65
|
+
* @affectsStyling: true
|
66
|
+
*/
|
67
|
+
navigationInline: {
|
68
|
+
type: Boolean,
|
69
|
+
default: false
|
70
|
+
},
|
49
71
|
/**
|
50
72
|
* use a grid for positioning of inner-elements (else a flex-container will be used)
|
51
73
|
*
|
@@ -55,12 +77,19 @@ export default {
|
|
55
77
|
type: Boolean,
|
56
78
|
default: true
|
57
79
|
},
|
80
|
+
/**
|
81
|
+
* properties for cmdCompanyLogo-component
|
82
|
+
*/
|
83
|
+
cmdCompanyLogo: {
|
84
|
+
type: Object,
|
85
|
+
required: false
|
86
|
+
},
|
58
87
|
/**
|
59
88
|
* properties for CmdMainNavigation-component
|
60
89
|
*/
|
61
90
|
cmdMainNavigation: {
|
62
91
|
type: Object,
|
63
|
-
required:
|
92
|
+
required: false
|
64
93
|
}
|
65
94
|
}
|
66
95
|
}
|
@@ -89,6 +118,10 @@ export default {
|
|
89
118
|
padding: 0 var(--default-padding);
|
90
119
|
}
|
91
120
|
|
121
|
+
&:not(.navigation-inline) header {
|
122
|
+
padding-bottom: 0;
|
123
|
+
}
|
124
|
+
|
92
125
|
.cmd-main-navigation nav {
|
93
126
|
width: auto;
|
94
127
|
}
|
@@ -100,6 +133,16 @@ export default {
|
|
100
133
|
}
|
101
134
|
}
|
102
135
|
|
136
|
+
#main-navigation-wrapper {
|
137
|
+
grid-column: span var(--grid-columns);
|
138
|
+
border-bottom: 0;
|
139
|
+
|
140
|
+
nav {
|
141
|
+
padding: 0;
|
142
|
+
|
143
|
+
}
|
144
|
+
}
|
145
|
+
|
103
146
|
// use id to ensure high specificity
|
104
147
|
> .cmd-main-navigation#main-navigation-wrapper:last-child {
|
105
148
|
border-bottom: 0;
|
@@ -108,6 +151,8 @@ export default {
|
|
108
151
|
header {
|
109
152
|
padding-top: calc(var(--default-padding) * 2);
|
110
153
|
padding-bottom: calc(var(--default-padding) * 2);
|
154
|
+
grid-template-rows: 1fr min-content;
|
155
|
+
grid-template-areas: "company-logo" "main-navigation";
|
111
156
|
|
112
157
|
&.flex-container {
|
113
158
|
width: 100%;
|
@@ -131,6 +176,37 @@ export default {
|
|
131
176
|
grid-column: span var(--grid-small-span);
|
132
177
|
}
|
133
178
|
}
|
179
|
+
|
180
|
+
&.navigation-inline {
|
181
|
+
header {
|
182
|
+
grid-template-rows: 1fr;
|
183
|
+
grid-template-areas: "company-logo main-navigation";
|
184
|
+
|
185
|
+
.cmd-company-logo {
|
186
|
+
grid-column: span var(--grid-small-span);
|
187
|
+
}
|
188
|
+
|
189
|
+
#main-navigation-wrapper {
|
190
|
+
display: flex;
|
191
|
+
border: 0;
|
192
|
+
grid-column: span var(--grid-large-span);
|
193
|
+
background: none;
|
194
|
+
|
195
|
+
:where(nav, .nav) {
|
196
|
+
margin-right: 0;
|
197
|
+
|
198
|
+
ul {
|
199
|
+
border: 0;
|
200
|
+
background: none;
|
201
|
+
|
202
|
+
li {
|
203
|
+
border: 0;
|
204
|
+
}
|
205
|
+
}
|
206
|
+
}
|
207
|
+
}
|
208
|
+
}
|
209
|
+
}
|
134
210
|
}
|
135
211
|
|
136
212
|
@media only screen and (max-width: $medium-max-width) {
|
@@ -9,6 +9,16 @@
|
|
9
9
|
"activated sticky-header (stays on top if page is scrolled)"
|
10
10
|
]
|
11
11
|
},
|
12
|
+
"navigationInline": {
|
13
|
+
"comments": [
|
14
|
+
"activate if navigation should be displayed inline to logo (otherwise it will be displayed below)"
|
15
|
+
],
|
16
|
+
"annotations": {
|
17
|
+
"affectsStyling": [
|
18
|
+
"true"
|
19
|
+
]
|
20
|
+
}
|
21
|
+
},
|
12
22
|
"useGrid": {
|
13
23
|
"comments": [
|
14
24
|
"use a grid for positioning of inner-elements (else a flex-container will be used)"
|
@@ -19,6 +29,11 @@
|
|
19
29
|
]
|
20
30
|
}
|
21
31
|
},
|
32
|
+
"cmdCompanyLogo": {
|
33
|
+
"comments": [
|
34
|
+
"properties for cmdCompanyLogo-component"
|
35
|
+
]
|
36
|
+
},
|
22
37
|
"cmdMainNavigation": {
|
23
38
|
"comments": [
|
24
39
|
"properties for CmdMainNavigation-component"
|
@@ -1,44 +0,0 @@
|
|
1
|
-
<?xml version="1.0" encoding="utf-8"?>
|
2
|
-
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
3
|
-
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
|
4
|
-
<!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
|
5
|
-
<!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/">
|
6
|
-
<!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
|
7
|
-
<!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/">
|
8
|
-
<!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/">
|
9
|
-
<!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/">
|
10
|
-
<!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/">
|
11
|
-
<!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/">
|
12
|
-
]>
|
13
|
-
<svg version="1.1" id="Ebene_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
|
14
|
-
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="377.066px"
|
15
|
-
height="61.419px" viewBox="0 0 377.066 61.419" enable-background="new 0 0 377.066 61.419" xml:space="preserve">
|
16
|
-
<metadata>
|
17
|
-
<sfw xmlns="&ns_sfw;">
|
18
|
-
<slices></slices>
|
19
|
-
<sliceSourceBounds height="-32766" width="-32766" x="8498" y="24970" bottomLeftOrigin="true"></sliceSourceBounds>
|
20
|
-
</sfw>
|
21
|
-
</metadata>
|
22
|
-
<g>
|
23
|
-
<path fill="#FFFFFF" d="M56.842,12.896l-4.56,3.499c-2.516-3.275-5.536-5.759-9.06-7.449c-3.525-1.69-7.396-2.535-11.615-2.535
|
24
|
-
c-4.612,0-8.883,1.107-12.814,3.321c-3.931,2.215-6.977,5.188-9.139,8.923c-2.162,3.734-3.243,7.934-3.243,12.598
|
25
|
-
c0,7.049,2.417,12.932,7.252,17.649c4.834,4.717,10.933,7.075,18.297,7.075c8.097,0,14.871-3.17,20.321-9.512l4.56,3.459
|
26
|
-
c-2.883,3.669-6.479,6.505-10.79,8.51c-4.311,2.005-9.126,3.007-14.445,3.007c-10.115,0-18.095-3.367-23.938-10.102
|
27
|
-
c-4.9-5.686-7.35-12.552-7.35-20.597c0-8.464,2.967-15.585,8.903-21.364c5.936-5.778,13.371-8.667,22.307-8.667
|
28
|
-
c5.398,0,10.272,1.068,14.622,3.204C50.5,6.051,54.064,9.044,56.842,12.896z"/>
|
29
|
-
<path fill="#FFFFFF" d="M132.665,59.986l8.278-57.82h0.939l23.506,47.443l23.28-47.443h0.926l8.321,57.82h-5.667l-5.713-41.351
|
30
|
-
l-20.444,41.351h-1.477l-20.688-41.666l-5.68,41.666H132.665z"/>
|
31
|
-
<path fill="#FFFFFF" d="M232.897,2.166l26.965,57.82h-6.241l-9.094-19.024h-24.909l-9.008,19.024h-6.446l27.318-57.82H232.897z
|
32
|
-
M232.168,14.451l-9.907,20.93h19.768L232.168,14.451z"/>
|
33
|
-
<path fill="#FFFFFF" d="M268.863,59.986V2.166h1.258l38.481,44.322V2.166h5.699v57.82h-1.297l-38.167-43.783v43.783H268.863z"/>
|
34
|
-
<path fill="#FFFFFF" d="M328.375,59.986V2.166h11.988c8.647,0,14.923,0.694,18.828,2.083c5.607,1.965,9.99,5.372,13.148,10.22
|
35
|
-
c3.157,4.849,4.736,10.626,4.736,17.334c0,5.792-1.252,10.888-3.754,15.291c-2.503,4.402-5.752,7.652-9.748,9.748
|
36
|
-
c-3.996,2.097-9.598,3.145-16.804,3.145H328.375z M333.917,54.522h6.683c7.992,0,13.534-0.497,16.627-1.492
|
37
|
-
c4.349-1.414,7.769-3.959,10.259-7.639c2.489-3.679,3.734-8.176,3.734-13.491c0-5.577-1.351-10.342-4.049-14.295
|
38
|
-
c-2.699-3.954-6.46-6.663-11.281-8.13c-3.616-1.099-9.578-1.649-17.885-1.649h-4.088V54.522z"/>
|
39
|
-
</g>
|
40
|
-
<g>
|
41
|
-
<path fill="#FFFFFF" d="M108.432,6.745l13.924,24.117l-13.924,24.116H80.584L66.66,30.862L80.584,6.745H108.432 M111.318,1.745
|
42
|
-
H77.697L60.887,30.862l16.811,29.116h33.621l16.811-29.116L111.318,1.745L111.318,1.745z"/>
|
43
|
-
</g>
|
44
|
-
</svg>
|