From 5b75b4d554ad051cacef708922e71f0e9f9071fa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Mon, 1 Jun 2020 22:20:32 +0200
Subject: [PATCH] Globe: Smaller dots for close locations

---
 src/style/molecules/_globe.scss | 29 +++++++++++++++++++++++------
 1 file changed, 23 insertions(+), 6 deletions(-)

diff --git a/src/style/molecules/_globe.scss b/src/style/molecules/_globe.scss
index 03457b2..96efb68 100644
--- a/src/style/molecules/_globe.scss
+++ b/src/style/molecules/_globe.scss
@@ -64,21 +64,32 @@
             display: block;
             top: -4px;
             left: -4px;
-            width: 8px;
-            height: 8px;
             padding: 4px;
-            border-radius: 50%;
             opacity: 1;
-            background: #ff6c89;
             will-change: transform;
 
+            // Dot
+            &:before {
+                content: "";
+                display: block;
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 8px;
+                height: 8px;
+                background: $color-secondary;
+                border-radius: 100%;
+            }
+
             span {
                 transition: color 0.4s $ease-quart, opacity 0.3s $ease-inout;
             }
 
             // Hover glow effect
             &.hover {
-                animation: globeMarkerPulse 1s;
+                &:before {
+                    animation: globeMarkerPulse 1s;
+                }
             }
 
             // Label
@@ -120,7 +131,7 @@
                 }
                 .marker {
                     &__city {
-                        color: #FF6C89;
+                        color: $color-secondary;
                     }
                     &__country {
                         color: $color-text;
@@ -158,6 +169,12 @@
             // Marker is close to another one
             // Show the marker infos only on hover
             &.is-close {
+                // Dot
+                &:before {
+                    width: 7px;
+                    height: 7px;
+                }
+                // Label
                 .marker__label {
                     opacity: 0;
                 }