Skip to content

Commit

Permalink
[Product Cards] Add image masks (#2302)
Browse files Browse the repository at this point in the history 
* Initial commit

* Add more transforms, improve blob shape.

* Add lots of blob shapes.

* Fix filtering.

* Remove image filters.

* Remove filter code.

* Fix circle shape.

* Animate circle hovers.

* Add additional hovers.

* Animate all the blobs.

* Fix standalone image with text blob.

* Stop applying scale hover for cards when blobby.

* Cleanup, add arch style.

* Animate the arch.

* Move svg renders out of theme.liquid.

* Use all masks in all places. Tidy up.

* Ensure svg is hidden from view.

* Fix name of circle shape.

* Add warning about shadow and border.

* Fine-tune the blob shapes.

* Tidy up the shapes used.

* Respect prefers-reduced-motion

* Fix typo.

* Match circle animation to the image zoom.

* Alphabetize options.

* Remove border clipping for image banner shapes.

* Round blob coordinates down to three decimal places..

* Remove Image with Text hovers.

* Rewrite the helper text to be more positive.

Co-authored-by: melissaperreault <melissa.perreault@shopify.com>

* Add settings for Search & Product Collection

* Add settings for related products.

* Remove label about border and shadow.

* Remove unused settings schema entry.

* Blobs > Blob

* Remove borders from shapes.

* Remove unnecessary specificity from card shape rules.

* Use consistent card hover selectors.

* Remove unnecessary rules.

* Use a shared class approach for applying shapes.

* Remove unnecessary rule.

These styles aren't currently applied to the collage section at all.

* Remove extra space.

* Use a generic image_shape schema to avoid duplication.

* Reinstate the grow-on-hover for blob product cards.

* Fix background color for text-only cards.

* Use "Round" instead of "Oval" and "Circle"

* Fix Image with Text labels.

* Try fixing the circle clipping.

* Try fixing interactions with global container settings.

* Refector last commit, fix tiny bugs.

* Cleanup

* Remove image with text effects from this PR.

* Move mask-blobs into a CSS file.

* Fix card--shape class conditional.

* Fix the image_shape description.

Co-authored-by: Lucas Lacerda <37168033+LucasLacerdaUX@users.noreply.github.com>

* Use a unique id naming convention for the Arch shape svg.

* Update 20 translation files

* Get shape shadows working.

* Add warning about borders not working.

* Update 17 translation files

* Update 3 translation files

---------

Co-authored-by: melissaperreault <melissa.perreault@shopify.com>
Co-authored-by: Lucas Lacerda <37168033+LucasLacerdaUX@users.noreply.github.com>
Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com>
  • Loading branch information
@kjellr @melissaperreault
@LucasLacerdaUX @translation-platform
4 people authored Mar 24, 2023
1 parent 59f461f commit b19972d
Show file tree
Hide file tree
Showing 30 changed files with 925 additions and 1 deletion.
40 changes: 40 additions & 0 deletions assets/base.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3135,6 +3135,46 @@ details-disclosure > details {
margin: -0.5rem 0 -0.5rem 0;
}

/* Image mask global styles */

.shape--mask {
display: block;
height: 0;
width: 0;
}

.shape--arch {
clip-path: url("#Shape-Arch");
}

.shape--blob {
clip-path: polygon(var(--shape--blob-1));
}

.shape--chevronleft {
clip-path: polygon(100% 0%, 85% 50%, 100% 100%, 15% 100%, 0% 50%, 15% 0%);
}

.shape--chevronright {
clip-path: polygon(85% 0%, 100% 50%, 85% 100%, 0% 100%, 15% 50%, 0% 0%);
}

.shape--circle {
clip-path: circle(closest-side);
}

.shape--diamond {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.shape--parallelogram {
clip-path: polygon(15% 0, 100% 0%, 85% 100%, 0% 100%);
}

.shape--round {
clip-path: ellipse(45% 45% at 50% 50%);
}

/* Ambient animation */

@media (prefers-reduced-motion: no-preference) {
Expand Down
84 changes: 84 additions & 0 deletions assets/component-card.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -362,3 +362,87 @@
.card-article-info {
margin-top: 1rem;
}

/* Card Shapes */

.card--shape .card__content {
padding-top: 0;
}

.card--shape.card--standard:not(.card--text) .card__inner {
border: 0; /* Border is not currently compatible with image shapes for standard cards. */
background-color: transparent;
filter: drop-shadow(var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius) rgba(var(--color-shadow),var(--shadow-opacity)));
}

.card--shape.card--standard:not(.card--text) .card__inner:after {
display: none;
}

.grid__item:nth-child(2n) .shape--blob {
clip-path: polygon(var(--shape--blob-2));
}

.grid__item:nth-child(3n) .shape--blob {
clip-path: polygon(var(--shape--blob-3));
}

.grid__item:nth-child(4n) .shape--blob {
clip-path: polygon(var(--shape--blob-4));
}

.grid__item:nth-child(5n) .shape--blob {
clip-path: polygon(var(--shape--blob-5));
}

.grid__item:nth-child(7n) .shape--blob {
clip-path: polygon(var(--shape--blob-6));
}

.grid__item:nth-child(8n) .shape--blob {
clip-path: polygon(var(--shape--blob-1));
}

/* Card Shape Hover Rules */

@media (prefers-reduced-motion: no-preference) {
.product-card-wrapper .shape--round {
transition: clip-path var(--duration-long) ease;
}

.product-card-wrapper:hover .shape--round {
clip-path: ellipse(47% 47% at 50% 50%);
}

.product-card-wrapper .shape--blob {
transition: clip-path var(--duration-long) ease-in-out;
}

.product-card-wrapper:hover .shape--blob {
clip-path: polygon(var(--shape--blob-5));
}

.grid__item:nth-child(2n) .product-card-wrapper:hover .shape--blob {
clip-path: polygon(var(--shape--blob-6));
}

.grid__item:nth-child(3n) .product-card-wrapper:hover .shape--blob {
clip-path: polygon(var(--shape--blob-1));
}

.grid__item:nth-child(4n) .product-card-wrapper:hover .shape--blob {
clip-path: polygon(var(--shape--blob-2));
}

.grid__item:nth-child(5n) .product-card-wrapper:hover .shape--blob {
clip-path: polygon(var(--shape--blob-3));
}

.grid__item:nth-child(7n) .product-card-wrapper:hover .shape--blob {
clip-path: polygon(var(--shape--blob-4));
}

.grid__item:nth-child(8n) .product-card-wrapper:hover .shape--blob {
clip-path: polygon(var(--shape--blob-5));
}
}
8 changes: 8 additions & 0 deletions assets/mask-blobs.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

28 changes: 28 additions & 0 deletions locales/cs.schema.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -434,6 +434,34 @@
"label": "Extra velká"
}
},
"image_shape": {
"options__1": {
"label": "Výchozí"
},
"options__2": {
"label": "Oblouk"
},
"options__3": {
"label": "Blob"
},
"options__4": {
"label": "Dvojitá šipka vlevo"
},
"options__5": {
"label": "Dvojitá šipka vpravo"
},
"options__6": {
"label": "Kosočtverec"
},
"options__7": {
"label": "Rovnoběžník"
},
"options__8": {
"label": "Kruh"
},
"label": "Tvar obrázku",
"info": "Karty ve standardním stylu nemají ohraničení v případě, že je tvar obrázku aktivní."
},
"animation": {
"content": "Animace",
"image_behavior": {
Expand Down
28 changes: 28 additions & 0 deletions locales/da.schema.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -434,6 +434,34 @@
"label": "Ekstra stor"
}
},
"image_shape": {
"options__1": {
"label": "Standard"
},
"options__2": {
"label": "Bue"
},
"options__3": {
"label": "Blob"
},
"options__4": {
"label": "Venstre chevron"
},
"options__5": {
"label": "Højre chevron"
},
"options__6": {
"label": "Diamant"
},
"options__7": {
"label": "Parallelogram"
},
"options__8": {
"label": "Rund"
},
"label": "Billedform",
"info": "Kort i standardstil har ingen kanter, når en billedform er aktiv."
},
"animation": {
"content": "Animationer",
"image_behavior": {
Expand Down
28 changes: 28 additions & 0 deletions locales/de.schema.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -434,6 +434,34 @@
"label": "Extra groß"
}
},
"image_shape": {
"options__1": {
"label": "Standard"
},
"options__2": {
"label": "Bogen"
},
"options__3": {
"label": "Klecks"
},
"options__4": {
"label": "Chevron nach links"
},
"options__5": {
"label": "Chevron nach rechts"
},
"options__6": {
"label": "Diamant"
},
"options__7": {
"label": "Parallelogramm"
},
"options__8": {
"label": "Rund"
},
"label": "Bildform",
"info": "Karten mit Standarddesign haben keinen Rahmen, wenn eine Bildform aktiv ist."
},
"animation": {
"content": "Animationen",
"image_behavior": {
Expand Down
28 changes: 28 additions & 0 deletions locales/en.default.schema.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -445,6 +445,34 @@
"options__4": {
"label": "Extra large"
}
},
"image_shape": {
"options__1": {
"label": "Default"
},
"options__2": {
"label": "Arch"
},
"options__3": {
"label": "Blob"
},
"options__4": {
"label": "Chevron left"
},
"options__5": {
"label": "Chevron right"
},
"options__6": {
"label": "Diamond"
},
"options__7": {
"label": "Parallelogram"
},
"options__8": {
"label": "Round"
},
"label": "Image shape",
"info": "Standard-styled cards have no borders when an image shape is active."
}
},
"announcement-bar": {
Expand Down
28 changes: 28 additions & 0 deletions locales/es.schema.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -434,6 +434,34 @@
"label": "Extra grande"
}
},
"image_shape": {
"options__1": {
"label": "Predeterminado"
},
"options__2": {
"label": "Arco"
},
"options__3": {
"label": "Gota"
},
"options__4": {
"label": "Comillas angulares izquierda"
},
"options__5": {
"label": "Comillas angulares derecha"
},
"options__6": {
"label": "Diamante"
},
"options__7": {
"label": "Paralelogramo"
},
"options__8": {
"label": "Redonda"
},
"label": "Forma de la imagen",
"info": "Las tarjetas de estilo estándar no tienen bordes cuando la forma de una imagen está activa."
},
"animation": {
"content": "Animaciones",
"image_behavior": {
Expand Down
Loading

0 comments on commit b19972d

Please sign in to comment.