flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

fix merge

Browse Source
This commit is contained in:
Nicolas Riciotti
2020-04-18 23:24:43 +02:00
parent 50d36d4015 3c05d6d222
commit 10e32a1957
67 changed files with 558 additions and 7126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

182
src/style/molecules/_globe.scss
View File

@@ -8,6 +8,21 @@
cursor: grab;
user-select: none;
////DEBUG////
background: rgba(255,0,0,0.2);
&:after {
content: "";
display: block;
background: blue;
position: absolute;
left: 0; top: 50%;
width: 100%;
height: 2px;
margin-top:-1px;
}
////END DEBUG////
@include breakpoint (sm) {
height: 140vw;
}
@@ -23,94 +38,93 @@
height: 35vw;
min-height: 400px;
padding: 0;
// Partial globe
.globe {
margin-top: -18vw;
}
}
// Marker
.marker {
position: absolute;
z-index: 2;
cursor: pointer;
display: block;
top: 0;
left: 0;
width: 8px;
height: 8px;
border-radius: 100%;
opacity: 1;
background: #ff6c89;
will-change: transform;
span {
transition: color 0.4s $ease-quart;
}
// Hover glow effect
&.hover {
animation: globeMarkerPulse 1s;
}
// Label
&__label {
position: absolute;
bottom: -230%;
left: 230%;
color: transparent;
}
// Location city
&__city {
font-family: $font-serif;
font-size: rem(24px);
line-height: 1;
}
// Location country
&__country {
display: block;
opacity: 0.8;
font-family: $font-sans;
font-size: rem(10px);
line-height: 1;
text-transform: uppercase;
}
// Active
&.is-active {
&, span {
opacity: 1;
}
.marker {
&__city {
color: #FF6C89;
}
&__country {
color: $color-text;
}
}
}
}
.marker.is-left {
.marker__label {
left: auto;
right: 360%;
}
.marker__country {
text-align: right;
}
}
// Grabbing
&.is-grabbing {
cursor: grabbing;
// .globe {
// margin-top: -18vw;
// }
}
}
// Marker
.marker {
position: absolute;
z-index: 2;
cursor: pointer;
display: block;
top: 0;
left: 0;
width: 8px;
height: 8px;
border-radius: 100%;
opacity: 1;
background: #ff6c89;
will-change: transform;
span {
transition: color 0.4s $ease-quart;
}
// Hover glow effect
&.hover {
animation: globeMarkerPulse 1s;
}
// Label
&__label {
position: absolute;
bottom: -230%;
left: 230%;
color: transparent;
}
// Location city
&__city {
font-family: $font-serif;
font-size: rem(24px);
line-height: 1;
}
// Location country
&__country {
display: block;
opacity: 0.8;
font-family: $font-sans;
font-size: rem(10px);
line-height: 1;
text-transform: uppercase;
}
// Active
&.is-active {
&, span {
opacity: 1;
}
.marker {
&__city {
color: #FF6C89;
}
&__country {
color: $color-text;
}
}
}
}
.marker.is-left {
.marker__label {
left: auto;
right: 360%;
}
.marker__country {
text-align: right;
}
}
// Grabbing
.markerWrapper.is-grabbing {
cursor: grabbing;
}
// Part globe
.globe--part {