@nascentdigital/funnel-ui 4.5.1 → 4.5.2

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 (2) hide show
  1. package/dist/styles/blocks/MediaLayout.css +23 -183
  2. package/package.json +2 -2
package/dist/styles/blocks/MediaLayout.css CHANGED
@@ -1,214 +1,54 @@
1
1
  @layer components {
2
2
 
3
3
  :root {
4
- --nd-medialayout-gap: theme('spacing.l8');
5
- --nd-medialayout-poster-gap: unset;
6
- --nd-medialayout-1col-gap: var(--nd-medialayout-gap);
7
- --nd-medialayout-2col-gap: var(--nd-medialayout-gap);
8
- --nd-medialayout-brick-gap: var(--nd-medialayout-gap);
9
- @media screen(md) {
10
- --nd-medialayout-gap: theme('spacing.l9');
11
- }
12
- @media screen(lg) {
13
- --nd-medialayout-gap: theme('spacing.l10');
14
- }
15
4
  }
16
5
 
17
6
  /* base */
18
7
  .nd-MediaLayout {
19
8
  }
20
9
 
10
+ /* visual aspect ratios */
11
+ .nd-MediaLayout .nd-ListPanel {
21
12
 
22
- /* poster */
23
- .nd-MediaLayout-layout-poster {
24
-
25
- .nd-MediaLayout-content {
26
- @apply flex flex-col gap-[var(--nd-medialayout-poster-gap)];
27
- }
28
- .nd-MediaLayout-itemWrap {
29
- @apply w-full aspect-cinema lg:aspect-cinemascope;
30
- }
31
- .nd-MediaLayout-item {
32
- @apply w-full object-cover;
33
- }
34
- }
35
-
36
- /* 1col */
37
- .nd-MediaLayout-layout-1col {
38
-
39
- .nd-MediaLayout-content {
40
- @apply container-wide-p flex flex-col gap-[var(--nd-medialayout-1col-gap)];
41
- }
42
- .nd-MediaLayout-itemWrap {
43
- @apply w-full;
44
- }
45
- .nd-MediaLayout-item {
46
- @apply w-full object-cover;
47
- }
48
- }
49
-
50
- /* 2col */
51
- ._nd-MediaLayout-layout-2col-mobile {
52
- .nd-MediaLayout-content {
53
- @apply container-wide-p grid grid-flow-row grid-cols-1 gap-[var(--nd-medialayout-2col-gap)];
54
- }
13
+ /* general styling across layouts */
55
14
  .nd-MediaLayout-itemWrap {
56
- @apply block max-w-full aspect-tv overflow-hidden;
15
+ @apply block w-full overflow-hidden;
57
16
  }
58
17
  .nd-MediaLayout-item {
59
- @apply w-full h-full object-cover object-center;
18
+ @apply size-full object-cover object-center;
60
19
  }
61
- }
62
- ._nd-MediaLayout-layout-2col-desktop {
63
- .nd-MediaLayout-content {
64
- @apply container-wide-p grid grid-cols-2 grid-flow-row gap-[var(--nd-medialayout-2col-gap)];
65
- }
66
- .nd-MediaLayout-itemWrap {
67
- @apply w-full col-span-1 aspect-tv overflow-hidden;
68
-
69
- /* make full width if a solo last child */
70
- &:nth-child(odd):last-child {
71
- @apply col-span-full aspect-cinema;
72
- }
73
- }
74
- .nd-MediaLayout-item {
75
- @apply w-full h-full object-cover object-center;
76
- }
77
- }
78
- .nd-MediaLayout-layout-2col {
79
- @apply max-md:_nd-MediaLayout-layout-2col-mobile md:_nd-MediaLayout-layout-2col-desktop;
80
- }
81
20
 
82
- /* brick */
83
- ._nd-MediaLayout-layout-brick-mobile {
84
-
85
- .nd-MediaLayout-content {
86
- @apply container-wide-p grid grid-flow-row grid-cols-1 gap-[var(--nd-medialayout-brick-gap)];
87
- }
88
- .nd-MediaLayout-itemWrap {
89
- @apply block max-w-full aspect-widescreen overflow-hidden;
90
- }
91
- .nd-MediaLayout-item {
92
- @apply w-full h-full object-cover object-center;
93
- }
94
- }
95
- ._nd-MediaLayout-layout-brick-desktop {
96
-
97
- /* base */
98
- .nd-MediaLayout-content {
99
- @apply container-wide-p grid grid-cols-2 gap-[var(--nd-medialayout-brick-gap)];
100
- }
101
- .nd-MediaLayout-itemWrap {
102
- @apply block max-w-full col-span-1 aspect-tv overflow-hidden;
103
-
104
- /* every 1, 4, 7, 10, 13 and so on images will be full width */
105
- &:nth-child(3n + 1) {
106
- @apply col-span-full aspect-cinema;
107
- }
108
- }
109
- .nd-MediaLayout-item {
110
- @apply w-full h-full object-cover object-center;
111
- }
112
-
113
- /* if the total number of images are 2, 5, 8, 11, 14 and so on, then make last 2 single */
114
- .nd-MediaLayout-content:has(.nd-MediaLayout-itemWrap:nth-child(3n+2):last-child) {
21
+ /* brick */
22
+ .nd-BrickLayout {
115
23
 
24
+ /* default aspect ratio */
116
25
  .nd-MediaLayout-itemWrap {
117
- &:nth-last-child(1), &:nth-last-child(2) {
118
- @apply col-span-1 aspect-tv;
119
- }
26
+ @apply aspect-widescreen @panel-md:aspect-tv;
120
27
  }
121
- }
122
- }
123
- .nd-MediaLayout-layout-brick {
124
- @apply max-md:_nd-MediaLayout-layout-brick-mobile md:_nd-MediaLayout-layout-brick-desktop;
125
- }
126
-
127
-
128
- /* brick */
129
- ._nd-MediaLayout-layout-brickAlt-desktop {
130
28
 
131
- /* base */
132
- .nd-MediaLayout-content {
133
- @apply container-wide-p grid grid-cols-2 gap-[var(--nd-medialayout-brick-gap)];
134
- }
135
- .nd-MediaLayout-itemWrap {
136
- @apply block max-w-full col-span-1 aspect-tv overflow-hidden;
29
+ /* brick (not flipped) */
30
+ &:not(.nd-BrickLayout-flipped) {
137
31
 
138
- /* every 3, 6, 9, 12, 15 and so on images will be full width */
139
- &:nth-child(3n) {
140
- @apply col-span-full aspect-cinema;
32
+ /* every 1, 4, 7, 10, 13 and so on images will be full width */
33
+ .nd-MediaLayout-itemWrap:nth-child(3n + 1) {
34
+ @apply @panel-md:aspect-cinema;
35
+ }
141
36
  }
142
- }
143
- .nd-MediaLayout-item {
144
- @apply w-full h-full object-cover object-center;
145
- }
146
37
 
147
- /* if the total number of images are 1, 4, 7, 10, 13, 16 and so on, then make last 2 single */
148
- .nd-MediaLayout-content:has(.nd-MediaLayout-itemWrap:nth-child(3n+2):last-child) {
38
+ /* brick (flipped) */
39
+ &.nd-BrickLayout-flipped {
149
40
 
150
- .nd-MediaLayout-itemWrap {
151
- &:nth-last-child(1), &:nth-last-child(2) {
152
- @apply col-span-1 aspect-tv;
41
+ /* every 3, 6, 9, 12, 15 and so on images will be full width */
42
+ .nd-MediaLayout-itemWrap:nth-child(3n) {
43
+ @apply @panel-md:aspect-cinema;
153
44
  }
154
45
  }
155
46
  }
156
47
 
157
- /* single image would be full width */
158
- .nd-MediaLayout-content:has(.nd-MediaLayout-itemWrap:first-child:last-child) {
159
-
160
- /* make it full width */
48
+ /* vertical stack */
49
+ .nd-StackLayout.nd-StackLayout-direction-vertical {
161
50
  .nd-MediaLayout-itemWrap {
162
- @apply col-span-full aspect-cinema;
163
- }
164
- }
165
- }
166
- .nd-MediaLayout-layout-brickAlt {
167
- @apply max-md:_nd-MediaLayout-layout-brick-mobile md:_nd-MediaLayout-layout-brickAlt-desktop;
168
- }
169
- }
170
-
171
-
172
- @layer components {
173
-
174
- /* desktop overrides */
175
- @media screen(md) {
176
- .nd-MediaGrid-root {
177
-
178
- /* brick layout flipped */
179
- &.nd-MediaGrid-brickFlipped {
180
- .nd-MediaGrid-content {
181
- @apply grid-cols-2;
182
-
183
- .nd-MediaGrid-visual {
184
- @apply col-span-1;
185
-
186
- /* every 3, 6, 9, 12, 15 and so on images will be full width */
187
- &:nth-child(3n) {
188
- @apply col-span-full aspect-widescreen;
189
- }
190
- }
191
-
192
- /* if the total number of images are 1, 4, 7, 10, 13, 16 and so on */
193
- &:has(.nd-MediaGrid-visual:nth-child(3n+1):last-child) {
194
-
195
- /* make the last two images take 50-50 of the screen width */
196
- .nd-MediaGrid-visual {
197
- &:nth-last-child(2) {
198
- @apply col-span-1 aspect-tv;
199
- }
200
- }
201
- }
202
-
203
- /* if there is only one image */
204
- &:has(.nd-MediaGrid-visual:first-child:last-child) {
205
-
206
- /* make it full width */
207
- .nd-MediaGrid-visual {
208
- @apply col-span-full aspect-widescreen;
209
- }
210
- }
211
- }
51
+ @apply aspect-cinema @panel-lg:aspect-cinemascope;
212
52
  }
213
53
  }
214
54
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@nascentdigital/funnel-ui",
3
3
  "description": "UI components for funnel",
4
- "version": "4.5.1",
4
+ "version": "4.5.2",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/",
7
7
  "access": "restricted"
@@ -70,5 +70,5 @@
70
70
  "react-dom": "^19",
71
71
  "ts-jest": "^29.3.2"
72
72
  },
73
- "gitHead": "3348c90ff56f3dd931ab564f8a6ad13d454a4ca1"
73
+ "gitHead": "5b63f9cd8843cc111b4458c71aa031a974455241"
74
74
  }