Make Shop location switcher a component using a global store

Using two switchers (one in the shop nav and the other in the cart) makes possible to have the switcher over the Cart overlay (over intro)
2021-11-07 22:40:52 +01:00
parent 3198fd8545
commit 5923afed3b
7 changed files with 140 additions and 84 deletions
--- a/src/style/molecules/_shop-locationswitcher.scss
+++ b/src/style/molecules/_shop-locationswitcher.scss
@@ -0,0 +1,43 @@
+.shop-locationswitcher {
+    dt {
+        color: $color-primary;
+        font-weight: 400;
+        line-height: 1;
+        font-size: rem(12px);
+    }
+    dd {
+        color: $color-secondary;
+
+        svg {
+            display: inline-block;
+            width: 14px;
+            height: 14px;
+            margin-right: 4px;
+
+            @include bp (sm) {
+                width: 18px;
+                height: 18px;
+            }
+        }
+        select {
+            background: none;
+            border: none;
+            font-size: rem(18px);
+            color: $color-secondary;
+            font-family: $font-serif;
+            cursor: pointer;
+            appearance: none;
+
+            @include bp (sm) {
+                font-size: rem(24px);
+            }
+        }
+    }
+
+    // Overlaid
+    &.is-over {
+        dt {
+            color: #fff;
+        }
+    }
+}