comand-component-library 3.3.7 → 3.3.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 (48) hide show
  1. package/dist/comand-component-library.css +1 -1
  2. package/dist/comand-component-library.umd.min.js +1 -1
  3. package/package.json +2 -2
  4. package/src/App.vue +97 -28
  5. package/src/assets/data/address-data.json +8 -0
  6. package/src/assets/data/image-gallery.json +44 -20
  7. package/src/assets/data/image.json +28 -0
  8. package/src/assets/data/slideshow.json +68 -51
  9. package/src/assets/data/thumbnail-scroller.json +96 -40
  10. package/src/assets/styles/global-styles.scss +1 -1
  11. package/src/components/CmdAddressData.vue +45 -2
  12. package/src/components/CmdBox.vue +112 -62
  13. package/src/components/CmdCompanyLogo.vue +19 -2
  14. package/src/components/CmdFakeSelect.vue +2 -2
  15. package/src/components/CmdFancyBox.vue +41 -43
  16. package/src/components/CmdFormElement.vue +52 -42
  17. package/src/components/CmdFormFilters.vue +1 -1
  18. package/src/components/CmdHeadline.vue +29 -4
  19. package/src/components/CmdIcon.vue +4 -4
  20. package/src/components/CmdImage.vue +55 -0
  21. package/src/components/CmdImageGallery.vue +16 -15
  22. package/src/components/CmdImageZoom.vue +29 -13
  23. package/src/components/CmdInputGroup.vue +1 -2
  24. package/src/components/CmdListOfRequirements.vue +1 -1
  25. package/src/components/CmdLoginForm.vue +1 -1
  26. package/src/components/CmdMainNavigation.vue +3 -3
  27. package/src/components/CmdMultistepFormProgressBar.vue +9 -9
  28. package/src/components/CmdPager.vue +124 -88
  29. package/src/components/CmdShareButtons.vue +1 -1
  30. package/src/components/CmdSlideButton.vue +10 -3
  31. package/src/components/CmdSlideshow.vue +38 -31
  32. package/src/components/CmdSystemMessage.vue +32 -16
  33. package/src/components/CmdTable.vue +1 -1
  34. package/src/components/CmdTabs.vue +11 -11
  35. package/src/components/CmdThumbnailScroller.vue +15 -12
  36. package/src/components/CmdTooltip.vue +3 -3
  37. package/src/components/CmdUploadForm.vue +20 -20
  38. package/src/documentation/generated/CmdBoxPropertyDescriptions.json +7 -0
  39. package/src/documentation/generated/CmdFancyBoxPropertyDescriptions.json +3 -13
  40. package/src/documentation/generated/CmdHeadlinePropertyDescriptions.json +10 -0
  41. package/src/documentation/generated/CmdIconPropertyDescriptions.json +1 -1
  42. package/src/documentation/generated/CmdImagePropertyDescriptions.json +12 -0
  43. package/src/documentation/generated/CmdImageZoomPropertyDescriptions.json +4 -4
  44. package/src/documentation/generated/CmdPagerPropertyDescriptions.json +14 -9
  45. package/src/index.js +3 -1
  46. package/src/mixins/CmdAddressData/DefaultMessageProperties.js +5 -2
  47. package/src/mixins/CmdBox/DefaultMessageProperties.js +3 -1
  48. package/src/mixins/CmdPager/DefaultMessageProperties.js +10 -0
@@ -439,7 +439,7 @@ export default {
439
439
  span {
440
440
  font-weight: bold;
441
441
 
442
- &[class*="icon"] {
442
+ &[class*="icon-"] {
443
443
  font-size: var(--font-size-small);
444
444
  }
445
445
  }
@@ -472,7 +472,7 @@ export default {
472
472
  padding-left: calc(var(--default-margin) * 2);
473
473
 
474
474
  span {
475
- & + span[class*="icon"]::before {
475
+ & + [class*="icon-"]::before {
476
476
  display: inline-block;
477
477
  transform: rotate(0);
478
478
  }
@@ -492,7 +492,7 @@ export default {
492
492
 
493
493
  &.open {
494
494
  > a span {
495
- + span[class*="icon"]::before {
495
+ + [class*="icon-"]::before {
496
496
  display: inline-block;
497
497
  transform: rotate(-180deg);
498
498
  }
@@ -130,10 +130,10 @@ export default {
130
130
  width: 100%;
131
131
  background: var(--primary-color-reduced-opacity);
132
132
 
133
- span, span[class*="icon"] {
133
+ span, [class*="icon-"] {
134
134
  color: var(--default-background-color-reduced-opacity);
135
135
 
136
- & + span[class*="icon"] {
136
+ & + [class*="icon-"] {
137
137
  &:last-child {
138
138
  border: var(--default-border);
139
139
  border-radius: var(--full-circle);
@@ -155,7 +155,7 @@ export default {
155
155
  }
156
156
 
157
157
  &:hover, &:active, &:focus {
158
- span, span[class*="icon"] {
158
+ span, [class*="icon-"] {
159
159
  color: var(--pure-white);
160
160
  }
161
161
  }
@@ -181,7 +181,7 @@ export default {
181
181
 
182
182
  &:last-child {
183
183
  a {
184
- span[class*="icon-"] {
184
+ [class*="icon-"] {
185
185
  &:last-of-type {
186
186
  display: none;
187
187
  }
@@ -193,7 +193,7 @@ export default {
193
193
  a {
194
194
  background: var(--primary-color);
195
195
 
196
- span, span[class*='icon'] {
196
+ span, [class*="icon-"] {
197
197
  color: var(--pure-white);
198
198
  }
199
199
  }
@@ -215,7 +215,7 @@ export default {
215
215
  span, span[class*='color'] {
216
216
  color: inherit;
217
217
 
218
- & + span[class*="icon"] {
218
+ & + [class*="icon-"] {
219
219
  &:last-child {
220
220
  border-color: var(--border-color);
221
221
  color: var(--pure-white);
@@ -225,7 +225,7 @@ export default {
225
225
  }
226
226
 
227
227
  &:hover, &:active, &:focus {
228
- span, span[class*="icon"] {
228
+ span, [class*="icon-"] {
229
229
  &:not(:last-child) {
230
230
  color: var(--primary-color);
231
231
  }
@@ -251,8 +251,8 @@ export default {
251
251
  }
252
252
 
253
253
  a {
254
- span, span[class*="icon"] {
255
- & + span[class*="icon"] {
254
+ span, [class*="icon-"] {
255
+ & + [class*="icon-"] {
256
256
  &:last-child {
257
257
  left: auto;
258
258
  right: auto;
@@ -1,42 +1,54 @@
1
1
  <template>
2
2
  <div class="cmd-pager">
3
- <div class="pager">
4
- <!-- begin button to previous page -->
5
- <a class="page-change" :class="{'disabled': currentPage === 1, 'button': showLinksAsButtons}"
6
- @click.prevent="previousPage">
7
- <span :class="prevButton.iconClass"></span><span v-if="prevButton.buttonText">{{
8
- prevButton.buttonText
9
- }}</span>
10
- </a>
11
- <!-- end button to previous page -->
12
-
13
- <!-- begin buttons with page numbers -->
14
- <div class="page-index">
15
- <div class="flex-container">
16
- <a :class="{'disabled': currentPage === index + 1, 'button': showLinksAsButtons}"
17
- v-for="(item, index) in items"
18
- :key="index"
19
- @click.stop.prevent="showPage(item)" aria-live="polite">
20
- <span>{{ index + 1 }}</span>
21
- </a>
22
- </div>
3
+ <!-- begin button/link to previous page -->
4
+ <a
5
+ :href="getPreviousHref"
6
+ :class="['page-change', {'disabled': currentPage === 1, 'button': linkType === 'button'}]"
7
+ @click.prevent="previousPage"
8
+ :title="!prevLink.showText ? prevLink.text : null"
9
+ >
10
+ <!-- begin CmdIcon -->
11
+ <CmdIcon :iconClass="prevLink.iconClass" :type="prevLink.iconType"/>
12
+ <!-- end CmdIcon -->
13
+ <span v-if="prevLink.showText">{{ prevLink.text }}</span>
14
+ </a>
15
+ <!-- end button/link to previous page -->
16
+
17
+ <!-- begin buttons/link with page numbers -->
18
+ <div class="page-index">
19
+ <div class="flex-container">
20
+ <a :href="getHref(page)"
21
+ :class="{'disabled': currentPage === index + 1, 'button': linkType === 'button'}"
22
+ :title="currentPage !== index + 1 ? getMessage('cmdpager.tooltip.go_to_page', index + 1) : getMessage('cmdpager.tooltip.not_possible')"
23
+ v-for="(page, index) in pages"
24
+ :key="index"
25
+ @click.stop.prevent="showPage(page)" aria-live="polite">
26
+ <span>{{ index + 1 }}</span>
27
+ </a>
23
28
  </div>
24
- <!-- end buttons with page numbers -->
25
-
26
- <!-- begin button to next page -->
27
- <a class="page-change" :class="{'disabled': currentPage === numberOfPages, 'button': showLinksAsButtons}"
28
- @click.prevent="nextPage">
29
- <span v-if="nextButton.buttonText">{{ nextButton.buttonText }}</span>
30
- <!-- begin CmdIcon -->
31
- <CmdIcon :iconClass="nextButton.iconClass" :type="nextButton.iconType" />
32
- <!-- end CmdIcon -->
33
- </a>
34
- <!-- end button to next page -->
35
29
  </div>
30
+ <!-- end buttons/link with page numbers -->
31
+
32
+ <!-- begin button/link to next page -->
33
+ <a :href="getNextHref"
34
+ :class="['page-change', {'disabled': currentPage === numberOfPages, 'button': linkType === 'button'}]"
35
+ @click.prevent="nextPage"
36
+ :title="!nextLink.showText ? nextLink.text : null"
37
+ >
38
+ <span v-if="nextLink.showText">{{ nextLink.text }}</span>
39
+ <!-- begin CmdIcon -->
40
+ <CmdIcon :iconClass="nextLink.iconClass" :type="nextLink.iconType"/>
41
+ <!-- end CmdIcon -->
42
+ </a>
43
+ <!-- end button/link to next page -->
36
44
  </div>
37
45
  </template>
38
46
 
39
47
  <script>
48
+ // import mixins
49
+ import I18n from "../mixins/I18n"
50
+ import DefaultMessageProperties from "../mixins/CmdPager/DefaultMessageProperties"
51
+
40
52
  // import components
41
53
  import CmdIcon from "./CmdIcon"
42
54
 
@@ -45,6 +57,10 @@ export default {
45
57
  components: {
46
58
  CmdIcon
47
59
  },
60
+ mixins: [
61
+ I18n,
62
+ DefaultMessageProperties
63
+ ],
48
64
  emits: ['click'],
49
65
  data() {
50
66
  return {
@@ -53,9 +69,9 @@ export default {
53
69
  },
54
70
  props: {
55
71
  /**
56
- * number of items displayed
72
+ * number of pages displayed
57
73
  */
58
- items: {
74
+ pages: {
59
75
  type: Number,
60
76
  required: true
61
77
  },
@@ -67,37 +83,41 @@ export default {
67
83
  required: true
68
84
  },
69
85
  /**
70
- * show links as buttons
86
+ * set type of links
87
+ *
88
+ * @allowedValues: "href", "button"
71
89
  */
72
- showLinksAsButtons: {
73
- type: Boolean,
74
- default: true
90
+ linkType: {
91
+ type: String,
92
+ default: "href"
75
93
  },
76
94
  /**
77
- * button to switch to previous page
95
+ * link to switch to previous page
78
96
  *
79
97
  * @requiredForAccessibility: partial
80
98
  */
81
- prevButton: {
99
+ prevLink: {
82
100
  type: Object,
83
- default: function() {
101
+ default: function () {
84
102
  return {
85
103
  iconClass: "icon-single-arrow-left",
86
- buttonText: "prev"
104
+ text: "prev",
105
+ showText: true
87
106
  }
88
107
  }
89
108
  },
90
109
  /**
91
- * button to switch to next page
110
+ * link to switch to next page
92
111
  *
93
112
  * @requiredForAccessibility: partial
94
113
  */
95
- nextButton: {
114
+ nextLink: {
96
115
  type: Object,
97
- default: function() {
116
+ default: function () {
98
117
  return {
99
118
  iconClass: "icon-single-arrow-right",
100
- buttonText: "next"
119
+ text: "next",
120
+ showText: true
101
121
  }
102
122
  }
103
123
  }
@@ -105,12 +125,30 @@ export default {
105
125
  computed: {
106
126
  numberOfPages() {
107
127
  return Math.ceil(this.items / this.itemsPerPage)
128
+ },
129
+ getPreviousHref() {
130
+ if (this.currentPage === 1) {
131
+ return null
132
+ }
133
+ return "#"
134
+ },
135
+ getNextHref() {
136
+ if (this.currentPage === this.numberOfPages) {
137
+ return null
138
+ }
139
+ return "#"
108
140
  }
109
141
  },
110
142
  methods: {
143
+ getHref(page) {
144
+ if (this.linkType !== "href" || this.currentPage === page) {
145
+ return null
146
+ }
147
+ return "#"
148
+ },
111
149
  showPage(page) {
112
150
  this.currentPage = page
113
- this.$emit('click', page)
151
+ this.$emit("click", page)
114
152
  },
115
153
  nextPage() {
116
154
  if (this.currentPage < this.numberOfPages) {
@@ -128,70 +166,68 @@ export default {
128
166
  </script>
129
167
 
130
168
  <style lang="scss">
131
- @import '../assets/styles/variables';
132
169
  /* begin cmd-pager ---------------------------------------------------------------------------------------- */
170
+ @import '../assets/styles/variables';
171
+
133
172
  .cmd-pager {
134
- > p {
135
- text-align: center;
173
+ display: flex;
174
+ justify-content: space-between;
175
+
176
+ button, .button {
177
+ float: none;
178
+ margin: 0;
179
+
180
+ span {
181
+ align-self: center;
182
+ }
136
183
  }
137
184
 
138
- .pager {
185
+ a {
139
186
  display: flex;
140
- justify-content: space-between;
141
-
142
- button, .button {
143
- float: none;
144
- margin: 0;
187
+ align-items: center;
188
+ text-decoration: none;
145
189
 
146
- span {
147
- align-self: center;
148
- }
190
+ &:hover, &:active, &:focus {
191
+ cursor: pointer;
149
192
  }
150
193
 
151
- > a {
152
- &:last-of-type {
153
- > [class*="icon-"] {
154
- margin-right: 0;
155
- }
156
- }
157
-
194
+ &:last-of-type {
158
195
  > [class*="icon-"] {
159
- font-size: var(--icon-size-small);
196
+ margin-right: 0;
160
197
  }
161
198
  }
162
199
 
163
- a.disabled {
164
- opacity: var(--reduced-opacity);
200
+ > [class*="icon-"] {
201
+ font-size: var(--icon-size-small);
165
202
  }
203
+ }
166
204
 
167
- .page-index {
168
- a:not(.button) {
169
- padding: calc(var(--default-padding) / 2);
170
- padding-top: 0;
171
- }
205
+ .page-index {
206
+ a:not(.button) {
207
+ padding: 0 calc(var(--default-padding) / 2);
172
208
  }
209
+ }
173
210
 
174
- @media only screen and (max-width: $medium-max-width) {
175
- > a.button {
176
- span {
177
- margin: 0;
211
+ @media only screen and (max-width: $medium-max-width) {
212
+ > a.button {
213
+ span {
214
+ margin: 0;
178
215
 
179
- &:not([class*='icon']) {
180
- display: none;
181
- }
216
+ &:not([class*='icon']) {
217
+ display: none;
182
218
  }
183
219
  }
184
220
  }
221
+ }
185
222
 
186
- @media only screen and (max-width: $small-max-width) {
187
- .button {
188
- width: auto; /* overwrite default settings from framework.css */
189
- }
223
+ @media only screen and (max-width: $small-max-width) {
224
+ .button {
225
+ width: auto; /* overwrite default settings from framework.css */
226
+ }
190
227
 
191
- .page-index {
192
- .flex-container {
193
- flex-direction: row; /* overwrite default settings from framework.css */
194
- }
228
+ .page-index {
229
+ .flex-container {
230
+ flex-direction: row; /* overwrite default settings from framework.css */
195
231
  }
196
232
  }
197
233
  }
@@ -271,7 +271,7 @@ export default {
271
271
  flex: none;
272
272
  width: auto !important;
273
273
 
274
- span[class*="icon"] {
274
+ [class*="icon-"] {
275
275
  & + span {
276
276
  display: none;
277
277
  }
@@ -3,13 +3,21 @@
3
3
  @click.prevent
4
4
  :class="['cmd-slide-button', 'button', slideButtonType]"
5
5
  :title="getDirection.tooltip">
6
- <span :class="getDirection.iconClass || 'next'"></span>
6
+ <!-- being CmdIcon -->
7
+ <CmdIcon :iconClass="getDirection.iconClass || 'next'" />
8
+ <!-- end CmdIcon -->
7
9
  </a>
8
10
  </template>
9
11
 
10
12
  <script>
13
+ // import components
14
+ import CmdIcon from "./CmdIcon"
15
+
11
16
  export default {
12
17
  name: "CmdSlideButton",
18
+ components: {
19
+ CmdIcon
20
+ },
13
21
  props: {
14
22
  /**
15
23
  * set slide-button-type
@@ -88,7 +96,7 @@ export default {
88
96
  transition: var(--default-transition);
89
97
 
90
98
  span {
91
- color: var(--primary-color);
99
+ color: var(--hyperlink-color-highlighted);
92
100
  }
93
101
  }
94
102
 
@@ -105,7 +113,6 @@ export default {
105
113
  &.up, &.down {
106
114
  width: 100%;
107
115
  height: auto;
108
- height: auto;
109
116
  left: 0;
110
117
  top: 0;
111
118
  }
@@ -10,23 +10,27 @@
10
10
 
11
11
  <!-- begin area to slide -->
12
12
  <transition name="fade">
13
- <a v-if="currentItem?.href" :href="currentItem.href" :key="index" :title="currentItem.title">
13
+ <a v-if="currentItem?.link?.href" :href="currentItem?.link?.href" :title="currentItem?.link?.tooltip" :key="index">
14
14
  <figure v-if="currentItem && !useSlot" class="slideshow-item">
15
- <img :src="currentItem.imgPath" :alt="currentItem.alt"/>
16
- <figcaption>{{ currentItem.figcaption }}</figcaption>
15
+ <!-- begin CmdImage -->
16
+ <CmdImage :image="currentItem?.image" :figcaption="currentItem?.figcaption"/>
17
+ <!-- begin CmdImage -->
17
18
  </figure>
18
19
  </a>
19
- <figure v-else-if="currentItem && !currentItem.href && currentItem && !useSlot" :key="index" class="slideshow-item">
20
- <img :src="currentItem.imgPath" :alt="currentItem.alt"/>
21
- <figcaption>{{ currentItem.figcaption }}</figcaption>
20
+ <figure v-else-if="currentItem && !currentItem?.link?.href && !useSlot" :key="index" class="slideshow-item">
21
+ <!-- begin CmdImage -->
22
+ <CmdImage :image="currentItem?.image" :figcaption="currentItem?.figcaption"/>
23
+ <!-- begin CmdImage -->
22
24
  </figure>
23
25
  <div
24
- class="image-wrapper"
25
26
  v-else-if="currentItem && useSlot"
27
+ class="image-wrapper"
26
28
  :key="index"
27
- :style="'background-image: url(' + currentItem.imgPath + ')'"
29
+ :style="'background-image: url(' + currentItem.image.srcLarge + ')'"
28
30
  >
31
+ <!-- begin slot -->
29
32
  <slot :name="'item' + currentSlotItem"></slot>
33
+ <!-- end slot -->
30
34
  </div>
31
35
  </transition>
32
36
  <!-- end area to slide -->
@@ -49,6 +53,7 @@
49
53
 
50
54
  <script>
51
55
  // import components
56
+ import CmdImage from "./CmdImage"
52
57
  import CmdSlideButton from "./CmdSlideButton"
53
58
 
54
59
  const NOT_YET_PRELOADED_IMAGE = image => !image.loaded
@@ -67,6 +72,7 @@ export default {
67
72
  }
68
73
  },
69
74
  components: {
75
+ CmdImage,
70
76
  CmdSlideButton
71
77
  },
72
78
  props: {
@@ -182,14 +188,12 @@ export default {
182
188
  }
183
189
  this.preload(this.index)
184
190
  },
185
-
186
191
  setupSlider() {
187
192
  this.preload();
188
193
  if (this.autoplay && this.hnd === null) {
189
194
  this.hnd = window.setInterval(() => this.pause || this.showNextItem(), this.autoplayInterval);
190
195
  }
191
196
  },
192
-
193
197
  preload(index = 0, num = 2) {
194
198
  if (!this.preloadComplete) {
195
199
  for (let i = index, n = index + num, c = this.slideshowItems.length; i < n && i < c; i++) {
@@ -202,34 +206,37 @@ export default {
202
206
  this.preloadComplete = !this.slideshowItems.find(NOT_YET_PRELOADED_IMAGES);
203
207
  }
204
208
  },
205
-
206
209
  getDeviceImage(item) {
207
- if (item === undefined || item.images === undefined) {
210
+ if (item === undefined || item.image === undefined) {
208
211
  return null;
209
212
  }
210
213
  const deviceWidth = window.innerWidth;
211
- const image = {};
212
-
213
- for (let i = 0, c = item.images.length; i < c; i++) {
214
- const deviceImage = item.images[i];
215
-
216
- if (!deviceImage.maxWidth || deviceWidth <= deviceImage.maxWidth) {
217
- image.imgPath = deviceImage.imgPath
218
- image.alt = item.alt
219
- image.figcaption = item.figcaption
220
- image.target = item.target
221
- image.title = item.title
222
- return image;
214
+ const currentImage = {};
215
+
216
+ for (let i = 0, c = item.image.length; i < c; i++) {
217
+ const deviceImage = item.image[i];
218
+
219
+ if (!deviceImage.image.maxWidth || deviceWidth <= deviceImage.image.maxWidth) {
220
+ currentImage.image.srcSmall = deviceImage.image.srcSmall
221
+ currentImage.image.alt = item.image.alt
222
+ currentImage.image.tooltip = item.image.tooltip
223
+ currentImage.figcaption.text = item.figcaption.text
224
+ currentImage.figcaption.position = item.figcaption.position
225
+ currentImage.figcaption.textAlign = item.figcaption.textAlign
226
+ currentImage.figcaption.show = item.figcaption.show
227
+ return currentImage;
223
228
  }
224
229
  }
225
230
 
226
- if (item.images.length) {
227
- image.imgPath = item.images[0].imgPath
228
- image.alt = item.alt
229
- image.figcaption = item.figcaption
230
- image.target = item.target
231
- image.title = item.title
232
- return image;
231
+ if (item.image.length) {
232
+ currentImage.image.srcSmall = item.image.srcSmall
233
+ currentImage.image.alt = item.image.alt
234
+ currentImage.image.tooltip = item.image.tooltip
235
+ currentImage.figcaption.text = item.figcaption.text
236
+ currentImage.figcaption.position = item.figcaption.position
237
+ currentImage.figcaption.textAlign = item.figcaption.textAlign
238
+ currentImage.figcaption.show = item.figcaption.show
239
+ return currentImage;
233
240
  }
234
241
  return null;
235
242
  }
@@ -22,7 +22,7 @@
22
22
  <!-- begin CmdHeadline -->
23
23
  <CmdHeadline
24
24
  class="message-headline"
25
- :iconClass="iconMessage.iconClass"
25
+ :headlineIcon="headlineIcon"
26
26
  :headlineText="systemMessage"
27
27
  :headlineLevel="messageHeadlineLevel"
28
28
  :id="htmlId"
@@ -82,7 +82,8 @@ export default {
82
82
  default: function() {
83
83
  return {
84
84
  show: true,
85
- iconClass: "icon-warning"
85
+ iconClass: "icon-warning",
86
+ type: "auto"
86
87
  }
87
88
  }
88
89
  },
@@ -118,6 +119,17 @@ export default {
118
119
  }
119
120
  }
120
121
  },
122
+ computed: {
123
+ headlineIcon() {
124
+ if(this.iconMessage.show) {
125
+ return {
126
+ iconClass: this.iconMessage.iconClass,
127
+ type: this.iconMessage.type
128
+ }
129
+ }
130
+ return null
131
+ }
132
+ },
121
133
  watch: {
122
134
  message() {
123
135
  this.showSystemMessage = true
@@ -145,28 +157,32 @@ export default {
145
157
  }
146
158
  }
147
159
 
148
- > a[class*="icon-"]:not(.button) {
149
- font-size: 0.8rem;
150
- font-weight: bold;
151
- color: var(--pure-white);
160
+ > a:not(.button) {
161
+ display: block;
152
162
  position: absolute;
163
+ top: 0.5rem;
153
164
  right: 0.5rem;
154
165
  text-decoration: none;
155
- top: 0.5rem;
156
- border: var(--default-border);
157
- border-color: var(--pure-white);
158
- border-radius: var(--full-circle);
159
- padding: calc(var(--default-padding) / 2);
160
166
 
161
- &:hover, &:active, &:focus {
162
- color: var(--hyperlink-color);
163
- border-color: var(--hyperlink-color);
164
- background: var(--pure-white);
167
+ [class*="icon-"] {
168
+ font-size: 0.8rem;
169
+ font-weight: bold;
170
+ color: var(--pure-white);
171
+ border: var(--default-border);
172
+ border-color: var(--pure-white);
173
+ border-radius: var(--full-circle);
174
+ padding: calc(var(--default-padding) / 2);
175
+
176
+ &:hover, &:active, &:focus {
177
+ color: var(--hyperlink-color);
178
+ border-color: var(--hyperlink-color);
179
+ background: var(--pure-white);
180
+ }
165
181
  }
166
182
  }
167
183
 
168
184
  &.warning {
169
- > a[class*="icon-"]:not(.button) {
185
+ > a:not(.button) [class*="icon-"] {
170
186
  color: var(--text-color);
171
187
  border-color: var(--text-color);
172
188
 
@@ -208,7 +208,7 @@ export default {
208
208
  min-width: 2rem;
209
209
  min-height: 2rem;
210
210
 
211
- span[class*="icon"] {
211
+ [class*="icon-"] {
212
212
  font-size: var(--icon-size-small);
213
213
  }
214
214
  }