@asd20/ui 3.2.794 → 3.2.796

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 (6) hide show
  1. package/package.json +1 -1
  2. package/src/components/molecules/Asd20ActionMenuItem/index.vue +3 -3
  3. package/src/components/molecules/Asd20Swiper/index.vue +127 -45
  4. package/src/components/organisms/Asd20ImageHeader/index.vue +1 -1
  5. package/src/components/organisms/Asd20Navbar/index.vue +3 -2
  6. package/src/components/templates/Asd20WayfindingImageTemplate/index.vue +1 -1
package/package.json CHANGED
@@ -5,7 +5,7 @@
5
5
  "*.scss",
6
6
  "*.vue"
7
7
  ],
8
- "version": "3.2.794",
8
+ "version": "3.2.796",
9
9
  "private": false,
10
10
  "license": "MIT",
11
11
  "repository": {
package/src/components/molecules/Asd20ActionMenuItem/index.vue CHANGED
@@ -116,9 +116,9 @@ $sizes: (
116
116
  --line-color: var(--website-menu__icon-line-color);
117
117
  --fill-color: var(--website-menu__icon-fill-color);
118
118
  }
119
- &::v-deep .asd20-button__label {
120
- color: var(--website-menu__foreground-color);
121
- }
119
+ // &::v-deep .asd20-button__label {
120
+ // color: var(--website-menu__foreground-color);
121
+ // }
122
122
  &:hover,
123
123
  &:focus {
124
124
  background: var(--website-menu__hover-background-color);
package/src/components/molecules/Asd20Swiper/index.vue CHANGED
@@ -5,7 +5,7 @@
5
5
  tabindex="-1"
6
6
  ref="prev"
7
7
  title="Previous"
8
- class="asd20-swiper__prev circle -left"
8
+ class="asd20-swiper__arrows__button-prev"
9
9
  >
10
10
  <span>Previous Tile</span>
11
11
  </button>
@@ -23,7 +23,7 @@
23
23
  tabindex="-1"
24
24
  ref="next"
25
25
  title="Next"
26
- class="asd20-swiper__next circle -right"
26
+ class="asd20-swiper__arrows__button-next"
27
27
  >
28
28
  <span>Next Tile</span>
29
29
  </button>
@@ -169,20 +169,20 @@ export default {
169
169
  }
170
170
  }
171
171
 
172
- .circle {
173
- &.-right {
174
- transform: translateY(-50%) rotate(90deg);
175
- }
176
- &.-bottom {
177
- transform: translateY(-50%) rotate(180deg);
178
- }
179
- &.-left {
180
- transform: translateY(-50%) rotate(270deg);
181
- }
182
- }
183
- .circle {
184
- @include icon-circle-with-triangle();
185
- }
172
+ // .circle {
173
+ // &.-right {
174
+ // transform: translateY(-50%) rotate(90deg);
175
+ // }
176
+ // &.-bottom {
177
+ // transform: translateY(-50%) rotate(180deg);
178
+ // }
179
+ // &.-left {
180
+ // transform: translateY(-50%) rotate(270deg);
181
+ // }
182
+ // }
183
+ // .circle {
184
+ // @include icon-circle-with-triangle();
185
+ // }
186
186
  .asd20-swiper {
187
187
  --fade-stop: 100%;
188
188
  position: relative;
@@ -191,40 +191,123 @@ export default {
191
191
  padding: space(1) space(1);
192
192
  margin: space(0) space(0) space(0) space(0);
193
193
 
194
- &__prev,
195
- &__next {
196
- cursor: pointer;
197
- appearance: none;
198
- position: absolute;
199
- top: 50%;
200
- left: 0;
201
- bottom: space(1);
202
- z-index: 2;
203
- border: 2px solid var(--color__primary);
204
- animation: fade-in 0.5s ease-in-out 0.25s both;
194
+ // &__prev,
195
+ // &__next {
196
+ // cursor: pointer;
197
+ // appearance: none;
198
+ // position: absolute;
199
+ // top: 50%;
200
+ // left: 0;
201
+ // bottom: space(1);
202
+ // z-index: 2;
203
+ // border: 2px solid var(--color__primary);
204
+ // animation: fade-in 0.5s ease-in-out 0.25s both;
205
205
 
206
- &.swiper-button-disabled {
207
- display: none;
208
- }
206
+ // &.swiper-button-disabled {
207
+ // display: none;
208
+ // }
209
209
 
210
- span {
211
- display: none;
212
- }
210
+ // span {
211
+ // display: none;
212
+ // }
213
213
 
214
- &:hover {
215
- --fade-stop: 150%;
216
- }
214
+ // &:hover {
215
+ // --fade-stop: 150%;
216
+ // }
217
217
 
218
- &:focus,
219
- &:active {
220
- box-shadow: none;
221
- outline: none;
222
- }
223
- }
224
- &__next {
225
- left: auto;
218
+ // &:focus,
219
+ // &:active {
220
+ // box-shadow: none;
221
+ // outline: none;
222
+ // }
223
+ // }
224
+ // &__next {
225
+ // left: auto;
226
+ // right: 0;
227
+ // }
228
+
229
+ &__arrows {
230
+ position: absolute;
231
+ left: 0;
232
+ top: 0;
233
+ bottom: 0;
226
234
  right: 0;
235
+ display: flex;
236
+ justify-content: space-between;
237
+ align-items: center;
238
+ &__button-prev,
239
+ &__button-next {
240
+ position: relative;
241
+ background: none;
242
+ border: 0;
243
+ width: 3rem;
244
+ height: 3rem;
245
+ background: rgba(255, 255, 255, 0.85);
246
+ display: flex;
247
+ justify-content: center;
248
+ align-items: center;
249
+ cursor: pointer;
250
+ border-radius: 50%;
251
+ transition: background 0.1s ease-in;
252
+ position: absolute;
253
+ top: 50%;
254
+ left: 0;
255
+ bottom: space(1);
256
+ z-index: 2;
257
+ border: 2px solid var(--color__primary);
258
+ animation: fade-in 0.5s ease-in-out 0.25s both;
259
+ &:hover {
260
+ background: rgba(255, 255, 255, 1);
261
+ }
262
+ &.swiper-button-disabled {
263
+ display: none;
264
+ }
265
+ &:focus,
266
+ &:active {
267
+ box-shadow: none;
268
+ outline: none;
269
+ }
270
+ &::before {
271
+ content: '';
272
+ position: absolute;
273
+ display: block;
274
+ top: 50%;
275
+ left: 50%;
276
+ width: 1rem;
277
+ height: 1rem;
278
+ margin-left: -0.5rem;
279
+ margin-top: -0.5rem;
280
+ border: 2px solid transparent;
281
+ border-left-color: black;
282
+ border-top-color: black;
283
+ transform-origin: 50% 50%;
284
+ }
285
+ span {
286
+ display: none;
287
+ }
288
+ }
289
+ &__button-prev {
290
+ transform: translateY(-50%);
291
+ &::before {
292
+ transform: translate(15%, -10%) rotate(-45deg);
293
+ }
294
+ &:last-child {
295
+ margin-right: auto;
296
+ }
297
+ }
298
+ &__button-next {
299
+ left: auto;
300
+ right: 0;
301
+ transform: translateY(-50%);
302
+ &::before {
303
+ transform: translate(-35%, -10%) rotate(135deg);
304
+ }
305
+ &:first-child {
306
+ margin-left: auto;
307
+ }
308
+ }
227
309
  }
310
+
228
311
  .swiper-container {
229
312
  overflow: visible;
230
313
  --swiper-theme-color: var(--color__accent);
@@ -267,7 +350,6 @@ export default {
267
350
  .asd20-swiper {
268
351
  padding: space(1) space(2);
269
352
  width: calc(100% - #{space(4)});
270
-
271
353
  }
272
354
  }
273
355
  </style>
package/src/components/organisms/Asd20ImageHeader/index.vue CHANGED
@@ -288,7 +288,7 @@ export default {
288
288
  flex-direction: column;
289
289
  .asd20-breadcrumb,
290
290
  .back {
291
- color: currentColor !important;
291
+ color: rgb(235, 235, 235) !important;
292
292
  order: 2;
293
293
  }
294
294
  .right {
package/src/components/organisms/Asd20Navbar/index.vue CHANGED
@@ -138,11 +138,12 @@ $logo-width: 50vw;
138
138
  }
139
139
  .menu-button,
140
140
  .search-button {
141
+ color: var(--website-menu__title-color);
141
142
  &::v-deep .asd20-icon g{
142
143
  --line-color: var(--website-menu__title-color);
143
144
  // --line-color: red;
144
145
  }
145
- &:hover,
146
+ &:hover,
146
147
  &:focus {
147
148
  ::v-deep .asd20-button__label{
148
149
  // color: var(--website-menu__icon-fill-color);
@@ -204,7 +205,7 @@ $logo-width: 50vw;
204
205
  .search-button {
205
206
  position: relative;
206
207
  z-index: 1000;
207
- color: currentColor;
208
+ // color: currentColor;
208
209
  top: auto;
209
210
  left: auto;
210
211
  right: auto;
package/src/components/templates/Asd20WayfindingImageTemplate/index.vue CHANGED
@@ -338,7 +338,7 @@ export default {
338
338
  padding: space(1) space(2) space(1) space(2);
339
339
  .asd20-messaging {
340
340
  margin-bottom: space(2) !important;
341
- flex-grow: 1;
341
+ // flex-grow: 1;
342
342
  }
343
343
  }
344
344
  .asd20-page-content {