comand-component-library 4.0.6 → 4.0.8

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 (37) hide show
  1. package/dist/comand-component-library.js +2542 -2407
  2. package/dist/comand-component-library.umd.cjs +3 -3
  3. package/dist/style.css +1 -1
  4. package/package.json +2 -2
  5. package/src/ComponentLibrary.vue +106 -32
  6. package/src/assets/data/list-of-links.json +13 -1
  7. package/src/assets/data/pages/list-of-downloads.json +56 -0
  8. package/src/assets/data/pages/list-of-site-links.json +78 -0
  9. package/src/assets/data/social-networks-page-by-json.json +2 -2
  10. package/src/assets/styles/component-library-global-styles.scss +12 -0
  11. package/src/componentSettingsDataAndControls.vue +39 -6
  12. package/src/components/CmdFakeSelect.vue +16 -23
  13. package/src/components/CmdFancyBox.vue +1 -0
  14. package/src/components/CmdForm.vue +7 -2
  15. package/src/components/CmdFormElement.vue +12 -3
  16. package/src/components/CmdInputGroup.vue +6 -4
  17. package/src/components/CmdListOfLinks.vue +72 -12
  18. package/src/components/CmdListOfLinksItem.vue +14 -3
  19. package/src/components/CmdPageFooter.vue +83 -0
  20. package/src/components/CmdPagination.vue +4 -4
  21. package/src/components/CmdSidebar.vue +2 -1
  22. package/src/components/CmdSocialNetworks.vue +34 -22
  23. package/src/components/CmdSocialNetworksItem.vue +1 -1
  24. package/src/components/CmdSwitchLanguage.vue +3 -1
  25. package/src/components/CmdTextImageBlock.vue +44 -15
  26. package/src/components/CmdThumbnailScroller.vue +3 -2
  27. package/src/components/CmdUploadForm.vue +78 -64
  28. package/src/components/CmdWidthLimitationWrapper.vue +27 -6
  29. package/src/components/EditComponentWrapper.vue +77 -17
  30. package/src/index.js +2 -1
  31. package/src/mixins/CmdFakeSelect/DefaultMessageProperties.js +0 -1
  32. package/src/mixins/pages/BasicForm/DefaultMessageProperties.js +28 -0
  33. package/src/pages/BasicForm.vue +341 -0
  34. package/src/pages/PageOverview.vue +53 -0
  35. package/src/pages/PageWrapper.vue +260 -0
  36. package/src/pages/SegmentedListsOfLinks.vue +34 -0
  37. /package/src/mixins/{CmdPager → CmdPagination}/DefaultMessageProperties.js +0 -0
@@ -11,7 +11,19 @@
11
11
  "text": "Internal link",
12
12
  "path": "/content/fancybox-content.html",
13
13
  "tooltip": "Open local file in fancybox",
14
- "fancybox": true
14
+ "fancybox": true,
15
+ "children": [
16
+ {
17
+ "type": "href",
18
+ "text": "Link for child #1",
19
+ "path": "#"
20
+ },
21
+ {
22
+ "type": "href",
23
+ "text": "Link for child #2",
24
+ "path": "#"
25
+ }
26
+ ]
15
27
  },
16
28
  {
17
29
  "iconClass": "icon-export",
@@ -0,0 +1,56 @@
1
+ [
2
+ {
3
+ "headline": {
4
+ "headlineLevel": 4,
5
+ "headlineText": "Segment #1 (vertical list)"
6
+ },
7
+ "orientation": "vertical",
8
+ "links": [
9
+ {
10
+ "iconClass": "icon-file-pdf",
11
+ "type": "href",
12
+ "text": "Download file #1",
13
+ "path": "#"
14
+ },
15
+ {
16
+ "iconClass": "icon-file-excel",
17
+ "type": "href",
18
+ "text": "Download file #2",
19
+ "path": "#"
20
+ },
21
+ {
22
+ "iconClass": "icon-file-other",
23
+ "type": "href",
24
+ "text": "Download file #3",
25
+ "path": "#"
26
+ }
27
+ ]
28
+ },
29
+ {
30
+ "headline": {
31
+ "headlineLevel": 4,
32
+ "headlineText": "Segment #2 (horizontal list)"
33
+ },
34
+ "orientation": "horizontal",
35
+ "links": [
36
+ {
37
+ "iconClass": "icon-file-pdf",
38
+ "type": "href",
39
+ "text": "Download file #1",
40
+ "path": "#"
41
+ },
42
+ {
43
+ "iconClass": "icon-file-excel",
44
+ "type": "href",
45
+ "text": "Download file #2",
46
+ "path": "#"
47
+ },
48
+ {
49
+ "iconClass": "icon-file-other",
50
+ "type": "href",
51
+ "text": "Download file #3",
52
+ "path": "#"
53
+ }
54
+ ]
55
+ }
56
+ ]
@@ -0,0 +1,78 @@
1
+ [
2
+ {
3
+ "headline": {
4
+ "headlineLevel": 4,
5
+ "headlineText": "Segment #1 (vertical list)"
6
+ },
7
+ "orientation": "vertical",
8
+ "links": [
9
+ {
10
+ "iconClass": "icon-home",
11
+ "type": "href",
12
+ "text": "Link #1",
13
+ "path": "#"
14
+ },
15
+ {
16
+ "iconClass": "icon-user-profile",
17
+ "type": "href",
18
+ "text": "Link #2",
19
+ "path": "#",
20
+ "children": [
21
+ {
22
+ "iconClass": "icon-link",
23
+ "type": "href",
24
+ "text": "Sublink #1",
25
+ "path": "#"
26
+ },
27
+ {
28
+ "iconClass": "icon-export",
29
+ "type": "href",
30
+ "text": "Sublink #2",
31
+ "path": "#"
32
+ }
33
+ ]
34
+ },
35
+ {
36
+ "type": "href",
37
+ "text": "Link #3",
38
+ "path": "#"
39
+ }
40
+ ]
41
+ },
42
+ {
43
+ "headline": {
44
+ "headlineLevel": 4,
45
+ "headlineText": "Segment #2 (horizontal list)"
46
+ },
47
+ "orientation": "horizontal",
48
+ "links": [
49
+ {
50
+ "type": "href",
51
+ "text": "Link #1",
52
+ "path": "#"
53
+ },
54
+ {
55
+ "type": "href",
56
+ "text": "Link #2",
57
+ "path": "#",
58
+ "children": [
59
+ {
60
+ "type": "href",
61
+ "text": "Sublink #1",
62
+ "path": "#"
63
+ },
64
+ {
65
+ "type": "href",
66
+ "text": "Sublink #2",
67
+ "path": "#"
68
+ }
69
+ ]
70
+ },
71
+ {
72
+ "type": "href",
73
+ "text": "Link #3",
74
+ "path": "#"
75
+ }
76
+ ]
77
+ }
78
+ ]
@@ -7,9 +7,9 @@
7
7
  "linkText": "Share"
8
8
  },
9
9
  {
10
- "id": "social-network-twitter",
10
+ "id": "social-network-x",
11
11
  "path": "https://twitter.com/home?status=http%3A%2F%2Fdevelopment.comand-cms.com%2Fmodule%2Fteam.html",
12
- "tooltip": "Share this page on twitter",
12
+ "tooltip": "Share this page on X",
13
13
  "iconClass": "icon-twitter",
14
14
  "linkText": "Share"
15
15
  },
@@ -250,6 +250,18 @@ body.avoid-scrolling {
250
250
 
251
251
  &.success {
252
252
  --status-color: var(--success-color);
253
+
254
+ .label-text > a {
255
+ &:has([class*="icon-"]) {
256
+ &:hover, &:active, &:focus {
257
+ cursor: default;
258
+
259
+ [class*="icon-"] {
260
+ color: var(--success-color);
261
+ }
262
+ }
263
+ }
264
+ }
253
265
  }
254
266
 
255
267
  &.info {
@@ -5,6 +5,10 @@ export default {
5
5
  data() {
6
6
  return {
7
7
  cmdAddressDataSettingsData: {
8
+ cmdHeadline: {
9
+ headlineText: "Address Data",
10
+ headlineLevel: 3
11
+ },
8
12
  useSlot: false,
9
13
  showLabelIcons: true,
10
14
  showLabelTexts: false,
@@ -12,6 +16,10 @@ data() {
12
16
  showLabels: true
13
17
  },
14
18
  cmdBankAccountDataSettingsData: {
19
+ cmdHeadline: {
20
+ headlineText: "Bank Account Data",
21
+ headlineLevel: 3
22
+ },
15
23
  allowCopyByClick: false,
16
24
  additionalInformation: ""
17
25
  },
@@ -331,7 +339,8 @@ data() {
331
339
  largeIcons: false,
332
340
  sectionAnchors: false,
333
341
  orientation: "vertical",
334
- align: "left"
342
+ align: "left",
343
+ showListStyleItems: false
335
344
  },
336
345
  cmdListOfLinksSettingsControls: {
337
346
  align: [
@@ -358,6 +367,16 @@ data() {
358
367
  text: "Horizontal",
359
368
  value: "horizontal"
360
369
  }
370
+ ],
371
+ showListStyleItems: [
372
+ {
373
+ text: "False (default)",
374
+ value: false
375
+ },
376
+ {
377
+ text: "True",
378
+ value: true
379
+ }
361
380
  ]
362
381
  },
363
382
  cmdLoginFormSettingsData: {
@@ -450,6 +469,9 @@ data() {
450
469
  headlineLevel: 3
451
470
  }
452
471
  },
472
+ cmdPageFooterSettingsData: {
473
+ useSmallButtons: false
474
+ },
453
475
  cmdPaginationSettingsData: {
454
476
  pages: 3,
455
477
  itemsPerPage: 1,
@@ -523,12 +545,12 @@ data() {
523
545
  ],
524
546
  buttonTextAlign: [
525
547
  {
526
- text: "Left (default)",
527
- value: "left"
548
+ text: "Right (default)",
549
+ value: "right"
528
550
  },
529
551
  {
530
- text: "Right",
531
- value: "right"
552
+ text: "Left",
553
+ value: "left"
532
554
  }
533
555
  ]
534
556
  },
@@ -572,7 +594,8 @@ data() {
572
594
  cmdTextImageBlockSettingsData: {
573
595
  htmlContent: "Text given as html-content",
574
596
  paragraphTextAlign: "left",
575
- headlinePosition: "aboveImage"
597
+ headlinePosition: "aboveImage",
598
+ orientation: "vertical"
576
599
  },
577
600
  cmdTextImageBlockSettingsControls: {
578
601
  paragraphTextAlign: [
@@ -598,6 +621,16 @@ data() {
598
621
  text: "Below Image",
599
622
  value: "belowImage"
600
623
  }
624
+ ],
625
+ orientation: [
626
+ {
627
+ text: "Vertical (default)",
628
+ value: "vertical"
629
+ },
630
+ {
631
+ text: "Horizontal",
632
+ value: "horizontal"
633
+ }
601
634
  ]
602
635
  },
603
636
  cmdThumbnailScrollerSettingsData: {
@@ -18,12 +18,13 @@
18
18
  <template v-if="showLabel">
19
19
  <!-- begin label -->
20
20
  <span class="label-text">
21
- <span :id="htmlId">{{ labelText }}<sup v-if="$attrs.required !== undefined">*</sup></span>
21
+ <span :id="htmlId">{{ labelText }}<sup v-if="$attrs.required !== undefined" aria-hidden="true">*</sup></span>
22
22
 
23
+ <!-- begin status-icon (linked with tooltip) -->
23
24
  <a v-if="($attrs.required || inputRequirements.length) && showStatusIcon"
24
25
  href="#"
25
26
  @click.prevent
26
- :title="!useCustomTooltip ? getValidationMessage : ''"
27
+ :title="validationTooltip"
27
28
  :aria-errormessage="tooltipId"
28
29
  aria-live="assertive"
29
30
  :id="tooltipId">
@@ -31,6 +32,7 @@
31
32
  <CmdIcon :iconClass="getStatusIconClass"/>
32
33
  <!-- end CmdIcon -->
33
34
  </a>
35
+ <!-- end status-icon (linked with tooltip) -->
34
36
 
35
37
  <!-- begin CmdTooltipForFormElements -->
36
38
  <CmdTooltipForFormElements
@@ -51,7 +53,9 @@
51
53
  <!-- begin default/selected-option -->
52
54
  <a href="#" @click.prevent="toggleOptions" @blur="onBlur" :title="optionIcon?.tooltip">
53
55
  <!-- begin show flag -->
54
- <img v-if="type === 'country' && optionCountry" :src="pathFlag(optionCountry)" :alt="optionCountry"
56
+ <img v-if="type === 'country' && optionCountry"
57
+ :src="pathFlag(optionCountry)"
58
+ :alt="optionCountry"
55
59
  :class="['flag', optionCountry]"/>
56
60
  <!-- end show flag -->
57
61
 
@@ -67,7 +71,7 @@
67
71
  <!-- end optional icon -->
68
72
 
69
73
  <!-- begin text -->
70
- <span v-if="optionName" class="option-name" :style="limitWidthStyle">{{ optionName }}</span>
74
+ <span v-if="optionName" class="option-name">{{ optionName }}</span>
71
75
  <!-- end text -->
72
76
 
73
77
  <!-- begin custom dropdown-icon -->
@@ -175,7 +179,8 @@
175
179
  <script>
176
180
  // import mixins
177
181
  import I18n from "../mixins/I18n"
178
- import DefaultMessageProperties from "../mixins/CmdFakeSelect/DefaultMessageProperties"
182
+ import DefaultMessagePropertiesFakeSelect from "../mixins/CmdFakeSelect/DefaultMessageProperties"
183
+ import DefaultMessagePropertiesFormElement from "../mixins/CmdFormElement/DefaultMessageProperties"
179
184
  import FieldValidation from "../mixins/FieldValidation"
180
185
  import Identifier from "../mixins/Identifier"
181
186
  import Tooltip from "../mixins/Tooltip"
@@ -185,7 +190,8 @@ export default {
185
190
  inheritAttrs: false,
186
191
  mixins: [
187
192
  I18n,
188
- DefaultMessageProperties,
193
+ DefaultMessagePropertiesFakeSelect,
194
+ DefaultMessagePropertiesFormElement,
189
195
  FieldValidation,
190
196
  Identifier,
191
197
  Tooltip
@@ -194,7 +200,6 @@ export default {
194
200
  return {
195
201
  showOptions: false,
196
202
  validationStatus: "",
197
- limitWidthStyle: null,
198
203
  allOptionsSelected: false
199
204
  }
200
205
  },
@@ -424,16 +429,6 @@ export default {
424
429
  return this.getMessage("cmdfakeselect.linktext.select_all_options")
425
430
  }
426
431
  },
427
- mounted() {
428
- //this.$nextTick(this.limitWidth)
429
- //setTimeout(this.limitWidth, 250)
430
- const hnd = setInterval(() => {
431
- if (this.$refs.fakeselect) {
432
- clearInterval(hnd)
433
- this.limitWidth()
434
- }
435
- }, 100)
436
- },
437
432
  methods: {
438
433
  toggleAllOptions() {
439
434
  this.validationStatus = "success"
@@ -450,12 +445,6 @@ export default {
450
445
 
451
446
  this.$emit("update:modelValue", checkboxValues)
452
447
  },
453
- limitWidth() {
454
- if (this.$refs.fakeselect) {
455
- const outerWidth = this.$refs.fakeselect.offsetWidth
456
- this.limitWidthStyle = {width: outerWidth / 100 * 90 + "px"}
457
- }
458
- },
459
448
  toggleOptions() {
460
449
  if (this.$attrs.disabled !== 'disabled') {
461
450
  this.showOptions = !this.showOptions
@@ -566,6 +555,10 @@ export default {
566
555
  color: var(--color-scheme-text-color);
567
556
  border-radius: var(--default-border-radius);
568
557
 
558
+ img {
559
+ flex-shrink: 0;
560
+ }
561
+
569
562
  span, [class*="icon"] {
570
563
  color: var(--color-scheme-text-color);
571
564
  }
@@ -474,6 +474,7 @@ export default FancyBox
474
474
  <style>
475
475
  /* begin cmd-fancybox ---------------------------------------------------------------------------------------- */
476
476
  .cmd-fancybox {
477
+ position: fixed;
477
478
  z-index: 500;
478
479
  flex-direction: column;
479
480
  padding: var(--default-padding);
@@ -31,10 +31,13 @@
31
31
  :nativeButton="item.nativeButton"
32
32
  />
33
33
  <!-- end loop for formElements -->
34
- <button v-if="submitButton" class="button" type="submit">
34
+
35
+ <!-- begin submit-button -->
36
+ <button v-if="submitButton" :class="['button', {primary: submitButton.primary}]" :type="submitButton.type">
35
37
  <span v-if="submitButton.iconClass" :class="submitButton.iconClass"></span>
36
38
  <span v-if="submitButton.text">{{ submitButton.text }}</span>
37
39
  </button>
40
+ <!-- end submit-button -->
38
41
  </fieldset>
39
42
 
40
43
  <!-- begin button-row-slot-content -->
@@ -128,7 +131,9 @@ export default {
128
131
  default() {
129
132
  return {
130
133
  iconClass: "icon-check",
131
- text: "Submit"
134
+ text: "Submit",
135
+ type: "submit",
136
+ primary: true
132
137
  }
133
138
  }
134
139
  }
@@ -22,12 +22,17 @@
22
22
  :class="['label-text', { hidden: !showLabel }]">
23
23
  <span>
24
24
  <template v-if="labelText">{{ labelText }}</template>
25
+
25
26
  <!-- begin slot 'labeltext' -->
26
27
  <slot v-else name="labeltext"/>
27
28
  <!-- end slot 'labeltext' -->
28
- <sup v-if="$attrs.required" aria-hidden="true">*</sup>
29
+
30
+ <!-- begin required asterisk -->
31
+ <sup v-if="$attrs.required !== undefined" aria-hidden="true">*</sup>
32
+ <!-- end required asterisk -->
29
33
  </span>
30
34
 
35
+ <!-- begin status-icon (linked with tooltip) -->
31
36
  <a v-if="($attrs.required || inputRequirements.length) && showStatusIcon"
32
37
  href="#"
33
38
  @click.prevent
@@ -39,6 +44,7 @@
39
44
  <CmdIcon :iconClass="getStatusIconClass"/>
40
45
  <!-- end CmdIcon -->
41
46
  </a>
47
+ <!-- end status-icon (linked with tooltip) -->
42
48
 
43
49
  <!-- begin CmdTooltipForFormElements -->
44
50
  <CmdTooltipForFormElements
@@ -875,8 +881,11 @@ export default {
875
881
  }
876
882
 
877
883
  &.has-state, & + .cmd-tooltip {
878
- * {
879
- --status-color: var(--error-color);
884
+
885
+ &.error {
886
+ * {
887
+ --status-color: var(--error-color);
888
+ }
880
889
  }
881
890
 
882
891
  ::placeholder {
@@ -14,9 +14,9 @@
14
14
 
15
15
  <!-- begin label -->
16
16
  <span v-show="showLabel" class="label-text">
17
- <span :id="htmlId">{{ labelText }}<sup v-if="required">*</sup></span>
17
+ <span :id="htmlId">{{ labelText }}<sup v-if="required" aria-hidden="true">*</sup></span>
18
18
 
19
- <!-- begin status-icon -->
19
+ <!-- begin status-icon (linked with tooltip) -->
20
20
  <a v-if="(required || inputRequirements.length > 0) && showStatusIcon"
21
21
  href="#"
22
22
  @click.prevent
@@ -28,7 +28,7 @@
28
28
  <CmdIcon :iconClass="getStatusIconClass"/>
29
29
  <!-- end CmdIcon -->
30
30
  </a>
31
- <!-- end status-icon -->
31
+ <!-- end status-icon (linked with tooltip) -->
32
32
 
33
33
  <!-- begin CmdTooltipForFormElements -->
34
34
  <CmdTooltipForFormElements
@@ -87,9 +87,11 @@
87
87
  import FieldValidation from "../mixins/FieldValidation.js"
88
88
  import Identifier from "../mixins/Identifier"
89
89
  import Tooltip from "../mixins/Tooltip.js"
90
+ import DefaultMessageProperties from "../mixins/CmdFormElement/DefaultMessageProperties"
90
91
 
91
92
  export default {
92
93
  mixins: [
94
+ DefaultMessageProperties,
93
95
  FieldValidation,
94
96
  Identifier,
95
97
  Tooltip
@@ -240,7 +242,7 @@ export default {
240
242
  updateStatus() {
241
243
  if (this.required) {
242
244
  if (this.inputValue?.length) {
243
- this.validationStatus = ""
245
+ this.validationStatus = "success"
244
246
  return
245
247
  }
246
248
  this.validationStatus = "error"
@@ -1,5 +1,12 @@
1
1
  <template>
2
- <div :class="['cmd-list-of-links', {box: styleAsBox, horizontal: orientation === 'horizontal', 'section-anchors': sectionAnchors, 'large-icons': largeIcons}]">
2
+ <div :class="['cmd-list-of-links',
3
+ {
4
+ box: styleAsBox, horizontal: orientation === 'horizontal',
5
+ 'section-anchors': sectionAnchors,
6
+ 'large-icons': largeIcons,
7
+ 'show-list-style-items': showListStyleItems
8
+ }
9
+ ]">
3
10
  <!-- begin cmd-headline -->
4
11
  <CmdHeadline
5
12
  v-if="cmdHeadline?.headlineText || editModeContext"
@@ -9,6 +16,7 @@
9
16
 
10
17
  <!-- begin list of links -->
11
18
  <ul :class="['flex-container', {'no-gap': !useGap}, 'align-' + align, setStretchClass]">
19
+ <!-- begin CmdListOfLinksItem-->
12
20
  <CmdListOfLinksItem
13
21
  v-if="!editModeContext"
14
22
  v-for="(link, index) in links"
@@ -16,6 +24,7 @@
16
24
  :class="{'active': sectionAnchors && activeSection === index}"
17
25
  :link="link"
18
26
  />
27
+ <!-- end CmdListOfLinksItem-->
19
28
 
20
29
  <!-- begin edit-mode -->
21
30
  <li v-else>
@@ -31,11 +40,14 @@
31
40
  :componentPath="['props', 'links', index]"
32
41
  :itemProvider="itemProvider"
33
42
  >
43
+ <!-- begin CmdListOfLinksItem-->
34
44
  <CmdListOfLinksItem
35
45
  :class="{'active': sectionAnchors && activeSection === index}"
36
46
  :link="link"
37
47
  />
48
+ <!-- end CmdListOfLinksItem-->
38
49
  </EditComponentWrapper>
50
+
39
51
  <button v-if="links.length === 0" type="button" class="button confirm small" @click="onAddItem">
40
52
  <span class="icon-plus"></span>
41
53
  <span>Add new entry</span>
@@ -48,7 +60,10 @@
48
60
  </template>
49
61
 
50
62
  <script>
63
+ // import mixins (editMode only)
51
64
  import EditMode from "../mixins/EditMode.vue"
65
+
66
+ // import utils (editMode only)
52
67
  import {buildComponentPath, updateHandlerProvider} from "../utils/editmode.js"
53
68
 
54
69
  export default {
@@ -97,6 +112,15 @@ export default {
97
112
  type: Number,
98
113
  default: 0
99
114
  },
115
+ /**
116
+ * toggle list-style-items visibility
117
+ *
118
+ * @affectsStyling: true
119
+ */
120
+ showListStyleItems: {
121
+ type: Boolean,
122
+ default: false
123
+ },
100
124
  /**
101
125
  * set horizontal alignment
102
126
  *
@@ -200,6 +224,19 @@ export default {
200
224
  &.align-right li {
201
225
  text-align: right;
202
226
  }
227
+
228
+ ul {
229
+ display: flex;
230
+ flex-direction: column;
231
+ margin-left: calc(var(--default-padding) * 2);
232
+ }
233
+ }
234
+
235
+ &.show-list-style-items {
236
+ li {
237
+ list-style-type: disc;
238
+ margin-left: 1.7rem;
239
+ }
203
240
  }
204
241
 
205
242
  &.horizontal {
@@ -210,6 +247,7 @@ export default {
210
247
  > li {
211
248
  flex: none;
212
249
  display: flex;
250
+ flex-direction: column;
213
251
  }
214
252
 
215
253
  &.align-right {
@@ -224,20 +262,42 @@ export default {
224
262
  }
225
263
 
226
264
  &.large-icons {
227
- li a {
228
- display: flex;
229
- flex-direction: column;
230
- gap: calc(var(--default-gap) / 4);
231
- text-decoration: none;
232
- align-items: center;
233
- justify-content: center;
265
+ li {
266
+ list-style-type: none;
267
+
268
+ a {
269
+ display: flex;
270
+ flex-direction: column;
271
+ gap: calc(var(--default-gap) / 4);
272
+ text-decoration: none;
273
+ align-items: center;
274
+ justify-content: center;
275
+
276
+ span {
277
+ margin: 0;
278
+ }
234
279
 
235
- span {
236
- margin: 0;
280
+ [class*="icon-"] {
281
+ font-size: 5rem;
282
+ }
237
283
  }
284
+ }
285
+ }
286
+ }
287
+ </style>
238
288
 
239
- [class*="icon-"] {
240
- font-size: 5rem;
289
+ <style lang="scss">
290
+ @import '../assets/styles/variables';
291
+
292
+ @media only screen and (max-width: $medium-max-width) {
293
+ .cmd-list-of-links {
294
+ > ul {
295
+ ul {
296
+ gap: calc(var(--default-gap) / 2);
297
+
298
+ > li:first-child {
299
+ margin-top: calc(var(--default-gap) / 2);
300
+ }
241
301
  }
242
302
  }
243
303
  }