Merge branch 'v2' of https://git.server.flayks.com/cetrucflotte/housesof into v2

src/style/modules/_globe.scss

@@ -33,25 +33,28 @@
     // }
     // END DEBUG //
 
+
     /*
-    ** Cropped globe
+    ** States and Variants
     */
+    // When dragging
+    &.is-grabbing {
+        cursor: grabbing;
+    }
+
+    // Cropped globe
     &--cropped {
         overflow: hidden;
         height: clamp(300px, 30vw, 500px);
     }
 
+
     /*
     ** Markers
     */
     &__markers {
         z-index: 210;
 
-        // When dragging
-        &.is-grabbing {
-            cursor: grabbing;
-        }
-
         // Marker
         .marker {
             position: absolute;

src/style/molecules/_switcher.scss

@@ -0,0 +1,117 @@
+.switcher {
+    $shadow-color: rgba(0, 0, 0, 0.05);
+    position: fixed;
+    z-index: 999;
+    bottom: 0;
+    left: 0;
+
+    @include bp (sm) {
+        bottom: 40px;
+        left: 40px;
+    }
+
+    // Links
+    &__links {
+        opacity: 0;
+        padding: 8px;
+        background: $color-primary-tertiary20;
+        border-radius: 12px;
+        margin-bottom: 16px;
+        pointer-events: none;
+        transform: translate3d(0, 8px, 0);
+        box-shadow: 0 6px 6px $shadow-color, 0 12px 12px $shadow-color, 0 24px 24px $shadow-color;
+        transition: opacity 0.8s var(--ease-quart), transform 0.8s var(--ease-quart);
+
+        li {
+            display: block;
+            line-height: 1.5;
+        }
+        a {
+            display: flex;
+            align-items: center;
+            padding: 8px 16px 8px 10px;
+            color: #fff;
+            font-weight: 900;
+            font-size: rem(16px);
+            text-decoration: none;
+            border-radius: 6px;
+            transition: background-color 0.4s ease-out;
+
+            &:hover {
+                background-color: rgba($color-tertiary, 0.15);
+            }
+        }
+        .icon {
+            display: block;
+            width: 32px;
+            height: 32px;
+            object-fit: contain;
+            margin-right: 16px;
+        }
+    }
+
+    // Button
+    &__button {
+        $shadow-color: rgba(0, 0, 0, 0.05);
+        width: 56px;
+        height: 56px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0;
+        background: $color-primary-tertiary20;
+        border-radius: 100%;
+        box-shadow: 0 6px 6px $shadow-color, 0 12px 12px $shadow-color, 0 24px 24px $shadow-color;
+        transition: background-color 0.6s var(--ease-quart);
+
+        // Dots container
+        span {
+            display: inline-flex;
+            flex-flow: column;
+            transition: transform 0.8s var(--ease-quart);
+        }
+        // Dot
+        i {
+            display: block;
+            width: 6px;
+            height: 6px;
+            margin: 2px 0;
+            border-radius: 100%;
+            background: #fff;
+            transition: transform 0.8s var(--ease-quart);
+        }
+
+        // Hover
+        &:hover {
+            background-color: #7e5288;
+
+            i {
+                &:nth-child(1) { transform: translate3d(0, -2px, 0); }
+                &:nth-child(3) { transform: translate3d(0, 2px, 0); }
+            }
+        }
+    }
+
+
+    // Open state
+    &.is-open {
+        .switcher {
+            &__links {
+                opacity: 1;
+                pointer-events: auto;
+                transform: translate3d(0, 0, 0);
+            }
+
+            &__button {
+                span {
+                    transform: rotate3d(70deg, 120deg, 180deg) translateZ(0);
+                }
+                i {
+                    &:nth-child(1) { transform: translate3d(-7px, 8px, 0); }
+                    &:nth-child(2) { transform: translate3d(7px, -2px, 0); }
+                    &:nth-child(3) { transform: translate3d(0px, -3px, 0); }
+                }
+            }
+        }
+    }
+}

src/style/style.scss

@@ -39,6 +39,7 @@
 // Molecules
 @import "molecules/photo-card";
 @import "molecules/location";
+@import "molecules/switcher";
 
 // Organisms
 @import "organisms/locations";