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

chore: merge components and stylesheets in same directory name

Browse Source
This commit is contained in:
Félix Péault
2024-07-24 10:59:34 +02:00
parent a9d937a2b5
commit cb7d83978d
92 changed files with 533 additions and 531 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
apps/website/src/components/atoms/Badge.svelte
View File

@@ -1,5 +1,25 @@
<style lang="scss">
@import "../../style/atoms/badge";
.badge {
display: flex;
align-items: center;
justify-content: center;
min-height: 16px;
margin: 0 auto;
padding: 0 6px;
text-align: center;
background: $color-secondary-light;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1px;
line-height: 1;
color: $color-primary-darker;
border-radius: 100vh;
// Small size
&--small {
font-size: rem(7px);
}
}
</style>
<script lang="ts">

63
apps/website/src/components/atoms/BoxCTA/BoxCTA.scss Normal file
View File

@@ -0,0 +1,63 @@
.box-cta {
display: flex;
align-items: center;
margin: 0 auto;
width: 260px;
height: 88px;
padding: 24px 32px 24px 48px;
background-color: $color-primary-tertiary20;
border-radius: 12px;
text-decoration: none;
box-shadow: none;
transition: background-color 0.8s var(--ease-quart), box-shadow 1.0s var(--ease-quart);
@include bp (sm) {
flex-direction: column;
width: 144px;
height: 176px;
padding: 24px 16px;
}
:global(.icon) {
width: 36px;
height: 36px;
color: #fff;
flex-shrink: 0;
transition: transform 0.6s var(--ease-quart);
@include bp (sm) {
margin: auto 0;
width: 48px;
height: 48px;
}
:global(svg) {
display: block;
width: 100%;
height: 100%;
}
}
span {
display: block;
margin-left: 20px;
color: $color-secondary-light;
text-align: left;
font-weight: 300;
@include bp (sm) {
margin-left: 0;
text-align: center;
}
}
// Hover
&:hover {
$shadow-color: rgba(0, 0, 0, 0.05);
background-color: #8f3d7b;
box-shadow: 0 6px 6px $shadow-color, 0 12px 12px $shadow-color, 0 24px 24px $shadow-color;
.icon {
transform: translate3d(0, -3px, 0);
}
}
}

2
apps/website/src/components/atoms/BoxCTA.svelte → apps/website/src/components/atoms/BoxCTA/BoxCTA.svelte
View File

@@ -1,5 +1,5 @@
<style lang="scss">
@import "../../style/atoms/box-cta";
@import "./BoxCTA";
</style>
<script lang="ts">

159
apps/website/src/components/atoms/Button/Button.scss Normal file
View File

@@ -0,0 +1,159 @@
.button {
display: inline-flex;
align-items: center;
background: #fff;
font-weight: 900;
line-height: 1;
font-family: $font-sans;
color: $color-text;
cursor: pointer;
border-radius: 100vh;
border: none;
text-decoration: none;
transition: background-color 0.55s var(--ease-quart), color 0.55s var(--ease-quart);
// Icon
:global(img), :global(svg) {
display: block;
color: $color-gray;
transition: color 0.3s;
}
// Hover effect
&:not([disabled]):hover {
background: $color-secondary;
:global(svg) {
color: #fff;
}
}
:global(.text-split__line) {
&:last-child {
--offset-y: 65%;
color: #fff;
}
}
/*
** Size variants
*/
// XSmall
&--xsmall {
height: 32px;
padding: 0 12px;
@include bp (md) {
height: 32px;
padding: 0 16px;
font-size: rem(14px);
}
}
// Small
&--small {
height: 40px;
padding: 0 16px;
font-size: rem(16px);
@include bp (md) {
height: 40px;
padding: 0 16px;
}
}
// Medium
&--medium {
height: 40px;
padding: 0 16px;
font-size: rem(16px);
@include bp (md) {
height: 48px;
font-size: rem(18px);
}
}
// Large
&--large {
height: 56px;
font-size: rem(16px);
@include bp (md) {
height: 72px;
height: 72px;
padding: 0 40px;
font-size: rem(18px);
}
}
/*
** Color Variants
*/
// Pink Light
&--pinklight {
color: $color-text;
background: $color-secondary-light;
// Hover
&:not([disabled]):hover {
color: #fff;
background: $color-secondary;
}
:global(.text-split__line) {
&:last-child {
color: #fff;
}
}
}
// Pink
&--pink {
color: #fff;
background: $color-secondary;
// Hover
&:not([disabled]):hover {
color: $color-text;
background-color: darken($color-secondary, 7);
}
}
// Beige
&--beige {
$color-button: #F2D3B8;
color: $color-text;
background: $color-button;
&[disabled] {
background: none;
border: 2px solid darken($color-button, 2);
}
// Hover
:global(.text-split__line) {
&:last-child {
color: $color-primary-tertiary20;
}
}
&:not([disabled]):hover {
background: darken($color-button, 2.5);
}
}
/*
** Icons variants
*/
&.has-icon-before {
:global(img), :global(svg) {
margin-right: 12px;
}
}
&.has-icon-after {
:global(img), :global(svg) {
margin-left: 12px;
}
}
}

2
apps/website/src/components/atoms/Button.svelte → apps/website/src/components/atoms/Button/Button.svelte
View File

@@ -1,5 +1,5 @@
<style lang="scss">
@import "../../style/atoms/button";
@import "./Button";
</style>
<script lang="ts">

49
apps/website/src/components/atoms/ButtonCart/ButtonCart.scss Normal file
View File

@@ -0,0 +1,49 @@
.button-cart {
position: relative;
pointer-events: auto;
@include bp (sm) {
display: flex;
margin-left: auto;
}
:global(button) {
overflow: visible;
padding: 0;
}
// Icon
:global(svg) {
display: block;
width: min(65%, 22px);
height: min(65%, 22px);
margin-top: -3px;
color: #fff;
}
// Quantity label
.quantity {
position: absolute;
z-index: 2;
top: 0;
left: 0;
transform: translateX(-33%);
display: flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
font-size: rem(11px);
font-weight: 600;
color: #fff;
background-color: $color-secondary;
border-radius: 100%;
opacity: 1;
@include bp (md) {
width: 22px;
height: 22px;
font-size: rem(12px);
}
}
}

4
apps/website/src/components/atoms/ButtonCart.svelte → apps/website/src/components/atoms/ButtonCart/ButtonCart.svelte
View File

@@ -1,5 +1,5 @@
<style lang="scss">
@import "../../style/atoms/button-cart";
@import "./ButtonCart";
</style>
<script lang="ts">
@@ -9,7 +9,7 @@
import { sendEvent } from '$utils/analytics'
// Components
import Icon from '$components/atoms/Icon.svelte'
import ButtonCircle from '$components/atoms/ButtonCircle.svelte'
import ButtonCircle from '$components/atoms/ButtonCircle/ButtonCircle.svelte'
const openCart = () => {
$cartOpen = true

127
apps/website/src/components/atoms/ButtonCircle/ButtonCircle.scss Normal file
View File

@@ -0,0 +1,127 @@
.button-circle {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
background: #fff;
border-radius: 100vh;
transition: background-color 0.8s var(--ease-quart);
@include bp (md) {
width: 56px;
height: 56px;
}
& > :global(*) {
width: 22px;
height: 22px;
object-fit: contain;
width: clamp(16px, 50%, 24px);
height: clamp(16px, 50%, 24px);
transform-origin: center center;
transition: opacity 0.7s var(--ease-quart), transform 0.7s var(--ease-quart);
// Last clone
&:nth-child(2) {
position: absolute;
z-index: 1;
top: 50%;
left: 50%;
opacity: 0;
transform: translate3d(-150%, -50%, 0);
}
}
/*
** States
*/
// Hover
&.has-clone:not([disabled]):hover {
& > :global(*) {
&:first-child {
opacity: 0;
transform: scale(0.75) translate3d(20%, 0, 0);
}
&:last-child {
opacity: 1;
transform: translate3d(-50%, -50%, 0);
}
}
}
// Disabled
&[disabled] {
background: $color-primary;
border: 3px solid rgba(#fff, 0.2);
:global(svg) {
color: $color-primary-tertiary20;
}
}
/*
** Variants
*/
// Tiny size
&--tiny {
height: 24px !important;
width: 24px !important;
:global(img), :global(svg) {
width: 8px;
height: 8px;
object-fit: contain;
}
}
// Small size
&--small {
height: 32px !important;
width: 32px !important;
:global(img), :global(svg) {
width: 16px;
height: 16px;
object-fit: contain;
}
}
// Pink color
&--pink {
background: $color-secondary;
&:hover {
background: darken($color-secondary, 7);
}
}
// Purple color
&--purple {
color: #fff;
background: $color-primary-tertiary20;
&:hover {
background: $color-lightpurple;
}
}
// Gray color
&--gray {
background: #F2F2F2;
&:hover {
background: #D2D2D2;
}
}
// Gray color
&--gray-medium {
background: $color-gray;
}
}

2
apps/website/src/components/atoms/ButtonCircle.svelte → apps/website/src/components/atoms/ButtonCircle/ButtonCircle.svelte
View File

@@ -1,5 +1,5 @@
<style lang="scss">
@import "../../style/atoms/button-circle";
@import "./ButtonCircle";
</style>
<script lang="ts">

21
apps/website/src/components/atoms/DiscoverText.svelte
View File

@@ -1,5 +1,24 @@
<style lang="scss">
@import "../../style/atoms/discover";
.discover {
padding: 0 20px;
font-family: $font-sans;
font-size: rem(24px);
font-weight: 200;
line-height: 1.5;
color: $color-tertiary;
@include bp (sm) {
font-size: rem(28px);
}
@include bp (md) {
font-size: rem(32px);
}
strong {
color: $color-secondary;
font-weight: 200;
}
}
</style>
<script lang="ts">

17
apps/website/src/components/atoms/IconArrow.svelte
View File

@@ -1,5 +1,20 @@
<style lang="scss">
@import "../../style/atoms/arrow";
.arrow {
display: block;
// Colors
&--white {
color: #fff;
}
&--pink {
color: $color-secondary;
}
// Variants
&--flip {
transform: rotate(180deg);
}
}
</style>
<script lang="ts">

76
apps/website/src/components/atoms/SiteTitle/SiteTitle.scss Normal file
View File

@@ -0,0 +1,76 @@
.site-title {
font-family: $font-serif;
:global(.middle) {
position: relative;
top: -4px;
font-weight: 600;
color: $color-lightpurple;
text-transform: uppercase;
letter-spacing: 1px;
}
/*
** Variants
*/
// Default: Two lines
&--lines {
line-height: clamp(100%, 1.5vw, 100%);
font-size: rem(30px);
@include bp (sm) {
font-size: clamp(#{rem(20px)}, 2.5vw, #{rem(30px)});
}
:global(.word-1) {
display: block;
color: $color-lilas-bright;
}
:global(.word-2) {
font-size: 0.45em;
}
:global(.word-3) {
display: inline-block;
margin-left: -0.023em;
color: $color-secondary;
}
:global(span) {
transition: color 0.25s;
}
}
// Inline Variant
&--inline {
display: block;
align-items: baseline;
color: $color-secondary;
justify-content: center;
font-size: rem(52px);
@include bp (mob-lg) {
font-size: rem(64px);
}
@include bp (sm) {
display: flex;
}
@include bp (sd) {
font-size: rem(96px);
}
:global(.middle) {
top: 0;
margin: 10px 0;
font-size: 0.3125em;
@include bp (sm) {
font-size: 0.333em;
margin: 0 10px 0 20px;
}
}
:global(.char) {
transition: none;
}
}
}

2
apps/website/src/components/atoms/SiteTitle.svelte → apps/website/src/components/atoms/SiteTitle/SiteTitle.svelte
View File

@@ -1,5 +1,5 @@
<style lang="scss">
@import "../../style/atoms/site-title";
@import "./SiteTitle";
</style>
<script lang="ts">