@empathyco/x-components 3.0.0-alpha.293 → 3.0.0-alpha.294
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.
- package/CHANGELOG.md +12 -0
- package/design-system/default-theme.css +8 -73
- package/design-system/deprecated-full-theme.css +135 -0
- package/design-system/full-theme.css +8 -119
- package/design-system/picture-default.css +8 -45
- package/design-system/result-default.css +0 -7
- package/js/components/result/base-result-image.vue.js +2 -2
- package/js/components/result/base-result-image.vue.js.map +1 -1
- package/js/components/result/base-result-image.vue_rollup-plugin-vue_styles.0.vue.js +1 -1
- package/package.json +2 -2
- package/design-system/picture-card.css +0 -15
- package/design-system/picture-colored.css +0 -19
- package/design-system/picture-cover.css +0 -20
- package/design-system/picture-fixed-ratio.css +0 -8
- package/design-system/picture-zoom.css +0 -11
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,18 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file. See
|
|
4
4
|
[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [3.0.0-alpha.294](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.293...@empathyco/x-components@3.0.0-alpha.294) (2023-01-23)
|
|
7
|
+
|
|
8
|
+
### Features
|
|
9
|
+
|
|
10
|
+
- **design-system:** add `product-image` `XDS` component (#1025)
|
|
11
|
+
([d60e239](https://github.com/empathyco/x/commit/d60e239012d04d547b5430eb8afc22536f66d838))
|
|
12
|
+
|
|
13
|
+
# Change Log
|
|
14
|
+
|
|
15
|
+
All notable changes to this project will be documented in this file. See
|
|
16
|
+
[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
17
|
+
|
|
6
18
|
## [3.0.0-alpha.293](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.292...@empathyco/x-components@3.0.0-alpha.293) (2023-01-23)
|
|
7
19
|
|
|
8
20
|
### Styling
|
|
@@ -1623,90 +1623,32 @@
|
|
|
1623
1623
|
--x-number-font-weight-option-list-button-default: var(--x-number-font-weight-base-regular);
|
|
1624
1624
|
--x-number-font-weight-option-list-button-default-selected: var(--x-number-font-weight-base-bold);
|
|
1625
1625
|
}
|
|
1626
|
-
:root {
|
|
1627
|
-
--x-size-border-radius-picture-default: 0;
|
|
1628
|
-
--x-size-border-radius-top-picture-default: var(--x-size-border-radius-picture-default);
|
|
1629
|
-
--x-size-border-radius-right-picture-default: var(--x-size-border-radius-picture-default);
|
|
1630
|
-
--x-size-border-radius-bottom-picture-default: var(--x-size-border-radius-picture-default);
|
|
1631
|
-
--x-size-border-radius-left-picture-default: var(--x-size-border-radius-picture-default);
|
|
1632
|
-
--x-color-background-picture-default: transparent;
|
|
1633
|
-
--x-color-fill-picture-placeholder-path-default: var(--x-color-base-neutral-70);
|
|
1634
|
-
--x-color-fill-picture-placeholder-rect-default: var(--x-color-base-neutral-95);
|
|
1635
|
-
--x-color-fill-picture-fallback-path-default: var(--x-color-base-neutral-70);
|
|
1636
|
-
--x-color-fill-picture-fallback-rect-default: var(--x-color-base-neutral-95);
|
|
1637
|
-
--x-object-fit-picture-default: contain;
|
|
1638
|
-
--x-object-fit-picture-fallback-default: var(--x-object-fit-picture-default);
|
|
1639
|
-
--x-object-fit-picture-placeholder-default: var(--x-object-fit-picture-default);
|
|
1640
|
-
--x-mix-blend-mode-picture-default: none;
|
|
1641
|
-
--x-mix-blend-mode-picture-fallback-default: var(--x-mix-blend-mode-picture-default);
|
|
1642
|
-
--x-mix-blend-mode-picture-placeholder-default: var(--x-mix-blend-mode-picture-default);
|
|
1643
|
-
}
|
|
1644
|
-
|
|
1645
|
-
.x-picture {
|
|
1646
|
-
display: block;
|
|
1647
|
-
overflow: hidden;
|
|
1648
|
-
border-radius: var(--x-size-border-radius-top-picture-default) var(--x-size-border-radius-right-picture-default) var(--x-size-border-radius-bottom-picture-default) var(--x-size-border-radius-left-picture-default);
|
|
1649
|
-
background: var(--x-color-background-picture-default);
|
|
1650
|
-
}
|
|
1651
1626
|
.x-picture__image {
|
|
1652
|
-
display: block;
|
|
1653
1627
|
width: 100%;
|
|
1654
1628
|
height: 100%;
|
|
1655
|
-
object-fit: var(--x-object-fit-picture-default);
|
|
1656
|
-
mix-blend-mode: var(--x-mix-blend-mode-picture-default);
|
|
1657
|
-
}
|
|
1658
|
-
.x-picture__image--fallback {
|
|
1659
|
-
--x-object-fit-picture-default: var(--x-object-fit-picture-fallback-default);
|
|
1660
|
-
--x-mix-blend-mode-picture-default: var(--x-mix-blend-mode-picture-fallback-default);
|
|
1661
1629
|
}
|
|
1662
|
-
.x-picture__image--fallback
|
|
1663
|
-
|
|
1630
|
+
.x-picture__image--fallback, .x-picture__image--placeholder {
|
|
1631
|
+
object-fit: contain;
|
|
1632
|
+
background-color: var(--x-color-base-neutral-95);
|
|
1633
|
+
mix-blend-mode: normal;
|
|
1664
1634
|
}
|
|
1665
|
-
.x-picture__image--fallback >
|
|
1666
|
-
fill: var(--x-color-
|
|
1635
|
+
.x-picture__image--fallback > rect, .x-picture__image--placeholder > rect {
|
|
1636
|
+
fill: var(--x-color-base-neutral-95);
|
|
1667
1637
|
}
|
|
1668
|
-
.x-picture__image--placeholder {
|
|
1669
|
-
|
|
1670
|
-
--x-mix-blend-mode-picture-default: var(--x-mix-blend-mode-picture-placeholder-default);
|
|
1671
|
-
}
|
|
1672
|
-
.x-picture__image--placeholder > rect {
|
|
1673
|
-
fill: var(--x-color-fill-picture-placeholder-rect-default);
|
|
1674
|
-
}
|
|
1675
|
-
.x-picture__image--placeholder > path {
|
|
1676
|
-
fill: var(--x-color-fill-picture-placeholder-path-default);
|
|
1677
|
-
}
|
|
1678
|
-
:root {
|
|
1679
|
-
--x-size-border-radius-picture-default: 0;
|
|
1680
|
-
--x-size-border-radius-top-picture-default: var(--x-size-border-radius-picture-default);
|
|
1681
|
-
--x-size-border-radius-right-picture-default: var(--x-size-border-radius-picture-default);
|
|
1682
|
-
--x-size-border-radius-bottom-picture-default: var(--x-size-border-radius-picture-default);
|
|
1683
|
-
--x-size-border-radius-left-picture-default: var(--x-size-border-radius-picture-default);
|
|
1684
|
-
--x-color-background-picture-default: transparent;
|
|
1685
|
-
--x-color-fill-picture-placeholder-path-default: var(--x-color-base-neutral-70);
|
|
1686
|
-
--x-color-fill-picture-placeholder-rect-default: var(--x-color-base-neutral-95);
|
|
1687
|
-
--x-color-fill-picture-fallback-path-default: var(--x-color-base-neutral-70);
|
|
1688
|
-
--x-color-fill-picture-fallback-rect-default: var(--x-color-base-neutral-95);
|
|
1689
|
-
--x-object-fit-picture-default: contain;
|
|
1690
|
-
--x-object-fit-picture-fallback-default: var(--x-object-fit-picture-default);
|
|
1691
|
-
--x-object-fit-picture-placeholder-default: var(--x-object-fit-picture-default);
|
|
1692
|
-
--x-mix-blend-mode-picture-default: none;
|
|
1693
|
-
--x-mix-blend-mode-picture-fallback-default: var(--x-mix-blend-mode-picture-default);
|
|
1694
|
-
--x-mix-blend-mode-picture-placeholder-default: var(--x-mix-blend-mode-picture-default);
|
|
1638
|
+
.x-picture__image--fallback > path, .x-picture__image--placeholder > path {
|
|
1639
|
+
fill: var(--x-color-base-neutral-70);
|
|
1695
1640
|
}
|
|
1696
1641
|
:root {
|
|
1697
1642
|
--x-color-border-result-default: var(--x-color-base-lead);
|
|
1698
|
-
--x-color-border-result-picture-default: var(--x-color-border-result-default);
|
|
1699
1643
|
--x-color-border-result-overlay-default: var(--x-color-border-result-default);
|
|
1700
1644
|
--x-color-border-result-description-default: var(--x-color-border-result-default);
|
|
1701
1645
|
--x-color-background-result-default: transparent;
|
|
1702
1646
|
--x-size-padding-result-default: 0;
|
|
1703
|
-
--x-size-padding-result-picture-default: 0;
|
|
1704
1647
|
--x-size-padding-result-overlay-default: 0;
|
|
1705
1648
|
--x-size-padding-result-description-default: 0;
|
|
1706
1649
|
--x-size-gap-result-default: var(--x-size-base-03);
|
|
1707
1650
|
--x-size-border-radius-result-default: var(--x-size-border-radius-base-none);
|
|
1708
1651
|
--x-size-border-width-result-default: 0;
|
|
1709
|
-
--x-size-border-width-result-picture-default: 0;
|
|
1710
1652
|
--x-size-border-width-result-overlay-default: 0;
|
|
1711
1653
|
--x-size-border-width-result-description-default: 0;
|
|
1712
1654
|
}
|
|
@@ -1730,10 +1672,6 @@
|
|
|
1730
1672
|
.x-result__picture {
|
|
1731
1673
|
grid-column: result;
|
|
1732
1674
|
grid-row: picture;
|
|
1733
|
-
border-color: var(--x-color-border-result-picture-default);
|
|
1734
|
-
padding: var(--x-size-padding-result-picture-default);
|
|
1735
|
-
border-style: solid;
|
|
1736
|
-
border-width: var(--x-size-border-width-result-picture-default);
|
|
1737
1675
|
}
|
|
1738
1676
|
.x-result__overlay {
|
|
1739
1677
|
grid-column: result;
|
|
@@ -1763,18 +1701,15 @@
|
|
|
1763
1701
|
}
|
|
1764
1702
|
:root {
|
|
1765
1703
|
--x-color-border-result-default: var(--x-color-base-lead);
|
|
1766
|
-
--x-color-border-result-picture-default: var(--x-color-border-result-default);
|
|
1767
1704
|
--x-color-border-result-overlay-default: var(--x-color-border-result-default);
|
|
1768
1705
|
--x-color-border-result-description-default: var(--x-color-border-result-default);
|
|
1769
1706
|
--x-color-background-result-default: transparent;
|
|
1770
1707
|
--x-size-padding-result-default: 0;
|
|
1771
|
-
--x-size-padding-result-picture-default: 0;
|
|
1772
1708
|
--x-size-padding-result-overlay-default: 0;
|
|
1773
1709
|
--x-size-padding-result-description-default: 0;
|
|
1774
1710
|
--x-size-gap-result-default: var(--x-size-base-03);
|
|
1775
1711
|
--x-size-border-radius-result-default: var(--x-size-border-radius-base-none);
|
|
1776
1712
|
--x-size-border-width-result-default: 0;
|
|
1777
|
-
--x-size-border-width-result-picture-default: 0;
|
|
1778
1713
|
--x-size-border-width-result-overlay-default: 0;
|
|
1779
1714
|
--x-size-border-width-result-description-default: 0;
|
|
1780
1715
|
}
|
|
@@ -237,6 +237,141 @@
|
|
|
237
237
|
--x-size-border-width-bottom-button-default: var(--x-size-border-width-bottom-button-tertiary);
|
|
238
238
|
--x-size-border-width-left-button-default: var(--x-size-border-width-left-button-tertiary);
|
|
239
239
|
}
|
|
240
|
+
:root {
|
|
241
|
+
--x-size-border-radius-picture-card: var(--x-size-border-radius-base-s);
|
|
242
|
+
--x-size-border-radius-top-picture-card: var(--x-size-border-radius-picture-card);
|
|
243
|
+
--x-size-border-radius-right-picture-card: var(--x-size-border-radius-picture-card);
|
|
244
|
+
--x-size-border-radius-bottom-picture-card: var(--x-size-border-radius-picture-card);
|
|
245
|
+
--x-size-border-radius-left-picture-card: var(--x-size-border-radius-picture-card);
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
.x-picture--card.x-picture {
|
|
249
|
+
--x-size-border-radius-picture-default: var(--x-size-border-radius-picture-card);
|
|
250
|
+
--x-size-border-radius-top-picture-default: var(--x-size-border-radius-top-picture-card);
|
|
251
|
+
--x-size-border-radius-right-picture-default: var(--x-size-border-radius-right-picture-card);
|
|
252
|
+
--x-size-border-radius-bottom-picture-default: var(--x-size-border-radius-bottom-picture-card);
|
|
253
|
+
--x-size-border-radius-left-picture-default: var(--x-size-border-radius-left-picture-card);
|
|
254
|
+
}
|
|
255
|
+
:root {
|
|
256
|
+
--x-color-background-picture-colored: var(--x-color-base-neutral-95);
|
|
257
|
+
--x-mix-blend-mode-picture-colored: multiply;
|
|
258
|
+
--x-mix-blend-mode-picture-fallback-colored: var(--x-mix-blend-mode-picture-colored);
|
|
259
|
+
--x-mix-blend-mode-picture-placeholder-colored: var(--x-mix-blend-mode-picture-colored);
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
.x-picture--colored.x-picture {
|
|
263
|
+
--x-color-background-picture-default: var(--x-color-background-picture-colored);
|
|
264
|
+
}
|
|
265
|
+
.x-picture--colored.x-picture .x-picture__image {
|
|
266
|
+
--x-mix-blend-mode-picture-default: var(--x-mix-blend-mode-picture-colored);
|
|
267
|
+
}
|
|
268
|
+
.x-picture--colored.x-picture .x-picture--fallback {
|
|
269
|
+
--x-mix-blend-mode-picture-default: var(--x-mix-blend-mode-picture-fallback-colored);
|
|
270
|
+
}
|
|
271
|
+
.x-picture--colored.x-picture .x-picture--placeholder {
|
|
272
|
+
--x-mix-blend-mode-picture-default: var(--x-mix-blend-mode-picture-placeholder-colored);
|
|
273
|
+
}
|
|
274
|
+
:root {
|
|
275
|
+
--x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
|
|
276
|
+
--x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
.x-picture--cover.x-picture {
|
|
280
|
+
position: relative;
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
.x-result:hover .x-picture--cover:after,
|
|
284
|
+
.x-picture--cover:hover:after {
|
|
285
|
+
content: "";
|
|
286
|
+
display: block;
|
|
287
|
+
position: absolute;
|
|
288
|
+
top: 0;
|
|
289
|
+
left: 0;
|
|
290
|
+
background: linear-gradient(to bottom, var(--x-color-background-picture-cover-hover-from) 50%, var(--x-color-background-picture-cover-hover-to) 100%);
|
|
291
|
+
width: 100%;
|
|
292
|
+
height: 100%;
|
|
293
|
+
}
|
|
294
|
+
:root {
|
|
295
|
+
--x-size-border-radius-picture-default: 0;
|
|
296
|
+
--x-size-border-radius-top-picture-default: var(--x-size-border-radius-picture-default);
|
|
297
|
+
--x-size-border-radius-right-picture-default: var(--x-size-border-radius-picture-default);
|
|
298
|
+
--x-size-border-radius-bottom-picture-default: var(--x-size-border-radius-picture-default);
|
|
299
|
+
--x-size-border-radius-left-picture-default: var(--x-size-border-radius-picture-default);
|
|
300
|
+
--x-color-background-picture-default: transparent;
|
|
301
|
+
--x-color-fill-picture-placeholder-path-default: var(--x-color-base-neutral-70);
|
|
302
|
+
--x-color-fill-picture-placeholder-rect-default: var(--x-color-base-neutral-95);
|
|
303
|
+
--x-color-fill-picture-fallback-path-default: var(--x-color-base-neutral-70);
|
|
304
|
+
--x-color-fill-picture-fallback-rect-default: var(--x-color-base-neutral-95);
|
|
305
|
+
--x-object-fit-picture-default: contain;
|
|
306
|
+
--x-object-fit-picture-fallback-default: var(--x-object-fit-picture-default);
|
|
307
|
+
--x-object-fit-picture-placeholder-default: var(--x-object-fit-picture-default);
|
|
308
|
+
--x-mix-blend-mode-picture-default: normal;
|
|
309
|
+
--x-mix-blend-mode-picture-fallback-default: var(--x-mix-blend-mode-picture-default);
|
|
310
|
+
--x-mix-blend-mode-picture-placeholder-default: var(--x-mix-blend-mode-picture-default);
|
|
311
|
+
}
|
|
312
|
+
|
|
313
|
+
.x-picture {
|
|
314
|
+
display: block;
|
|
315
|
+
overflow: hidden;
|
|
316
|
+
border-radius: var(--x-size-border-radius-top-picture-default) var(--x-size-border-radius-right-picture-default) var(--x-size-border-radius-bottom-picture-default) var(--x-size-border-radius-left-picture-default);
|
|
317
|
+
background: var(--x-color-background-picture-default);
|
|
318
|
+
}
|
|
319
|
+
.x-picture__image {
|
|
320
|
+
display: block;
|
|
321
|
+
object-fit: var(--x-object-fit-picture-default);
|
|
322
|
+
mix-blend-mode: var(--x-mix-blend-mode-picture-default);
|
|
323
|
+
}
|
|
324
|
+
.x-picture__image--fallback {
|
|
325
|
+
--x-object-fit-picture-default: var(--x-object-fit-picture-fallback-default) !important;
|
|
326
|
+
--x-mix-blend-mode-picture-default: var(--x-mix-blend-mode-picture-fallback-default) !important;
|
|
327
|
+
}
|
|
328
|
+
.x-picture__image--fallback > rect {
|
|
329
|
+
fill: var(--x-color-fill-picture-fallback-rect-default) !important;
|
|
330
|
+
}
|
|
331
|
+
.x-picture__image--fallback > path {
|
|
332
|
+
fill: var(--x-color-fill-picture-fallback-path-default) !important;
|
|
333
|
+
}
|
|
334
|
+
.x-picture__image--placeholder {
|
|
335
|
+
--x-object-fit-picture-default: var(--x-object-fit-picture-placeholder-default) !important;
|
|
336
|
+
--x-mix-blend-mode-picture-default: var(--x-mix-blend-mode-picture-placeholder-default) !important;
|
|
337
|
+
}
|
|
338
|
+
.x-picture__image--placeholder > rect {
|
|
339
|
+
fill: var(--x-color-fill-picture-placeholder-rect-default) !important;
|
|
340
|
+
}
|
|
341
|
+
.x-picture__image--placeholder > path {
|
|
342
|
+
fill: var(--x-color-fill-picture-placeholder-path-default) !important;
|
|
343
|
+
}
|
|
344
|
+
:root {
|
|
345
|
+
--x-number-aspect-ratio-picture: 1;
|
|
346
|
+
}
|
|
347
|
+
|
|
348
|
+
.x-picture--fixed-ratio.x-picture {
|
|
349
|
+
aspect-ratio: var(--x-number-aspect-ratio-picture);
|
|
350
|
+
width: 100%;
|
|
351
|
+
}
|
|
352
|
+
:root {
|
|
353
|
+
--x-number-zoom-scale-picture: 1.1;
|
|
354
|
+
--x-number-zoom-duration-picture: 0.3s;
|
|
355
|
+
}
|
|
356
|
+
|
|
357
|
+
.x-picture--zoom .x-picture__image {
|
|
358
|
+
transition: transform var(--x-number-zoom-duration-picture) ease-out;
|
|
359
|
+
}
|
|
360
|
+
.x-picture--zoom .x-picture__image:hover {
|
|
361
|
+
transform: scale(var(--x-number-zoom-scale-picture));
|
|
362
|
+
}
|
|
363
|
+
:root {
|
|
364
|
+
--x-color-border-result-picture-default: var(--x-color-border-result-default);
|
|
365
|
+
--x-size-padding-result-picture-default: 0;
|
|
366
|
+
--x-size-border-width-result-picture-default: 0;
|
|
367
|
+
}
|
|
368
|
+
|
|
369
|
+
.x-result__picture {
|
|
370
|
+
border-color: var(--x-color-border-result-picture-default);
|
|
371
|
+
padding: var(--x-size-padding-result-picture-default);
|
|
372
|
+
border-style: solid;
|
|
373
|
+
border-width: var(--x-size-border-width-result-picture-default);
|
|
374
|
+
}
|
|
240
375
|
:root {
|
|
241
376
|
--x-color-text-suggestion-group-default: var(--x-color-text-suggestion-default);
|
|
242
377
|
--x-color-text-suggestion-group-matching-part-default: var(
|
|
@@ -2749,124 +2749,20 @@
|
|
|
2749
2749
|
--x-number-font-weight-option-list-button-default: var(--x-number-font-weight-base-regular);
|
|
2750
2750
|
--x-number-font-weight-option-list-button-default-selected: var(--x-number-font-weight-base-bold);
|
|
2751
2751
|
}
|
|
2752
|
-
.x-picture--card.x-picture {
|
|
2753
|
-
--x-size-border-radius-picture-default: var(--x-size-border-radius-picture-card);
|
|
2754
|
-
--x-size-border-radius-top-picture-default: var(--x-size-border-radius-top-picture-card);
|
|
2755
|
-
--x-size-border-radius-right-picture-default: var(--x-size-border-radius-right-picture-card);
|
|
2756
|
-
--x-size-border-radius-bottom-picture-default: var(--x-size-border-radius-bottom-picture-card);
|
|
2757
|
-
--x-size-border-radius-left-picture-default: var(--x-size-border-radius-left-picture-card);
|
|
2758
|
-
}
|
|
2759
|
-
:root {
|
|
2760
|
-
--x-size-border-radius-picture-card: var(--x-size-border-radius-base-s);
|
|
2761
|
-
--x-size-border-radius-top-picture-card: var(--x-size-border-radius-picture-card);
|
|
2762
|
-
--x-size-border-radius-right-picture-card: var(--x-size-border-radius-picture-card);
|
|
2763
|
-
--x-size-border-radius-bottom-picture-card: var(--x-size-border-radius-picture-card);
|
|
2764
|
-
--x-size-border-radius-left-picture-card: var(--x-size-border-radius-picture-card);
|
|
2765
|
-
}
|
|
2766
|
-
.x-picture--colored.x-picture {
|
|
2767
|
-
--x-color-background-picture-default: var(--x-color-background-picture-colored);
|
|
2768
|
-
}
|
|
2769
|
-
.x-picture--colored.x-picture .x-picture__image {
|
|
2770
|
-
--x-mix-blend-mode-picture-default: var(--x-mix-blend-mode-picture-colored);
|
|
2771
|
-
}
|
|
2772
|
-
.x-picture--colored.x-picture .x-picture--fallback {
|
|
2773
|
-
--x-mix-blend-mode-picture-default: var(--x-mix-blend-mode-picture-fallback-colored);
|
|
2774
|
-
}
|
|
2775
|
-
.x-picture--colored.x-picture .x-picture--placeholder {
|
|
2776
|
-
--x-mix-blend-mode-picture-default: var(--x-mix-blend-mode-picture-placeholder-colored);
|
|
2777
|
-
}
|
|
2778
|
-
:root {
|
|
2779
|
-
--x-color-background-picture-colored: var(--x-color-base-neutral-95);
|
|
2780
|
-
--x-mix-blend-mode-picture-colored: multiply;
|
|
2781
|
-
--x-mix-blend-mode-picture-fallback-colored: var(--x-mix-blend-mode-picture-colored);
|
|
2782
|
-
--x-mix-blend-mode-picture-placeholder-colored: var(--x-mix-blend-mode-picture-colored);
|
|
2783
|
-
}
|
|
2784
|
-
.x-picture--cover.x-picture {
|
|
2785
|
-
position: relative;
|
|
2786
|
-
}
|
|
2787
|
-
|
|
2788
|
-
.x-result:hover .x-picture--cover:after,
|
|
2789
|
-
.x-picture--cover:hover:after {
|
|
2790
|
-
content: "";
|
|
2791
|
-
display: block;
|
|
2792
|
-
position: absolute;
|
|
2793
|
-
top: 0;
|
|
2794
|
-
left: 0;
|
|
2795
|
-
background: linear-gradient(to bottom, var(--x-color-background-picture-cover-hover-from) 50%, var(--x-color-background-picture-cover-hover-to) 100%);
|
|
2796
|
-
width: 100%;
|
|
2797
|
-
height: 100%;
|
|
2798
|
-
}
|
|
2799
|
-
:root {
|
|
2800
|
-
--x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
|
|
2801
|
-
--x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
|
|
2802
|
-
}
|
|
2803
|
-
.x-picture {
|
|
2804
|
-
display: block;
|
|
2805
|
-
overflow: hidden;
|
|
2806
|
-
border-radius: var(--x-size-border-radius-top-picture-default) var(--x-size-border-radius-right-picture-default) var(--x-size-border-radius-bottom-picture-default) var(--x-size-border-radius-left-picture-default);
|
|
2807
|
-
background: var(--x-color-background-picture-default);
|
|
2808
|
-
}
|
|
2809
2752
|
.x-picture__image {
|
|
2810
|
-
display: block;
|
|
2811
2753
|
width: 100%;
|
|
2812
2754
|
height: 100%;
|
|
2813
|
-
object-fit: var(--x-object-fit-picture-default);
|
|
2814
|
-
mix-blend-mode: var(--x-mix-blend-mode-picture-default);
|
|
2815
|
-
}
|
|
2816
|
-
.x-picture__image--fallback {
|
|
2817
|
-
--x-object-fit-picture-default: var(--x-object-fit-picture-fallback-default);
|
|
2818
|
-
--x-mix-blend-mode-picture-default: var(--x-mix-blend-mode-picture-fallback-default);
|
|
2819
|
-
}
|
|
2820
|
-
.x-picture__image--fallback > rect {
|
|
2821
|
-
fill: var(--x-color-fill-picture-fallback-rect-default);
|
|
2822
2755
|
}
|
|
2823
|
-
.x-picture__image--fallback
|
|
2824
|
-
|
|
2756
|
+
.x-picture__image--fallback, .x-picture__image--placeholder {
|
|
2757
|
+
object-fit: contain;
|
|
2758
|
+
background-color: var(--x-color-base-neutral-95);
|
|
2759
|
+
mix-blend-mode: normal;
|
|
2825
2760
|
}
|
|
2826
|
-
.x-picture__image--placeholder {
|
|
2827
|
-
|
|
2828
|
-
--x-mix-blend-mode-picture-default: var(--x-mix-blend-mode-picture-placeholder-default);
|
|
2761
|
+
.x-picture__image--fallback > rect, .x-picture__image--placeholder > rect {
|
|
2762
|
+
fill: var(--x-color-base-neutral-95);
|
|
2829
2763
|
}
|
|
2830
|
-
.x-picture__image--placeholder >
|
|
2831
|
-
fill: var(--x-color-
|
|
2832
|
-
}
|
|
2833
|
-
.x-picture__image--placeholder > path {
|
|
2834
|
-
fill: var(--x-color-fill-picture-placeholder-path-default);
|
|
2835
|
-
}
|
|
2836
|
-
:root {
|
|
2837
|
-
--x-size-border-radius-picture-default: 0;
|
|
2838
|
-
--x-size-border-radius-top-picture-default: var(--x-size-border-radius-picture-default);
|
|
2839
|
-
--x-size-border-radius-right-picture-default: var(--x-size-border-radius-picture-default);
|
|
2840
|
-
--x-size-border-radius-bottom-picture-default: var(--x-size-border-radius-picture-default);
|
|
2841
|
-
--x-size-border-radius-left-picture-default: var(--x-size-border-radius-picture-default);
|
|
2842
|
-
--x-color-background-picture-default: transparent;
|
|
2843
|
-
--x-color-fill-picture-placeholder-path-default: var(--x-color-base-neutral-70);
|
|
2844
|
-
--x-color-fill-picture-placeholder-rect-default: var(--x-color-base-neutral-95);
|
|
2845
|
-
--x-color-fill-picture-fallback-path-default: var(--x-color-base-neutral-70);
|
|
2846
|
-
--x-color-fill-picture-fallback-rect-default: var(--x-color-base-neutral-95);
|
|
2847
|
-
--x-object-fit-picture-default: contain;
|
|
2848
|
-
--x-object-fit-picture-fallback-default: var(--x-object-fit-picture-default);
|
|
2849
|
-
--x-object-fit-picture-placeholder-default: var(--x-object-fit-picture-default);
|
|
2850
|
-
--x-mix-blend-mode-picture-default: none;
|
|
2851
|
-
--x-mix-blend-mode-picture-fallback-default: var(--x-mix-blend-mode-picture-default);
|
|
2852
|
-
--x-mix-blend-mode-picture-placeholder-default: var(--x-mix-blend-mode-picture-default);
|
|
2853
|
-
}
|
|
2854
|
-
.x-picture--fixed-ratio.x-picture {
|
|
2855
|
-
aspect-ratio: var(--x-number-aspect-ratio-picture);
|
|
2856
|
-
width: 100%;
|
|
2857
|
-
}
|
|
2858
|
-
:root {
|
|
2859
|
-
--x-number-aspect-ratio-picture: 1;
|
|
2860
|
-
}
|
|
2861
|
-
.x-picture--zoom .x-picture__image {
|
|
2862
|
-
transition: transform var(--x-number-zoom-duration-picture) ease-out;
|
|
2863
|
-
}
|
|
2864
|
-
.x-picture--zoom .x-picture__image:hover {
|
|
2865
|
-
transform: scale(var(--x-number-zoom-scale-picture));
|
|
2866
|
-
}
|
|
2867
|
-
:root {
|
|
2868
|
-
--x-number-zoom-scale-picture: 1.1;
|
|
2869
|
-
--x-number-zoom-duration-picture: 0.3s;
|
|
2764
|
+
.x-picture__image--fallback > path, .x-picture__image--placeholder > path {
|
|
2765
|
+
fill: var(--x-color-base-neutral-70);
|
|
2870
2766
|
}
|
|
2871
2767
|
.x-progress-bar {
|
|
2872
2768
|
display: inline-block;
|
|
@@ -2918,10 +2814,6 @@
|
|
|
2918
2814
|
.x-result__picture {
|
|
2919
2815
|
grid-column: result;
|
|
2920
2816
|
grid-row: picture;
|
|
2921
|
-
border-color: var(--x-color-border-result-picture-default);
|
|
2922
|
-
padding: var(--x-size-padding-result-picture-default);
|
|
2923
|
-
border-style: solid;
|
|
2924
|
-
border-width: var(--x-size-border-width-result-picture-default);
|
|
2925
2817
|
}
|
|
2926
2818
|
.x-result__overlay {
|
|
2927
2819
|
grid-column: result;
|
|
@@ -2951,18 +2843,15 @@
|
|
|
2951
2843
|
}
|
|
2952
2844
|
:root {
|
|
2953
2845
|
--x-color-border-result-default: var(--x-color-base-lead);
|
|
2954
|
-
--x-color-border-result-picture-default: var(--x-color-border-result-default);
|
|
2955
2846
|
--x-color-border-result-overlay-default: var(--x-color-border-result-default);
|
|
2956
2847
|
--x-color-border-result-description-default: var(--x-color-border-result-default);
|
|
2957
2848
|
--x-color-background-result-default: transparent;
|
|
2958
2849
|
--x-size-padding-result-default: 0;
|
|
2959
|
-
--x-size-padding-result-picture-default: 0;
|
|
2960
2850
|
--x-size-padding-result-overlay-default: 0;
|
|
2961
2851
|
--x-size-padding-result-description-default: 0;
|
|
2962
2852
|
--x-size-gap-result-default: var(--x-size-base-03);
|
|
2963
2853
|
--x-size-border-radius-result-default: var(--x-size-border-radius-base-none);
|
|
2964
2854
|
--x-size-border-width-result-default: 0;
|
|
2965
|
-
--x-size-border-width-result-picture-default: 0;
|
|
2966
2855
|
--x-size-border-width-result-overlay-default: 0;
|
|
2967
2856
|
--x-size-border-width-result-description-default: 0;
|
|
2968
2857
|
}
|
|
@@ -1,52 +1,15 @@
|
|
|
1
|
-
:root {
|
|
2
|
-
--x-size-border-radius-picture-default: 0;
|
|
3
|
-
--x-size-border-radius-top-picture-default: var(--x-size-border-radius-picture-default);
|
|
4
|
-
--x-size-border-radius-right-picture-default: var(--x-size-border-radius-picture-default);
|
|
5
|
-
--x-size-border-radius-bottom-picture-default: var(--x-size-border-radius-picture-default);
|
|
6
|
-
--x-size-border-radius-left-picture-default: var(--x-size-border-radius-picture-default);
|
|
7
|
-
--x-color-background-picture-default: transparent;
|
|
8
|
-
--x-color-fill-picture-placeholder-path-default: var(--x-color-base-neutral-70);
|
|
9
|
-
--x-color-fill-picture-placeholder-rect-default: var(--x-color-base-neutral-95);
|
|
10
|
-
--x-color-fill-picture-fallback-path-default: var(--x-color-base-neutral-70);
|
|
11
|
-
--x-color-fill-picture-fallback-rect-default: var(--x-color-base-neutral-95);
|
|
12
|
-
--x-object-fit-picture-default: contain;
|
|
13
|
-
--x-object-fit-picture-fallback-default: var(--x-object-fit-picture-default);
|
|
14
|
-
--x-object-fit-picture-placeholder-default: var(--x-object-fit-picture-default);
|
|
15
|
-
--x-mix-blend-mode-picture-default: none;
|
|
16
|
-
--x-mix-blend-mode-picture-fallback-default: var(--x-mix-blend-mode-picture-default);
|
|
17
|
-
--x-mix-blend-mode-picture-placeholder-default: var(--x-mix-blend-mode-picture-default);
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
.x-picture {
|
|
21
|
-
display: block;
|
|
22
|
-
overflow: hidden;
|
|
23
|
-
border-radius: var(--x-size-border-radius-top-picture-default) var(--x-size-border-radius-right-picture-default) var(--x-size-border-radius-bottom-picture-default) var(--x-size-border-radius-left-picture-default);
|
|
24
|
-
background: var(--x-color-background-picture-default);
|
|
25
|
-
}
|
|
26
1
|
.x-picture__image {
|
|
27
|
-
display: block;
|
|
28
2
|
width: 100%;
|
|
29
3
|
height: 100%;
|
|
30
|
-
object-fit: var(--x-object-fit-picture-default);
|
|
31
|
-
mix-blend-mode: var(--x-mix-blend-mode-picture-default);
|
|
32
|
-
}
|
|
33
|
-
.x-picture__image--fallback {
|
|
34
|
-
--x-object-fit-picture-default: var(--x-object-fit-picture-fallback-default);
|
|
35
|
-
--x-mix-blend-mode-picture-default: var(--x-mix-blend-mode-picture-fallback-default);
|
|
36
|
-
}
|
|
37
|
-
.x-picture__image--fallback > rect {
|
|
38
|
-
fill: var(--x-color-fill-picture-fallback-rect-default);
|
|
39
|
-
}
|
|
40
|
-
.x-picture__image--fallback > path {
|
|
41
|
-
fill: var(--x-color-fill-picture-fallback-path-default);
|
|
42
4
|
}
|
|
43
|
-
.x-picture__image--placeholder {
|
|
44
|
-
|
|
45
|
-
|
|
5
|
+
.x-picture__image--fallback, .x-picture__image--placeholder {
|
|
6
|
+
object-fit: contain;
|
|
7
|
+
background-color: var(--x-color-base-neutral-95);
|
|
8
|
+
mix-blend-mode: normal;
|
|
46
9
|
}
|
|
47
|
-
.x-picture__image--placeholder > rect {
|
|
48
|
-
fill: var(--x-color-
|
|
10
|
+
.x-picture__image--fallback > rect, .x-picture__image--placeholder > rect {
|
|
11
|
+
fill: var(--x-color-base-neutral-95);
|
|
49
12
|
}
|
|
50
|
-
.x-picture__image--placeholder > path {
|
|
51
|
-
fill: var(--x-color-
|
|
13
|
+
.x-picture__image--fallback > path, .x-picture__image--placeholder > path {
|
|
14
|
+
fill: var(--x-color-base-neutral-70);
|
|
52
15
|
}
|
|
@@ -1,17 +1,14 @@
|
|
|
1
1
|
:root {
|
|
2
2
|
--x-color-border-result-default: var(--x-color-base-lead);
|
|
3
|
-
--x-color-border-result-picture-default: var(--x-color-border-result-default);
|
|
4
3
|
--x-color-border-result-overlay-default: var(--x-color-border-result-default);
|
|
5
4
|
--x-color-border-result-description-default: var(--x-color-border-result-default);
|
|
6
5
|
--x-color-background-result-default: transparent;
|
|
7
6
|
--x-size-padding-result-default: 0;
|
|
8
|
-
--x-size-padding-result-picture-default: 0;
|
|
9
7
|
--x-size-padding-result-overlay-default: 0;
|
|
10
8
|
--x-size-padding-result-description-default: 0;
|
|
11
9
|
--x-size-gap-result-default: var(--x-size-base-03);
|
|
12
10
|
--x-size-border-radius-result-default: var(--x-size-border-radius-base-none);
|
|
13
11
|
--x-size-border-width-result-default: 0;
|
|
14
|
-
--x-size-border-width-result-picture-default: 0;
|
|
15
12
|
--x-size-border-width-result-overlay-default: 0;
|
|
16
13
|
--x-size-border-width-result-description-default: 0;
|
|
17
14
|
}
|
|
@@ -35,10 +32,6 @@
|
|
|
35
32
|
.x-result__picture {
|
|
36
33
|
grid-column: result;
|
|
37
34
|
grid-row: picture;
|
|
38
|
-
border-color: var(--x-color-border-result-picture-default);
|
|
39
|
-
padding: var(--x-size-padding-result-picture-default);
|
|
40
|
-
border-style: solid;
|
|
41
|
-
border-width: var(--x-size-border-width-result-picture-default);
|
|
42
35
|
}
|
|
43
36
|
.x-result__overlay {
|
|
44
37
|
grid-column: result;
|
|
@@ -54,7 +54,7 @@ var __vue_render__ = function () {
|
|
|
54
54
|
? _vm._t("placeholder")
|
|
55
55
|
: _c("img", {
|
|
56
56
|
key: _vm.imageSrc,
|
|
57
|
-
staticClass: "x-
|
|
57
|
+
staticClass: "x-result-picture-image",
|
|
58
58
|
attrs: {
|
|
59
59
|
alt: _vm.result.name,
|
|
60
60
|
src: _vm.imageSrc,
|
|
@@ -74,7 +74,7 @@ __vue_render__._withStripped = true;
|
|
|
74
74
|
/* style */
|
|
75
75
|
const __vue_inject_styles__ = undefined;
|
|
76
76
|
/* scoped */
|
|
77
|
-
const __vue_scope_id__ = "data-v-
|
|
77
|
+
const __vue_scope_id__ = "data-v-034b755c";
|
|
78
78
|
/* module identifier */
|
|
79
79
|
const __vue_module_identifier__ = undefined;
|
|
80
80
|
/* functional template */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"base-result-image.vue.js","sources":["../../../../src/components/result/base-result-image.vue"],"sourcesContent":["<template>\n <!-- This is a div because using a picture causes the onload event of the image to fire twice. -->\n <!-- eslint-disable-next-line vuejs-accessibility/mouse-events-have-key-events -->\n <div\n @mouseenter.once=\"userHasHoveredImage = true\"\n @mouseenter=\"isHovering = true\"\n @mouseleave=\"isHovering = false\"\n class=\"x-picture x-result-picture\"\n data-test=\"result-picture\"\n >\n <img\n v-if=\"shouldLoadNextImage\"\n @load=\"flagImageLoaded\"\n @error=\"flagImageAsFailed\"\n loading=\"lazy\"\n :src=\"pendingImages[0]\"\n :style=\"loaderStyles\"\n data-test=\"result-picture-loader\"\n alt=\"\"\n role=\"presentation\"\n />\n <component :is=\"animation\" class=\"x-picture__image\" :appear=\"false\">\n <!-- @slot Fallback image content. It will be rendered when all the images failed -->\n <slot v-if=\"!loadedImages.length && !pendingImages.length\" name=\"fallback\" />\n\n <!-- @slot Loading image content. It will be rendered while the real image is not loaded -->\n <slot v-else-if=\"!loadedImages.length\" name=\"placeholder\" />\n\n <img\n v-else\n :key=\"imageSrc\"\n :alt=\"result.name\"\n :src=\"imageSrc\"\n class=\"x-
|
|
1
|
+
{"version":3,"file":"base-result-image.vue.js","sources":["../../../../src/components/result/base-result-image.vue"],"sourcesContent":["<template>\n <!-- This is a div because using a picture causes the onload event of the image to fire twice. -->\n <!-- eslint-disable-next-line vuejs-accessibility/mouse-events-have-key-events -->\n <div\n @mouseenter.once=\"userHasHoveredImage = true\"\n @mouseenter=\"isHovering = true\"\n @mouseleave=\"isHovering = false\"\n class=\"x-picture x-result-picture\"\n data-test=\"result-picture\"\n >\n <img\n v-if=\"shouldLoadNextImage\"\n @load=\"flagImageLoaded\"\n @error=\"flagImageAsFailed\"\n loading=\"lazy\"\n :src=\"pendingImages[0]\"\n :style=\"loaderStyles\"\n data-test=\"result-picture-loader\"\n alt=\"\"\n role=\"presentation\"\n />\n <component :is=\"animation\" class=\"x-picture__image\" :appear=\"false\">\n <!-- @slot Fallback image content. It will be rendered when all the images failed -->\n <slot v-if=\"!loadedImages.length && !pendingImages.length\" name=\"fallback\" />\n\n <!-- @slot Loading image content. It will be rendered while the real image is not loaded -->\n <slot v-else-if=\"!loadedImages.length\" name=\"placeholder\" />\n\n <img\n v-else\n :key=\"imageSrc\"\n :alt=\"result.name\"\n :src=\"imageSrc\"\n class=\"x-result-picture-image\"\n data-test=\"result-picture-image\"\n />\n </component>\n </div>\n</template>\n\n<script lang=\"ts\">\n import { Result } from '@empathyco/x-types';\n import Vue from 'vue';\n import { Component, Prop, Watch } from 'vue-property-decorator';\n import { NoElement } from '../no-element';\n\n /**\n * Component to be reused that renders an `<img>`.\n *\n * @public\n */\n @Component({\n components: {\n NoElement\n }\n })\n export default class BaseResultImage extends Vue {\n /**\n * (Required) The {@link @empathyco/x-types#Result | result} information.\n *\n * @public\n */\n @Prop({ required: true })\n protected result!: Result;\n\n /**\n * Animation to use when switching between the placeholder, the loaded image, or the failed\n * image fallback.\n *\n * @public\n */\n @Prop({ default: () => NoElement })\n public loadAnimation!: string | typeof Vue;\n\n /**\n * Animation to use when switching between the loaded image and the hover image.\n *\n * @public\n */\n @Prop()\n public hoverAnimation!: string | typeof Vue | undefined;\n\n /**\n * Indicates if the next valid image should be displayed on hover.\n *\n * @public\n */\n @Prop({ type: Boolean, default: false })\n public showNextImageOnHover!: boolean;\n\n /**\n * Copy of the images of the result.\n *\n * It is used as a queue of images to load, once an image loads/fails to load, it is removed\n * from this array.\n *\n * @internal\n */\n protected pendingImages: string[] = [];\n\n /**\n * Contains the images that have been loaded successfully.\n *\n * @internal\n */\n protected loadedImages: string[] = [];\n\n /**\n * Indicates if the user is hovering the image.\n *\n * @internal\n */\n protected isHovering = false;\n\n /**\n * Indicates if the user has hovered the image.\n *\n * @internal\n */\n protected userHasHoveredImage = false;\n\n /**.\n * Styles to use inline in the image loader, to prevent override from CSS\n *\n * @internal\n */\n protected loaderStyles: Partial<CSSStyleDeclaration> = {\n position: 'absolute !important',\n top: '0 !important',\n left: '0 !important',\n width: '100% !important',\n height: '100% !important',\n pointerEvents: 'none !important',\n visibility: 'hidden !important'\n };\n\n /**\n * Initializes images state and resets when the result's images change.\n *\n * @internal\n */\n @Watch('result.images', { immediate: true })\n resetImagesState(): void {\n this.pendingImages = [...(this.result.images ?? [])];\n this.loadedImages = this.pendingImages.filter(image => this.loadedImages.includes(image));\n }\n\n /**\n * Animation to be used.\n *\n * @returns The animation to be used, taking into account if the user has hovered the image.\n *\n * @internal\n */\n protected get animation(): string | typeof Vue {\n return this.userHasHoveredImage\n ? this.hoverAnimation ?? this.loadAnimation\n : this.loadAnimation;\n }\n\n /**\n * Gets the src from the result image.\n *\n * @returns The result image src.\n *\n * @internal\n */\n protected get imageSrc(): string {\n return this.loadedImages[\n !this.showNextImageOnHover || !this.isHovering ? 0 : this.loadedImages.length - 1\n ];\n }\n\n /**\n * Indicates if the loader should try to load the next image.\n *\n * @returns True if it should try to load the next image.\n *\n * @internal\n */\n protected get shouldLoadNextImage(): boolean {\n const numImagesToLoad = this.showNextImageOnHover && this.userHasHoveredImage ? 2 : 1;\n return !!this.pendingImages.length && this.loadedImages.length < numImagesToLoad;\n }\n\n /**\n * Sets an image as failed.\n *\n * @internal\n */\n protected flagImageAsFailed(): void {\n this.pendingImages.shift();\n }\n\n /**\n * Sets an image as loaded.\n *\n * @internal\n */\n protected flagImageLoaded(): void {\n const image = this.pendingImages.shift();\n if (image) {\n this.loadedImages.push(image);\n }\n }\n }\n</script>\n\n<style lang=\"scss\" scoped>\n .x-result-picture {\n position: relative;\n min-width: 1px;\n min-height: 1px;\n\n &-image {\n max-width: 100%;\n max-height: 100%;\n }\n }\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\n### Basic example\n\nThis component is for the result image. It may be part of the search result page, recommendations or\nother section which needs to include results.\n\nThe result prop is required. It will render a `<img/>` with the result image:\n\n```vue\n<BaseResultImage :result=\"result\" />\n```\n\n### Showing the next image on hover\n\nIf a result has multiple images, it can show the next one on hover.\n\n```vue\n<BaseResultImage :result=\"result\" showNextImageOnHover />\n```\n\n### Customizing slots content\n\nFallback and placeholder contents can be customized.\n\nThe fallback slot allows you to replace the content of the fallback image.\n\nThe other slot is called `placeholder`, and allows you to set the image that its going to be\ndisplayed while the real one is loaded.\n\n```vue\n<BaseResultImage :result=\"result\">\n <template #placeholder>\n <img class=\"x-result-picture-placeholder\" src=\"./placeholder-image.svg\"/>\n </template>\n <template #fallback>\n <img class=\"x-result-picture-fallback\" src=\"./fallback-image.svg\"/>\n </template>\n</BaseResultImage>\n```\n\n### Customizing the animations\n\nTwo animations can be used this component.\n\nThe `loadAnimation` is used to transition between the placeholder, the fallback and the image.\n\nThe `hoverAnimation` is used to transition between the image and the hover image, if the\n`showNextImageOnHover` prop is `true`.\n\n`hoverAnimation` will default to `loadAnimation` if it is not provided.\n\n```vue\n<template>\n <BaseResultImage\n :result=\"result\"\n :loadAnimation=\"loadAnimation\"\n :hoverAnimation=\"hoverAnimation\"\n showNextImageOnHover\n />\n</template>\n\n<script>\n import { BaseResultImage } from '@empathyco/x-components';\n import { CrossFade, CollapseHeight } from '@empathyco/x-components/animations';\n\n export default {\n name: 'BaseResultImageAnimations',\n components: {\n BaseResultImage\n },\n data() {\n return {\n loadAnimation: CrossFade,\n hoverAnimation: CollapseHeight,\n result: {\n name: 'jacket',\n images: ['https://some-image', 'https://some-image-2']\n }\n };\n }\n };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { createInjector, createInjectorSSR } from 'vue-runtime-helpers';
|
|
2
2
|
|
|
3
|
-
var css = ".x-result-picture[data-v-
|
|
3
|
+
var css = ".x-result-picture[data-v-034b755c] {\n position: relative;\n min-width: 1px;\n min-height: 1px;\n}\n.x-result-picture-image[data-v-034b755c] {\n max-width: 100%;\n max-height: 100%;\n}";
|
|
4
4
|
const isBrowser = /*#__PURE__*/ (function () {
|
|
5
5
|
return (
|
|
6
6
|
Object.prototype.toString.call(typeof process !== 'undefined' ? process : 0) !==
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@empathyco/x-components",
|
|
3
|
-
"version": "3.0.0-alpha.
|
|
3
|
+
"version": "3.0.0-alpha.294",
|
|
4
4
|
"description": "Empathy X Components",
|
|
5
5
|
"author": "Empathy Systems Corporation S.L.",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -138,5 +138,5 @@
|
|
|
138
138
|
"access": "public",
|
|
139
139
|
"directory": "dist"
|
|
140
140
|
},
|
|
141
|
-
"gitHead": "
|
|
141
|
+
"gitHead": "9d41496b4e0d52f31853dad32eed0c69f37a7f6c"
|
|
142
142
|
}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
:root {
|
|
2
|
-
--x-size-border-radius-picture-card: var(--x-size-border-radius-base-s);
|
|
3
|
-
--x-size-border-radius-top-picture-card: var(--x-size-border-radius-picture-card);
|
|
4
|
-
--x-size-border-radius-right-picture-card: var(--x-size-border-radius-picture-card);
|
|
5
|
-
--x-size-border-radius-bottom-picture-card: var(--x-size-border-radius-picture-card);
|
|
6
|
-
--x-size-border-radius-left-picture-card: var(--x-size-border-radius-picture-card);
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
.x-picture--card.x-picture {
|
|
10
|
-
--x-size-border-radius-picture-default: var(--x-size-border-radius-picture-card);
|
|
11
|
-
--x-size-border-radius-top-picture-default: var(--x-size-border-radius-top-picture-card);
|
|
12
|
-
--x-size-border-radius-right-picture-default: var(--x-size-border-radius-right-picture-card);
|
|
13
|
-
--x-size-border-radius-bottom-picture-default: var(--x-size-border-radius-bottom-picture-card);
|
|
14
|
-
--x-size-border-radius-left-picture-default: var(--x-size-border-radius-left-picture-card);
|
|
15
|
-
}
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
:root {
|
|
2
|
-
--x-color-background-picture-colored: var(--x-color-base-neutral-95);
|
|
3
|
-
--x-mix-blend-mode-picture-colored: multiply;
|
|
4
|
-
--x-mix-blend-mode-picture-fallback-colored: var(--x-mix-blend-mode-picture-colored);
|
|
5
|
-
--x-mix-blend-mode-picture-placeholder-colored: var(--x-mix-blend-mode-picture-colored);
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
.x-picture--colored.x-picture {
|
|
9
|
-
--x-color-background-picture-default: var(--x-color-background-picture-colored);
|
|
10
|
-
}
|
|
11
|
-
.x-picture--colored.x-picture .x-picture__image {
|
|
12
|
-
--x-mix-blend-mode-picture-default: var(--x-mix-blend-mode-picture-colored);
|
|
13
|
-
}
|
|
14
|
-
.x-picture--colored.x-picture .x-picture--fallback {
|
|
15
|
-
--x-mix-blend-mode-picture-default: var(--x-mix-blend-mode-picture-fallback-colored);
|
|
16
|
-
}
|
|
17
|
-
.x-picture--colored.x-picture .x-picture--placeholder {
|
|
18
|
-
--x-mix-blend-mode-picture-default: var(--x-mix-blend-mode-picture-placeholder-colored);
|
|
19
|
-
}
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
:root {
|
|
2
|
-
--x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
|
|
3
|
-
--x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
|
|
4
|
-
}
|
|
5
|
-
|
|
6
|
-
.x-picture--cover.x-picture {
|
|
7
|
-
position: relative;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
.x-result:hover .x-picture--cover:after,
|
|
11
|
-
.x-picture--cover:hover:after {
|
|
12
|
-
content: "";
|
|
13
|
-
display: block;
|
|
14
|
-
position: absolute;
|
|
15
|
-
top: 0;
|
|
16
|
-
left: 0;
|
|
17
|
-
background: linear-gradient(to bottom, var(--x-color-background-picture-cover-hover-from) 50%, var(--x-color-background-picture-cover-hover-to) 100%);
|
|
18
|
-
width: 100%;
|
|
19
|
-
height: 100%;
|
|
20
|
-
}
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
:root {
|
|
2
|
-
--x-number-zoom-scale-picture: 1.1;
|
|
3
|
-
--x-number-zoom-duration-picture: 0.3s;
|
|
4
|
-
}
|
|
5
|
-
|
|
6
|
-
.x-picture--zoom .x-picture__image {
|
|
7
|
-
transition: transform var(--x-number-zoom-duration-picture) ease-out;
|
|
8
|
-
}
|
|
9
|
-
.x-picture--zoom .x-picture__image:hover {
|
|
10
|
-
transform: scale(var(--x-number-zoom-scale-picture));
|
|
11
|
-
}
|