comand-component-library 3.3.75 → 3.3.76

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.
@@ -14,11 +14,7 @@
14
14
  },
15
15
  {
16
16
  "image": {
17
- "src": {
18
- "small": "media/images/demo-images/small/landscape-01.jpg",
19
- "medium": "media/images/demo-images/medium/landscape-01.jpg",
20
- "large": "media/images/demo-images/large/landscape-01.jpg"
21
- },
17
+ "src": "media/images/demo-images/large/landscape-02.jpg",
22
18
  "alt": "Alternative text",
23
19
  "tooltip": "Tooltip"
24
20
  },
@@ -41,283 +41,293 @@
41
41
 
42
42
  // assign scss-variables for breakpoints (from variables.scss) to css-variables, to get access to their value in JavaScript by getComputedStyle(document.documentElement).getPropertyValue
43
43
  html {
44
- --medium-max-width: #{$medium-max-width};
45
- --small-max-width: #{$small-max-width};
44
+ --medium-max-width: #{$medium-max-width};
45
+ --small-max-width: #{$small-max-width};
46
46
  }
47
+
47
48
  /* ---------------------------------------------- BEGIN COMPONENTS AND GLOBAL STYLES -------------------------------------------------- */
48
49
  /* begin styles for main structure --------------------------------------------------------------------------------------------------------------------------------------------------- */
49
50
  body {
50
- overflow: hidden;
51
+ overflow: hidden;
51
52
  }
52
53
 
53
54
  #page-wrapper {
54
- scroll-padding-top: 10.5rem;
55
- display: flex;
56
- flex-direction: column;
57
- scroll-snap-type: y mandatory;
58
- overflow-y: scroll;
59
- width: 100vw;
60
- height: 100vh;
61
- scroll-behavior: smooth;
62
-
63
- .cmd-site-footer {
64
- margin-top: auto;
65
- }
55
+ scroll-padding-top: 10.5rem;
56
+ display: flex;
57
+ flex-direction: column;
58
+ scroll-snap-type: y mandatory;
59
+ overflow-y: scroll;
60
+ width: 100vw;
61
+ height: 100vh;
62
+ scroll-behavior: smooth;
63
+
64
+ .cmd-site-footer {
65
+ margin-top: auto;
66
+ }
66
67
  }
67
68
 
68
69
  #component-library {
69
- /*scroll-padding-top: unset !important;*/
70
- scroll-snap-type: unset !important;
70
+ /*scroll-padding-top: unset !important;*/
71
+ scroll-snap-type: unset !important;
71
72
  }
72
73
 
73
74
  body, .cmd-site-header, .cmd-site-footer, .cmd-copyright-information {
74
- transition: background linear .5s;
75
+ transition: background linear .5s;
75
76
  }
77
+
76
78
  /* end styles for main structure --------------------------------------------------------------------------------------------------------------------------------------------------- */
77
79
 
78
80
  /* begin .avoid-scrolling --------------------------------------------------------------------------------------------------------------------------------------------------- */
79
81
  body.avoid-scrolling {
80
- overflow: hidden;
81
- height: 100%;
82
+ overflow: hidden;
83
+ height: 100%;
82
84
  }
85
+
83
86
  /* end .avoid-scrolling --------------------------------------------------------------------------------------------------------------------------------------------------- */
84
87
 
85
88
  /* begin flags --------------------------------------------------------------------------------------------------------------------------------------------------- */
86
89
  .flag {
87
- width: 3rem;
88
- background-size: 100% 100%;
89
- display: block;
90
+ width: 3rem;
91
+ background-size: 100% 100%;
92
+ display: block;
90
93
  }
94
+
91
95
  /* end flags --------------------------------------------------------------------------------------------------------------------------------------------------- */
92
96
 
93
97
  /* begin input-wrapper for .select --------------------------------------------------------------------------------------------------------------------------------------------------- */
94
98
  .select {
95
- height: var(--input-height); /* forces different browsers to render same height */
99
+ height: var(--input-height); /* forces different browsers to render same height */
96
100
  }
97
101
 
98
102
  .input-wrapper {
99
- .select {
100
- &:first-of-type {
101
- > ul {
102
- > li {
103
- &:first-child {
104
- border-top-right-radius: 0;
105
- border-bottom-right-radius: 0;
106
- }
103
+ .select {
104
+ &:first-of-type {
105
+ > ul {
106
+ > li {
107
+ &:first-child {
108
+ border-top-right-radius: 0;
109
+ border-bottom-right-radius: 0;
110
+ }
111
+ }
112
+ }
107
113
  }
108
- }
109
- }
110
-
111
- &:last-of-type {
112
- > ul {
113
- > li {
114
- &:first-child {
115
- border-top-left-radius: 0;
116
- border-bottom-left-radius: 0;
117
- }
114
+
115
+ &:last-of-type {
116
+ > ul {
117
+ > li {
118
+ &:first-child {
119
+ border-top-left-radius: 0;
120
+ border-bottom-left-radius: 0;
121
+ }
122
+ }
123
+ }
118
124
  }
119
- }
120
125
  }
121
- }
122
126
  }
127
+
123
128
  /* end input-wrapper for .select --------------------------------------------------------------------------------------------------------------------------------------------------- */
124
129
 
125
130
  /* begin product-listing --------------------------------------------------------------------------------------------------------------------------------------------------- */
126
131
  #product-listing-wrapper {
127
- > a {
128
- border: var(--default-border);
129
- text-decoration: none;
130
- display: flex;
131
- flex-direction: column;
132
- grid-column: span var(--grid-small-span);
133
- order: 1;
134
-
135
- &:hover, &:active, &:focus {
136
- border-color: var(--primary-color);
137
- background: var(--default-background-color);
132
+ > a {
133
+ border: var(--default-border);
134
+ text-decoration: none;
135
+ display: flex;
136
+ flex-direction: column;
137
+ grid-column: span var(--grid-small-span);
138
+ order: 1;
139
+
140
+ &:hover, &:active, &:focus {
141
+ border-color: var(--primary-color);
142
+ background: var(--default-background-color);
143
+ }
138
144
  }
139
- }
140
145
 
141
- img {
142
- order: 1;
143
- }
146
+ img {
147
+ order: 1;
148
+ }
144
149
 
145
- &.products-squares {
146
- > a {
147
- grid-column: span calc(var(--grid-columns) / 2);
150
+ &.products-squares {
151
+ > a {
152
+ grid-column: span calc(var(--grid-columns) / 2);
153
+ }
148
154
  }
149
- }
150
155
 
151
- &.products-lines {
152
- > a {
153
- grid-column: span var(--grid-columns);
154
- flex-direction: unset;
156
+ &.products-lines {
157
+ > a {
158
+ grid-column: span var(--grid-columns);
159
+ flex-direction: unset;
160
+
161
+ img {
162
+ margin-left: 0;
163
+ }
164
+ }
165
+
166
+ & .product-information {
167
+ display: flex;
168
+ flex-direction: column;
169
+ padding: calc(var(--default-padding) * 2);
170
+ margin-right: auto;
171
+ }
155
172
 
156
- img {
157
- margin-left: 0;
158
- }
173
+ .description {
174
+ display: block;
175
+ }
159
176
  }
160
177
 
161
- & .product-information {
162
- display: flex;
163
- flex-direction: column;
164
- padding: calc(var(--default-padding) * 2);
165
- margin-right: auto;
178
+ &.product-information {
179
+ order: 2;
166
180
  }
167
181
 
168
182
  .description {
169
- display: block;
183
+ display: none;
184
+ }
185
+
186
+ h3, div {
187
+ padding: var(--default-padding);
188
+ margin: 0;
170
189
  }
171
- }
172
-
173
- &.product-information {
174
- order: 2;
175
- }
176
-
177
- .description {
178
- display: none;
179
- }
180
-
181
- h3, div {
182
- padding: var(--default-padding);
183
- margin: 0;
184
- }
185
-
186
- h3, p {
187
- text-align: center;
188
- }
189
-
190
- .price {
191
- order: 3;
192
- margin-top: auto;
193
- }
194
-
195
- p {
196
- &:last-child {
197
- &, & > span {
198
- margin-bottom: 0;
199
- font-size: 2rem;
200
- }
190
+
191
+ h3, p {
192
+ text-align: center;
201
193
  }
202
194
 
203
- > span {
204
- &:first-child {
205
- text-decoration: line-through;
206
- font-style: italic;
207
- margin-right: var(--default-margin);
208
- opacity: var(--reduced-opacity);
209
- font-size: 1.5rem;
210
- }
195
+ .price {
196
+ order: 3;
197
+ margin-top: auto;
198
+ }
199
+
200
+ p {
201
+ &:last-child {
202
+ &, & > span {
203
+ margin-bottom: 0;
204
+ font-size: 2rem;
205
+ }
206
+ }
207
+
208
+ > span {
209
+ &:first-child {
210
+ text-decoration: line-through;
211
+ font-style: italic;
212
+ margin-right: var(--default-margin);
213
+ opacity: var(--reduced-opacity);
214
+ font-size: 1.5rem;
215
+ }
216
+ }
211
217
  }
212
- }
213
218
  }
219
+
214
220
  /* end product-listing --------------------------------------------------------------------------------------------------------------------------------------------------- */
215
221
 
216
222
  /* begin tooltip for cmd-form-element and cmd-fake-select ---------------------------------------------------------------------------------------------------------------- */
217
223
  .cmd-form-element, .cmd-fake-select, .cmd-input-group {
218
- .cmd-tooltip {
219
- position: absolute;
220
- right: 0;
221
- transform: translateY(calc(-100% - calc(var(--default-margin) / 2)));
222
- left: auto !important; /* overwrite calculated inline-styles from javascript for cmd-tooltip-component */
223
- top: 0 !important; /* overwrite calculated inline-styles from javascript for cmd-tooltip-component */
224
- }
225
-
226
- &.has-state, & + .cmd-tooltip {
227
- .label-text {
228
- > span, > a, sup {
229
- color: var(--status-color);
230
- }
224
+ .cmd-tooltip {
225
+ position: absolute;
226
+ right: 0;
227
+ transform: translateY(calc(-100% - calc(var(--default-margin) / 2)));
228
+ left: auto !important; /* overwrite calculated inline-styles from javascript for cmd-tooltip-component */
229
+ top: 0 !important; /* overwrite calculated inline-styles from javascript for cmd-tooltip-component */
231
230
  }
232
231
 
233
- &.error {
234
- --status-color: var(--error-color);
235
- }
232
+ &.has-state, & + .cmd-tooltip {
233
+ .label-text {
234
+ > span, > a, sup {
235
+ color: var(--status-color);
236
+ }
237
+ }
236
238
 
237
- &.warning {
238
- --status-color: var(--warning-color);
239
- }
239
+ &.error {
240
+ --status-color: var(--error-color);
241
+ }
240
242
 
241
- &.success {
242
- --status-color: var(--success-color);
243
- }
243
+ &.warning {
244
+ --status-color: var(--warning-color);
245
+ }
246
+
247
+ &.success {
248
+ --status-color: var(--success-color);
249
+ }
244
250
 
245
- &.info {
246
- --status-color: var(--info-color);
251
+ &.info {
252
+ --status-color: var(--info-color);
253
+ }
247
254
  }
248
- }
249
255
 
250
- & + .cmd-tooltip {
251
- border-color: var(--status-color);
252
- }
256
+ & + .cmd-tooltip {
257
+ border-color: var(--status-color);
258
+ }
253
259
  }
260
+
254
261
  /* end tooltip for cmd-form-element and cmd-fake-select ------------------------------------------------------------------------------------------------------------------ */
255
262
  /* ---------------------------------------------- END COMPONENTS AND GLOBAL STYLES -------------------------------------------------- */
256
263
 
257
264
  /* ---------------------------------------------- BEGIN MEDIA QUERIES AND BROWSER SPECIFIC STYLES -------------------------------------------------- */
258
265
  /* begin styles for medium screens --------------------------------------------------------------------------------------------------------------------------------------------------- */
259
266
  @media only screen and (max-width: $medium-max-width) {
260
- html {
261
- --grid-small-span: 3; /* default column span smaller part */
262
- --grid-large-span: 3; /* default column span larger part */
263
- }
267
+ html {
268
+ --grid-small-span: 3; /* default column span smaller part */
269
+ --grid-large-span: 3; /* default column span larger part */
270
+ }
264
271
  }
272
+
265
273
  /* end styles for medium screens --------------------------------------------------------------------------------------------------------------------------------------------------- */
266
274
 
267
275
  /* begin styles for small screens --------------------------------------------------------------------------------------------------------------------------------------------------- */
268
276
  @media only screen and (max-width: $small-max-width) {
269
- body, html {
270
- height: auto;
271
- }
272
-
273
- html {
274
- --grid-small-span: 4; /* default column span smaller part */
275
- --grid-large-span: 4; /* default column span larger part */
276
- }
277
-
278
- .section-wrapper {
279
- padding: calc(var(--default-padding) * 2) 0;
280
- }
281
-
282
- a[href^="tel"] {
283
- text-decoration: underline;
284
- }
277
+ body, html {
278
+ height: auto;
279
+ }
280
+
281
+ html {
282
+ --grid-small-span: 4; /* default column span smaller part */
283
+ --grid-large-span: 4; /* default column span larger part */
284
+ }
285
+
286
+ .section-wrapper {
287
+ padding: calc(var(--default-padding) * 2) 0;
288
+ }
289
+
290
+ a[href^="tel"] {
291
+ text-decoration: underline;
292
+ }
285
293
  }
294
+
286
295
  /* end styles for small screens --------------------------------------------------------------------------------------------------------------------------------------------------- */
287
296
  /* ---------------------------------------------- END MEDIA QUERIES AND BROWSER SPECIFIC STYLES -------------------------------------------------- */
288
297
 
289
298
  /* ---------------------------------------------- BEGIN COLORS-SCHEMES (LIGHT-/DARK-MODE) -------------------------------------------------- */
290
299
  html {
291
- &.light-mode {
292
- /* assign default colors for custom light-mode set by class */
293
- --color-scheme-text-color: var(--light-mode-text-color);
294
- --color-scheme-text-color-buttons: var(--light-mode-text-color-buttons);
295
- --color-scheme-background-color: var(--light-mode-background-color);
296
- --color-scheme-text-color-inverted: var(--dark-mode-text-color);
297
- --color-scheme-background-inverted: var(--dark-mode-background-color);
298
- --default-background-color-lightness: 97%;
299
- }
300
-
301
- --color-scheme-text-color-buttons: var(--dark-mode-text-color-buttons);
302
- --color-scheme-text-color-inverted: var(--light-mode-text-color);
303
- --color-scheme-background: var(--dark-mode-background-color);
304
- --color-scheme-background-inverted: var(--light-mode-background-color);
305
- --default-background-color-lightness: 20%;
306
-
307
- &.dark-mode {
308
- /* assign default colors for custom dark-mode set by class */
309
- --color-scheme-text-color: var(--dark-mode-text-color);
300
+ &.light-mode {
301
+ /* assign default colors for custom light-mode set by class */
302
+ --color-scheme-text-color: var(--light-mode-text-color);
303
+ --color-scheme-text-color-buttons: var(--light-mode-text-color-buttons);
304
+ --color-scheme-background-color: var(--light-mode-background-color);
305
+ --color-scheme-text-color-inverted: var(--dark-mode-text-color);
306
+ --color-scheme-background-inverted: var(--dark-mode-background-color);
307
+ --default-background-color-lightness: 97%;
308
+ }
309
+
310
310
  --color-scheme-text-color-buttons: var(--dark-mode-text-color-buttons);
311
- --color-scheme-background-color: var(--dark-mode-background-color);
312
311
  --color-scheme-text-color-inverted: var(--light-mode-text-color);
312
+ --color-scheme-background: var(--dark-mode-background-color);
313
313
  --color-scheme-background-inverted: var(--light-mode-background-color);
314
314
  --default-background-color-lightness: 20%;
315
- --hyperlink-color-lightness: 40%; /* hyperlink-color-lightness */
316
- --hyperlink-color-highlighted-lightness: 50%; /* hyperlink-color-highlighted-lightness (used for highlighted hyperlinks) */
317
315
 
318
- :where(label, .label) .label-text > [class*="icon-"] {
319
- background: var(--dark-gray);
316
+ &.dark-mode {
317
+ /* assign default colors for custom dark-mode set by class */
318
+ --color-scheme-text-color: var(--dark-mode-text-color);
319
+ --color-scheme-text-color-buttons: var(--dark-mode-text-color-buttons);
320
+ --color-scheme-background-color: var(--dark-mode-background-color);
321
+ --color-scheme-text-color-inverted: var(--light-mode-text-color);
322
+ --color-scheme-background-inverted: var(--light-mode-background-color);
323
+ --default-background-color-lightness: 20%;
324
+ --hyperlink-color-lightness: 40%; /* hyperlink-color-lightness */
325
+ --hyperlink-color-highlighted-lightness: 50%; /* hyperlink-color-highlighted-lightness (used for highlighted hyperlinks) */
326
+
327
+ :where(label, .label) .label-text > [class*="icon-"] {
328
+ background: var(--dark-gray);
329
+ }
320
330
  }
321
- }
322
331
  }
332
+
323
333
  /* ---------------------------------------------- END COLORS-SCHEMES (LIGHT-/DARK-MODE) -------------------------------------------------- */
@@ -1,7 +1,7 @@
1
1
  <template>
2
2
  <!-- begin cmd-back-to-top-button -->
3
3
  <transition name="fade">
4
- <a v-if="show" class="cmd-back-to-top-button button" id="back-to-top-button" href="#" :title="iconBackToTop.tooltip" @click.prevent="onBackToTop">
4
+ <a v-if="show" class="cmd-back-to-top-button button" id="back-to-top-button" href="#" role="button" :title="iconBackToTop.tooltip" @click.prevent="onBackToTop">
5
5
  <!-- begin CmdIcon -->
6
6
  <CmdIcon :iconClass="iconBackToTop.iconClass" :type="iconBackToTop.iconType" />
7
7
  <!-- end CmdIcon -->
@@ -544,7 +544,6 @@ export default {
544
544
  .navigation {
545
545
  margin: 0;
546
546
  height: 100%;
547
- background: var(--pure-white);
548
547
 
549
548
  li {
550
549
  list-style-type: none;
@@ -554,7 +553,6 @@ export default {
554
553
  display: block;
555
554
  padding: var(--default-padding);
556
555
  text-decoration: none;
557
- background: var(--pure-white);
558
556
  border-bottom: var(--default-border);
559
557
 
560
558
  &:hover, &:active, &:focus {
@@ -22,14 +22,13 @@
22
22
 
23
23
  <!-- begin label-text (+ required asterisk) -->
24
24
  <span v-if="(labelText || $slots.labeltext) && $attrs.type !== 'checkbox' && $attrs.type !== 'radio'"
25
- v-show="showLabel"
26
- class="label-text">
25
+ :class="['label-text', { hidden: !showLabel }]">
27
26
  <span>
28
27
  <template v-if="labelText">{{ labelText }}</template>
29
28
  <!-- begin slot 'labeltext' -->
30
29
  <slot v-else name="labeltext" />
31
30
  <!-- end slot 'labeltext' -->
32
- <sup v-if="$attrs.required">*</sup>
31
+ <sup v-if="$attrs.required" aria-hidden="true">*</sup>
33
32
  </span>
34
33
 
35
34
  <!-- begin CmdTooltipForInputElements -->
@@ -154,7 +153,7 @@
154
153
  <span class="label-text">{{ onLabel }}</span>
155
154
  <span class="label-text">{{ offLabel }}</span>
156
155
  </span>
157
- <span v-if="labelText" class="label-text">
156
+ <span v-if="labelText" :class="['label-text', {hidden: !showLabel}]">
158
157
  <span>{{ labelText }}<sup v-if="$attrs.required">*</sup></span>
159
158
  </span>
160
159
  </template>