barua-ui 0.8.0 → 0.8.1
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/css/components/marketing.css +15 -0
- package/package.json +1 -1
|
@@ -213,6 +213,21 @@
|
|
|
213
213
|
}
|
|
214
214
|
.b-figure--bleed { margin-inline: calc(var(--b-space-6) * -1); }
|
|
215
215
|
.b-figure--bleed .b-figure__frame { border-radius: 0; }
|
|
216
|
+
/* A picture that dissolves into the page instead of ending.
|
|
217
|
+
|
|
218
|
+
The product shot under a hero is not a photograph with a bottom edge; it
|
|
219
|
+
is a window into the thing, and a hard edge with a shadow under it asks
|
|
220
|
+
the reader to look at the frame rather than through it. The mask fades the
|
|
221
|
+
last stretch to nothing, so the screen appears to continue past the fold.
|
|
222
|
+
--b-fade-from is where the fade begins. The shadow and the bottom corners
|
|
223
|
+
go with it: both would draw the cut the mask is there to hide. */
|
|
224
|
+
.b-figure--fade .b-figure__frame {
|
|
225
|
+
-webkit-mask-image: linear-gradient(to bottom, #000 var(--b-fade-from, 55%), transparent 100%);
|
|
226
|
+
mask-image: linear-gradient(to bottom, #000 var(--b-fade-from, 55%), transparent 100%);
|
|
227
|
+
border-end-start-radius: 0;
|
|
228
|
+
border-end-end-radius: 0;
|
|
229
|
+
box-shadow: none;
|
|
230
|
+
}
|
|
216
231
|
|
|
217
232
|
/* ---- Alternating rows: picture beside prose ------------------------------ */
|
|
218
233
|
.b-feature-row {
|