comand-component-library 3.3.21 → 3.3.23
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.js +3902 -3998
- package/dist/comand-component-library.umd.cjs +4 -4
- package/dist/media/images/demo-images/landscape-2x.jpg +0 -0
- package/dist/style.css +1 -1
- package/package.json +1 -1
- package/src/App.vue +63 -23
- package/src/assets/data/address-data.json +42 -18
- package/src/assets/data/company-logo.json +1 -1
- package/src/assets/data/image.json +27 -1
- package/src/components/CmdAddressData.vue +137 -261
- package/src/components/CmdBox.vue +7 -17
- package/src/components/CmdFakeSelect.vue +24 -8
- package/src/components/CmdFancyBox.vue +15 -6
- package/src/components/CmdHeadline.vue +2 -2
- package/src/components/CmdIcon.vue +0 -1
- package/src/components/CmdImage.vue +1 -2
- package/src/components/CmdImageZoom.vue +13 -26
- package/src/components/CmdMainNavigation.vue +1 -1
- package/src/components/CmdMultistepFormProgressBar.vue +1 -1
- package/src/components/CmdSiteHeader.vue +13 -1
- package/src/components/CmdSlideButton.vue +9 -1
- package/src/components/CmdSlideshow.vue +39 -23
- package/src/components/CmdSocialNetworks.vue +36 -14
- package/src/components/CmdTabs.vue +1 -1
- package/src/components/CmdThumbnailScroller.vue +0 -8
- package/src/components/CmdToggleDarkMode.vue +65 -0
- package/src/components/CmdWidthLimitationWrapper.vue +1 -6
- package/src/mixins/CmdFakeSelect/DefaultMessageProperties.js +2 -1
@@ -141,7 +141,8 @@
|
|
141
141
|
<li v-if="showSelectAllOptions && type === 'checkboxOptions'" class="select-all-options">
|
142
142
|
<a href="#" @click.prevent="toggleAllOptions">
|
143
143
|
<!-- begin CmdIcon -->
|
144
|
-
<CmdIcon :iconClass="
|
144
|
+
<CmdIcon v-if="!allOptionsSelected" :iconClass="iconSelectAllOptions.iconClass" :type="iconSelectAllOptions.iconType" />
|
145
|
+
<CmdIcon v-else :iconClass="iconDeselectAllOptions.iconClass" :type="iconDeselectAllOptions.iconType" />
|
145
146
|
<!-- end CmdIcon -->
|
146
147
|
<span>{{ selectAllOptionsText }}</span>
|
147
148
|
</a>
|
@@ -182,7 +183,8 @@ export default {
|
|
182
183
|
return {
|
183
184
|
showOptions: false,
|
184
185
|
validationStatus: "",
|
185
|
-
limitWidthStyle: {}
|
186
|
+
limitWidthStyle: {},
|
187
|
+
allOptionsSelected: false
|
186
188
|
}
|
187
189
|
},
|
188
190
|
props: {
|
@@ -296,6 +298,18 @@ export default {
|
|
296
298
|
iconType: "auto"
|
297
299
|
}
|
298
300
|
}
|
301
|
+
},
|
302
|
+
/**
|
303
|
+
* set icon for "deselect all"-option
|
304
|
+
*/
|
305
|
+
iconDeselectAllOptions: {
|
306
|
+
type: Object,
|
307
|
+
default() {
|
308
|
+
return {
|
309
|
+
iconClass: "icon-cancel",
|
310
|
+
iconType: "auto"
|
311
|
+
}
|
312
|
+
}
|
299
313
|
}
|
300
314
|
},
|
301
315
|
computed: {
|
@@ -329,7 +343,7 @@ export default {
|
|
329
343
|
if (this.modelValue.length === 1) {
|
330
344
|
return this.selectData.find(option => String(option.value) === String(this.modelValue[0]))?.text
|
331
345
|
} else if (this.modelValue.length > 1) {
|
332
|
-
return this.modelValue.length
|
346
|
+
return this.getMessage("cmdfakeselect.option.options_selected", this.modelValue.length)
|
333
347
|
}
|
334
348
|
} else if (this.selectData?.length) {
|
335
349
|
// return text of first option nothing is selected (and type !== checkboxOptions && type !== content)
|
@@ -342,7 +356,6 @@ export default {
|
|
342
356
|
// get the displayed icon (only available for default selectbox)
|
343
357
|
optionIcon() {
|
344
358
|
if (this.type === "default") {
|
345
|
-
|
346
359
|
const selectedOption = this.selectData.find(option => {
|
347
360
|
return option.value === this.modelValue
|
348
361
|
})
|
@@ -368,9 +381,11 @@ export default {
|
|
368
381
|
},
|
369
382
|
selectAllOptionsText() {
|
370
383
|
if (Array.isArray(this.modelValue) && this.modelValue.length === this.selectData.length) {
|
371
|
-
|
384
|
+
this.allOptionsSelected = true
|
385
|
+
return this.getMessage("cmdfakeselect.linktext.deselect_all_options")
|
372
386
|
}
|
373
|
-
|
387
|
+
this.allOptionsSelected = false
|
388
|
+
return this.getMessage("cmdfakeselect.linktext.select_all_options")
|
374
389
|
}
|
375
390
|
},
|
376
391
|
mounted() {
|
@@ -459,7 +474,7 @@ export default {
|
|
459
474
|
},
|
460
475
|
// overwrite requirement-message form fieldValidation.js
|
461
476
|
getRequirementMessage() {
|
462
|
-
return "
|
477
|
+
return this.getMessage("cmdfakeselect.headline.an_option_is_selected")
|
463
478
|
}
|
464
479
|
},
|
465
480
|
watch: {
|
@@ -657,7 +672,8 @@ export default {
|
|
657
672
|
}
|
658
673
|
}
|
659
674
|
|
660
|
-
|
675
|
+
// use additional class in selector to gain high specificity
|
676
|
+
&.has-state.label {
|
661
677
|
> ul {
|
662
678
|
> li {
|
663
679
|
> a {
|
@@ -66,7 +66,7 @@
|
|
66
66
|
<!-- end button-wrapper -->
|
67
67
|
</header>
|
68
68
|
<div :class="['outer-content-wrapper', {'grayscale' : printInGrayscale}]">
|
69
|
-
<div v-if="fancyBoxImageUrl" class="content">
|
69
|
+
<div v-if="fancyBoxImageUrl || cmdImage?.image" class="content">
|
70
70
|
<!-- begin CmdImage -->
|
71
71
|
<CmdImage :image="largeSingleImage" :figcaption="cmdImage?.figcaption" />
|
72
72
|
<!-- end CmdImage -->
|
@@ -355,18 +355,21 @@ const FancyBox = defineComponent({
|
|
355
355
|
largeSingleImage() {
|
356
356
|
// change src-key for a single item/image to fit CmdImage-properties
|
357
357
|
const fancyBoxItem = {...this.cmdImage?.image || {}}
|
358
|
-
|
358
|
+
if(this.fancyBoxImageUrl) {
|
359
|
+
fancyBoxItem.src = this.fancyBoxImageUrl
|
360
|
+
}
|
359
361
|
return fancyBoxItem
|
360
362
|
}
|
361
363
|
},
|
362
364
|
methods: {
|
365
|
+
// open dialog/fancybox
|
363
366
|
showDialog() {
|
364
367
|
// avoid scrolling if fancybox is shown
|
365
|
-
|
366
|
-
|
368
|
+
document.querySelector("body").classList.add("avoid-scrolling")
|
369
|
+
this.$refs.dialog.showModal()
|
367
370
|
|
368
|
-
|
369
|
-
|
371
|
+
// overwrite default behavior of dialog-element, which sets focus on first focusable element inside
|
372
|
+
this.$refs["close-dialog"].focus()
|
370
373
|
},
|
371
374
|
updateContentOnPropertyChange() {
|
372
375
|
this.fancyBoxImageUrl = this.fancyBoxContent = this.fancyBoxElements = null
|
@@ -392,6 +395,7 @@ const FancyBox = defineComponent({
|
|
392
395
|
.catch(error => console.error(`Error loading ${this.url}: ${error}`))
|
393
396
|
}
|
394
397
|
},
|
398
|
+
// switch to previous-item (in fancybox-gallery)
|
395
399
|
showPrevItem() {
|
396
400
|
if (this.index > 0) {
|
397
401
|
this.index--;
|
@@ -399,6 +403,7 @@ const FancyBox = defineComponent({
|
|
399
403
|
this.index = this.fancyBoxGallery.length - 1;
|
400
404
|
}
|
401
405
|
},
|
406
|
+
// show current item (in fancybox-gallery)
|
402
407
|
showItem(imgId) {
|
403
408
|
for (let i = 0; i < this.fancyBoxGallery.length; i++) {
|
404
409
|
if (this.fancyBoxGallery[i].id === imgId) {
|
@@ -407,6 +412,7 @@ const FancyBox = defineComponent({
|
|
407
412
|
}
|
408
413
|
}
|
409
414
|
},
|
415
|
+
// switch to next-item (in fancybox-gallery)
|
410
416
|
showNextItem() {
|
411
417
|
if (this.index < this.fancyBoxGallery.length - 1) {
|
412
418
|
this.index++;
|
@@ -414,6 +420,7 @@ const FancyBox = defineComponent({
|
|
414
420
|
this.index = 0;
|
415
421
|
}
|
416
422
|
},
|
423
|
+
// close fancybox (by button, escape-key)
|
417
424
|
close() {
|
418
425
|
if (this.$options.el) {
|
419
426
|
this.$destroy()
|
@@ -426,10 +433,12 @@ const FancyBox = defineComponent({
|
|
426
433
|
// remove class to re-enable scrolling
|
427
434
|
document.querySelector("body").classList.remove("avoid-scrolling")
|
428
435
|
},
|
436
|
+
// click on cancel-button
|
429
437
|
cancel() {
|
430
438
|
this.$emit("cancel", true)
|
431
439
|
this.close()
|
432
440
|
},
|
441
|
+
// click on confirm-button
|
433
442
|
confirm() {
|
434
443
|
this.$emit("confirm", true)
|
435
444
|
this.close()
|
@@ -59,7 +59,7 @@ export default {
|
|
59
59
|
*/
|
60
60
|
textAlign: {
|
61
61
|
type: String,
|
62
|
-
default:
|
62
|
+
default: null
|
63
63
|
}
|
64
64
|
},
|
65
65
|
computed: {
|
@@ -73,7 +73,7 @@ export default {
|
|
73
73
|
if(this.textAlign) {
|
74
74
|
return "text-" + this.textAlign
|
75
75
|
}
|
76
|
-
return
|
76
|
+
return ""
|
77
77
|
}
|
78
78
|
}
|
79
79
|
}
|
@@ -8,7 +8,6 @@
|
|
8
8
|
|
9
9
|
<script>
|
10
10
|
export default {
|
11
|
-
|
12
11
|
data() {
|
13
12
|
return {
|
14
13
|
mediumMaxWidth: 1023,
|
@@ -19,7 +18,7 @@ export default {
|
|
19
18
|
name: "CmdImage",
|
20
19
|
props: {
|
21
20
|
/**
|
22
|
-
* image-object including source, alternative text, tooltip (not required)
|
21
|
+
* image-object including source(s), alternative text, tooltip (not required)
|
23
22
|
*/
|
24
23
|
image: {
|
25
24
|
type: Object,
|
@@ -1,32 +1,21 @@
|
|
1
1
|
<template>
|
2
|
-
<div class="cmd-imagezoom
|
3
|
-
<div class="grid-small-item">
|
4
|
-
<!-- begin small image -->
|
5
|
-
<a href="#" class="thumbnails-imagezoom">
|
6
|
-
<!-- begin CmdImage -->
|
7
|
-
<CmdImage
|
8
|
-
:image="imageSmall.image"
|
9
|
-
:figcaption="imageSmall.figcaption"
|
10
|
-
@mouseover="onMouseOver"
|
11
|
-
@mousemove="onMouseMove"
|
12
|
-
@mouseout="onMouseOut"
|
13
|
-
/>
|
14
|
-
<!-- end CmdImage -->
|
15
|
-
</a>
|
16
|
-
<!-- end small image -->
|
17
|
-
</div>
|
2
|
+
<div class="cmd-imagezoom flex-container">
|
18
3
|
|
19
|
-
<!-- begin
|
20
|
-
<
|
21
|
-
|
22
|
-
|
23
|
-
:image="imageLarge.image"
|
24
|
-
:figcaption="imageLarge.figcaption"
|
4
|
+
<!-- begin small image -->
|
5
|
+
<a href="#" class="no-flex thumbnails-imagezoom" :title="imageSmall.tooltip">
|
6
|
+
<img :src="imageSmall.src"
|
7
|
+
:alt="imageSmall.alt"
|
25
8
|
@mouseover="onMouseOver"
|
26
9
|
@mousemove="onMouseMove"
|
27
10
|
@mouseout="onMouseOut"
|
28
11
|
/>
|
29
12
|
<!-- end CmdImage -->
|
13
|
+
</a>
|
14
|
+
<!-- end small image -->
|
15
|
+
|
16
|
+
<!-- begin large image -->
|
17
|
+
<div v-if="showLargeImage" class="zoom-container">
|
18
|
+
<img :src="imageLarge.src" :alt="imageLarge.alt"/>
|
30
19
|
</div>
|
31
20
|
<div v-if="showLargeImage" class="zoom-overlay"></div>
|
32
21
|
<!-- end large image -->
|
@@ -38,14 +27,14 @@ export default {
|
|
38
27
|
name: "CmdImageZoom",
|
39
28
|
props: {
|
40
29
|
/**
|
41
|
-
*
|
30
|
+
* url for small images
|
42
31
|
*/
|
43
32
|
imageSmall: {
|
44
33
|
type: Object,
|
45
34
|
required: true
|
46
35
|
},
|
47
36
|
/**
|
48
|
-
*
|
37
|
+
* url for large image
|
49
38
|
*/
|
50
39
|
imageLarge: {
|
51
40
|
type: Object,
|
@@ -128,8 +117,6 @@ function clamp(value, min, max) {
|
|
128
117
|
.zoom-container {
|
129
118
|
display: block !important;
|
130
119
|
overflow: hidden;
|
131
|
-
max-width: 100rem;
|
132
|
-
max-height: 50rem !important;
|
133
120
|
|
134
121
|
> img {
|
135
122
|
max-width: none;
|
@@ -362,10 +362,10 @@ export default {
|
|
362
362
|
display: flex;
|
363
363
|
background: none; /* overwrite framework-css */
|
364
364
|
border: 0; /* overwrite framework-css */
|
365
|
-
padding: 0 var(--default-padding);
|
366
365
|
|
367
366
|
/* begin offcanvas-navigation */
|
368
367
|
&:not(.persist-on-mobile) {
|
368
|
+
padding: 0;
|
369
369
|
transition: var(--nav-transition);
|
370
370
|
|
371
371
|
#toggle-offcanvas {
|
@@ -166,7 +166,7 @@ export default {
|
|
166
166
|
}
|
167
167
|
}
|
168
168
|
|
169
|
-
nav {
|
169
|
+
.cmd-main-navigation nav {
|
170
170
|
padding: 0;
|
171
171
|
}
|
172
172
|
|
@@ -224,6 +224,7 @@ export default {
|
|
224
224
|
|
225
225
|
@media only screen and (max-width: $medium-max-width) {
|
226
226
|
.cmd-site-header {
|
227
|
+
padding-top: calc(var(--default-padding) * 2);
|
227
228
|
padding-bottom: calc(var(--default-padding) * 2);
|
228
229
|
|
229
230
|
header {
|
@@ -235,8 +236,19 @@ export default {
|
|
235
236
|
@media only screen and (max-width: $small-max-width) {
|
236
237
|
.cmd-site-header {
|
237
238
|
gap: calc(var(--default-gap) / 2);
|
239
|
+
padding-top: var(--default-padding);
|
238
240
|
padding-bottom: var(--default-padding);
|
239
241
|
|
242
|
+
.top-header {
|
243
|
+
.cmd-list-of-links {
|
244
|
+
padding: 0;
|
245
|
+
}
|
246
|
+
}
|
247
|
+
|
248
|
+
header {
|
249
|
+
padding: 0 !important;
|
250
|
+
}
|
251
|
+
|
240
252
|
.cmd-company-logo {
|
241
253
|
margin: 0 auto;
|
242
254
|
|
@@ -1,7 +1,7 @@
|
|
1
1
|
<template>
|
2
2
|
<a href="#"
|
3
3
|
@click.prevent
|
4
|
-
:class="['cmd-slide-button', 'button', slideButtonType]"
|
4
|
+
:class="['cmd-slide-button', 'button', 'keep-behavior-on-small-devices', slideButtonType]"
|
5
5
|
:title="getDirection.tooltip">
|
6
6
|
<!-- being CmdIcon -->
|
7
7
|
<CmdIcon :iconClass="getDirection.iconClass || 'next'" />
|
@@ -66,6 +66,8 @@ export default {
|
|
66
66
|
|
67
67
|
<style lang="scss">
|
68
68
|
/* begin cmd-slide-button ---------------------------------------------------------------------------------------- */
|
69
|
+
@import '../assets/styles/variables';
|
70
|
+
|
69
71
|
.cmd-slide-button {
|
70
72
|
&.button {
|
71
73
|
font-size: 2rem;
|
@@ -114,6 +116,12 @@ export default {
|
|
114
116
|
top: auto;
|
115
117
|
}
|
116
118
|
}
|
119
|
+
|
120
|
+
@media only screen and (max-width: $small-max-width) {
|
121
|
+
&.button {
|
122
|
+
width: auto; /* overwrite button-behavior for small-devices from frontend-framework */
|
123
|
+
}
|
124
|
+
}
|
117
125
|
}
|
118
126
|
|
119
127
|
/* end cmd-slide-button ------------------------------------------------------------------------------------------ */
|
@@ -9,29 +9,31 @@
|
|
9
9
|
<!-- end CmdSlideButton -->
|
10
10
|
|
11
11
|
<!-- begin area to slide -->
|
12
|
-
<transition name="fade">
|
13
|
-
<template v-if="
|
14
|
-
<
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
12
|
+
<transition-group name="fade">
|
13
|
+
<template v-if="currentItem">
|
14
|
+
<template v-if="!useSlot">
|
15
|
+
<a v-if="currentItem?.link?.href" :href="currentItem?.link?.href" :title="currentItem?.link?.tooltip" :key="index">
|
16
|
+
<!-- begin CmdImage -->
|
17
|
+
<CmdImage :image="currentItem?.image" :figcaption="currentItem?.figcaption"/>
|
18
|
+
<!-- begin CmdImage -->
|
19
|
+
</a>
|
19
20
|
|
20
|
-
|
21
|
-
|
22
|
-
|
21
|
+
<!-- begin CmdImage -->
|
22
|
+
<CmdImage v-else :image="currentItem?.image" :figcaption="currentItem?.figcaption" :key="index"/>
|
23
|
+
<!-- begin CmdImage -->
|
24
|
+
</template>
|
25
|
+
<div
|
26
|
+
v-else
|
27
|
+
class="image-wrapper"
|
28
|
+
:key="index"
|
29
|
+
:style="'background-image: url(' + currentItem.image.srcLarge + ')'"
|
30
|
+
>
|
31
|
+
<!-- begin slot -->
|
32
|
+
<slot :name="'item' + currentSlotItem"></slot>
|
33
|
+
<!-- end slot -->
|
34
|
+
</div>
|
23
35
|
</template>
|
24
|
-
|
25
|
-
v-else
|
26
|
-
class="image-wrapper"
|
27
|
-
:key="index"
|
28
|
-
:style="'background-image: url(' + currentItem.image.srcLarge + ')'"
|
29
|
-
>
|
30
|
-
<!-- begin slot -->
|
31
|
-
<slot :name="'item' + currentSlotItem"></slot>
|
32
|
-
<!-- end slot -->
|
33
|
-
</div>
|
34
|
-
</transition>
|
36
|
+
</transition-group>
|
35
37
|
<!-- end area to slide -->
|
36
38
|
|
37
39
|
<!-- begin CmdSlideButton -->
|
@@ -182,7 +184,7 @@ export default {
|
|
182
184
|
/* computed property to get current slide */
|
183
185
|
computed: {
|
184
186
|
currentItem() {
|
185
|
-
if(this.slideshowItems.length <= this.index) {
|
187
|
+
if (this.slideshowItems.length <= this.index) {
|
186
188
|
return null
|
187
189
|
}
|
188
190
|
return this.slideshowItems[this.index]
|
@@ -201,8 +203,9 @@ export default {
|
|
201
203
|
</script>
|
202
204
|
|
203
205
|
<style lang="scss">
|
204
|
-
@import '../assets/styles/variables';
|
205
206
|
/* begin cmd-slideshow ---------------------------------------------------------------------------------------- */
|
207
|
+
@import '../assets/styles/variables';
|
208
|
+
|
206
209
|
.cmd-slideshow {
|
207
210
|
figure a, img {
|
208
211
|
display: block;
|
@@ -226,6 +229,19 @@ export default {
|
|
226
229
|
display: flex;
|
227
230
|
justify-content: center;
|
228
231
|
|
232
|
+
> a:not(.button) {
|
233
|
+
text-decoration: none;
|
234
|
+
|
235
|
+
figcaption {
|
236
|
+
border: var(--primary-border);
|
237
|
+
|
238
|
+
&:hover, &:active, &:focus {
|
239
|
+
background: var(--pure-white);
|
240
|
+
color: var(--hyperlink-color);
|
241
|
+
}
|
242
|
+
}
|
243
|
+
}
|
244
|
+
|
229
245
|
figure {
|
230
246
|
width: 100%; /* important to stretch figure with position: absolute over full width */
|
231
247
|
margin: 0;
|
@@ -17,22 +17,24 @@
|
|
17
17
|
<!-- end CmdFormElement -->
|
18
18
|
|
19
19
|
<!-- begin list of networks -->
|
20
|
-
<ul :class="['
|
20
|
+
<ul :class="['button-wrapper no-flex', {'no-gap': !useGap}]">
|
21
21
|
<li v-for="network in validNetworks">
|
22
22
|
<a
|
23
|
-
:key="network.path"
|
23
|
+
:key="network.path"
|
24
|
+
:class="['button', {disabled: userMustAcceptDataPrivacy && !dataPrivacyAccepted}, {'text-align-right': textAlign === 'right'}]"
|
24
25
|
:id="network.id"
|
25
26
|
:href="getUrl(network)"
|
26
27
|
@click="preventOnDisabled"
|
27
28
|
target="_blank"
|
28
29
|
:title="tooltip(network.tooltip)">
|
29
30
|
<!-- begin CmdIcon -->
|
30
|
-
<CmdIcon
|
31
|
+
<CmdIcon
|
32
|
+
v-if="network.iconClass"
|
33
|
+
:iconClass="network.iconClass"
|
34
|
+
:type="network.iconType"
|
35
|
+
/>
|
31
36
|
<!-- end CmdIcon -->
|
32
37
|
<span v-if="network.linkText">{{ network.linkText }}</span>
|
33
|
-
<!-- begin CmdIcon -->
|
34
|
-
<CmdIcon v-if="network.iconClass && network.iconPosition === 'right'" :iconClass="network.iconClass" :type="network.iconType" />
|
35
|
-
<!-- end CmdIcon -->
|
36
38
|
</a>
|
37
39
|
</li>
|
38
40
|
</ul>
|
@@ -118,6 +120,10 @@ export default {
|
|
118
120
|
type: String,
|
119
121
|
default: "You must accept data privacy conditions!"
|
120
122
|
},
|
123
|
+
textAlign: {
|
124
|
+
type: String,
|
125
|
+
default: "left"
|
126
|
+
},
|
121
127
|
/**
|
122
128
|
* properties for cmdFormElement
|
123
129
|
*
|
@@ -179,10 +185,13 @@ export default {
|
|
179
185
|
}
|
180
186
|
},
|
181
187
|
tooltip(tooltip) {
|
182
|
-
if(this.userMustAcceptDataPrivacy
|
183
|
-
|
188
|
+
if(this.userMustAcceptDataPrivacy) {
|
189
|
+
if(this.dataPrivacyAccepted) {
|
190
|
+
return tooltip
|
191
|
+
}
|
192
|
+
return this.tooltipAcceptDataPrivacy
|
184
193
|
}
|
185
|
-
return
|
194
|
+
return tooltip
|
186
195
|
}
|
187
196
|
}
|
188
197
|
}
|
@@ -196,11 +205,17 @@ export default {
|
|
196
205
|
display: flex;
|
197
206
|
flex-direction: column;
|
198
207
|
gap: var(--default-gap);
|
208
|
+
container-type: inline-size;
|
199
209
|
|
200
210
|
.cmd-headline {
|
201
211
|
margin: 0;
|
202
212
|
}
|
203
213
|
|
214
|
+
.button-wrapper {
|
215
|
+
flex-direction: row;
|
216
|
+
margin: 0;
|
217
|
+
}
|
218
|
+
|
204
219
|
li {
|
205
220
|
list-style-type: none;
|
206
221
|
margin: 0;
|
@@ -220,10 +235,19 @@ export default {
|
|
220
235
|
|
221
236
|
.button {
|
222
237
|
padding: calc(var(--default-padding) / 2) var(--default-padding);
|
238
|
+
gap: calc(var(--default-gap) / 2);
|
239
|
+
|
240
|
+
span {
|
241
|
+
margin: 0;
|
242
|
+
}
|
223
243
|
|
224
244
|
&:first-of-type {
|
225
245
|
margin: 0;
|
226
246
|
}
|
247
|
+
|
248
|
+
&.text-align-right {
|
249
|
+
flex-direction: row-reverse;
|
250
|
+
}
|
227
251
|
}
|
228
252
|
|
229
253
|
a:last-of-type {
|
@@ -289,10 +313,9 @@ export default {
|
|
289
313
|
}
|
290
314
|
}
|
291
315
|
|
292
|
-
@
|
293
|
-
.
|
294
|
-
|
295
|
-
|
316
|
+
@container (max-width: #{$small-max-width}) {
|
317
|
+
.button-wrapper {
|
318
|
+
border: 1px solid red;
|
296
319
|
.button {
|
297
320
|
flex: none;
|
298
321
|
width: auto !important;
|
@@ -305,6 +328,5 @@ export default {
|
|
305
328
|
}
|
306
329
|
}
|
307
330
|
}
|
308
|
-
|
309
331
|
/* end cmd-social-networks ------------------------------------------------------------------------------------------ */
|
310
332
|
</style>
|
@@ -29,10 +29,6 @@
|
|
29
29
|
</template>
|
30
30
|
|
31
31
|
<script>
|
32
|
-
// import components
|
33
|
-
import CmdImage from "./CmdImage.vue"
|
34
|
-
import CmdSlideButton from "./CmdSlideButton.vue"
|
35
|
-
|
36
32
|
// import functions
|
37
33
|
import {openFancyBox} from './CmdFancyBox.vue'
|
38
34
|
|
@@ -42,10 +38,6 @@ import DefaultMessageProperties from "../mixins/CmdThumbnailScroller/DefaultMess
|
|
42
38
|
|
43
39
|
export default {
|
44
40
|
name: "CmdThumbnailScroller",
|
45
|
-
components: {
|
46
|
-
CmdImage,
|
47
|
-
CmdSlideButton
|
48
|
-
},
|
49
41
|
mixins: [
|
50
42
|
I18n,
|
51
43
|
DefaultMessageProperties
|