comand-component-library 3.2.3 → 3.2.5
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 +1 -1
- package/src/App.vue +5 -5
- package/src/components/CmdCookieDisclaimer.vue +8 -2
- package/src/components/CmdFancyBox.vue +207 -148
- package/src/components/CmdIcon.vue +39 -0
- package/src/components/CmdListOfLinks.vue +9 -8
- package/src/components/CmdSiteHeader.vue +27 -28
- package/src/components/CmdThumbnailScroller.vue +47 -9
- package/src/components/CmdWidthLimitationWrapper.vue +1 -1
- package/src/documentation/generated/CmdFancyBoxPropertyDescriptions.json +5 -0
|
@@ -6,34 +6,33 @@
|
|
|
6
6
|
</div>
|
|
7
7
|
<!-- end for elements above header -->
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
v-if="$slots.logo || $slots.header || $slots.navigation"
|
|
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
|
-
<!-- end CmdMainNavigation -->
|
|
9
|
+
<header :class="[useGrid ? 'grid-container-create-columns': 'flex-container', {'has-navigation': cmdMainNavigation || $slots.navigation, 'one-child-only' : oneChildOnly}]">
|
|
10
|
+
<!-- begin slots for logo and other header elements -->
|
|
11
|
+
<template v-if="$slots.logo || $slots.header || $slots.navigation">
|
|
12
|
+
<slot name="logo"></slot>
|
|
13
|
+
<slot name="header"></slot>
|
|
14
|
+
<slot name="navigation"></slot>
|
|
15
|
+
</template>
|
|
16
|
+
<!-- end slots for logo and other header elements -->
|
|
17
|
+
|
|
18
|
+
<!-- begin content given by data -->
|
|
19
|
+
<template v-if="cmdCompanyLogo || cmdMainNavigation?.navigationEntries?.length">
|
|
20
|
+
<!-- begin CmdCompanyLogo -->
|
|
21
|
+
<CmdCompanyLogo
|
|
22
|
+
v-if="cmdCompanyLogo"
|
|
23
|
+
v-bind="cmdCompanyLogo"
|
|
24
|
+
/>
|
|
25
|
+
<!-- end CmdCompanyLogo -->
|
|
26
|
+
|
|
27
|
+
<!-- begin CmdMainNavigation -->
|
|
28
|
+
<CmdMainNavigation
|
|
29
|
+
v-if="cmdMainNavigation?.navigationEntries?.length"
|
|
30
|
+
:navigationEntries="cmdMainNavigation.navigationEntries"
|
|
31
|
+
:closeOffcanvas="closeOffcanvas"
|
|
32
|
+
/>
|
|
33
|
+
<!-- end CmdMainNavigation -->
|
|
34
|
+
</template>
|
|
35
|
+
<!-- end content given by data -->
|
|
37
36
|
</header>
|
|
38
37
|
</div>
|
|
39
38
|
</template>
|
|
@@ -182,10 +182,6 @@ export default {
|
|
|
182
182
|
|
|
183
183
|
a {
|
|
184
184
|
text-align: center;
|
|
185
|
-
|
|
186
|
-
figcaption {
|
|
187
|
-
opacity: var(--reduced-opacity);
|
|
188
|
-
}
|
|
189
185
|
}
|
|
190
186
|
|
|
191
187
|
img {
|
|
@@ -234,12 +230,51 @@ export default {
|
|
|
234
230
|
}
|
|
235
231
|
|
|
236
232
|
&.gallery-scroller {
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
233
|
+
max-width: 80%;
|
|
234
|
+
left: 0;
|
|
235
|
+
right: 0;
|
|
236
|
+
position: fixed;
|
|
237
|
+
bottom: var(--default-margin);
|
|
238
|
+
margin: auto;
|
|
239
|
+
|
|
240
|
+
li {
|
|
241
|
+
a {
|
|
242
|
+
color: var(--color-scheme-text-color);
|
|
243
|
+
text-decoration: none;
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
&.active {
|
|
247
|
+
img {
|
|
248
|
+
border-color: var(--primary-color);
|
|
249
|
+
}
|
|
250
|
+
|
|
251
|
+
figcaption {
|
|
252
|
+
color: var(--primary-color);
|
|
253
|
+
}
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
&:not(.active) {
|
|
257
|
+
img {
|
|
258
|
+
border: var(--default-border);
|
|
259
|
+
opacity: var(--reduced-opacity);
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
figcaption {
|
|
241
263
|
text-decoration: none;
|
|
242
264
|
}
|
|
265
|
+
|
|
266
|
+
a {
|
|
267
|
+
&:hover, &:active, &:focus {
|
|
268
|
+
figcaption {
|
|
269
|
+
color: var(--primary-color);
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
img {
|
|
273
|
+
border-color: var(--primary-color);
|
|
274
|
+
opacity: 1;
|
|
275
|
+
}
|
|
276
|
+
}
|
|
277
|
+
}
|
|
243
278
|
}
|
|
244
279
|
}
|
|
245
280
|
}
|
|
@@ -258,8 +293,11 @@ export default {
|
|
|
258
293
|
@media only screen and (max-width: $medium-max-width) {
|
|
259
294
|
.cmd-thumbnail-scroller {
|
|
260
295
|
display: block;
|
|
296
|
+
|
|
297
|
+
&.gallery-scroller {
|
|
298
|
+
max-width: calc(100% - calc(var(--default-margin) * 3));
|
|
299
|
+
}
|
|
261
300
|
}
|
|
262
301
|
}
|
|
263
|
-
|
|
264
302
|
/* end cmd-thumbnail-scroller ------------------------------------------------------------------------------------------ */
|
|
265
303
|
</style>
|