chore: style amends

agilepixel · Sep 11, 2024 · d805522 · d805522
1 parent 954fb08
commit d805522
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 49 deletions.
diff --git a/README.md b/README.md
@@ -1,3 +1,5 @@
+shopify theme dev --store=83a3e6-72.myshopify.com
+
 Brought to you and maintained by [Trellis Commerce](https://trellis.co/) - A full-service eCommerce agency based in Boston, MA
 
 Latest merged code from [Dawn v14.0.0](https://github.com/Shopify/dawn/releases/tag/v14.0.0)

diff --git a/assets/base.css b/assets/base.css
@@ -3615,6 +3615,34 @@ main {
     font-size: 18px;
   }
 }
+
+.carter-checkout {
+  display: grid;
+  gap: 1rem;
+}
+@media screen and (min-width: 750px) {
+  .carter-checkout {
+    grid-template-columns: repeat(12, 1fr);
+  }
+
+  .carter-checkout variant-selects {
+    grid-column: span 12;
+  }
+
+  .product-form__input,
+  .cart-col-4 {
+    grid-column: span 4;
+  }
+}
+.carter-checkout variant-selects .select select {
+  border-radius: 4rem;
+  border: 1px solid rgb(var(--color-foreground));
+  padding: 10px;
+  width: 100%;
+  background: #fff;
+  height: auto;
+}
+
 .carter-checkout div:has(> .product-form) {
   width: fit-content;
   flex-shrink: 0;
@@ -3623,10 +3651,10 @@ main {
 .carter-checkout .shopify-payment-button__button {
   font-size: 1rem;
   line-height: 1;
-  padding: 1.065rem 2rem;
+  /*   padding: 1.065rem 2rem; */
   height: auto;
   min-height: initial;
-  padding-left: 3.2rem;
+  /*   padding-left: 3.2rem; */
 }
 
 .carter-checkout .shopify-payment-button__button::before {
@@ -3651,12 +3679,3 @@ main {
 .carter-checkout .shopify-payment-button__more-options {
   display: none;
 }
-
-.carter-checkout .product-form__input {
-  max-width: 65%;
-}
-@media screen and (min-width: 750px) {
-  .carter-checkout .product-form__input {
-    max-width: initial;
-  }
-}
diff --git a/sections/main-product.liquid b/sections/main-product.liquid
@@ -119,13 +119,18 @@
             {% endcase %}
           {% endfor %}
 
-          <div class='twcss-flex twcss-gap-2 carter-checkout lg:twcss-flex-nowrap twcss-flex-wrap twcss-items-center twcss-max-w-[370px]'>
+          <div class='carter-checkout twcss-max-w-[370px]'>
             {%- for block in section.blocks -%}
               {%- case block.type -%}
                 {%- when '@app' -%}
                   {% render block %}
                 {%- when 'price' -%}
-                  <div id='price-{{ section.id }}' role='status' {{ block.shopify_attributes }}>
+                  <div
+                    class='cart-col-4'
+                    id='price-{{ section.id }}'
+                    role='status'
+                    {{ block.shopify_attributes }}
+                  >
                     {%- render 'price',
                       product: product,
                       use_variant: true,
@@ -138,15 +143,15 @@
                       <span>{{ 'products.product.volume_pricing.note' | t }}</span>
                     </div>
                   {%- endif -%}
-                  <div class='product__tax caption rte'>
+                  <div class='hidden product__tax caption rte'>
                     {%- if cart.taxes_included -%}
                       {{ 'products.product.include_taxes' | t }}
                     {%- endif -%}
                     {%- if shop.shipping_policy.body != blank -%}
                       {{ 'products.product.shipping_policy_html' | t: link: shop.shipping_policy.url }}
                     {%- endif -%}
                   </div>
-                  <div {{ block.shopify_attributes }}>
+                  <div {{ block.shopify_attributes }} class='hidden'>
                     {%- assign product_form_installment_id = 'product-form-installment-' | append: section.id -%}
                     {%- form 'product', product, id: product_form_installment_id, class: 'installment caption-large' -%}
                       <input type='hidden' name='id' value='{{ product.selected_or_first_available_variant.id }}'>

diff --git a/snippets/buy-buttons.liquid b/snippets/buy-buttons.liquid
@@ -10,7 +10,7 @@
   Usage:
   {% render 'buy-buttons', block: block, product: product, product_form_id: product_form_id, section_id: section.id, show_pickup_availability: true %}
 {% endcomment %}
-<div {{ block.shopify_attributes }}>
+<div {{ block.shopify_attributes }} class='buy-now cart-col-4'>
   {%- if product != blank -%}
     {%- liquid
       assign gift_card_recipient_feature_active = false
@@ -25,23 +25,23 @@
     -%}
 
     <product-form
-      class="product-form"
-      data-hide-errors="{{ gift_card_recipient_feature_active }}"
-      data-section-id="{{ section.id }}"
+      class='product-form'
+      data-hide-errors='{{ gift_card_recipient_feature_active }}'
+      data-section-id='{{ section.id }}'
     >
-      <div class="product-form__error-message-wrapper" role="alert" hidden>
+      <div class='product-form__error-message-wrapper' role='alert' hidden>
         <svg
-          aria-hidden="true"
-          focusable="false"
-          class="icon icon-error"
-          viewBox="0 0 13 13"
+          aria-hidden='true'
+          focusable='false'
+          class='icon icon-error'
+          viewBox='0 0 13 13'
         >
           <circle cx="6.5" cy="6.50049" r="5.5" stroke="white" stroke-width="2"/>
           <circle cx="6.5" cy="6.5" r="5.5" fill="#EB001B" stroke="#EB001B" stroke-width="0.7"/>
           <path d="M5.87413 3.52832L5.97439 7.57216H7.02713L7.12739 3.52832H5.87413ZM6.50076 9.66091C6.88091 9.66091 7.18169 9.37267 7.18169 9.00504C7.18169 8.63742 6.88091 8.34917 6.50076 8.34917C6.12061 8.34917 5.81982 8.63742 5.81982 9.00504C5.81982 9.37267 6.12061 9.66091 6.50076 9.66091Z" fill="white"/>
           <path d="M5.87413 3.17832H5.51535L5.52424 3.537L5.6245 7.58083L5.63296 7.92216H5.97439H7.02713H7.36856L7.37702 7.58083L7.47728 3.537L7.48617 3.17832H7.12739H5.87413ZM6.50076 10.0109C7.06121 10.0109 7.5317 9.57872 7.5317 9.00504C7.5317 8.43137 7.06121 7.99918 6.50076 7.99918C5.94031 7.99918 5.46982 8.43137 5.46982 9.00504C5.46982 9.57872 5.94031 10.0109 6.50076 10.0109Z" fill="white" stroke="#EB001B" stroke-width="0.7">
         </svg>
-        <span class="product-form__error-message"></span>
+        <span class='product-form__error-message'></span>
       </div>
 
       {%- form 'product',
@@ -52,20 +52,20 @@
         data-type: 'add-to-cart-form'
       -%}
         <input
-          type="hidden"
-          name="id"
-          value="{{ product.selected_or_first_available_variant.id }}"
+          type='hidden'
+          name='id'
+          value='{{ product.selected_or_first_available_variant.id }}'
           {% if product.selected_or_first_available_variant.available == false or quantity_rule_soldout %}
             disabled
           {% endif %}
-          class="product-variant-id"
+          class='product-variant-id'
         >
 
         {%- if gift_card_recipient_feature_active -%}
           {%- render 'gift-card-recipient-form', product: product, form: form, section: section -%}
         {%- endif -%}
 
-        <div class="product-form__buttons">
+        <div class='product-form__buttons'>
           {%- liquid
             assign check_against_inventory = true
             if product.selected_or_first_available_variant.inventory_management != 'shopify' or product.selected_or_first_available_variant.inventory_policy == 'continue'
@@ -76,10 +76,10 @@
             endif
           -%}
           <button
-            id="ProductSubmitButton-{{ section_id }}"
-            type="submit"
-            name="add"
-            class="product-form__submit button button--full-width {% if show_dynamic_checkout %}button--secondary{% else %}button--primary{% endif %}"
+            id='ProductSubmitButton-{{ section_id }}'
+            type='submit'
+            name='add'
+            class='product-form__submit button button--full-width {% if show_dynamic_checkout %}button--secondary{% else %}button--primary{% endif %}'
             {% if product.selected_or_first_available_variant.available == false or quantity_rule_soldout %}
               disabled
             {% endif %}
@@ -100,12 +100,12 @@
       {%- endform -%}
     </product-form>
   {%- else -%}
-    <div class="product-form">
-      <div class="product-form__buttons form">
+    <div class='product-form'>
+      <div class='product-form__buttons form'>
         <button
-          type="submit"
-          name="add"
-          class="product-form__submit button button--full-width button--primary"
+          type='submit'
+          name='add'
+          class='product-form__submit button button--full-width button--primary'
           disabled
         >
           {{ 'products.product.sold_out' | t }}
@@ -122,28 +122,28 @@
     -%}
 
     <pickup-availability
-      class="product__pickup-availabilities quick-add-hidden"
+      class='product__pickup-availabilities quick-add-hidden'
       {% if product.selected_or_first_available_variant.available and pick_up_availabilities.size > 0 %}
         available
       {% endif %}
-      data-root-url="{{ routes.root_url }}"
-      data-variant-id="{{ product.selected_or_first_available_variant.id }}"
-      data-has-only-default-variant="{{ product.has_only_default_variant }}"
-      data-product-page-color-scheme="gradient color-{{ section.settings.color_scheme }}"
+      data-root-url='{{ routes.root_url }}'
+      data-variant-id='{{ product.selected_or_first_available_variant.id }}'
+      data-has-only-default-variant='{{ product.has_only_default_variant }}'
+      data-product-page-color-scheme='gradient color-{{ section.settings.color_scheme }}'
     >
       <template>
-        <pickup-availability-preview class="pickup-availability-preview">
+        <pickup-availability-preview class='pickup-availability-preview'>
           {% render 'icon-unavailable' %}
-          <div class="pickup-availability-info">
-            <p class="caption-large">{{ 'products.product.pickup_availability.unavailable' | t }}</p>
-            <button class="pickup-availability-button link link--text underlined-link">
+          <div class='pickup-availability-info'>
+            <p class='caption-large'>{{ 'products.product.pickup_availability.unavailable' | t }}</p>
+            <button class='pickup-availability-button link link--text underlined-link'>
               {{ 'products.product.pickup_availability.refresh' | t }}
             </button>
           </div>
         </pickup-availability-preview>
       </template>
     </pickup-availability>
 
-    <script src="{{ 'pickup-availability.js' | asset_url }}" defer="defer"></script>
+    <script src='{{ 'pickup-availability.js' | asset_url }}' defer='defer'></script>
   {%- endif -%}
 </div>