Merge pull request #1267 from sacr3dc0w/currency-dropdown

Fix arrow placement on currency selector dropdown

CHANGELOG.md

@@ -7,6 +7,7 @@
 - Fix use case that prevented retail/sale prices from displaying on product details page [#1262](https://github.com/bigcommerce/cornerstone/pull/1262)
 - Fix svg arrows missing on AMP product pages. [#1258](https://github.com/bigcommerce/cornerstone/pull/1258)
 - Fix for Changing Menu Colors In Theme Editor Not Respected In Mobile View [#1266](https://github.com/bigcommerce/cornerstone/pull/1266)
+- Fix arrow placement on currency dropdown menu [#1267](https://github.com/bigcommerce/cornerstone/pull/1267)
 
 ## 2.1.0 (2018-06-01)
 - Add Newsletter summary section to subscription form. [#1248](https://github.com/bigcommerce/cornerstone/pull/1248)

assets/scss/components/stencil/navUser/_navUser.scss

@@ -5,9 +5,10 @@
 // 1. Corrects the spacing added by .navUser-or
 // 2. Can't use top: 50% because its container `.header` changes its height to
 //    100% when mobile menu is expanded
-// 3. Make the triangle for dropdown centered
+// 3. Make the triangle for store credit dropdown centered
 // 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
 //
 // -----------------------------------------------------------------------------
 
@@ -92,6 +93,20 @@
     }
 }
 
+.navUser-action--currencySelector + .dropdown-menu {
+    &:before {
+        // scss-lint:disable ImportantRule
+        left: auto !important; // 6
+        right: spacing("half"); // 6
+    }
+
+    &:after {
+        // scss-lint:disable ImportantRule
+        left: auto !important; // 6
+        right: spacing("half") + remCalc(2px); // 6
+    }
+}
+
 .navUser-action--storeCredit + .dropdown-menu {
     max-width: remCalc(300px);
     padding: spacing("single");

templates/components/common/currency-selector.html

@@ -1,7 +1,7 @@
 {{#if currency_selector.currencies.length '>' 1}}
 <ul class="navUser-section">
     <li class="navUser-item">
-        <a class="navUser-action has-dropdown" href="#" data-dropdown="currencySelection" aria-controls="currencySelection" aria-expanded="false">{{lang 'common.currency' code=currency_selector.active_currency_code}} <i class="icon" aria-hidden="true"><svg><use xlink:href="#icon-chevron-down" /></svg></i></a>
+        <a class="navUser-action navUser-action--currencySelector has-dropdown" href="#" data-dropdown="currencySelection" aria-controls="currencySelection" aria-expanded="false">{{lang 'common.currency' code=currency_selector.active_currency_code}} <i class="icon" aria-hidden="true"><svg><use xlink:href="#icon-chevron-down" /></svg></i></a>
         <ul class="dropdown-menu" id="currencySelection" data-dropdown-content aria-hidden="true" tabindex="-1">
             {{#each currency_selector.currencies}}
             <li class="dropdown-menu-item">