fix(storefront): BCTHEME-215 Delete item button in cart cut off from …

…right side when in focus
bigcommerce · Sep 7, 2020 · 7789ab8 · 7789ab8
1 parent cea4c32
commit 7789ab8
Show file tree

Hide file tree

Showing 6 changed files with 11 additions and 6 deletions.
diff --git a/assets/scss/tools/_aria.scss → assets/scss/common/_aria.scss b/assets/scss/tools/_aria.scss → assets/scss/common/_aria.scss
diff --git a/assets/scss/common/index.scss b/assets/scss/common/index.scss
@@ -0,0 +1 @@
+@import 'aria';
diff --git a/assets/scss/components/stencil/cart/_cart.scss b/assets/scss/components/stencil/cart/_cart.scss
@@ -10,6 +10,7 @@
 // -----------------------------------------------------------------------------
 
 $cart-item-spacing:                     spacing("single");
+$cart-content-padding-right:            4px;
 
 $cart-thumbnail-maxWidth:               remCalc(100px);
 $cart-thumbnail-height:                 remCalc(100px);
@@ -217,6 +218,9 @@ $cart-item-label-offset:                $cart-thumbnail-maxWidth + $cart-item-sp
 
 // Cart content
 // -----------------------------------------------------------------------------
+.cart-content-padding-right {
+    padding-right: $cart-content-padding-right;
+}
 
 .cart-header-quantity,
 .cart-item-quantity {

diff --git a/assets/scss/theme.scss b/assets/scss/theme.scss
@@ -71,6 +71,7 @@
 @import "../../node_modules/@bigcommerce/citadel/dist/vendor/normalize/normalize"; // 1
 @import "../../node_modules/@bigcommerce/citadel/dist/components/components"; // 2
 @import "components/components"; // 3
+@import "common/index";
 
 
 // Layouts

diff --git a/assets/scss/tools/_tools.scss b/assets/scss/tools/_tools.scss
@@ -1,4 +1,3 @@
 @import "list";
 @import "string";
 @import "image";
-@import "aria";
diff --git a/templates/pages/cart.html b/templates/pages/cart.html
@@ -16,16 +16,16 @@
         {{#if cart.items.length}}
             <div class="loadingOverlay"></div>
 
-            <div data-cart-content>
+            <div data-cart-content class="cart-content-padding-right">
                 {{> components/cart/content}}
             </div>
 
-            <div data-cart-totals>
+            <div data-cart-totals class="cart-content-padding-right">
                 {{> components/cart/totals}}
             </div>
 
             {{#if cart.show_primary_checkout_button}}
-                <div class="cart-actions">
+                <div class="cart-actions cart-content-padding-right">
                     <a class="button button--primary" href="{{urls.checkout.single_address}}" title="{{lang 'cart.checkout.title'}}">{{lang 'cart.checkout.button'}}</a>
                     {{#if cart.show_multiple_address_shipping}}
                         <a class="checkoutMultiple" href="{{urls.checkout.multiple_address}}">
@@ -34,13 +34,13 @@
                     {{/if}}
                 </div>
             {{else}}
-                <div class="cart-actions">
+                <div class="cart-actions cart-content-padding-right">
                     <a class="button" href="{{urls.home}}" title="{{lang 'cart.continue_shopping'}}">{{lang 'cart.continue_shopping'}}</a>
                 </div>
             {{/if}}
 
             {{#if cart.additional_checkout_buttons}}
-                <div class="cart-additionalCheckoutButtons">
+                <div class="cart-additionalCheckoutButtons cart-content-padding-right">
                     {{#each cart.additional_checkout_buttons}}
                         {{{this}}}
                     {{/each}}