Product card spacing and price polish (Shopify#407)

* Adjust product card spacing and price styles * Fix unit price/sale badge spacing * Revert flex gap approach
tairli · Aug 18, 2021 · 002b6b0 · 002b6b0
1 parent 6fa46b7
commit 002b6b0
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 15 deletions.
diff --git a/assets/component-card.css b/assets/component-card.css
@@ -5,7 +5,13 @@
 }
 
 .card + .card-information {
-  margin-top: 1.2rem;
+  margin-top: 1.3rem;
+}
+
+@media screen and (min-width: 750px) {
+  .card + .card-information {
+    margin-top: 1.7rem;
+  }
 }
 
 .card.card--soft {
@@ -175,7 +181,7 @@
 }
 
 .card-information__wrapper > *:not(.visually-hidden:first-child) + * {
-  margin-top: 1.1rem;
+  margin-top: 0.7rem;
 }
 
 .card-information__wrapper .caption {

diff --git a/assets/component-price.css b/assets/component-price.css
@@ -83,6 +83,7 @@
 .price--on-sale .price-item--regular {
   text-decoration: line-through;
   color: rgba(var(--color-foreground), 0.75);
+  font-size: 1.3rem;
 }
 
 .unit-price {

diff --git a/assets/customer.css b/assets/customer.css
@@ -473,15 +473,6 @@
   }
 }
 
-.order tbody td:nth-of-type(3) dd:nth-of-type(2) {
-  font-size: 1.1rem;
-  letter-spacing: 0.07rem;
-  line-height: 1.2;
-  margin-top: 0.2rem;
-  text-transform: uppercase;
-  color: var(--color-foreground-70);
-}
-
 .order tfoot tr:last-of-type td,
 .order tfoot tr:last-of-type th {
   font-size: 2.2rem;
@@ -617,6 +608,19 @@
   color: rgba(var(--color-foreground), 0.7);
 }
 
+.order .unit-price {
+  font-size: 1.1rem;
+  letter-spacing: 0.07rem;
+  line-height: 1.2;
+  margin-top: 0.2rem;
+  text-transform: uppercase;
+  color: rgba(var(--color-foreground), 0.7);
+}
+
+.order .regular-price {
+  font-size: 1.3rem;
+}
+
 /* Addresses */
 .addresses li > button {
   margin-left: 0.5rem;

diff --git a/assets/section-main-product.css b/assets/section-main-product.css
@@ -263,6 +263,14 @@ a.product__text {
   align-items: flex-start;
 }
 
+.product .price--on-sale.price--unit-price {
+  margin-bottom: -0.5rem;
+}
+
+.product .price--on-sale.price--unit-price dl {
+  margin-bottom: 0.5rem;
+}
+
 .product .price--sold-out .price__badge-sold-out {
   background: transparent;
   color: rgb(var(--color-background));
@@ -275,6 +283,10 @@ a.product__text {
 }
 
 @media screen and (min-width: 750px) {
+  .product__info-container .price--on-sale .price-item--regular {
+    font-size: 1.6rem;
+  }
+
   .product__info-container > *:first-child {
     margin-top: 0;
   }

diff --git a/snippets/price.liquid b/snippets/price.liquid
@@ -34,7 +34,8 @@
   {%- if price_class %} {{ price_class }}{% endif -%}
   {%- if available == false %} price--sold-out {% endif -%}
   {%- if compare_at_price > price %} price--on-sale {% endif -%}
-  {%- if product.price_varies == false and product.compare_at_price_varies %} price--no-compare{% endif -%}">
+  {%- if product.price_varies == false and product.compare_at_price_varies %} price--no-compare {% endif -%}
+  {%- if product.selected_or_first_available_variant.unit_price_measurement != nil %} price--unit-price{% endif -%}">
   <dl>
     {%- comment -%}
       Explanation of description list:

diff --git a/templates/customers/order.liquid b/templates/customers/order.liquid
@@ -129,7 +129,7 @@
                       <dt>
                         <span class="visually-hidden">{{ 'products.product.price.regular_price' | t }}</span>
                       </dt>
-                      <dd>
+                      <dd class="regular-price">
                         <s>{{ line_item.original_price | money }}</s>
                       </dd>
                       <dt>
@@ -150,7 +150,7 @@
                       <dt>
                         <span class="visually-hidden">{{ 'products.product.price.unit_price' | t }}</span>
                       </dt>
-                      <dd>
+                      <dd class="unit-price">
                         <span>
                           {%- capture unit_price_separator -%}
                             <span aria-hidden="true">/</span><span class="visually-hidden">{{ 'accessibility.unit_price_separator' | t }}&nbsp;</span>
@@ -187,7 +187,7 @@
                     <dt>
                       <span class="visually-hidden">{{ 'products.product.price.regular_price' | t }}</span>
                     </dt>
-                    <dd>
+                    <dd class="regular-price">
                       <s>{{ line_item.original_line_price | money }}</s>
                     </dd>
                     <dt>