Global styling: Inputs styling not applied consistently (#1097)

Shopify · Jan 14, 2022 · 9e56350 · 9e56350
1 parent ee22e30
commit 9e56350
Show file tree

Hide file tree

Showing 14 changed files with 315 additions and 59 deletions.
diff --git a/assets/base.css b/assets/base.css
diff --git a/assets/component-cart-items.css b/assets/component-cart-items.css
@@ -112,7 +112,7 @@
 }
 
 .cart-item cart-remove-button {
-  display: inline-block;
+  display: flex;
   margin-left: 1rem;
 }
 

diff --git a/assets/component-cart.css b/assets/component-cart.css
@@ -86,22 +86,37 @@ cart-items {
 }
 
 .cart__note {
-  display: block;
+  height: fit-content;
 }
 
 .cart__note label {
   display: flex;
   align-items: flex-end;
+  position: absolute;
   line-height: 1;
   height: 1.8rem;
-  margin-bottom: 2rem;
+  top: -3rem;
   color: rgba(var(--color-foreground), 0.75);
 }
 
 .cart__note .field__input {
+  height: 100%;
+  position: relative;
+  border-radius: var(--inputs-radius);
   padding: 1rem;
 }
 
+.cart__note .text-area {
+  resize: vertical;
+}
+
+.cart__note:after, .cart__note:hover.cart__note:after,
+.cart__note:before, .cart__note:hover.cart__note:before,
+.cart__note .field__input:focus,
+.cart__note .field__input {
+  border-bottom-right-radius: 0;
+}
+
 @media screen and (min-width: 750px) {
   .cart__items {
     grid-column-start: 1;

diff --git a/assets/component-facets.css b/assets/component-facets.css
@@ -76,6 +76,21 @@
   width: auto;
 }
 
+.facet-filters__field .select:after,
+.facet-filters__field .select:before,
+.mobile-facets__sort .select:after, 
+.mobile-facets__sort .select:before {
+  content: none;
+}
+
+.facet-filters__field .select__select,
+.mobile-facets__sort .select__select {
+  border-radius: 0;
+  min-width: auto;
+  min-height: auto;
+  transition: none;
+}
+
 .facet-filters button {
   margin-left: 2.5rem;
 }

diff --git a/assets/component-newsletter.css b/assets/component-newsletter.css
@@ -23,6 +23,10 @@
   padding-right: 5rem;
 }
 
+.newsletter-form__field-wrapper .field {
+  z-index: 0;
+}
+
 .newsletter-form__message {
   justify-content: center;
   margin-bottom: 0;
@@ -41,6 +45,25 @@
 .newsletter-form__button {
   width: 4.4rem;
   margin: 0;
+  right: var(--inputs-border-width);
+  top: 0;
+  height: 100%;
+  z-index: 2;
+}
+
+.newsletter-form__button:focus-visible {
+  box-shadow: 0 0 0 .3rem rgb(var(--color-background)),0 0 0 .4rem rgba(var(--color-foreground));
+  background-color: rgb(var(--color-background));
+}
+
+.newsletter-form__button:focus {
+  box-shadow: 0 0 0 .3rem rgb(var(--color-background)),0 0 0 .4rem rgba(var(--color-foreground));
+  background-color: rgb(var(--color-background));
+}
+
+.newsletter-form__button:not(:focus-visible):not(.focused) {
+  box-shadow: inherit;
+  background-color: inherit;
 }
 
 .newsletter-form__button .icon {

diff --git a/assets/component-search.css b/assets/component-search.css
@@ -2,6 +2,26 @@
   padding-right: 5rem;
 }
 
+.search__button {
+  right: var(--inputs-border-width);
+  top: var(--inputs-border-width);
+}
+
+.search__button:focus-visible {
+  background-color: rgb(var(--color-background));
+  z-index: 2;
+}
+
+.search__button:focus {
+  background-color: rgb(var(--color-background));
+  z-index: 2;
+}
+
+.search__button:not(:focus-visible):not(.focused){
+  box-shadow: inherit;
+  background-color: inherit;
+}
+
 .search__button .icon {
   height: 1.8rem;
   width: 1.8rem;

diff --git a/assets/customer.css b/assets/customer.css
@@ -727,7 +727,7 @@ li[data-address] > h2 {
 
 @media only screen and (min-width: 750px) {
   .addresses form > div:nth-of-type(1) {
-    padding-right: 2rem;
+    margin-right: 2rem;
   }
 
   .addresses form > div:nth-of-type(2) {
@@ -736,8 +736,8 @@ li[data-address] > h2 {
 
   .addresses form > div:nth-of-type(1),
   .addresses form > div:nth-of-type(2) {
-    flex-basis: 50%;
     box-sizing: border-box;
+    flex-basis: calc(50% - 1rem);
   }
 }
 

diff --git a/assets/section-footer.css b/assets/section-footer.css
@@ -244,14 +244,17 @@
 .localization-form:only-child .localization-form__select {
   margin: 1rem 1rem 0.5rem;
   flex-grow: 1;
-  width: auto;
 }
 
 .footer__localization h2 {
   margin: 1rem 1rem 0.5rem;
   color: rgba(var(--color-foreground), 0.75);
 }
 
+.footer__localization {
+  z-index: 0;
+}
+
 @media screen and (min-width: 750px) {
   .footer__localization {
     padding: 0.4rem 0;
@@ -269,7 +272,7 @@
   .localization-form:only-child {
     justify-content: start;
     width: auto;
-    margin: 0 0 0 -1rem;
+    margin: 0 1rem 0 0;
   }
 
   .localization-form:only-child .button,
@@ -300,12 +303,18 @@
 }
 
 .localization-form__select {
-  box-shadow: 0 0 0 0.1rem rgba(var(--color-foreground), 0.55);
+  border-radius: var(--inputs-radius-outset);
   position: relative;
   margin-bottom: 1.5rem;
-  border: 0.1rem solid transparent;
   padding-left: 1rem;
   text-align: left;
+  min-height: calc(4rem + var(--inputs-border-width) * 2);
+  min-width: calc(7rem + var(--inputs-border-width) * 2);
+}
+
+.disclosure__button.localization-form__select {
+  padding: calc(1.5rem + var(--inputs-border-width));
+  background: rgb(var(--color-background));
 }
 
 noscript .localization-form__select {
@@ -322,7 +331,7 @@ noscript .localization-form__select {
   position: absolute;
   content: '';
   height: 0.6rem;
-  right: 1.5rem;
+  right: calc(var(--inputs-border-width) + 1.5rem);
   top: calc(50% - 0.2rem);
 }
 

diff --git a/assets/section-main-product.css b/assets/section-main-product.css
@@ -400,6 +400,15 @@ a.product__text {
   max-width: 100%;
 }
 
+.product-form__quantity .form__label {
+  margin-bottom: 0.6rem;
+}
+
+.product-form__quantity-top .form__label {
+  margin-bottom: 1.2rem;
+}
+
+
 .product--no-media fieldset.product-form__input {
   flex-wrap: wrap;
   margin: 0 auto 1.2rem auto;

diff --git a/layout/theme.liquid b/layout/theme.liquid
@@ -142,8 +142,10 @@
         --inputs-border-opacity: {{ settings.inputs_border_opacity | divided_by: 100.0 }};
         --inputs-shadow-opacity: {{ settings.inputs_shadow_opacity | divided_by: 100.0 }};
         --inputs-shadow-horizontal-offset: {{ settings.inputs_shadow_horizontal_offset }}px;
+        --inputs-margin-offset: {% if settings.inputs_shadow_vertical_offset != 0 and settings.inputs_shadow_opacity > 0 %}{{ settings.inputs_shadow_vertical_offset | abs }}{% else %}0{% endif %}px;
         --inputs-shadow-vertical-offset: {{ settings.inputs_shadow_vertical_offset }}px;
         --inputs-shadow-blur-radius: {{ settings.inputs_shadow_blur }}px;
+        --inputs-radius-outset: {% if settings.inputs_radius > 0 %}{{ settings.inputs_radius | plus: settings.inputs_border_thickness }}{% else %}0{% endif %}px;
 
         --variant-pills-radius: {{ settings.variant_pills_radius }}px;
         --variant-pills-border-width: {{ settings.variant_pills_border_thickness }}px;

diff --git a/sections/featured-product.liquid b/sections/featured-product.liquid
@@ -116,7 +116,7 @@
                 </div>
               {%- endif -%}
             {%- when 'quantity_selector' -%}
-              <div class="product-form__input product-form__quantity" {{ block.shopify_attributes }}>
+              <div class="product-form__input product-form__quantity{% if settings.inputs_shadow_vertical_offset != 0 and settings.inputs_shadow_vertical_offset < 0 %} product-form__quantity-top{% endif %}" {{ block.shopify_attributes }}>
                 <label class="form__label" for="Quantity-{{ section.id }}">
                   {{ 'products.product.quantity.label' | t }}
                 </label>

diff --git a/sections/header.liquid b/sections/header.liquid
@@ -278,7 +278,7 @@
           </summary>
           <div class="search-modal modal__content" role="dialog" aria-modal="true" aria-label="{{ 'general.search.search' | t }}">
             <div class="modal-overlay"></div>
-            <div class="search-modal__content" tabindex="-1">
+            <div class="search-modal__content{% if settings.inputs_shadow_vertical_offset != 0 and settings.inputs_shadow_vertical_offset < 0 %} search-modal__content-top{% else %} search-modal__content-bottom{% endif %}" tabindex="-1">
               {%- if settings.predictive_search_enabled -%}
                 <predictive-search class="search-modal__form" data-loading-text="{{ 'accessibility.loading' | t }}">
               {%- endif -%}
@@ -427,7 +427,7 @@
           </summary>
           <div class="search-modal modal__content" role="dialog" aria-modal="true" aria-label="{{ 'general.search.search' | t }}">
             <div class="modal-overlay"></div>
-            <div class="search-modal__content" tabindex="-1">
+            <div class="search-modal__content{% if settings.inputs_shadow_vertical_offset != 0 and settings.inputs_shadow_vertical_offset < 0 %} search-modal__content-top{% else %} search-modal__content-bottom{% endif %}" tabindex="-1">
               {%- if settings.predictive_search_enabled -%}
                 <predictive-search class="search-modal__form" data-loading-text="{{ 'accessibility.loading' | t }}">
               {%- endif -%}

diff --git a/sections/main-cart-footer.liquid b/sections/main-cart-footer.liquid
@@ -9,7 +9,7 @@
       {%- if section.settings.show_cart_note -%}
         <cart-note class="cart__note field">
           <label for="Cart-note">{{ 'sections.cart.note' | t }}</label>
-          <textarea class="text-area text-area--resize-vertical field__input" name="note" form="cart" id="Cart-note" placeholder="{{ 'sections.cart.note' | t }}">{{ cart.note }}</textarea>
+          <textarea class="text-area field__input" name="note" form="cart" id="Cart-note" placeholder="{{ 'sections.cart.note' | t }}">{{ cart.note }}</textarea>
         </cart-note>
       {%- endif -%}
 

diff --git a/sections/main-product.liquid b/sections/main-product.liquid
@@ -247,7 +247,7 @@
               </details>
             </div>
           {%- when 'quantity_selector' -%}
-            <div class="product-form__input product-form__quantity" {{ block.shopify_attributes }}>
+            <div class="product-form__input product-form__quantity{% if settings.inputs_shadow_vertical_offset != 0 and settings.inputs_shadow_vertical_offset < 0 %} product-form__quantity-top{% endif %}" {{ block.shopify_attributes }}>
               <label class="form__label" for="Quantity-{{ section.id }}">
                 {{ 'products.product.quantity.label' | t }}
               </label>