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; }