comand-component-library 3.3.84 → 3.3.86

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 (38) hide show
  1. package/dist/comand-component-library.js +5623 -3929
  2. package/dist/comand-component-library.umd.cjs +4 -4
  3. package/dist/style.css +1 -1
  4. package/package.json +2 -2
  5. package/src/App.vue +215 -112
  6. package/src/assets/data/component-structure.json +228 -0
  7. package/src/assets/data/form-elements.json +156 -0
  8. package/src/assets/data/opening-hours.json +79 -37
  9. package/src/components/CmdAddressData.vue +187 -201
  10. package/src/components/CmdAddressDataItem.vue +306 -0
  11. package/src/components/CmdBox.vue +1 -0
  12. package/src/components/CmdBoxWrapper.vue +53 -5
  13. package/src/components/CmdFancyBox.vue +31 -4
  14. package/src/components/CmdForm.vue +98 -4
  15. package/src/components/CmdFormElement.vue +5 -1
  16. package/src/components/CmdHeadline.vue +179 -52
  17. package/src/components/CmdImage.vue +205 -76
  18. package/src/components/CmdImageGallery.vue +88 -85
  19. package/src/components/CmdListOfLinks.vue +63 -43
  20. package/src/components/CmdListOfLinksItem.vue +97 -0
  21. package/src/components/CmdLoginForm.vue +3 -6
  22. package/src/components/CmdMultistepFormProgressBar.vue +37 -8
  23. package/src/components/CmdOpeningHours.vue +280 -63
  24. package/src/components/CmdOpeningHoursItem.vue +264 -0
  25. package/src/components/{CmdPager.vue → CmdPagination.vue} +2 -2
  26. package/src/components/CmdSlideshow.vue +137 -10
  27. package/src/components/CmdSocialNetworks.vue +115 -28
  28. package/src/components/CmdSocialNetworksItem.vue +184 -0
  29. package/src/components/CmdTable.vue +0 -1
  30. package/src/components/CmdTextImageBlock.vue +158 -0
  31. package/src/components/CmdThumbnailScroller.vue +132 -12
  32. package/src/components/CmdToggleDarkMode.vue +58 -1
  33. package/src/components/EditComponentWrapper.vue +553 -0
  34. package/src/index.js +2 -2
  35. package/src/mixins/EditMode.vue +28 -9
  36. package/src/utils/editmode.js +30 -5
  37. package/src/components/CmdTextBlock.vue +0 -73
  38. package/src/editmode/editModeContext.js +0 -50
@@ -1,42 +1,105 @@
1
1
  <template>
2
2
  <!-- begin edit-mode -->
3
- <figure v-if="editing" :class="['cmd-image flex-container vertical', getTextAlign]">
4
- <template v-if="figcaption?.position === 'top'">
5
- <CmdFormElement
6
- element="input"
7
- type="text"
8
- :required="true"
9
- labelText="Text figcaption"
10
- v-model="editableFigcaptionText"
11
- />
12
- </template>
13
- <div :class="['box drop-area flex-container vertical', { 'allow-drop': allowDrop }]" v-on="dragAndDropHandler" title="Drag new image to this area to replace old one!">
14
- <span class="icon-image"></span>
15
- <img :src="imageSource" :alt="image.alt" :title="image.tooltip"/>
16
- </div>
3
+ <EditComponentWrapper
4
+ v-if="editModeContext"
5
+ ref="editComponentWrapper"
6
+ class="edit-items"
7
+ :showComponentName="false"
8
+ :allowedComponentTypes="[]"
9
+ componentName="CmdImage"
10
+ :componentProps="{image, figcaption}"
11
+ :componentPath="imageComponentPath"
12
+ :allowDeleteComponent="!!imageSource"
13
+ :itemProvider="editModeConfig?.allowAddItem !== false ? itemProvider : null"
14
+ >
15
+ <template v-slot="slotProps">
16
+ <figure :class="['cmd-image flex-container no-gap vertical', textAlign]">
17
+ <!-- begin figcaption above image -->
18
+ <template v-if="figcaption?.show && figcaption?.position === 'top'">
19
+ <CmdFormElement
20
+ v-if="slotProps.editing"
21
+ element="input"
22
+ type="text"
23
+ :class="[textAlign, 'edit-mode']"
24
+ :required="true"
25
+ labelText="Text figcaption"
26
+ v-model="editableFigcaptionText"
27
+ />
28
+ <figcaption v-else-if="figcaption?.text">{{ figcaption?.text }}</figcaption>
29
+ </template>
30
+ <!-- end figcaption above image -->
31
+
32
+ <!-- begin image-wrapper -->
33
+ <template v-if="slotProps.editing">
34
+ <!-- begin image with drop-area -->
35
+ <a href="#" :class="['box drop-area flex-container vertical', { 'allow-drop': allowDrop }]"
36
+ v-on="dragAndDropHandler"
37
+ @click.prevent="selectFiles"
38
+ title="Drag new image to this area to replace old one!">
39
+ <span class="icon-image"></span>
40
+ <img :src="imageSource" :alt="image?.alt" :title="image?.tooltip"/>
41
+ </a>
42
+ <!-- end image with drop-area -->
43
+
44
+ <!-- begin CmdFormElement -->
45
+ <CmdFormElement
46
+ class="hidden"
47
+ element="input"
48
+ type="file"
49
+ labelText="Select new image"
50
+ :disabled="uploadInitiated"
51
+ @change="fileSelected"
52
+ ref="formElement"
53
+ />
54
+ <!-- end CmdFormElement -->
55
+ </template>
56
+ <template v-else-if="imageSource">
57
+ <!-- begin image without drop-area -->
58
+ <img :src="imageSource" :alt="image?.alt" :title="image?.tooltip"/>
59
+ <!-- end image without drop-area -->
60
+ </template>
61
+ <!-- end image-wrapper -->
17
62
 
18
- <template v-if="figcaption?.position !== 'top'">
19
- <CmdFormElement
20
- element="input"
21
- type="text"
22
- :class="getTextAlign"
23
- :required="true"
24
- labelText="Text figcaption"
25
- :showLabel="false"
26
- v-model="editableFigcaptionText"
27
- />
63
+ <!-- begin figcaption below image -->
64
+ <template v-if="figcaption?.show && figcaption?.position !== 'top'">
65
+ <CmdFormElement
66
+ v-if="slotProps.editing"
67
+ element="input"
68
+ type="text"
69
+ :class="[textAlign, 'edit-mode']"
70
+ :required="true"
71
+ labelText="Text figcaption"
72
+ :showLabel="false"
73
+ v-model="editableFigcaptionText"
74
+ placeholder="figcaption"
75
+ />
76
+ <figcaption v-else-if="figcaption?.text">{{ figcaption?.text }}</figcaption>
77
+ </template>
78
+ <!-- end figcaption below image -->
79
+
80
+ <!-- begin show placeholder if no image exists (and component is not edited) -->
81
+ <button v-if="!slotProps.editing && !imageSource" type="button" class="button confirm"
82
+ @click="onAddItem">
83
+ <span class="icon-add"></span>
84
+ <span>Add new image</span>
85
+ </button>
86
+ <!-- end show placeholder if no image exists (and component is not edited) -->
87
+ </figure>
28
88
  </template>
29
- </figure>
89
+ </EditComponentWrapper>
30
90
  <!-- end edit-mode -->
31
91
 
32
- <figure v-else :class="['cmd-image', getTextAlign]">
92
+ <!-- begin default-view -->
93
+ <figure v-else :class="['cmd-image', textAlign]">
33
94
  <figcaption v-if="figcaption?.show && figcaption?.position === 'top'">{{ figcaption?.text }}</figcaption>
34
- <img :src="imageSource" :alt="image.alt" :title="image.tooltip"/>
95
+ <img :src="imageSource" :alt="image?.alt" :title="image?.tooltip"/>
35
96
  <figcaption v-if="figcaption?.show && figcaption?.position !== 'top'">{{ figcaption?.text }}</figcaption>
36
97
  </figure>
98
+ <!-- end default-view -->
37
99
  </template>
38
100
 
39
101
  <script>
102
+ import {createUuid} from "../utils/common.js"
40
103
  import {checkAndUploadFile} from "../utils/checkAndUploadFile"
41
104
  import EditMode from "../mixins/EditMode.vue"
42
105
  import {updateHandlerProvider} from "../utils/editmode.js"
@@ -53,6 +116,7 @@ export default {
53
116
  uploadInitiated: false,
54
117
  allowDrop: false,
55
118
  showFigcaption: true,
119
+ figcaptionText: null,
56
120
  figcaptionPosition: null,
57
121
  figcaptionTextAlign: null,
58
122
  tooltip: null,
@@ -81,8 +145,7 @@ export default {
81
145
  text: "Right",
82
146
  value: "right"
83
147
  }
84
- ],
85
- figcaptionText: null
148
+ ]
86
149
  }
87
150
  },
88
151
  props: {
@@ -91,7 +154,7 @@ export default {
91
154
  */
92
155
  image: {
93
156
  type: Object,
94
- required: true
157
+ required: false
95
158
  },
96
159
  /**
97
160
  * figcaption-object including visibility, position (top/bottom), text
@@ -101,12 +164,15 @@ export default {
101
164
  required: false
102
165
  },
103
166
  /**
104
- * max file size (in bytes) for file to upload
167
+ * maximum file size (in bytes) for file to upload
105
168
  */
106
169
  maxFileUploadSize: {
107
170
  type: Number,
108
171
  default: 500000
109
172
  },
173
+ /**
174
+ * minimum image width (in pixels) for file to upload
175
+ */
110
176
  minImageWidth: {
111
177
  type: Number,
112
178
  default: 600
@@ -125,22 +191,29 @@ export default {
125
191
  window.removeEventListener("resize", this.updateWindowWidth)
126
192
  },
127
193
  computed: {
194
+ imageComponentPath() {
195
+ return this.componentPath || ["props", "cmdImage"]
196
+ },
128
197
  imageSource() {
129
198
  // check if a new image is provided
130
- if(this.newImageSource) {
199
+ if (this.newImageSource) {
131
200
  return this.newImageSource
132
201
  }
133
202
 
134
203
  // if only one src exists
135
- const imgSrc = this.image.src
204
+ const imgSrc = this.image?.src
205
+
206
+ if (!imgSrc) {
207
+ return null
208
+ }
136
209
 
137
- if(typeof imgSrc === "string") {
210
+ if (typeof imgSrc === "string") {
138
211
  return imgSrc
139
212
  }
140
213
 
141
214
  const deviceWidth = this.currentWindowWidth;
142
215
  // return image for small-devices (if exists)
143
- if(imgSrc.small && deviceWidth <= this.smallMaxWidth) {
216
+ if (imgSrc.small && deviceWidth <= this.smallMaxWidth) {
144
217
  return imgSrc.small
145
218
  }
146
219
  // return image for medium-devices (if exists)
@@ -150,7 +223,7 @@ export default {
150
223
  // else return large (will be used if images for small-and -medium-devices do not exist or if screen resolution is larger than mediumMaxWidth)
151
224
  return imgSrc.large
152
225
  },
153
- getTextAlign() {
226
+ textAlign() {
154
227
  if (this.figcaption?.textAlign) {
155
228
  return "text-" + this.figcaption.textAlign
156
229
  }
@@ -167,7 +240,7 @@ export default {
167
240
  },
168
241
  editableFigcaptionText: {
169
242
  get() {
170
- return this.figcaptionText == null ? this.figcaption.text : this.figcaptionText
243
+ return this.figcaptionText == null ? this.figcaption?.text : this.figcaptionText
171
244
  },
172
245
  set(value) {
173
246
  this.figcaptionText = value
@@ -175,6 +248,36 @@ export default {
175
248
  }
176
249
  },
177
250
  methods: {
251
+ itemProvider() {
252
+ const editModeConfig = this.editModeConfig?.itemProviderOverwrite?.()
253
+ return {
254
+ "image": {
255
+ "src": "/media/images/demo-images/medium/landscape-01.jpg",
256
+ "alt": "Alternative Text",
257
+ // add additional keys from editModeConfig
258
+ ...editModeConfig?.image || {}
259
+ },
260
+ "figcaption": {
261
+ "text": "Figcaption DE",
262
+ "position": "bottom",
263
+ "textAlign": "center",
264
+ "show": true
265
+ }
266
+ }
267
+ },
268
+ onAddItem() {
269
+ // execute editComponent-function from editComponentWrapper to enter editMode directly on "add"
270
+ this.$refs.editComponentWrapper.editComponent()
271
+ },
272
+ selectFiles() {
273
+ let inputFile = this.$refs.formElement.getDomElement().querySelector("input[type='file']")
274
+ inputFile.click()
275
+ },
276
+ fileSelected(event) {
277
+ if (event.target.files.length > 0) {
278
+ checkAndUploadFile(event.target.files[0], this.allowedFileExtensions, this.minImageWidth, this.maxFileUploadSize, (imageSource) => this.newImageSource = imageSource)
279
+ }
280
+ },
178
281
  updateWindowWidth() {
179
282
  this.currentWindowWidth = window.innerWidth
180
283
  },
@@ -182,10 +285,10 @@ export default {
182
285
  return {
183
286
  image: {...this.image},
184
287
  figcaption: {
185
- show: this.editableShowFigcaption,
186
- position: this.editableFigcaptionPosition,
187
- textAlign: this.editableFigcaptionTextAlign,
188
- text: this.editableFigcaptionText
288
+ show: this.showFigcaption,
289
+ position: this.figcaptionPosition,
290
+ textAlign: this.figcaptionTextAlign,
291
+ text: this.figcaptionText
189
292
  }
190
293
  }
191
294
  },
@@ -238,7 +341,9 @@ export default {
238
341
  })
239
342
  },
240
343
  updateHandlerProvider() {
241
- const figcaptionText = this.editableFigcaptionText
344
+ const figcaptionText = this.figcaptionText
345
+ this.figcaptionText = null // reset data-property
346
+
242
347
  return updateHandlerProvider(this, {
243
348
  update(props) {
244
349
  if (!props.figcaption) {
@@ -248,6 +353,18 @@ export default {
248
353
  }
249
354
  })
250
355
  }
356
+ },
357
+ watch: {
358
+ figcaption: {
359
+ handler() {
360
+ this.showFigcaption = this.figcaption?.show
361
+ this.figcaptionText = this.figcaption?.text
362
+ this.figcaptionPosition = this.figcaption?.position
363
+ this.figcaptionTextAlign = this.figcaption?.textAlign
364
+ },
365
+ immediate: true,
366
+ deep: true
367
+ }
251
368
  }
252
369
  }
253
370
  </script>
@@ -255,49 +372,61 @@ export default {
255
372
  <style lang="scss">
256
373
  /* begin cmd-image ------------------------------------------------------------------------------------------ */
257
374
  .cmd-image {
258
- img {
259
- display: block;
260
- }
375
+ img {
376
+ display: block;
377
+ }
261
378
 
262
- &.text-center {
263
- figcaption {
264
- text-align: center;
379
+ &.text-center {
380
+ figcaption {
381
+ text-align: center;
382
+ }
265
383
  }
266
- }
267
384
 
268
- &.text-right {
269
- figcaption {
270
- text-align: right;
385
+ &.text-right {
386
+ figcaption {
387
+ text-align: right;
388
+ }
271
389
  }
272
- }
273
390
 
274
- .drop-area {
275
- border: 0;
276
- align-items: center;
277
- justify-content: center;
278
- padding: 0;
391
+ .drop-area {
392
+ border: 0;
393
+ align-items: center;
394
+ justify-content: center;
395
+ padding: 0;
279
396
 
280
- > [class*="icon"] {
281
- position: absolute;
282
- top: 50%;
283
- left: 50%;
284
- transform: translateX(-50%) translateY(-50%);
285
- font-size: 10rem;
286
- color: var(--pure-white);
287
- text-shadow: var(--text-shadow);
288
- z-index: 10;
289
- }
397
+ > [class*="icon"] {
398
+ position: absolute;
399
+ top: 50%;
400
+ left: 50%;
401
+ transform: translateX(-50%) translateY(-50%);
402
+ font-size: 10rem;
403
+ color: var(--pure-white);
404
+ text-shadow: var(--text-shadow);
405
+ z-index: 10;
406
+ }
290
407
 
291
- img {
292
- opacity: .7;
293
- transition: var(--default-transition);
408
+ img {
409
+ opacity: .7;
410
+ transition: var(--default-transition);
411
+
412
+ &:hover, :active, :focus {
413
+ opacity: 1;
414
+ transition: var(--default-transition);
415
+ }
416
+
417
+ &:not([src]) {
418
+ display: block;
419
+ width: 100%;
420
+ min-height: 30rem;
421
+ }
422
+ }
423
+ }
424
+ }
294
425
 
295
- &:hover, :active, :focus {
296
- opacity: 1;
297
- transition: var(--default-transition);
298
- }
426
+ .edit-mode .edit-component-wrapper .cmd-image {
427
+ label.edit-mode input {
428
+ padding: calc(var(--default-padding) / 2);
299
429
  }
300
- }
301
430
  }
302
431
 
303
432
  /* end cmd-image ------------------------------------------------------------------------------------------ */
@@ -2,9 +2,8 @@
2
2
  <div class="grid-container-create-columns cmd-image-gallery">
3
3
  <!-- begin cmd-headline -->
4
4
  <CmdHeadline
5
- v-if="cmdHeadline"
6
- :headlineText="cmdHeadline.headlineText"
7
- :headlineLevel="cmdHeadline.headlineLevel"
5
+ v-if="cmdHeadline?.headlineText || editModeContext"
6
+ v-bind="cmdHeadline"
8
7
  />
9
8
  <!-- end cmd-headline -->
10
9
 
@@ -21,49 +20,45 @@
21
20
  <!-- end images linked to fancybox -->
22
21
 
23
22
  <!-- begin images not linked to fancybox -->
24
- <CmdImage v-else :image="image.image" :figcaption="image.figcaption"/>
23
+ <div v-else v-for="(image, index) in images" :key="`i${index}`" class="image-wrapper">
24
+ <CmdImage :image="image.image" :figcaption="image.figcaption"/>
25
+ </div>
25
26
  <!-- end images not linked to fancybox -->
26
27
  </template>
27
28
  <!-- end default view -->
28
29
 
29
30
  <!-- begin edit-mode view -->
30
- <EditComponentWrapper class="image-wrapper" v-else v-for="(image, index) in images" :key="'x' + index" :componentIdentifier="componentIdentifier(index)">
31
- <CmdImage
32
- :image="image.image"
33
- :figcaption="image.figcaption"
34
- :editModeContextData="{imageIndex: index}"
35
- />
36
- </EditComponentWrapper>
31
+ <CmdImage
32
+ v-else-if="images.length"
33
+ v-for="(image, index) in images"
34
+ :key="index"
35
+ class="image-wrapper"
36
+ :image="image.image"
37
+ :figcaption="image.figcaption"
38
+ :componentPath="['props', 'images', index]"
39
+ :editModeConfig="imageStructure()"
40
+ />
37
41
  <!-- end edit-mode view -->
42
+
43
+ <!-- begin show placeholder if no image exists (and component is not edited) -->
44
+ <button v-else type="button" class="button confirm" @click="onAddItem">
45
+ <span class="icon-plus"></span>
46
+ <span>Add new gallery-image</span>
47
+ </button>
48
+ <!-- end show placeholder if no image exists (and component is not edited) -->
38
49
  </div>
39
50
  </template>
40
51
 
41
52
  <script>
42
53
  // import functions
43
54
  import {openFancyBox} from "./CmdFancyBox.vue"
44
- import {useEditModeContext} from "../editmode/editModeContext.js"
45
-
46
- // import mixins
47
- //import I18n from "../mixins/I18n"
48
- //import DefaultMessageProperties from "../mixins/CmdImageGallery/DefaultMessageProperties"
55
+ import EditMode from "../mixins/EditMode.vue"
56
+ import {buildComponentPath, updateHandlerProvider} from "../utils/editmode.js"
49
57
 
50
58
  export default {
51
59
  name: "CmdImageGallery",
52
- mixins: [],
53
- provide() {
54
- return {
55
- editModeContext: this.context
56
- }
57
- },
58
- inject: {
59
- editModeContext: {
60
- default: null
61
- }
62
- },
60
+ mixins: [EditMode],
63
61
  props: {
64
- editModeContextData: {
65
- type: Object
66
- },
67
62
  /**
68
63
  * properties for CmdHeadline-component
69
64
  */
@@ -97,24 +92,25 @@ export default {
97
92
  default: "bottom"
98
93
  }
99
94
  },
100
- data() {
101
- return {
102
- context: useEditModeContext(this.editModeContext, {}, this.onSave)
103
- }
104
- },
105
95
  methods: {
106
- componentIdentifier(index) {
107
- const identifier = []
108
- identifier.push(this.editModeContext.props.sectionId)
109
- identifier.push(this.editModeContextData.componentIndex)
110
-
111
- if(this.editModeContextData.childComponentIndex != null) {
112
- identifier.push(this.editModeContextData.childComponentIndex)
96
+ itemProvider() {
97
+ return {
98
+ "image": {
99
+ "src": "/media/images/demo-images/medium/landscape-01.jpg",
100
+ "alt": "Alternative Text",
101
+ },
102
+ "figcaption": {
103
+ "text": "Figcaption DE",
104
+ "position": "bottom",
105
+ "textAlign": "center",
106
+ "show": true
107
+ }
113
108
  }
114
-
115
- identifier.push(index)
116
-
117
- return identifier.join(".")
109
+ },
110
+ onAddItem() {
111
+ this.editModeContext.content.addContent(
112
+ buildComponentPath(this, 'props', 'images', -1),
113
+ this.itemProvider)
118
114
  },
119
115
  showFancyBox(index) {
120
116
  openFancyBox({fancyBoxGallery: this.images, defaultGalleryIndex: index})
@@ -122,23 +118,28 @@ export default {
122
118
  getMessage() {
123
119
  return ""
124
120
  },
125
- onSave(data) {
126
- const imageIndex = data[0].editModeContextData.imageIndex
121
+ imageStructure() {
127
122
  return {
128
- editModeContextData: {
129
- ...(this.editModeContextData || {})
130
- },
131
- update(props) {
132
- props.images[imageIndex].image = {
133
- ...props.images[imageIndex].image,
134
- ...data[0].image
123
+ itemProviderOverwrite: () => ({
124
+ "image": {
125
+ "srcImageLarge": "/media/images/demo-images/large/landscape-01.jpg",
126
+ "tooltip": "Tooltip DE"
135
127
  }
136
- props.images[imageIndex].figcaption = {
137
- ...props.images[imageIndex].figcaption,
138
- ...data[0].figcaption
128
+ })
129
+ }
130
+ },
131
+ updateHandlerProvider() {
132
+ const htmlContent = this.editableHtmlContent
133
+ return updateHandlerProvider(this, {
134
+ update(props, childUpdateHandlers) {
135
+ props.htmlContent = htmlContent
136
+ const cmdHeadlineUpdateHandler = childUpdateHandlers?.find(handler => handler.name === "CmdHeadline")
137
+ if (cmdHeadlineUpdateHandler) {
138
+ props.cmdHeadline = props.cmdHeadline || {}
139
+ cmdHeadlineUpdateHandler.update(props.cmdHeadline)
139
140
  }
140
141
  }
141
- }
142
+ })
142
143
  }
143
144
  }
144
145
  }
@@ -147,38 +148,40 @@ export default {
147
148
  <style lang="scss">
148
149
  /* begin cmd-image-gallery ---------------------------------------------------------------------------------------- */
149
150
  .cmd-image-gallery {
150
- > .cmd-headline, > input.edit-mode {
151
- grid-column: span var(--grid-columns);
152
- margin-bottom: 0;
153
- }
154
-
155
- > .image-wrapper {
156
- align-self: center;
157
- justify-self: center;
158
- grid-column: span var(--grid-small-span);
159
-
160
- img {
161
- border: var(--default-border);
162
- border-radius: var(--border-radius);
163
- max-height: 30rem;
151
+ > .cmd-headline, > input.edit-mode, > .edit-component-wrapper {
152
+ grid-column: span var(--grid-columns);
153
+ margin-bottom: 0;
164
154
  }
165
155
 
166
- figcaption {
167
- padding: calc(var(--default-padding) / 2);
168
- }
156
+ .image-wrapper {
157
+ align-self: center;
158
+ justify-self: center;
159
+ grid-column: span var(--grid-small-span);
160
+ width: 100%;
161
+ min-width: 11.1rem; // assure to be as wide as action-buttons in edit-mode
162
+
163
+ img {
164
+ border: var(--default-border);
165
+ border-radius: var(--border-radius);
166
+ max-height: 30rem;
167
+ }
169
168
 
170
- &:hover, &:active, &:focus {
171
- text-decoration: none;
169
+ figcaption {
170
+ padding: calc(var(--default-padding) / 2);
171
+ }
172
172
 
173
- img {
174
- border: var(--primary-border);
175
- }
176
- }
173
+ &:hover, &:active, &:focus {
174
+ text-decoration: none;
177
175
 
178
- & + .pager {
179
- margin-top: calc(var(--default-margin) * 2);
176
+ img {
177
+ border: var(--primary-border);
178
+ }
179
+ }
180
+
181
+ & + .pager {
182
+ margin-top: calc(var(--default-margin) * 2);
183
+ }
180
184
  }
181
- }
182
185
  }
183
186
 
184
187
  /* end cmd-image-gallery ------------------------------------------------------------------------------------------ */