@shohojdhara/atomix 0.5.9 → 0.6.0
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/dist/atomix.css +2 -60
- package/dist/atomix.css.map +1 -1
- package/dist/atomix.min.css +1 -1
- package/dist/atomix.min.css.map +1 -1
- package/dist/atomix.umd.js +1 -1
- package/dist/atomix.umd.js.map +1 -1
- package/dist/atomix.umd.min.js +1 -1
- package/dist/index.d.ts +2 -2
- package/dist/index.esm.js +42 -42
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +63 -64
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +1 -1
- package/package.json +1 -1
- package/src/lib/index.ts +49 -3
- package/src/styles/05-objects/_objects.masonry-grid.scss +26 -80
package/dist/atomix.css
CHANGED
|
@@ -1454,11 +1454,6 @@ a, a:hover {
|
|
|
1454
1454
|
.o-masonry-grid--animate .o-masonry-grid__item {
|
|
1455
1455
|
transition: opacity var(--atomix-transition-duration-base) var(--atomix-transition-timing-base), top var(--atomix-transition-duration-base) var(--atomix-transition-timing-base), left var(--atomix-transition-duration-base) var(--atomix-transition-timing-base);
|
|
1456
1456
|
}
|
|
1457
|
-
@supports (transition-behavior: allow-discrete) {
|
|
1458
|
-
.o-masonry-grid--animate .o-masonry-grid__item {
|
|
1459
|
-
transition-behavior: allow-discrete;
|
|
1460
|
-
}
|
|
1461
|
-
}
|
|
1462
1457
|
.o-masonry-grid__item {
|
|
1463
1458
|
box-sizing: border-box;
|
|
1464
1459
|
width: 100%;
|
|
@@ -1480,11 +1475,6 @@ a, a:hover {
|
|
|
1480
1475
|
opacity: 0;
|
|
1481
1476
|
visibility: hidden;
|
|
1482
1477
|
}
|
|
1483
|
-
@supports (view-transition-name: masonry-item) {
|
|
1484
|
-
.o-masonry-grid__item:not([style*="position: absolute"]) {
|
|
1485
|
-
view-transition-name: masonry-item;
|
|
1486
|
-
}
|
|
1487
|
-
}
|
|
1488
1478
|
.o-masonry-grid__item-loading {
|
|
1489
1479
|
position: relative;
|
|
1490
1480
|
}
|
|
@@ -1498,31 +1488,13 @@ a, a:hover {
|
|
|
1498
1488
|
background: var(--atomix-gray-10);
|
|
1499
1489
|
z-index: var(--atomix-z-index-10);
|
|
1500
1490
|
border-radius: var(--atomix-border-radius-sm);
|
|
1501
|
-
|
|
1491
|
+
opacity: 0;
|
|
1502
1492
|
}
|
|
1503
1493
|
.o-masonry-grid__item-loading img {
|
|
1504
1494
|
opacity: 0;
|
|
1505
1495
|
}
|
|
1506
|
-
@supports (property: opacity) and (animation-timeline: view()) {
|
|
1507
|
-
.o-masonry-grid__item-loading img {
|
|
1508
|
-
opacity: var(--masonry-img-opacity);
|
|
1509
|
-
}
|
|
1510
|
-
@property --masonry-img-opacity {
|
|
1511
|
-
.o-masonry-grid__item-loading img {
|
|
1512
|
-
syntax: "<number>";
|
|
1513
|
-
inherits: false;
|
|
1514
|
-
initial-value: 0;
|
|
1515
|
-
}
|
|
1516
|
-
}
|
|
1517
|
-
}
|
|
1518
1496
|
.o-masonry-grid__item-loaded img {
|
|
1519
|
-
|
|
1520
|
-
}
|
|
1521
|
-
@supports (property: opacity) and (animation-timeline: view()) {
|
|
1522
|
-
.o-masonry-grid__item-loaded img {
|
|
1523
|
-
opacity: var(--masonry-img-opacity);
|
|
1524
|
-
animation: masonry-item-fade-in-advanced var(--atomix-transition-duration-base) var(--atomix-transition-timing-base) forwards;
|
|
1525
|
-
}
|
|
1497
|
+
opacity: 1;
|
|
1526
1498
|
}
|
|
1527
1499
|
.o-masonry-grid--loading-images {
|
|
1528
1500
|
position: relative;
|
|
@@ -1557,36 +1529,6 @@ a, a:hover {
|
|
|
1557
1529
|
transform: rotate(360deg);
|
|
1558
1530
|
}
|
|
1559
1531
|
}
|
|
1560
|
-
@keyframes masonry-loading-fade-in {
|
|
1561
|
-
from {
|
|
1562
|
-
opacity: 0;
|
|
1563
|
-
transform: scale(0.95);
|
|
1564
|
-
}
|
|
1565
|
-
to {
|
|
1566
|
-
opacity: 1;
|
|
1567
|
-
transform: scale(1);
|
|
1568
|
-
}
|
|
1569
|
-
}
|
|
1570
|
-
@keyframes masonry-item-fade-in {
|
|
1571
|
-
from {
|
|
1572
|
-
opacity: 0;
|
|
1573
|
-
transform: translateY(20px);
|
|
1574
|
-
}
|
|
1575
|
-
to {
|
|
1576
|
-
opacity: 1;
|
|
1577
|
-
transform: translateY(0);
|
|
1578
|
-
}
|
|
1579
|
-
}
|
|
1580
|
-
@keyframes masonry-item-fade-in-advanced {
|
|
1581
|
-
from {
|
|
1582
|
-
--masonry-img-opacity: 0;
|
|
1583
|
-
transform: translateY(20px) scale(0.95);
|
|
1584
|
-
}
|
|
1585
|
-
to {
|
|
1586
|
-
--masonry-img-opacity: 1;
|
|
1587
|
-
transform: translateY(0) scale(1);
|
|
1588
|
-
}
|
|
1589
|
-
}
|
|
1590
1532
|
.o-block {
|
|
1591
1533
|
--atomix-block-spacing-xs: 1rem;
|
|
1592
1534
|
--atomix-block-spacing-sm: 2rem;
|