comand-component-library 3.3.87 → 4.0.1

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 (73) hide show
  1. package/dist/comand-component-library.js +1728 -1655
  2. package/dist/comand-component-library.umd.cjs +4 -4
  3. package/dist/media/images/slideshow-images/large/slide1.jpg +0 -0
  4. package/dist/media/images/slideshow-images/large/slide2.jpg +0 -0
  5. package/dist/media/images/slideshow-images/large/slide3.jpg +0 -0
  6. package/dist/media/images/slideshow-images/large/slide4.jpg +0 -0
  7. package/dist/media/images/slideshow-images/medium/slide1.jpg +0 -0
  8. package/dist/media/images/slideshow-images/medium/slide2.jpg +0 -0
  9. package/dist/media/images/slideshow-images/medium/slide3.jpg +0 -0
  10. package/dist/media/images/slideshow-images/medium/slide4.jpg +0 -0
  11. package/dist/media/images/slideshow-images/small/slide1.jpg +0 -0
  12. package/dist/media/images/slideshow-images/small/slide2.jpg +0 -0
  13. package/dist/media/images/slideshow-images/small/slide3.jpg +0 -0
  14. package/dist/media/images/slideshow-images/small/slide4.jpg +0 -0
  15. package/dist/style.css +1 -1
  16. package/package.json +2 -2
  17. package/src/ComponentLibrary.vue +2629 -0
  18. package/src/assets/data/address-data.json +3 -3
  19. package/src/assets/data/main-navigation.json +2 -0
  20. package/src/components/CmdAddressData.vue +91 -97
  21. package/src/components/CmdAddressDataItem.vue +60 -52
  22. package/src/components/CmdBankAccountData.vue +1 -1
  23. package/src/components/CmdBox.vue +50 -14
  24. package/src/components/CmdBoxWrapper.vue +23 -9
  25. package/src/components/CmdBreadcrumbs.vue +1 -1
  26. package/src/components/CmdCompanyLogo.vue +14 -11
  27. package/src/components/CmdContainer.vue +1 -1
  28. package/src/components/CmdCookieDisclaimer.vue +1 -1
  29. package/src/components/CmdCopyrightInformation.vue +1 -1
  30. package/src/components/CmdFancyBox.vue +8 -5
  31. package/src/components/CmdForm.vue +7 -1
  32. package/src/components/CmdFormElement.vue +58 -108
  33. package/src/components/CmdFormFilters.vue +2 -1
  34. package/src/components/CmdGoogleMaps.vue +1 -1
  35. package/src/components/CmdHeadline.vue +116 -52
  36. package/src/components/CmdIcon.vue +1 -1
  37. package/src/components/CmdImage.vue +1 -1
  38. package/src/components/CmdImageGallery.vue +1 -1
  39. package/src/components/CmdImageZoom.vue +1 -1
  40. package/src/components/CmdInputGroup.vue +8 -7
  41. package/src/components/CmdListOfLinks.vue +25 -25
  42. package/src/components/CmdListOfLinksItem.vue +0 -4
  43. package/src/components/CmdListOfRequirements.vue +10 -2
  44. package/src/components/CmdLoginForm.vue +2 -1
  45. package/src/components/CmdMainNavigation.vue +38 -26
  46. package/src/components/CmdMultistepFormProgressBar.vue +50 -4
  47. package/src/components/CmdNewsletterSubscription.vue +8 -15
  48. package/src/components/CmdOpeningHours.vue +34 -19
  49. package/src/components/CmdOpeningHoursItem.vue +22 -14
  50. package/src/components/CmdPagination.vue +22 -16
  51. package/src/components/CmdProgressBar.vue +1 -1
  52. package/src/components/CmdSidebar.vue +13 -2
  53. package/src/components/CmdSiteFooter.vue +14 -14
  54. package/src/components/CmdSiteHeader.vue +14 -29
  55. package/src/components/CmdSiteSearch.vue +12 -11
  56. package/src/components/CmdSlideButton.vue +9 -7
  57. package/src/components/CmdSlideshow.vue +14 -12
  58. package/src/components/CmdSocialNetworks.vue +11 -4
  59. package/src/components/CmdSocialNetworksItem.vue +2 -7
  60. package/src/components/CmdSwitchLanguage.vue +1 -1
  61. package/src/components/CmdSystemMessage.vue +11 -6
  62. package/src/components/CmdTable.vue +64 -16
  63. package/src/components/CmdTabs.vue +2 -2
  64. package/src/components/CmdTextImageBlock.vue +3 -1
  65. package/src/components/CmdThumbnailScroller.vue +180 -155
  66. package/src/components/CmdToggleDarkMode.vue +1 -1
  67. package/src/components/CmdTooltip.vue +6 -1
  68. package/src/components/CmdUploadForm.vue +69 -43
  69. package/src/components/CmdWidthLimitationWrapper.vue +7 -3
  70. package/src/components/ComponentSettings.vue +171 -0
  71. package/src/main.js +3 -3
  72. package/src/mixins/FieldValidation.js +0 -17
  73. package/src/App.vue +0 -2119
@@ -1,7 +1,6 @@
1
1
  <template>
2
2
  <div class="cmd-box-wrapper">
3
- <div v-if="cmdHeadline.headlineText || allowUserToToggleOrientation || allowTogglingCollapsingBoxes"
4
- class="flex-container headline-wrapper">
3
+ <div v-if="cmdHeadline.headlineText || allowUserToToggleOrientation || allowTogglingCollapsingBoxes" class="flex-container headline-wrapper">
5
4
  <!-- begin CmdHeadline -->
6
5
  <CmdHeadline v-if="cmdHeadline.headlineText" v-bind="cmdHeadline" />
7
6
  <!-- end CmdHeadline -->
@@ -12,14 +11,14 @@
12
11
  <CmdIcon :iconClass="collapsingBoxesOpen ? expandBoxesIcon.iconClass : collapseBoxesIcon.iconClass" :type="rowView ? iconGridView.iconType : iconRowView.iconType" />
13
12
  <!-- end CmdIcon -->
14
13
  </a>
15
- <a v-if="allowUserToToggleOrientation" href="#" @click.prevent="rowView = !rowView" :title="rowView ? iconRowView.tooltip : iconGridView.tooltip">
14
+ <a v-if="allowUserToToggleOrientation" href="#" @click.prevent="toggleOrientation" :title="rowView ? iconRowView.tooltip : iconGridView.tooltip">
16
15
  <!-- begin CmdIcon -->
17
16
  <CmdIcon :iconClass="rowView ? iconGridView.iconClass : iconRowView.iconClass" :type="rowView ? iconGridView.iconType : iconRowView.iconType" />
18
17
  <!-- end CmdIcon -->
19
18
  </a>
20
19
  </div>
21
20
  </div>
22
- <div :class="[
21
+ <div :class="['inner-box-wrapper',
23
22
  useFlexbox ? 'flex-container' : 'grid-container-create-columns',
24
23
  {
25
24
  'no-gap': !useGap,
@@ -46,7 +45,8 @@ export default {
46
45
  return {
47
46
  rowView: this.useRowViewAsDefault,
48
47
  collapsingBoxesOpen: true,
49
- currentOpenBox: []
48
+ currentOpenBox: [],
49
+ oneBoxPerRow: false
50
50
  }
51
51
  },
52
52
  props: {
@@ -198,6 +198,10 @@ export default {
198
198
  }
199
199
  },
200
200
  methods: {
201
+ toggleOrientation() {
202
+ this.rowView = !this.rowView
203
+ this.oneBoxPerRow = this.rowView
204
+ },
201
205
  boxIsOpen(index) {
202
206
  return this.currentOpenBox.includes(index)
203
207
  },
@@ -263,10 +267,8 @@ export default {
263
267
  }
264
268
  </script>
265
269
 
266
- <style lang="scss">
270
+ <style>
267
271
  /* begin cmd-box-wrapper ---------------------------------------------------------------------------------------- */
268
- @import '../assets/styles/variables';
269
-
270
272
  .cmd-box-wrapper {
271
273
  display: flex;
272
274
  flex-direction: column;
@@ -298,6 +300,12 @@ export default {
298
300
  }
299
301
  }
300
302
 
303
+ .inner-box-wrapper > *{
304
+ flex: none;
305
+ flex-grow: 1;
306
+ flex-basis: min-content;
307
+ }
308
+
301
309
  .row-view {
302
310
  flex-direction: column;
303
311
 
@@ -328,6 +336,13 @@ export default {
328
336
  }
329
337
  }
330
338
 
339
+
340
+ }
341
+ </style>
342
+
343
+ <style lang="scss">
344
+ @import '../assets/styles/variables';
345
+ .cmd-box-wrapper {
331
346
  @media only screen and (max-width: $medium-max-width) {
332
347
  > .grid-container-create-columns {
333
348
  grid-template-columns: repeat(v-bind(boxesPerRowMedium), minmax(0, 1fr));
@@ -340,6 +355,5 @@ export default {
340
355
  }
341
356
  }
342
357
  }
343
-
344
358
  /* end cmd-box-wrapper ---------------------------------------------------------------------------------------- */
345
359
  </style>
@@ -68,7 +68,7 @@ export default {
68
68
  }
69
69
  </script>
70
70
 
71
- <style lang="scss">
71
+ <style>
72
72
  /* begin cmd-breadcrumbs ---------------------------------------------------------------------------------------- */
73
73
  .cmd-breadcrumbs {
74
74
  display: flex;
@@ -1,17 +1,17 @@
1
1
  <template>
2
- <div class="cmd-company-logo">
2
+ <div class="cmd-company-logo company-logo">
3
3
  <router-link v-if="link?.type === 'router'" :to="link?.path" :title="link?.tooltip">
4
4
  <!-- begin CmdImage -->
5
- <CmdImage :image="image" />
5
+ <CmdImage :image="image"/>
6
6
  <!-- end CmdImage -->
7
7
  </router-link>
8
8
  <a v-else-if="link?.type === 'href'" :href="link?.path" :title="link?.tooltip">
9
9
  <!-- begin CmdImage -->
10
- <CmdImage :image="image" />
10
+ <CmdImage :image="image"/>
11
11
  <!-- end CmdImage -->
12
12
  </a>
13
13
  <!-- begin CmdImage -->
14
- <CmdImage v-else :image="image" />
14
+ <CmdImage v-else :image="image"/>
15
15
  <!-- end CmdImage -->
16
16
  </div>
17
17
  </template>
@@ -92,8 +92,8 @@ export default {
92
92
  this.prefersColorScheme = event.matches ? "light" : "dark"
93
93
  },
94
94
  observeDom(mutationList) {
95
- for(let i = 0; i < mutationList.length; i++) {
96
- if(mutationList[i].type === 'attributes') {
95
+ for (let i = 0; i < mutationList.length; i++) {
96
+ if (mutationList[i].type === 'attributes') {
97
97
  this.toggleColorScheme()
98
98
  break
99
99
  }
@@ -105,7 +105,7 @@ export default {
105
105
  toggleColorScheme() {
106
106
  if (document.querySelector("html").classList.contains("light-mode")) {
107
107
  this.prefersColorScheme = "light"
108
- } else if(document.querySelector("html").classList.contains("dark-mode")) {
108
+ } else if (document.querySelector("html").classList.contains("dark-mode")) {
109
109
  this.prefersColorScheme = "dark"
110
110
  } else if (matchMedia("(prefers-color-scheme: light)").matches) {
111
111
  this.prefersColorScheme = "light"
@@ -117,10 +117,8 @@ export default {
117
117
  }
118
118
  </script>
119
119
 
120
- <style lang="scss">
120
+ <style>
121
121
  /* begin cmd-company-logo ---------------------------------------------------------------------------------------- */
122
- @import '../assets/styles/variables';
123
-
124
122
  .cmd-company-logo {
125
123
  img {
126
124
  display: block;
@@ -134,9 +132,14 @@ export default {
134
132
  border: 0;
135
133
  }
136
134
  }
135
+ }
136
+ </style>
137
137
 
138
+ <style lang="scss">
139
+ @import '../assets/styles/variables';
138
140
 
139
- @media only screen and (max-width: $medium-max-width) {
141
+ @media only screen and (max-width: $medium-max-width) {
142
+ .cmd-company-logo {
140
143
  img {
141
144
  max-width: 100%;
142
145
  max-height: 7.5rem;
@@ -17,7 +17,7 @@ export default {
17
17
  }
18
18
  </script>
19
19
 
20
- <style lang="scss">
20
+ <style>
21
21
  .cmd-container {
22
22
  min-height: 5rem;
23
23
  }
@@ -273,7 +273,7 @@ export default {
273
273
  }
274
274
  </script>
275
275
 
276
- <style lang="scss">
276
+ <style>
277
277
  /* begin cmd-cookie-disclaimer ---------------------------------------------------------------------------------------- */
278
278
  .cmd-cookie-disclaimer {
279
279
  width: 100%;
@@ -10,7 +10,7 @@ export default {
10
10
  }
11
11
  </script>
12
12
 
13
- <style lang="scss">
13
+ <style>
14
14
  /* begin cmd-copyright-information ---------------------------------------------------------------------------------------- */
15
15
  .cmd-copyright-information {
16
16
  background: var(--text-color);
@@ -471,10 +471,8 @@ export {openFancyBox}
471
471
  export default FancyBox
472
472
  </script>
473
473
 
474
- <style lang="scss">
474
+ <style>
475
475
  /* begin cmd-fancybox ---------------------------------------------------------------------------------------- */
476
- @import "../assets/styles/variables";
477
-
478
476
  .cmd-fancybox {
479
477
  z-index: 500;
480
478
  flex-direction: column;
@@ -490,13 +488,13 @@ export default FancyBox
490
488
  margin-top: calc(var(--default-margin) * 2)
491
489
  }
492
490
 
493
- // detect open-attribute (will be added to dom automatically)
491
+ /* detect open-attribute (will be added to dom automatically) */
494
492
  &[open] {
495
493
  display: flex;
496
494
  }
497
495
 
498
496
  &.show-overlay::backdrop {
499
- --reduced-opacity: .75; // must be declared again, because ::backdrop does not allow the use of global variables
497
+ --reduced-opacity: .75; /* must be declared again, because ::backdrop does not allow the use of global variables */
500
498
  background: rgba(0, 0, 0, var(--reduced-opacity));
501
499
  }
502
500
 
@@ -619,7 +617,12 @@ export default FancyBox
619
617
  }
620
618
  }
621
619
  }
620
+ }
621
+ </style>
622
622
 
623
+ <style lang="scss">
624
+ @import "../assets/styles/variables";
625
+ .cmd-fancybox {
623
626
  @media only screen and (max-width: $medium-max-width) {
624
627
  .outer-content-wrapper {
625
628
  .content {
@@ -185,7 +185,8 @@ export default {
185
185
  }
186
186
  </script>
187
187
 
188
- <style lang="scss">
188
+ <style>
189
+ /* begin cmd-form ---------------------------------------------------------------------------------------- */
189
190
  .cmd-form {
190
191
  &:not([data-use-validation="true"]) {
191
192
  label.error :where(::placeholder, select option:first-child),
@@ -204,5 +205,10 @@ export default {
204
205
  border-color: var(--error-color);
205
206
  }
206
207
  }
208
+
209
+ .button, .button:last-child {
210
+ margin-left: auto;
211
+ }
207
212
  }
213
+ /* end cmd-form ---------------------------------------------------------------------------------------- */
208
214
  </style>
@@ -1,24 +1,21 @@
1
1
  <template>
2
2
  <label
3
- v-if="(element === 'input' || element === 'select' || element === 'textarea')"
4
- :class="[
3
+ v-if="(element === 'input' || element === 'select' || element === 'textarea')"
4
+ :class="[
5
5
  'cmd-form-element',
6
6
  validationStatus,
7
7
  $attrs.class,
8
8
  {
9
9
  disabled: $attrs.disabled,
10
10
  inline : displayLabelInline,
11
- checked: isChecked,
12
11
  'toggle-switch': toggleSwitch,
13
12
  colored: colored,
14
- on: colored && isChecked,
15
- off: colored && !isChecked,
16
13
  'has-state': validationStatus
17
14
  }
18
15
  ]"
19
- :for="htmlId"
20
- :title="$attrs.title"
21
- ref="label">
16
+ :for="htmlId"
17
+ :title="$attrs.title"
18
+ ref="label">
22
19
 
23
20
  <!-- begin label-text (+ required asterisk) -->
24
21
  <span v-if="(labelText || $slots.labeltext) && $attrs.type !== 'checkbox' && $attrs.type !== 'radio'"
@@ -26,7 +23,7 @@
26
23
  <span>
27
24
  <template v-if="labelText">{{ labelText }}</template>
28
25
  <!-- begin slot 'labeltext' -->
29
- <slot v-else name="labeltext" />
26
+ <slot v-else name="labeltext"/>
30
27
  <!-- end slot 'labeltext' -->
31
28
  <sup v-if="$attrs.required" aria-hidden="true">*</sup>
32
29
  </span>
@@ -43,15 +40,15 @@
43
40
  />
44
41
  <!-- end CmdTooltipForInputElements -->
45
42
 
46
- <a v-if="$attrs.required || inputRequirements.length"
47
- href="#"
48
- @click.prevent
49
- :title="validationTooltip"
50
- :aria-errormessage="tooltipId"
51
- aria-live="assertive"
52
- :id="tooltipId">
43
+ <a v-if="($attrs.required || inputRequirements.length) && showStatusIcon"
44
+ href="#"
45
+ @click.prevent
46
+ :title="validationTooltip"
47
+ :aria-errormessage="tooltipId"
48
+ aria-live="assertive"
49
+ :id="tooltipId">
53
50
  <!-- begin CmdIcon -->
54
- <CmdIcon :iconClass="getStatusIconClass" />
51
+ <CmdIcon :iconClass="getStatusIconClass"/>
55
52
  <!-- end CmdIcon -->
56
53
  </a>
57
54
  </span>
@@ -59,10 +56,7 @@
59
56
 
60
57
  <span v-if="$attrs.type !== 'checkbox' && $attrs.type !== 'radio'" class="flex-container"><!-- container required to place inner icons correctly -->
61
58
  <!-- begin CmdIcon (for icon inside field) -->
62
- <CmdIcon
63
- v-if="fieldIconClass"
64
- class="place-inside"
65
- :iconClass="fieldIconClass"
59
+ <CmdIcon v-if="fieldIconClass" class="place-inside" :iconClass="fieldIconClass"
66
60
  />
67
61
  <!-- end CmdIcon (for icon inside field) -->
68
62
 
@@ -98,8 +92,8 @@
98
92
  :title="iconPasswordVisible.tooltip"
99
93
  >
100
94
  <!-- begin CmdIcon -->
101
- <CmdIcon :iconClass="iconPasswordVisible.iconClass" />
102
- <!-- end CmdIcon -->
95
+ <CmdIcon :iconClass="iconPasswordVisible.iconClass"/>
96
+ <!-- end CmdIcon -->
103
97
  </a>
104
98
  <!-- end show-password-icon -->
105
99
  </span>
@@ -121,7 +115,7 @@
121
115
  @blur="onBlur"
122
116
  :checked="isChecked"
123
117
  :value="inputValue"
124
- :class="[inputClass, validationStatus, toggleSwitchIconClass, { 'replace-input-type': replaceInputType, 'toggle-switch': toggleSwitch }]"
118
+ :class="[inputClass, validationStatus, toggleSwitchIconClass, { 'replace-input-type': replaceInputType}]"
125
119
  :id="htmlId"
126
120
  :disabled="$attrs.disabled"
127
121
  :aria-invalid="validationStatus === 'error'"
@@ -130,7 +124,7 @@
130
124
  <span>
131
125
  <template v-if="labelText">{{ labelText }}</template>
132
126
  <!-- begin slot 'labeltext' -->
133
- <slot v-else name="labeltext" />
127
+ <slot v-else name="labeltext"/>
134
128
  <!-- end slot 'labeltext' -->
135
129
  <sup v-if="$attrs.required">*</sup>
136
130
  </span>
@@ -140,15 +134,16 @@
140
134
  <!-- begin labels for toggle-switch with switch-label -->
141
135
  <template v-else-if="onLabel && offLabel">
142
136
  <span class="switch-label-wrapper">
143
- <input v-bind="elementAttributes"
144
- @change="onChange"
145
- @blur="onBlur"
146
- :checked="isChecked"
147
- :value="inputValue"
148
- :class="{inputClass, validationStatus}"
149
- :id="htmlId"
150
- :disabled="$attrs.disabled"
151
- :aria-invalid="validationStatus === 'error'"
137
+ <input
138
+ v-bind="elementAttributes"
139
+ @change="onChange"
140
+ @blur="onBlur"
141
+ :checked="isChecked"
142
+ :value="inputValue"
143
+ :class="{inputClass, validationStatus}"
144
+ :id="htmlId"
145
+ :disabled="$attrs.disabled"
146
+ :aria-invalid="validationStatus === 'error'"
152
147
  />
153
148
  <span class="label-text">{{ onLabel }}</span>
154
149
  <span class="label-text">{{ offLabel }}</span>
@@ -200,14 +195,16 @@
200
195
  :maxlength="getMaxLength()"
201
196
  :value="modelValue"
202
197
  />
203
- <a v-if="showSearchButton" href="#" :class="['button no-flex', {disabled: $attrs.disabled}]" :title="iconSearch.tooltip" @click.prevent="executeSearch">
198
+ <a v-if="showSearchButton" href="#" :class="['button no-flex', {disabled: $attrs.disabled}]"
199
+ :title="iconSearch.tooltip" @click.prevent="executeSearch">
204
200
  <!-- begin CmdIcon -->
205
- <CmdIcon :iconClass="iconSearch.iconClass" />
201
+ <CmdIcon :iconClass="iconSearch.iconClass"/>
206
202
  <!-- end CmdIcon -->
207
203
  </a>
208
- <a v-if="iconDelete?.show" href="#" @click.prevent="$emit('update:modelValue', '')" :title="iconDelete?.tooltip">
204
+ <a v-if="iconDelete?.show" href="#" @click.prevent="$emit('update:modelValue', '')"
205
+ :title="iconDelete?.tooltip">
209
206
  <!-- begin CmdIcon -->
210
- <CmdIcon :iconClass="iconDelete?.iconClass" :type="iconDelete?.iconType" />
207
+ <CmdIcon :iconClass="iconDelete?.iconClass" :type="iconDelete?.iconType"/>
211
208
  <!-- end CmdIcon -->
212
209
  </a>
213
210
  </span>
@@ -392,6 +389,13 @@ export default {
392
389
  type: Array,
393
390
  required: false
394
391
  },
392
+ /**
393
+ * activate if interactive status-icon (to show requirements) should be shown above form-element
394
+ */
395
+ showStatusIcon: {
396
+ type: Boolean,
397
+ default: true
398
+ },
395
399
  /**
396
400
  * native button
397
401
  */
@@ -706,8 +710,8 @@ export default {
706
710
  },
707
711
  // toggle icons for toggle-switch
708
712
  toggleSwitchIconClass() {
709
- if(this.toggleSwitch && this.useIconsForToggleSwitch && this.toggleSwitchUncheckedIconClass && this.toggleSwitchCheckedIconClass) {
710
- if(this.isChecked) {
713
+ if (this.toggleSwitch && this.useIconsForToggleSwitch && this.toggleSwitchUncheckedIconClass && this.toggleSwitchCheckedIconClass) {
714
+ if (this.isChecked) {
711
715
  return this.toggleSwitchCheckedIconClass
712
716
  }
713
717
  return this.toggleSwitchUncheckedIconClass
@@ -719,7 +723,7 @@ export default {
719
723
  additionalStandardRequirements() {
720
724
  const requirements = []
721
725
  // check if field is type "email"
722
- if(this.$attrs.type === "email") {
726
+ if (this.$attrs.type === "email") {
723
727
  requirements.push({
724
728
  message: this.getMessage("cmdformelement.validationTooltip.is_valid_email"),
725
729
  valid: () => this.$refs.input.checkValidity()
@@ -822,7 +826,7 @@ export default {
822
826
  },
823
827
  closeTooltipOnBlur() {
824
828
  // close tooltip by calling function from CmdTooltipForInputElements using $refs
825
- if(this.$refs.tooltip) {
829
+ if (this.$refs.tooltip) {
826
830
  this.$refs.tooltip.hideTooltip()
827
831
  }
828
832
  },
@@ -842,9 +846,10 @@ export default {
842
846
  }
843
847
  </script>
844
848
 
845
- <style lang="scss">
849
+ <style>
846
850
  /* begin cmd-form-element ------------------------------------------------------------------------------------------ */
847
851
  .cmd-form-element {
852
+ /* icon right aligned in input */
848
853
  input + .place-inside {
849
854
  left: auto;
850
855
  right: .5rem
@@ -859,11 +864,17 @@ export default {
859
864
  color: var(--status-color);
860
865
 
861
866
  &.place-inside {
862
- color: var(--status-color);
867
+ --status-color: var(--error-color);
863
868
  }
864
869
  }
865
870
  }
866
871
 
872
+ :is(input[type="checkbox"], input[type="radio"]):checked {
873
+ ~ .label-text span {
874
+ color: var(--hyperlink-color);
875
+ }
876
+ }
877
+
867
878
  &.inline {
868
879
  & > span {
869
880
  & > a:not(.button) {
@@ -918,85 +929,24 @@ export default {
918
929
  }
919
930
  }
920
931
 
921
- &.colored {
922
- input {
923
- border-color: var(--error-color);
924
-
925
- &::after {
926
- border-color: inherit;
927
- }
928
- }
929
-
930
- &.on {
931
- input {
932
- border-color: var(--success-color);
933
-
934
- &::after {
935
- border-color: inherit;
936
- background: var(--success-color);
937
- }
938
- }
939
- }
940
- }
941
-
942
932
  .characters-left-wrapper {
943
933
  margin-top: calc(var(--default-margin) / 2);
944
934
  display: block;
945
935
 
946
936
  span:not(:only-child):first-child {
947
937
  margin-right: calc(var(--default-margin) / 2);
948
- color: var(--text-color);
938
+ color: var(--color-scheme-text-color);
949
939
  }
950
940
 
951
941
  .characters-left {
952
- color: var(--text-color);
942
+ color: var(--color-scheme-text-color);
953
943
 
954
944
  &.error {
955
945
  color: var(--error-color);
956
946
  }
957
947
  }
958
948
  }
959
-
960
- /* begin toggle-switch */
961
- /* no cmd-prefix-styling (class based on frontend-framework) */
962
- &.toggle-switch {
963
- &.colored {
964
- &.off {
965
- .switch-label-wrapper {
966
- border-color: var(--error-color);
967
-
968
- span {
969
- &.label-text {
970
- color: var(--error-color);
971
-
972
- &::before {
973
- border-color: var(--error-color);
974
- background-color: var(--pure-white);
975
- }
976
- }
977
- }
978
- }
979
- }
980
-
981
- &.on {
982
- .switch-label-wrapper {
983
- border-color: var(--success-color);
984
-
985
- span {
986
- &.label-text {
987
- color: var(--success-color);
988
-
989
- &::before {
990
- border-color: var(--success-color);
991
- background-color: var(--success-color);
992
- }
993
- }
994
- }
995
- }
996
- }
997
- }
998
- }
999
- /* end toggle-switch */
1000
949
  }
950
+
1001
951
  /* end cmd-form-element------------------------------------------------------------------------------------------ */
1002
952
  </style>
@@ -105,10 +105,11 @@ export default {
105
105
  }
106
106
  </script>
107
107
 
108
- <style lang="scss">
108
+ <style>
109
109
  /* begin cmd-form-filters ------------------------------------------------------------------------------------------ */
110
110
  .cmd-form-filters {
111
111
  display: flex;
112
+ margin: 0;
112
113
 
113
114
  li {
114
115
  list-style-type: none;
@@ -30,7 +30,7 @@ export default {
30
30
  }
31
31
  </script>
32
32
 
33
- <style lang="scss">
33
+ <style>
34
34
  /* begin cmd-google-maps ---------------------------------------------------------------------------------------- */
35
35
  .cmd-google-maps {
36
36
  border: var(--default-border);