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

Push ShopModule button to bottom if it has no bottom text

Browse Source
This commit is contained in:
Félix Péault
2022-08-11 23:05:27 +02:00
parent 4629e7e27e
commit d5ae25a87b
2 changed files with 23 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/organisms/ShopModule.svelte
View File

@@ -58,7 +58,7 @@
}) })
</script> </script>
<div class="shop shadow-box-dark"> <div class="shop shadow-box-dark" class:has-no-bottom={!textBottom}>
<div class="content"> <div class="content">
<div class="shop__images"> <div class="shop__images">
{#if images} {#if images}

23
src/style/organisms/_shop.scss
View File

@@ -75,7 +75,8 @@
border-radius: 12px; border-radius: 12px;
@include bp (sm) { @include bp (sm) {
padding: clamp(40px, 4.5vw, 64px) clamp(48px, 4.5vw, 72px) clamp(24px, 4.5vw, 40px) clamp(40px, 4.5vw, 64px); $vw: 4.5vw;
padding: clamp(40px, $vw, 64px) clamp(48px, $vw, 72px) clamp(24px, $vw, 40px) clamp(40px, $vw, 64px);
} }
:global(.button) { :global(.button) {
@@ -113,4 +114,24 @@
padding-top: 24px; padding-top: 24px;
} }
} }
/*
** Variants
*/
// No bottom text
&.has-no-bottom {
.shop__content {
@include bp (sm) {
$vw: 4.5vw;
padding: clamp(40px, $vw, 64px) clamp(48px, $vw, 72px) clamp(40px, $vw, 64px) clamp(40px, $vw, 64px);
}
:global(.button) {
@include bp (sm) {
margin-top: auto;
}
}
}
}
} }