comand-component-library 3.1.70 → 3.1.71

Sign up to get free protection for your applications and to get access to all the features.
Files changed (19) 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 +102 -57
  5. package/src/assets/data/list-of-links.json +0 -1
  6. package/src/assets/styles/global-styles.scss +26 -0
  7. package/src/components/CmdBox.vue +8 -4
  8. package/src/components/CmdCompanyLogo.vue +3 -3
  9. package/src/components/CmdCookieDisclaimer.vue +20 -4
  10. package/src/components/CmdFakeSelect.vue +5 -9
  11. package/src/components/CmdFormElement.vue +34 -41
  12. package/src/components/CmdInputGroup.vue +14 -2
  13. package/src/components/CmdProgressBar.vue +2 -2
  14. package/src/components/CmdTable.vue +1 -1
  15. package/src/index.js +1 -1
  16. package/src/mixins/CmdFormElement/DefaultMessageProperties.js +1 -1
  17. package/src/mixins/FieldValidation.js +1 -1
  18. package/src/mixins/GlobalDefaultMessageProperties.js +1 -2
  19. package/src/mixins/I18n.js +12 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "comand-component-library",
3
- "version": "3.1.70",
3
+ "version": "3.1.71",
4
4
  "private": false,
5
5
  "scripts": {
6
6
  "serve": "vue-cli-service serve",
@@ -18,7 +18,7 @@
18
18
  ],
19
19
  "dependencies": {
20
20
  "clickout-event": "^1.1.2",
21
- "comand-frontend-framework": "^3.2.59",
21
+ "comand-frontend-framework": "^3.2.60",
22
22
  "core-js": "^3.20.1",
23
23
  "prismjs": "^1.27.0",
24
24
  "vue": "^3.2.31",
package/src/App.vue CHANGED
@@ -65,7 +65,7 @@
65
65
  <li><a href="#" @click.prevent="formElementStatus = ''" :class="{'active' : formElementStatus === ''}"
66
66
  id="status-default">Default</a></li>
67
67
  <li class="error"><a href="#" @click.prevent="formElementStatus = 'error'"
68
- :class="{'active' : formElementStatus === 'error'}" id="status-error">Error</a></li>
68
+ :class="{'active' : formElementStatus === 'error'}" id="status-error">Error</a></li>
69
69
  <li><a href="#" @click.prevent="formElementStatus = 'warning'"
70
70
  :class="{'active' : formElementStatus === 'warning'}" id="status-warning">Warning</a></li>
71
71
  <li><a href="#" @click.prevent="formElementStatus = 'success'"
@@ -78,14 +78,14 @@
78
78
  </div>
79
79
 
80
80
  <!-- begin cmd-form-filters -->
81
- <CmdFormFilters v-model="fakeSelectFilters" :selectedOptionsName="getOptionName" />
81
+ <CmdFormFilters v-model="fakeSelectFilters" :selectedOptionsName="getOptionName"/>
82
82
  <!-- end cmd-form-filters -->
83
83
 
84
84
  <CmdForm :use-fieldset="false" id="advanced-form-elements" novalidate="novalidate">
85
85
  <fieldset class="grid-container-create-columns">
86
86
  <legend>Legend</legend>
87
87
  <h2>Form Element-Component</h2>
88
- <CmdToggleDarkMode :showLabel="true" />
88
+ <CmdToggleDarkMode :showLabel="true"/>
89
89
  <div class="flex-container">
90
90
  <CmdFormElement labelText="Input (type text):"
91
91
  element="input"
@@ -132,11 +132,11 @@
132
132
  <div class="flex-container">
133
133
  <!-- type === default: normal selectbox (with optional icons) -->
134
134
  <CmdFakeSelect labelText="Default selectbox:"
135
- :status="formElementStatus"
136
- :selectData="fakeSelectOptionsData"
137
- v-model="fakeSelectDefault"
138
- required
139
- defaultOptionName="Select an option:"
135
+ :status="formElementStatus"
136
+ :selectData="fakeSelectOptionsData"
137
+ v-model="fakeSelectDefault"
138
+ required
139
+ defaultOptionName="Select an option:"
140
140
  />
141
141
  <CmdFakeSelect labelText="Default selectbox with icons:"
142
142
  :status="formElementStatus"
@@ -201,29 +201,40 @@
201
201
 
202
202
  <!-- begin slider -->
203
203
  <h2>Slider [native]</h2>
204
- <label for="range-slider" :class="formElementStatus">
205
- <span>Single-Slider (with in- and output):</span>
204
+ <div class="label" :class="formElementStatus">
205
+ <span class="label-text">Single-Slider (with in- and output):</span>
206
206
  <span class="flex-container no-flex">
207
- <input
208
- type="number"
209
- :class="formElementStatus"
210
- v-model="rangeValue"
211
- :disabled="formElementStatus === 'disabled'"
212
- min="0"
213
- max="100"
214
- />
215
- <input
216
- type="range"
217
- class="range-slider"
218
- :class="{'disabled': formElementStatus === 'disabled'}"
219
- id="range-slider"
220
- v-model="rangeValue"
221
- :disabled="formElementStatus === 'disabled'"
222
- min="0"
223
- max="100"
224
- />
207
+ <label for="range-value">
208
+ <span class="label-text">
209
+ <span>Range Value</span>
210
+ </span>
211
+ <input
212
+ type="number"
213
+ :class="formElementStatus"
214
+ v-model="rangeValue"
215
+ :disabled="formElementStatus === 'disabled'"
216
+ min="0"
217
+ max="100"
218
+ id="range-value"
219
+ />
220
+ </label>
221
+ <label for="range-slider" class="hidden">
222
+ <span class="label-text">
223
+ <span>Range Value</span>
224
+ </span>
225
+ <input
226
+ type="range"
227
+ class="range-slider"
228
+ :class="{'disabled': formElementStatus === 'disabled'}"
229
+ id="range-slider"
230
+ v-model="rangeValue"
231
+ :disabled="formElementStatus === 'disabled'"
232
+ min="0"
233
+ max="100"
234
+ />
235
+ </label>
225
236
  </span>
226
- </label>
237
+ </div>
227
238
  <!-- end slider -->
228
239
 
229
240
  <hr/>
@@ -335,7 +346,7 @@
335
346
  maxlength="100"
336
347
  v-model="inputUsername"
337
348
  :status="formElementStatus"
338
- />
349
+ />
339
350
  <CmdFormElement element="input"
340
351
  labelText="Label for passwordfield:"
341
352
  type="password"
@@ -427,9 +438,9 @@
427
438
  v-model="checkboxRequiredValue"
428
439
  :status="formElementStatus"/>
429
440
  <p>
430
- checkbox (required) with boolean: {{checkboxRequiredValue}}<br />
431
- checkbox with boolean: {{checkboxValue}}<br />
432
- checkboxes with values: {{checkboxValues}}
441
+ checkbox (required) with boolean: {{ checkboxRequiredValue }}<br/>
442
+ checkbox with boolean: {{ checkboxValue }}<br/>
443
+ checkboxes with values: {{ checkboxValues }}
433
444
  </p>
434
445
  <div class="label inline">
435
446
  <span class="label-text">Label for Replaced Input-Type-Checkbox:</span>
@@ -474,7 +485,7 @@
474
485
  </div>
475
486
  </div>
476
487
  <p>
477
- Radiobuttons with values: {{radiobuttonValue}}
488
+ Radiobuttons with values: {{ radiobuttonValue }}
478
489
  </p>
479
490
  <div class="label inline">
480
491
  <span class="label-text">Label for Replaced Input-Type-Radio:</span>
@@ -499,6 +510,7 @@
499
510
  :status="formElementStatus"/>
500
511
  </div>
501
512
  </div>
513
+ <h2>Input-Groups</h2>
502
514
  <CmdInputGroup
503
515
  labelText="Group label for radio-group given by slot"
504
516
  :useSlot="true"
@@ -539,8 +551,35 @@
539
551
  </dd>
540
552
  </dl>
541
553
  <CmdInputGroup
542
- labelText="Grouplabel for radio-group given by property styled as multiple-switch"
543
- :inputElements="inputGroupRadiobuttons.map(item => ({...item, id: item.id + '-multi', name: item.name + '-multi'}))"
554
+ labelText="Grouplabel for radio-group styled as replaced-input-type"
555
+ :inputElements="inputGroupRadiobuttons"
556
+ inputTypes="radio"
557
+ v-model="inputGroupValueReplaceInputTypeRadio"
558
+ :replaceInputType="true"
559
+ />
560
+ <dl>
561
+ <dt>Selected value(s):</dt>
562
+ <dd>
563
+ <output>{{ inputGroupValueReplaceInputTypeRadio }}</output>
564
+ </dd>
565
+ </dl>
566
+ <CmdInputGroup
567
+ labelText="Grouplabel for checkbox-group styled as replaced-input-type"
568
+ :inputElements="inputGroupRadiobuttons"
569
+ inputTypes="checkbox"
570
+ v-model="inputGroupValueReplaceInputTypeCheckbox"
571
+ :replaceInputType="true"
572
+ required="required"
573
+ />
574
+ <dl>
575
+ <dt>Selected value(s):</dt>
576
+ <dd>
577
+ <output>{{ inputGroupValueReplaceInputTypeCheckbox }}</output>
578
+ </dd>
579
+ </dl>
580
+ <CmdInputGroup
581
+ labelText="Grouplabel for radio-group given by property styled as multiple-switch"
582
+ :inputElements="inputGroupRadiobuttons.map(item => ({...item, id: item.id + '-multi', name: item.name + '-multi'}))"
544
583
  inputTypes="radio"
545
584
  :multipleSwitch="true"
546
585
  v-model="inputGroupValue3"
@@ -579,7 +618,7 @@
579
618
  <span>Native submit-button</span>
580
619
  </button>
581
620
  </div>
582
- </CmdForm>
621
+ </CmdForm>
583
622
  </CmdWidthLimitationWrapper>
584
623
  <!-- end advanced form elements ----------------------------------------------------------------------------------------------------------------------------------------------------->
585
624
 
@@ -591,7 +630,7 @@
591
630
  <a id="section-bank-account-data"></a>
592
631
  <CmdWidthLimitationWrapper>
593
632
  <h2 class="headline-demopage">Bank Account Data</h2>
594
- <CmdBankAccountData :account-data="bankAccountData" :cmd-custom-headline="{ headlineText: 'Bank Account', headlineLevel: 3}" :allow-copy-by-click="true" />
633
+ <CmdBankAccountData :account-data="bankAccountData" :cmd-custom-headline="{ headlineText: 'Bank Account', headlineLevel: 3}" :allow-copy-by-click="true"/>
595
634
  </CmdWidthLimitationWrapper>
596
635
  <!-- end bank account data ------------------------------------------------------------------------------------------------------------------------------------------------------->
597
636
 
@@ -684,13 +723,13 @@
684
723
  <h3>Product boxes</h3>
685
724
  <div class="grid-container-create-columns">
686
725
  <div class="grid-small-item" v-for="(product, index) in boxProductData" :key="index">
687
- <CmdBox boxType="product" :product="product" :cmdCustomHeadline="{headlineLevel: 4}" />
726
+ <CmdBox boxType="product" :product="product" :cmdCustomHeadline="{headlineLevel: 4}"/>
688
727
  </div>
689
728
  </div>
690
729
  <h3>User boxes</h3>
691
730
  <div class="grid-container-create-columns">
692
731
  <div class="grid-small-item" v-for="(user, index) in boxUserData" :key="index">
693
- <CmdBox boxType="user" :user="user" :cmdCustomHeadline="{headlineLevel: 4}" />
732
+ <CmdBox boxType="user" :user="user" :cmdCustomHeadline="{headlineLevel: 4}"/>
694
733
  </div>
695
734
  </div>
696
735
  <h3>Box Site Search</h3>
@@ -701,12 +740,16 @@
701
740
  v-model:modelValueSearchFilters="filters"
702
741
  @search="siteSearchOutput"
703
742
  textLegend="Search"
704
- :cmdFakeSelect="siteSearchFilters" />
743
+ :cmdFakeSelect="siteSearchFilters"/>
705
744
  <dl>
706
- <dt>siteSearchInput1:</dt><dd>{{ siteSearchInput1 }}</dd>
707
- <dt>siteSearchInput2:</dt><dd>{{ siteSearchInput2 }}</dd>
708
- <dt>Radius:</dt><dd>{{ radius }}</dd>
709
- <dt>Filters:</dt><dd>{{ filters }}</dd>
745
+ <dt>siteSearchInput1:</dt>
746
+ <dd>{{ siteSearchInput1 }}</dd>
747
+ <dt>siteSearchInput2:</dt>
748
+ <dd>{{ siteSearchInput2 }}</dd>
749
+ <dt>Radius:</dt>
750
+ <dd>{{ radius }}</dd>
751
+ <dt>Filters:</dt>
752
+ <dd>{{ filters }}</dd>
710
753
  </dl>
711
754
  </CmdWidthLimitationWrapper>
712
755
  <!-- end boxes ------------------------------------------------------------------------------------------------------------------------------------------------------->
@@ -777,8 +820,8 @@
777
820
  <a id="section-login-form"></a>
778
821
  <CmdWidthLimitationWrapper>
779
822
  <h2 class="headline-demopage">Login Form</h2>
780
- <CmdLoginForm v-model="loginData" v-focus />
781
- <p>LoginData: {{loginData}}</p>
823
+ <CmdLoginForm v-model="loginData" v-focus/>
824
+ <p>LoginData: {{ loginData }}</p>
782
825
  </CmdWidthLimitationWrapper>
783
826
 
784
827
  <!-- begin list-of-links ------------------------------------------------------------------------------------------------------------------------------------------------------->
@@ -786,13 +829,13 @@
786
829
  <CmdWidthLimitationWrapper>
787
830
  <h2 class="headline-demopage">List Of Links</h2>
788
831
  <h3>Vertical</h3>
789
- <CmdListOfLinks :links="listOfLinksData" />
832
+ <CmdListOfLinks :links="listOfLinksData"/>
790
833
  <h3>Horizontal (aligned left)</h3>
791
- <CmdListOfLinks orientation="horizontal" align="left" :links="listOfLinksData" />
834
+ <CmdListOfLinks orientation="horizontal" align="left" :links="listOfLinksData"/>
792
835
  <h3>Horizontal (aligned center)</h3>
793
- <CmdListOfLinks orientation="horizontal" align="center" :links="listOfLinksData" />
836
+ <CmdListOfLinks orientation="horizontal" align="center" :links="listOfLinksData"/>
794
837
  <h3>Horizontal (aligned right)</h3>
795
- <CmdListOfLinks orientation="horizontal" align="right" :links="listOfLinksData" />
838
+ <CmdListOfLinks orientation="horizontal" align="right" :links="listOfLinksData"/>
796
839
  </CmdWidthLimitationWrapper>
797
840
  <!-- end list-of-links ------------------------------------------------------------------------------------------------------------------------------------------------------->
798
841
 
@@ -876,9 +919,9 @@
876
919
  <CmdWidthLimitationWrapper>
877
920
  <h2 class="headline-demopage">Tables</h2>
878
921
  <h3>Table as wide as its content (with caption)</h3>
879
- <CmdTable :collapsible="true" :fullWidthOnDefault="false" :userCanToggleWidth="true" :table-data="tableDataSmall"/>
922
+ <CmdTable :collapsible="true" :fullWidthOnDefault="false" :userCanToggleWidth="true" :table-data="tableDataSmall"/>
880
923
  <h3>Table as wide as its content (without caption)</h3>
881
- <CmdTable :collapsible="true" :fullWidthOnDefault="false" :userCanToggleWidth="true" :caption="{ text: 'Hidden caption', show: false}" :table-data="tableDataSmall"/>
924
+ <CmdTable :collapsible="true" :fullWidthOnDefault="false" :userCanToggleWidth="true" :caption="{ text: 'Hidden caption', show: false}" :table-data="tableDataSmall"/>
882
925
  <h3>Table as wide as possible</h3>
883
926
  <CmdTable :collapsible="true" :fullWidthOnDefault="false" :userCanToggleWidth="true" :table-data="tableDataLarge"/>
884
927
  </CmdWidthLimitationWrapper>
@@ -911,14 +954,14 @@
911
954
  <a id="section-thumbnail-scroller"></a>
912
955
  <CmdWidthLimitationWrapper>
913
956
  <h2 class="headline-demopage">Thumbnail-Scroller</h2>
914
- <CmdThumbnailScroller :thumbnail-scroller-items="thumbnailScrollerData" />
957
+ <CmdThumbnailScroller :thumbnail-scroller-items="thumbnailScrollerData"/>
915
958
  </CmdWidthLimitationWrapper>
916
959
 
917
960
  <a id="section-tooltip"></a>
918
961
  <CmdWidthLimitationWrapper>
919
962
  <h2 class="headline-demopage">Tooltip</h2>
920
963
  <p>
921
- <a href="#" @click.prevent id="hoverme">Hover me!</a><br />
964
+ <a href="#" @click.prevent id="hoverme">Hover me!</a><br/>
922
965
  <a href="#" @click.prevent id="clickme" title="Native tooltip">Click me!</a>
923
966
  </p>
924
967
  <CmdTooltip related-id="hoverme">
@@ -981,7 +1024,7 @@
981
1024
  <template #privacy-text>
982
1025
  <p>
983
1026
  <strong>
984
- By browsing ths web site yo accept the usage and saving of anonymous data!
1027
+ By browsing this web site to accept the usage and saving of anonymous data!
985
1028
  </strong>
986
1029
  </p>
987
1030
  </template>
@@ -1113,6 +1156,8 @@ export default {
1113
1156
  textarea: "",
1114
1157
  inputGroupValue1: "radiobuttonValue1",
1115
1158
  inputGroupValue2: "website",
1159
+ inputGroupValueReplaceInputTypeRadio: "phone",
1160
+ inputGroupValueReplaceInputTypeCheckbox: ["phone"],
1116
1161
  inputGroupValue3: "email",
1117
1162
  inputGroupValue4: [],
1118
1163
  inputGroupRadiobuttons: [
@@ -1249,7 +1294,7 @@ export default {
1249
1294
  }
1250
1295
  },
1251
1296
  mounted() {
1252
- document.querySelector('html').addEventListener('toggle-color-scheme', (event) => console.log('colorScheme:', event.detail))
1297
+ document.querySelector('html').addEventListener('toggle-color-scheme', (event) => console.log('colorScheme:', event.detail))
1253
1298
  },
1254
1299
  methods: {
1255
1300
  siteSearchOutput(event) {
package/src/assets/data/list-of-links.json CHANGED
@@ -4,7 +4,6 @@
4
4
  "type": "href",
5
5
  "text": "",
6
6
  "path": "#",
7
- "target": "",
8
7
  "tooltip": "Link without text, but tooltip"
9
8
  },
10
9
  {
package/src/assets/styles/global-styles.scss CHANGED
@@ -174,6 +174,32 @@ body.avoid-scrolling {
174
174
 
175
175
  /* begin tooltip for cmd-form-element and cmd-fake-select ---------------------------------------------------------------------------------------------------------------- */
176
176
  .cmd-form-element, .cmd-fake-select {
177
+
178
+ &.has-state, & + .cmd-tooltip {
179
+ .label-text {
180
+ span, sup {
181
+ color: var(--status-color);
182
+ }
183
+ }
184
+
185
+ &.error {
186
+ --status-color: var(--error-color);
187
+ }
188
+
189
+ &.warning {
190
+ --status-color: var(--warning-color);
191
+ }
192
+
193
+
194
+ &.success {
195
+ --status-color: var(--success-color);
196
+ }
197
+
198
+ &.info {
199
+ --status-color: var(--info-color);
200
+ }
201
+ }
202
+
177
203
  & + .cmd-tooltip {
178
204
  border-color: var(--status-color);
179
205
 
package/src/components/CmdBox.vue CHANGED
@@ -3,12 +3,16 @@
3
3
  <div v-if="boxType === 'content'" :class="['cmd-box box content', {open : open, collapsible: collapsible, 'stretch-vertically': stretchVertically}]">
4
4
  <template v-if="useSlots?.includes('header')">
5
5
  <!-- begin collapsible header with slot -->
6
- <a v-if="collapsible" class="box-header" href="#" :title="open ? iconOpen.tooltip : iconClosed.tooltip" @click.prevent="toggleContentVisibility">
6
+ <div v-if="collapsible" class="box-header">
7
7
  <!-- begin slot 'header' -->
8
8
  <slot name="header"></slot>
9
9
  <!-- end slot 'header' -->
10
- <span class="toggle-icon" :class="[open ? iconOpen.iconClass : iconClosed.iconClass]"></span>
11
- </a>
10
+ <a href="#"
11
+ :title="open ? iconOpen.tooltip : iconClosed.tooltip"
12
+ @click.prevent="toggleContentVisibility">
13
+ <span class="toggle-icon" :class="[open ? iconOpen.iconClass : iconClosed.iconClass]"></span>
14
+ </a>
15
+ </div>
12
16
  <!-- end collapsible header with slot -->
13
17
 
14
18
  <!-- begin default header with slot -->
@@ -309,7 +313,7 @@ export default {
309
313
  margin-bottom: 0;
310
314
  }
311
315
 
312
- &:last-child {
316
+ &:not(.open):last-child {
313
317
  margin-top: auto;
314
318
  }
315
319
  }
package/src/components/CmdCompanyLogo.vue CHANGED
@@ -1,10 +1,10 @@
1
1
  <template>
2
2
  <div class="cmd-company-logo">
3
- <router-link v-if="link.type === 'router'" :href="link.path" :title="link.tooltip">
3
+ <router-link v-if="link.type === 'router'" :to="link.path" :title="link.tooltip">
4
4
  <img :src="pathCurrentLogo" :alt="altText"/>
5
5
  </router-link>
6
- <a v-else :to="link.path" :title="link.tooltip">
7
- <img :src="pathCurrentLogo" :alt="altText"/>
6
+ <a v-else :href="link.path" :title="link.tooltip">
7
+ <img :src="pathCurrentLogo" :alt="altText" />
8
8
  </a>
9
9
  </div>
10
10
  </template>
package/src/components/CmdCookieDisclaimer.vue CHANGED
@@ -21,8 +21,15 @@
21
21
  :key="index"
22
22
  >
23
23
  <template v-slot:header>
24
- <!-- begin CmdSwitchButton -->
25
- <!-- end CmdSwitchButton -->
24
+ <!-- begin CmdFormElement -->
25
+ <CmdFormElement
26
+ element="input"
27
+ type="checkbox"
28
+ labelText="Google Analytics"
29
+ id="google-analytics"
30
+ :toggleSwitch="true"
31
+ />
32
+ <!-- end CmdFormElement -->
26
33
  </template>
27
34
  <template v-slot:body>
28
35
  <p v-if="cookie.description">{{ cookie.description }}</p>
@@ -49,8 +56,15 @@
49
56
  :key="index"
50
57
  >
51
58
  <template v-slot:header>
52
- <!-- begin CmdSwitchButton -->
53
- <!-- end CmdSwitchButton -->
59
+ <!-- begin CmdFormElement -->
60
+ <CmdFormElement
61
+ element="input"
62
+ type="checkbox"
63
+ labelText="Google Analytics"
64
+ id="google-analytics"
65
+ :toggleSwitch="true"
66
+ />
67
+ <!-- end CmdFormElement -->
54
68
  </template>
55
69
  <template v-slot:body>
56
70
  <p v-if="cookie.description">{{ cookie.description }}</p>
@@ -92,12 +106,14 @@
92
106
  // import components
93
107
  import CmdBox from "./CmdBox"
94
108
  import CmdCustomHeadline from "./CmdCustomHeadline"
109
+ import CmdFormElement from "./CmdFormElement"
95
110
 
96
111
  export default {
97
112
  name: "CmdCookieDisclaimer",
98
113
  components: {
99
114
  CmdBox,
100
115
  CmdCustomHeadline,
116
+ CmdFormElement
101
117
  },
102
118
  data() {
103
119
  return {
package/src/components/CmdFakeSelect.vue CHANGED
@@ -460,10 +460,6 @@ export default {
460
460
  .cmd-fake-select {
461
461
  align-self: flex-end;
462
462
 
463
- & + .cmd-tooltip {
464
- border-color: var(--status-color);
465
- }
466
-
467
463
  > span:first-child {
468
464
  a {
469
465
  align-self: flex-end;
@@ -604,21 +600,21 @@ export default {
604
600
  }
605
601
  }
606
602
 
607
- &.error {
603
+ &.has-state {
608
604
  > ul {
609
605
  > li {
610
606
  > a {
611
- border-color: var(--error-color);
607
+ border-color: var(--status-color);
612
608
 
613
609
  > span, span[class*="icon-"] {
614
- color: var(--error-color);
610
+ color: var(--status-color);
615
611
  }
616
612
 
617
613
  &:hover, &:active, &:focus {
618
614
  background: var(--pure-white);
619
615
 
620
616
  span {
621
- color: var(--error-color);
617
+ color: var(--status-color);
622
618
  }
623
619
  }
624
620
  }
@@ -668,7 +664,7 @@ export default {
668
664
 
669
665
  > span:first-child {
670
666
  width: 1.5rem;
671
- aspect-ratio: 1;
667
+ aspect-ratio: 1/1;
672
668
  border: var(--default-border);
673
669
 
674
670
  &[style=""] {