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

10
src/style/molecules/_cart-item.scss
View File

@@ -63,7 +63,7 @@
}
}
// Select
.select {
:global(.select) {
position: relative;
display: flex;
align-items: center;
@@ -75,16 +75,16 @@
cursor: pointer;
transition: border-color 0.4s var(--ease-quart);
span {
:global(span) {
display: block;
font-size: rem(12px);
color: $color-text;
& + span {
& + :global(span) {
margin-left: 4px;
}
}
select {
:global(select) {
position: absolute;
z-index: 1;
top: 0;
@@ -114,7 +114,7 @@
}
// Remove Icon
.remove {
:global(.remove) {
position: absolute;
top: 16px;
right: 16px;

5
src/style/molecules/_heading.scss
View File

@@ -8,7 +8,7 @@
}
// Title
h1 {
:global(h1) {
margin-top: 56px;
line-height: 1;
color: $color-secondary;
@@ -17,8 +17,9 @@
margin-top: 160px;
}
}
// Text
p {
:global(p) {
max-width: 300px;
margin: 40px auto 0;
font-weight: 200;

40
src/style/molecules/_house.scss
View File

@@ -57,7 +57,7 @@
& > * {
display: inline-block;
}
svg {
:global(svg) {
width: 1em;
height: 1em;
margin-right: 0.4em;
@@ -77,7 +77,7 @@
opacity: 0;
transition: opacity 2s var(--ease-quart);
figure {
:global(figure) {
position: relative;
z-index: 5;
display: flex;
@@ -98,7 +98,7 @@
height: 0;
}
}
picture {
:global(picture) {
height: 100%;
border-radius: 0;
@@ -112,7 +112,7 @@
transform: translateX(-50%);
}
}
img {
:global(img) {
display: block;
width: 100%;
height: 100%;
@@ -132,7 +132,7 @@
// Scale down image on hover
@media (hover: hover) {
a:hover {
img {
:global(img) {
opacity: 0.7;
transform: scale3d(1.03, 1.03, 1.03) !important;
transition-duration: 1.2s;
@@ -187,24 +187,24 @@
}
}
}
}
// Visible state
&.is-visible {
.house__info {
h2 {
opacity: 1;
transform: translate3d(0,0,0);
}
.info {
opacity: 1;
}
}
.house__photo {
// Visible state
:global(.is-visible) {
.house__info {
h2 {
opacity: 1;
transform: translate3d(0,0,0);
}
.info {
opacity: 1;
}
}
.house__photo {
opacity: 1;
img {
transform: scale3d(1.01, 1.01, 1.01);
}
:global(img) {
transform: scale3d(1.01, 1.01, 1.01);
}
}
}

2
src/style/molecules/_issue.scss
View File

@@ -12,7 +12,7 @@
text-decoration: none;
}
// Image
img {
:global(img) {
$shadow-color: rgba(#936B47, 0.06);
display: block;
width: 80px;

14
src/style/molecules/_list-cta.scss
View File

@@ -1,14 +0,0 @@
.list-cta {
@include bp (sm) {
display: flex;
justify-content: center;
}
& > * {
margin: 20px auto 0;
@include bp (sm) {
margin: 0 16px;
}
}
}

59
src/style/molecules/_location.scss
View File

@@ -41,9 +41,6 @@
// Hover
&:hover {
strong {
color: $color-tertiary;
}
&:after {
opacity: 1;
transform: translate3d(-50%, -50%, 0);
@@ -52,17 +49,15 @@
}
// Flag
&__flag {
img {
display: block;
margin: 2px auto 0;
border-radius: 100%;
margin-right: 24px;
:global(.flag img) {
display: block;
margin: 2px auto 0;
border-radius: 100% !important;
margin-right: 24px;
@include bp (sm) {
margin-top: 0;
margin-right: 0;
}
@include bp (sm) {
margin-top: 0;
margin-right: 0;
}
}
@@ -93,7 +88,7 @@
}
// Badge
.badge {
:global(.badge) {
display: inline-flex;
@include bp (sm) {
@@ -125,29 +120,31 @@
@include bp (sm) {
display: block;
}
}
picture {
position: absolute;
top: 0;
left: 0;
// Photo
:global(.location__photo) {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.3s;
:global(img) {
display: block;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.3s;
img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
&.is-visible {
opacity: 1;
}
object-fit: cover;
}
}
:global(.is-visible) {
opacity: 1;
}
// Hover
&:hover {
.location__photos {
opacity: 1;

13
src/style/molecules/_newsletter-form.scss
View File

@@ -30,14 +30,13 @@
@include bp (sm) {
font-size: rem(18px);
}
&::placeholder {
color: $color-gray;
opacity: 1;
}
}
button {
position: absolute;
:global(input::placeholder) {
color: rgba($color-tertiary, 0.6);
opacity: 1;
}
:global(button) {
position: absolute !important;
right: 16px;
top: 50%;
transform: translateY(-50%);

72
src/style/molecules/_pagination.scss Normal file
View File

@@ -0,0 +1,72 @@
// Pagination
.pagination {
position: relative;
display: block;
margin: auto 0;
cursor: pointer;
&[disabled] {
cursor: not-allowed;
}
// Progress
&__progress {
position: relative;
display: inline-block;
font-size: rem(88px);
color: rgba($color-text, 0.2);
font-family: $font-serif;
font-weight: 200;
line-height: 1;
letter-spacing: -0.05em;
transition: color 0.5s;
@include bp (sm) {
font-size: clamp(80px, 16vw, #{rem(160px)});
}
span {
display: inline-block;
margin: 0 -10px;
}
}
// Hover
&:not([disabled]):hover {
.pagination__progress {
color: rgba($color-text, 0.4);
}
}
// Label
:global(p) {
display: block;
margin: 16px auto 0;
text-align: center;
font-family: $font-sans;
text-transform: uppercase;
color: $color-text;
letter-spacing: 0.1em;
font-weight: 400;
font-size: rem(14px);
}
// More button
:global(.more) {
color: $color-secondary !important;
}
// Message
:global(.message) {
padding: clamp(96px, 24vw, 360px) 0 clamp(96px, 16vw, 280px);
text-align: center;
color: $color-text;
font-size: rem(24px);
font-weight: 200;
line-height: 1.4;
@include bp (sm) {
font-size: rem(28px);
}
}
}

28
src/style/molecules/_photo-card.scss
View File

@@ -1,9 +1,4 @@
.photo-card {
picture {
width: 100%;
height: 100%;
background: $color-primary-tertiary20;
}
& > * {
border-radius: 8px;
}
@@ -15,7 +10,12 @@
transition: transform 0.7s var(--ease-quart);
will-change: transform;
}
img {
:global(picture) {
width: 100%;
height: 100%;
background: $color-primary-tertiary20;
}
:global(img) {
display: block;
width: calc(100% + 2px);
height: calc(100% + 2px);
@@ -41,7 +41,7 @@
font-size: clamp(#{rem(12px)}, 1.2vw, #{rem(14px)});
}
picture {
:global(picture) {
width: 20px;
height: 20px;
margin-right: 12px;
@@ -54,18 +54,18 @@
margin-right: 16px;
}
img {
:global(img) {
display: block;
width: 100%;
height: 100%;
}
}
p {
:global(p) {
max-width: min(80%, 300px);
line-height: 1.4;
}
& > * {
& > :global(*) {
opacity: 0;
transform: translate3d(0, 8px, 0);
transition: opacity 0.7s var(--ease-quart), transform 0.8s var(--ease-quart);
@@ -97,15 +97,15 @@
a:hover {
transform: scale(1.0375) rotate(2deg) translateZ(0);
.photo-card__info {
& > * {
:global(.photo-card__info) {
:global(*) {
opacity: 1;
transform: translate3d(0,0,0);
}
picture {
:global(picture) {
transition-delay: 100ms;
}
p {
:global(p) {
transition-delay: 180ms;
}
}

6
src/style/molecules/_poster.scss
View File

@@ -15,7 +15,7 @@
}
// Poster image
img {
:global(img) {
pointer-events: auto;
position: relative;
z-index: 2;
@@ -49,7 +49,7 @@
transition: transform 0.8s var(--ease-quart);
}
& > * {
& > :global(*) {
background: none;
font-size: rem(14px);
font-weight: 300;
@@ -88,7 +88,7 @@
// Hover effect
&:hover {
img {
:global(img) {
@include bp (md) {
transform: scale(0.8) translate3d(0, -5%, 0);
border-radius: 8px;

2
src/style/molecules/_switcher.scss
View File

@@ -51,7 +51,7 @@
background: rgba($color-tertiary, 0.2);
}
}
.icon {
:global(.icon) {
display: block;
width: 32px;
height: 32px;