fix(storefront): BCTHEME-30 fix misaligned tooltip for required produ…

…ct option
bigcommerce · Dec 1, 2020 · a16e717 · a16e717
1 parent 6a51c3a
commit a16e717
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,7 @@
 # Changelog
 
 ## Draft
+- Fixed misaligned tooltip for required product option. [#1915](https://github.com/bigcommerce/cornerstone/pull/1915)
 - Fixed tooltip overlaying by facebook button. [#1914](https://github.com/bigcommerce/cornerstone/pull/1914)
 - Cornerstone - Text hover color does not change when Dropdown menu display mode is set to 'Alternative'. [#1918](https://github.com/bigcommerce/cornerstone/pull/1918)
 - “Sort by” dropdown selection not reflected on search results page for News and Information tab. [#1910](https://github.com/bigcommerce/cornerstone/pull/1910)

diff --git a/assets/scss/components/citadel/forms/_forms.scss b/assets/scss/components/citadel/forms/_forms.scss
@@ -67,6 +67,8 @@
 
 .form-checkbox,
 .form-radio {
+    bottom: 0.5rem;
+    left: 0.5rem;
 
     + .form-label {
 
@@ -86,6 +88,10 @@
     }
 }
 
+.form-option-wrapper {
+    position: relative;
+    display: inline-block;
+}
 
 // Citadel form-actions
 // -----------------------------------------------------------------------------

diff --git a/templates/components/amp/products/options/set-rectangle.html b/templates/components/amp/products/options/set-rectangle.html
@@ -7,6 +7,7 @@
         {{/if}}
     </label>
     {{#each this.values}}
+    <div class="form-option-wrapper">
         <input
             class="form-radio"
             type="radio"
@@ -18,5 +19,6 @@
         <label class="form-option" for="attribute_{{id}}" data-product-attribute-value="{{id}}">
             <span class="form-option-variant">{{this.label}}</span>
         </label>
+    </div>
     {{/each}}
 </div>
diff --git a/templates/components/amp/products/options/swatch.html b/templates/components/amp/products/options/swatch.html
@@ -9,6 +9,7 @@
     </label>
 
     {{#each this.values}}
+    <div class="form-option-wrapper">
         <input class="form-radio" type="radio" name="attribute[{{../id}}]" value="{{id}}" id="attribute_{{id}}" {{#if selected}}checked{{/if}} {{#if ../required}}required{{/if}}>
         <label class="form-option" for="attribute_{{id}}" data-product-attribute-value="{{id}}">
             {{#if image}}
@@ -29,5 +30,6 @@
                 {{/if}}
             {{/if}}
         </label>
+    </div>
     {{/each}}
 </div>
diff --git a/templates/components/products/options/set-rectangle.html b/templates/components/products/options/set-rectangle.html
@@ -21,6 +21,7 @@
     {{/unless}}
 
     {{#each this.values}}
+    <div class="form-option-wrapper">    
         <input
             class="form-radio"
             type="radio"
@@ -31,9 +32,11 @@
                 checked
                 data-default
             {{/if}}
-            {{#if ../required}}required{{/if}}>
+            {{#if ../required}}required{{/if}}
+        >
         <label class="form-option" for="attribute_rectangle__{{../id}}_{{id}}" data-product-attribute-value="{{id}}">
             <span class="form-option-variant">{{this.label}}</span>
         </label>
+    </div>
     {{/each}}
 </div>
diff --git a/templates/components/products/options/swatch.html b/templates/components/products/options/swatch.html
@@ -22,6 +22,7 @@
     {{/unless}}
 
     {{#each this.values}}
+    <div class="form-option-wrapper">
         <input class="form-radio"
                type="radio"
                name="attribute[{{../id}}]"
@@ -55,5 +56,6 @@
                 </span>
             {{/if}}
         </label>
+    </div>
     {{/each}}
 </div>