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

🔥 Huge style refactoring by using SvelteKit built-in style tag

Browse Source 
It's been tricky but got there finally! Hello `:global`
- Avoid using one global CSS file containing everything
- Import the component SCSS file in a script tag from the component file to allow style scoping and including it only when used
This commit is contained in:
Félix Péault
2022-06-22 23:25:08 +02:00
parent 4f81640b61
commit cdabe6935b
89 changed files with 1779 additions and 1735 deletions
Download Patch File Download Diff File Expand all files Collapse all files

288
src/style/modules/_globe.scss
View File

@@ -10,15 +10,15 @@
cursor: grab;
user-select: none;
@include bp (sm) {
// height: 130vw;
}
@include bp (md) {
// height: 112vw;
}
@include bp (xl) {
// height: 100vw;
}
// @include bp (sm) {
// height: 130vw;
// }
// @include bp (md) {
// height: 112vw;
// }
// @include bp (xl) {
// height: 100vw;
// }
// DEBUG //
// background: rgba(red, 0.2);
@@ -40,154 +40,160 @@
** States and Variants
*/
// When dragging
&.is-grabbing {
&:global(.is-grabbing) {
cursor: grabbing;
}
// Cropped globe
&--cropped {
&-cropped {
overflow: hidden;
height: clamp(300px, 30vw, 500px);
}
}
/*
** Markers
*/
&__markers {
/*
** Markers
*/
:global(.globe__markers) {
z-index: 2;
// Marker
:global(.marker) {
position: absolute;
z-index: 2;
cursor: pointer;
display: block;
top: -4px;
left: -4px;
padding: 4px;
opacity: 1;
will-change: transform;
// Marker
.marker {
position: absolute;
z-index: 2;
cursor: pointer;
// Dot
&:before {
content: "";
display: block;
top: -4px;
left: -4px;
padding: 4px;
position: absolute;
top: 0;
left: 0;
width: 8px;
height: 8px;
background: $color-secondary;
border-radius: 100%;
}
}
// Hover glow effect
:global(.hover) {
&:before {
animation: markerPulse 1s;
}
}
// Label
:global(.marker__label) {
position: absolute;
bottom: 16px;
left: 0px;
color: transparent;
pointer-events: none;
transition: color 0.4s var(--ease-quart), opacity 0.3s var(--ease-quart), transform 0.3s var(--ease-quart);
}
// Location city
:global(.marker__city) {
font-family: $font-serif;
font-size: rem(18px);
line-height: 1;
@include bp (sm) {
font-size: rem(24px);
}
}
// Location country
:global(.marker__country) {
display: block;
opacity: 0.8;
font-family: $font-sans;
font-size: rem(8px);
line-height: 1;
text-transform: uppercase;
letter-spacing: 1px;
@include bp (sm) {
font-size: rem(10px);
}
}
// Active
:global(.is-active) {
opacity: 1;
:global(span) {
opacity: 1;
will-change: transform;
}
:global(.marker__city) {
color: $color-secondary;
}
:global(.marker__country) {
color: $color-text;
}
}
// Dot
&:before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 8px;
height: 8px;
background: $color-secondary;
border-radius: 100%;
// Is light
:global(.is-light) {
:global(.is-active) {
:global(.marker__city) {
color: #fff;
}
span {
transition: color 0.4s var(--ease-quart), opacity 0.3s var(--ease-inout);
}
// Hover glow effect
&.hover {
&:before {
animation: globeMarkerPulse 1s;
}
}
// Label
&__label {
position: absolute;
bottom: 16px;
left: 0px;
color: transparent;
pointer-events: none;
}
// Location city
&__city {
font-family: $font-serif;
font-size: rem(18px);
line-height: 1;
@include bp (sm) {
font-size: rem(24px);
}
}
// Location country
&__country {
display: block;
opacity: 0.8;
font-family: $font-sans;
font-size: rem(8px);
line-height: 1;
text-transform: uppercase;
letter-spacing: 1px;
@include bp (sm) {
font-size: rem(10px);
}
}
// Active
&.is-active {
&, span {
opacity: 1;
}
.marker {
&__city {
color: $color-secondary;
}
&__country {
color: $color-text;
}
}
}
// Is light
&.is-light {
&.is-active {
.marker {
&__city {
color: #fff;
}
&__country {
color: #d2b7e4;
}
}
}
}
// Left positioned
&.is-left {
.marker {
&__label {
left: auto;
right: 32px;
}
&__country {
text-align: right;
}
}
}
// 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;
}
// Show labels on hover
&:hover {
.marker__label {
opacity: 1;
}
}
:global(.marker__country) {
color: #d2b7e4;
}
}
}
// Left positioned
:global(.is-left) {
:global(.marker__city) {
left: auto;
right: 32px;
}
:global(.marker__country) {
text-align: right;
}
}
// Marker is close to another one
// Show the marker infos only on hover
:global(.is-close) {
// Dot
&:before {
width: 7px;
height: 7px;
}
// Label
:global(.marker__label) {
opacity: 0;
transform: translate3d(0, 4px, 0);
}
// Show labels on hover
&:hover {
:global(.marker__label) {
opacity: 1;
transform: translate3d(0,0,0);
}
}
}
}
// Pulse animation
@keyframes markerPulse {
0% {
box-shadow: 0 0 0 0 rgba($color-secondary, 1);
}
100% {
box-shadow: 0 0 0 32px rgba(#fff, 0);
}
}