@wix/fast-gallery-vibe 1.20.0 → 1.21.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.
@@ -11,31 +11,80 @@
11
11
  width: 100%;
12
12
  }
13
13
 
14
- /* Grid Layout - 3 columns */
14
+ /* Grid Layout - Matching Tailwind: grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-4 sm:gap-6 */
15
15
  .gallery-layout.gallery-grid .scroller .container {
16
16
  display: grid;
17
- grid-template-columns: repeat(3, 1fr);
18
- gap: 1rem;
17
+ grid-template-columns: repeat(1, 1fr); /* grid-cols-1 */
18
+ gap: 1rem; /* gap-4 = 1rem */
19
+ }
20
+
21
+ /* sm: (≥640px) - grid-cols-2, gap-6 */
22
+ @media (min-width: 640px) {
23
+ .gallery-layout.gallery-grid .scroller .container {
24
+ grid-template-columns: repeat(2, 1fr); /* sm:grid-cols-2 */
25
+ gap: 1.5rem; /* sm:gap-6 = 1.5rem */
26
+ }
27
+ }
28
+
29
+ /* lg: (≥1024px) - grid-cols-2 (same as sm) */
30
+ @media (min-width: 1024px) {
31
+ .gallery-layout.gallery-grid .scroller .container {
32
+ grid-template-columns: repeat(2, 1fr); /* lg:grid-cols-2 */
33
+ }
34
+ }
35
+
36
+ /* xl: (≥1280px) - grid-cols-3 */
37
+ @media (min-width: 1280px) {
38
+ .gallery-layout.gallery-grid .scroller .container {
39
+ grid-template-columns: repeat(3, 1fr); /* xl:grid-cols-3 */
40
+ }
19
41
  }
20
42
 
21
- /* Alternating Layout - 3-2-3-2 pattern */
43
+ /* Alternating Layout - Matching Tailwind: grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-6 gap-4 sm:gap-6 */
22
44
  .gallery-layout.gallery-alternating .scroller .container {
23
45
  display: grid;
24
- grid-template-columns: repeat(6, 1fr);
25
- gap: 1rem;
46
+ grid-template-columns: repeat(1, 1fr); /* grid-cols-1 */
47
+ gap: 1rem; /* gap-4 = 1rem */
48
+ }
49
+
50
+ /* Default: all items span 1 column */
51
+ .gallery-layout.gallery-alternating .scroller .container > .item {
52
+ grid-column: span 1;
26
53
  }
27
54
 
28
- /* Odd rows (1, 3, 5, ...): 3 items per row */
29
- .gallery-layout.gallery-alternating .scroller .container > .item:nth-child(5n+1),
30
- .gallery-layout.gallery-alternating .scroller .container > .item:nth-child(5n+2),
31
- .gallery-layout.gallery-alternating .scroller .container > .item:nth-child(5n+3) {
32
- grid-column: span 2;
55
+ /* sm: (≥640px) - grid-cols-2, gap-6 */
56
+ @media (min-width: 640px) {
57
+ .gallery-layout.gallery-alternating .scroller .container {
58
+ grid-template-columns: repeat(2, 1fr); /* sm:grid-cols-2 */
59
+ gap: 1.5rem; /* sm:gap-6 = 1.5rem */
60
+ }
33
61
  }
34
62
 
35
- /* Even rows (2, 4, 6, ...): 2 items per row */
36
- .gallery-layout.gallery-alternating .scroller .container > .item:nth-child(5n+4),
37
- .gallery-layout.gallery-alternating .scroller .container > .item:nth-child(5n+5) {
38
- grid-column: span 3;
63
+ /* lg: (≥1024px) - grid-cols-2 (same as sm) */
64
+ @media (min-width: 1024px) {
65
+ .gallery-layout.gallery-alternating .scroller .container {
66
+ grid-template-columns: repeat(2, 1fr); /* lg:grid-cols-2 */
67
+ }
68
+ }
69
+
70
+ /* xl: (≥1280px) - grid-cols-6 with 3-2-3-2 pattern */
71
+ @media (min-width: 1280px) {
72
+ .gallery-layout.gallery-alternating .scroller .container {
73
+ grid-template-columns: repeat(6, 1fr); /* xl:grid-cols-6 */
74
+ }
75
+
76
+ /* Odd rows (1, 3, 5, ...): 3 items per row */
77
+ .gallery-layout.gallery-alternating .scroller .container > .item:nth-child(5n+1),
78
+ .gallery-layout.gallery-alternating .scroller .container > .item:nth-child(5n+2),
79
+ .gallery-layout.gallery-alternating .scroller .container > .item:nth-child(5n+3) {
80
+ grid-column: span 2;
81
+ }
82
+
83
+ /* Even rows (2, 4, 6, ...): 2 items per row */
84
+ .gallery-layout.gallery-alternating .scroller .container > .item:nth-child(5n+4),
85
+ .gallery-layout.gallery-alternating .scroller .container > .item:nth-child(5n+5) {
86
+ grid-column: span 3;
87
+ }
39
88
  }
40
89
 
41
90
  /* Slider Layout - Horizontal scrolling */
@@ -65,13 +114,35 @@
65
114
  }
66
115
  }
67
116
 
68
- /* Waterfall Layout - Masonry columns */
117
+ /* Waterfall Layout - Matching Tailwind: columns-1 sm:columns-2 lg:columns-2 xl:columns-3 gap-4 sm:gap-6 */
69
118
  .gallery-layout.gallery-waterfall .scroller .container {
70
- columns: 3;
71
- column-gap: 1rem;
119
+ columns: 1; /* columns-1 */
120
+ column-gap: 1rem; /* gap-4 = 1rem */
72
121
  }
73
122
 
74
123
  .gallery-layout.gallery-waterfall .scroller .container > .item {
75
124
  break-inside: avoid;
76
125
  margin-bottom: 1rem;
77
126
  }
127
+
128
+ /* sm: (≥640px) - columns-2, gap-6 */
129
+ @media (min-width: 640px) {
130
+ .gallery-layout.gallery-waterfall .scroller .container {
131
+ columns: 2; /* sm:columns-2 */
132
+ column-gap: 1.5rem; /* sm:gap-6 = 1.5rem */
133
+ }
134
+ }
135
+
136
+ /* lg: (≥1024px) - columns-2 (same as sm) */
137
+ @media (min-width: 1024px) {
138
+ .gallery-layout.gallery-waterfall .scroller .container {
139
+ columns: 2; /* lg:columns-2 */
140
+ }
141
+ }
142
+
143
+ /* xl: (≥1280px) - columns-3 */
144
+ @media (min-width: 1280px) {
145
+ .gallery-layout.gallery-waterfall .scroller .container {
146
+ columns: 3; /* xl:columns-3 */
147
+ }
148
+ }
@@ -11,31 +11,80 @@
11
11
  width: 100%;
12
12
  }
13
13
 
14
- /* Grid Layout - 3 columns */
14
+ /* Grid Layout - Matching Tailwind: grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-4 sm:gap-6 */
15
15
  .gallery-layout.gallery-grid .scroller .container {
16
16
  display: grid;
17
- grid-template-columns: repeat(3, 1fr);
18
- gap: 1rem;
17
+ grid-template-columns: repeat(1, 1fr); /* grid-cols-1 */
18
+ gap: 1rem; /* gap-4 = 1rem */
19
+ }
20
+
21
+ /* sm: (≥640px) - grid-cols-2, gap-6 */
22
+ @media (min-width: 640px) {
23
+ .gallery-layout.gallery-grid .scroller .container {
24
+ grid-template-columns: repeat(2, 1fr); /* sm:grid-cols-2 */
25
+ gap: 1.5rem; /* sm:gap-6 = 1.5rem */
26
+ }
27
+ }
28
+
29
+ /* lg: (≥1024px) - grid-cols-2 (same as sm) */
30
+ @media (min-width: 1024px) {
31
+ .gallery-layout.gallery-grid .scroller .container {
32
+ grid-template-columns: repeat(2, 1fr); /* lg:grid-cols-2 */
33
+ }
34
+ }
35
+
36
+ /* xl: (≥1280px) - grid-cols-3 */
37
+ @media (min-width: 1280px) {
38
+ .gallery-layout.gallery-grid .scroller .container {
39
+ grid-template-columns: repeat(3, 1fr); /* xl:grid-cols-3 */
40
+ }
19
41
  }
20
42
 
21
- /* Alternating Layout - 3-2-3-2 pattern */
43
+ /* Alternating Layout - Matching Tailwind: grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-6 gap-4 sm:gap-6 */
22
44
  .gallery-layout.gallery-alternating .scroller .container {
23
45
  display: grid;
24
- grid-template-columns: repeat(6, 1fr);
25
- gap: 1rem;
46
+ grid-template-columns: repeat(1, 1fr); /* grid-cols-1 */
47
+ gap: 1rem; /* gap-4 = 1rem */
48
+ }
49
+
50
+ /* Default: all items span 1 column */
51
+ .gallery-layout.gallery-alternating .scroller .container > .item {
52
+ grid-column: span 1;
26
53
  }
27
54
 
28
- /* Odd rows (1, 3, 5, ...): 3 items per row */
29
- .gallery-layout.gallery-alternating .scroller .container > .item:nth-child(5n+1),
30
- .gallery-layout.gallery-alternating .scroller .container > .item:nth-child(5n+2),
31
- .gallery-layout.gallery-alternating .scroller .container > .item:nth-child(5n+3) {
32
- grid-column: span 2;
55
+ /* sm: (≥640px) - grid-cols-2, gap-6 */
56
+ @media (min-width: 640px) {
57
+ .gallery-layout.gallery-alternating .scroller .container {
58
+ grid-template-columns: repeat(2, 1fr); /* sm:grid-cols-2 */
59
+ gap: 1.5rem; /* sm:gap-6 = 1.5rem */
60
+ }
33
61
  }
34
62
 
35
- /* Even rows (2, 4, 6, ...): 2 items per row */
36
- .gallery-layout.gallery-alternating .scroller .container > .item:nth-child(5n+4),
37
- .gallery-layout.gallery-alternating .scroller .container > .item:nth-child(5n+5) {
38
- grid-column: span 3;
63
+ /* lg: (≥1024px) - grid-cols-2 (same as sm) */
64
+ @media (min-width: 1024px) {
65
+ .gallery-layout.gallery-alternating .scroller .container {
66
+ grid-template-columns: repeat(2, 1fr); /* lg:grid-cols-2 */
67
+ }
68
+ }
69
+
70
+ /* xl: (≥1280px) - grid-cols-6 with 3-2-3-2 pattern */
71
+ @media (min-width: 1280px) {
72
+ .gallery-layout.gallery-alternating .scroller .container {
73
+ grid-template-columns: repeat(6, 1fr); /* xl:grid-cols-6 */
74
+ }
75
+
76
+ /* Odd rows (1, 3, 5, ...): 3 items per row */
77
+ .gallery-layout.gallery-alternating .scroller .container > .item:nth-child(5n+1),
78
+ .gallery-layout.gallery-alternating .scroller .container > .item:nth-child(5n+2),
79
+ .gallery-layout.gallery-alternating .scroller .container > .item:nth-child(5n+3) {
80
+ grid-column: span 2;
81
+ }
82
+
83
+ /* Even rows (2, 4, 6, ...): 2 items per row */
84
+ .gallery-layout.gallery-alternating .scroller .container > .item:nth-child(5n+4),
85
+ .gallery-layout.gallery-alternating .scroller .container > .item:nth-child(5n+5) {
86
+ grid-column: span 3;
87
+ }
39
88
  }
40
89
 
41
90
  /* Slider Layout - Horizontal scrolling */
@@ -65,13 +114,35 @@
65
114
  }
66
115
  }
67
116
 
68
- /* Waterfall Layout - Masonry columns */
117
+ /* Waterfall Layout - Matching Tailwind: columns-1 sm:columns-2 lg:columns-2 xl:columns-3 gap-4 sm:gap-6 */
69
118
  .gallery-layout.gallery-waterfall .scroller .container {
70
- columns: 3;
71
- column-gap: 1rem;
119
+ columns: 1; /* columns-1 */
120
+ column-gap: 1rem; /* gap-4 = 1rem */
72
121
  }
73
122
 
74
123
  .gallery-layout.gallery-waterfall .scroller .container > .item {
75
124
  break-inside: avoid;
76
125
  margin-bottom: 1rem;
77
126
  }
127
+
128
+ /* sm: (≥640px) - columns-2, gap-6 */
129
+ @media (min-width: 640px) {
130
+ .gallery-layout.gallery-waterfall .scroller .container {
131
+ columns: 2; /* sm:columns-2 */
132
+ column-gap: 1.5rem; /* sm:gap-6 = 1.5rem */
133
+ }
134
+ }
135
+
136
+ /* lg: (≥1024px) - columns-2 (same as sm) */
137
+ @media (min-width: 1024px) {
138
+ .gallery-layout.gallery-waterfall .scroller .container {
139
+ columns: 2; /* lg:columns-2 */
140
+ }
141
+ }
142
+
143
+ /* xl: (≥1280px) - columns-3 */
144
+ @media (min-width: 1280px) {
145
+ .gallery-layout.gallery-waterfall .scroller .container {
146
+ columns: 3; /* xl:columns-3 */
147
+ }
148
+ }
@@ -11,31 +11,80 @@
11
11
  width: 100%;
12
12
  }
13
13
 
14
- /* Grid Layout - 3 columns */
14
+ /* Grid Layout - Matching Tailwind: grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-4 sm:gap-6 */
15
15
  .gallery-layout.gallery-grid .scroller .container {
16
16
  display: grid;
17
- grid-template-columns: repeat(3, 1fr);
18
- gap: 1rem;
17
+ grid-template-columns: repeat(1, 1fr); /* grid-cols-1 */
18
+ gap: 1rem; /* gap-4 = 1rem */
19
+ }
20
+
21
+ /* sm: (≥640px) - grid-cols-2, gap-6 */
22
+ @media (min-width: 640px) {
23
+ .gallery-layout.gallery-grid .scroller .container {
24
+ grid-template-columns: repeat(2, 1fr); /* sm:grid-cols-2 */
25
+ gap: 1.5rem; /* sm:gap-6 = 1.5rem */
26
+ }
27
+ }
28
+
29
+ /* lg: (≥1024px) - grid-cols-2 (same as sm) */
30
+ @media (min-width: 1024px) {
31
+ .gallery-layout.gallery-grid .scroller .container {
32
+ grid-template-columns: repeat(2, 1fr); /* lg:grid-cols-2 */
33
+ }
34
+ }
35
+
36
+ /* xl: (≥1280px) - grid-cols-3 */
37
+ @media (min-width: 1280px) {
38
+ .gallery-layout.gallery-grid .scroller .container {
39
+ grid-template-columns: repeat(3, 1fr); /* xl:grid-cols-3 */
40
+ }
19
41
  }
20
42
 
21
- /* Alternating Layout - 3-2-3-2 pattern */
43
+ /* Alternating Layout - Matching Tailwind: grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-6 gap-4 sm:gap-6 */
22
44
  .gallery-layout.gallery-alternating .scroller .container {
23
45
  display: grid;
24
- grid-template-columns: repeat(6, 1fr);
25
- gap: 1rem;
46
+ grid-template-columns: repeat(1, 1fr); /* grid-cols-1 */
47
+ gap: 1rem; /* gap-4 = 1rem */
48
+ }
49
+
50
+ /* Default: all items span 1 column */
51
+ .gallery-layout.gallery-alternating .scroller .container > .item {
52
+ grid-column: span 1;
26
53
  }
27
54
 
28
- /* Odd rows (1, 3, 5, ...): 3 items per row */
29
- .gallery-layout.gallery-alternating .scroller .container > .item:nth-child(5n+1),
30
- .gallery-layout.gallery-alternating .scroller .container > .item:nth-child(5n+2),
31
- .gallery-layout.gallery-alternating .scroller .container > .item:nth-child(5n+3) {
32
- grid-column: span 2;
55
+ /* sm: (≥640px) - grid-cols-2, gap-6 */
56
+ @media (min-width: 640px) {
57
+ .gallery-layout.gallery-alternating .scroller .container {
58
+ grid-template-columns: repeat(2, 1fr); /* sm:grid-cols-2 */
59
+ gap: 1.5rem; /* sm:gap-6 = 1.5rem */
60
+ }
33
61
  }
34
62
 
35
- /* Even rows (2, 4, 6, ...): 2 items per row */
36
- .gallery-layout.gallery-alternating .scroller .container > .item:nth-child(5n+4),
37
- .gallery-layout.gallery-alternating .scroller .container > .item:nth-child(5n+5) {
38
- grid-column: span 3;
63
+ /* lg: (≥1024px) - grid-cols-2 (same as sm) */
64
+ @media (min-width: 1024px) {
65
+ .gallery-layout.gallery-alternating .scroller .container {
66
+ grid-template-columns: repeat(2, 1fr); /* lg:grid-cols-2 */
67
+ }
68
+ }
69
+
70
+ /* xl: (≥1280px) - grid-cols-6 with 3-2-3-2 pattern */
71
+ @media (min-width: 1280px) {
72
+ .gallery-layout.gallery-alternating .scroller .container {
73
+ grid-template-columns: repeat(6, 1fr); /* xl:grid-cols-6 */
74
+ }
75
+
76
+ /* Odd rows (1, 3, 5, ...): 3 items per row */
77
+ .gallery-layout.gallery-alternating .scroller .container > .item:nth-child(5n+1),
78
+ .gallery-layout.gallery-alternating .scroller .container > .item:nth-child(5n+2),
79
+ .gallery-layout.gallery-alternating .scroller .container > .item:nth-child(5n+3) {
80
+ grid-column: span 2;
81
+ }
82
+
83
+ /* Even rows (2, 4, 6, ...): 2 items per row */
84
+ .gallery-layout.gallery-alternating .scroller .container > .item:nth-child(5n+4),
85
+ .gallery-layout.gallery-alternating .scroller .container > .item:nth-child(5n+5) {
86
+ grid-column: span 3;
87
+ }
39
88
  }
40
89
 
41
90
  /* Slider Layout - Horizontal scrolling */
@@ -65,13 +114,35 @@
65
114
  }
66
115
  }
67
116
 
68
- /* Waterfall Layout - Masonry columns */
117
+ /* Waterfall Layout - Matching Tailwind: columns-1 sm:columns-2 lg:columns-2 xl:columns-3 gap-4 sm:gap-6 */
69
118
  .gallery-layout.gallery-waterfall .scroller .container {
70
- columns: 3;
71
- column-gap: 1rem;
119
+ columns: 1; /* columns-1 */
120
+ column-gap: 1rem; /* gap-4 = 1rem */
72
121
  }
73
122
 
74
123
  .gallery-layout.gallery-waterfall .scroller .container > .item {
75
124
  break-inside: avoid;
76
125
  margin-bottom: 1rem;
77
126
  }
127
+
128
+ /* sm: (≥640px) - columns-2, gap-6 */
129
+ @media (min-width: 640px) {
130
+ .gallery-layout.gallery-waterfall .scroller .container {
131
+ columns: 2; /* sm:columns-2 */
132
+ column-gap: 1.5rem; /* sm:gap-6 = 1.5rem */
133
+ }
134
+ }
135
+
136
+ /* lg: (≥1024px) - columns-2 (same as sm) */
137
+ @media (min-width: 1024px) {
138
+ .gallery-layout.gallery-waterfall .scroller .container {
139
+ columns: 2; /* lg:columns-2 */
140
+ }
141
+ }
142
+
143
+ /* xl: (≥1280px) - columns-3 */
144
+ @media (min-width: 1280px) {
145
+ .gallery-layout.gallery-waterfall .scroller .container {
146
+ columns: 3; /* xl:columns-3 */
147
+ }
148
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wix/fast-gallery-vibe",
3
- "version": "1.20.0",
3
+ "version": "1.21.0",
4
4
  "license": "UNLICENSED",
5
5
  "author": {
6
6
  "name": "gabrielab",
@@ -93,5 +93,5 @@
93
93
  "registry": "https://registry.npmjs.org/",
94
94
  "access": "public"
95
95
  },
96
- "falconPackageHash": "cf2be14668680d7c775c782499905ade90b3fe77911bdd3d08b8545f"
96
+ "falconPackageHash": "00c3c97c9e51e33f0013892592cc6d8dd00fd549093805cb0475e24f"
97
97
  }