Merge pull request #1298 from sacr3dc0w/mini-cart

Corrects mini cart display issues
bigcommerce · Aug 1, 2018 · 0752150 · 0752150
2 parents 0dd36aa + 6d23620
commit 0752150
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,7 @@
 - Open correct product page tabs when URL contains a fragment identifier referring to that content [#1304](https://github.com/bigcommerce/cornerstone/pull/1304)
 - Display product reviews in tabbed content region of product page. [#1302](https://github.com/bigcommerce/cornerstone/pull/1302)
 - Show bulk discounts only if enabled through store settings. [#1310](https://github.com/bigcommerce/cornerstone/pull/1310)
+- Corrects mini cart display issues [#1298](https://github.com/bigcommerce/cornerstone/pull/1298)
 - Style active section in search results. [#1316](https://github.com/bigcommerce/cornerstone/pull/1316)
 - Fix blog_post import statement in app.js [#1301](https://github.com/bigcommerce/cornerstone/pull/1301)
 - Show carousel dots only when carousel has more than one slide. [#1319](https://github.com/bigcommerce/cornerstone/pull/1319)

diff --git a/assets/scss/components/stencil/navUser/_navUser.scss b/assets/scss/components/stencil/navUser/_navUser.scss
@@ -9,6 +9,10 @@
 // 4. Needs to be 100% so its dropdown can take full width in mobile viewport
 // 5. Needs to be lower than logo zIndex, otherwise, logo is not clickable
 // 6. Make the triangle for currency dropdown right aligned
+// 7. Corrects mini cart positioned outside viewport. Since this resets right
+//    position, nudge dropdown away from the side of viewport in mobile viewport.
+// 8. This corrects mini cart dropdown arrow alignment in mobile viewport by
+//    setting the previous styles to medium breakpoint and adjusts for nudge in (7).
 //
 // -----------------------------------------------------------------------------
 
@@ -62,6 +66,12 @@
     }
 }
 
+.navUser-section {
+    @include breakpoint("medium") {
+        position: relative; // 7
+    }
+}
+
 .navUser-action {
     color: stencilColor("navUser-color");
     font-weight: fontWeight("bold");
@@ -167,17 +177,30 @@
 
         // scss-lint:disable NestingDepth
         &.is-open {
+            top: auto !important; // 7
+            left: auto !important; // 7
+            right: remCalc(5px); // 7
+            @include breakpoint("medium") {
+                right: 0; // 7
+            }
+
             &:before,
             &:after {
                 left: auto;
             }
 
             &:before {
-                right: spacing("half");
+                right: spacing("half") - remCalc(5px); // 8
+                @include breakpoint("medium") {
+                    right: spacing("half"); // 8
+                }
             }
 
             &:after {
-                right: spacing("half") + remCalc(2px);
+                right: spacing("half") - remCalc(3px); // 8
+                @include breakpoint("medium") {
+                    right: spacing("half") + remCalc(2px); // 8
+                }
             }
         }
     }