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

Add a newsletter subscription form below locations
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source 
- One component used below Locations list and in the Pagination when all photos has been loaded
- Keep the subscribe page with the column display
This commit is contained in:
Félix Péault
2020-05-06 23:06:26 +02:00
parent 2bb568865c
commit 720ca69902
16 changed files with 228 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/style/_variables.scss
View File

@@ -1,5 +1,6 @@
// Colors
$color-primary: #3C0576;
$color-primary-dark: #36046A;
$color-primary-darker: #2D0458;
$color-secondary: #FF6C89;
$color-secondary-light: #FFB3C2;

40
src/style/atoms/_inputs.scss Normal file
View File

@@ -0,0 +1,40 @@
// Text input
.input__text {
position: relative;
display: block;
width: 100%;
height: 48px;
padding: 0 24px;
color: #fff;
font-size: rem(16px);
font-family: $font-sans-light;
border: 2px solid rgba($color-secondary, 0.6);
border-radius: 50vh;
transition: border 300ms $ease-quart;
background: none;
outline: none;
@include breakpoint (sm) {
font-size: rem(18px);
height: 64px;
padding: 0 32px;
}
// States
&::placeholder {
color: #fff;
opacity: 0.75;
transition: all 300ms $ease-quart;
}
&:focus {
@extend %input__text--active;
}
}
%input__text--active {
border-color: $color-secondary;
&::placeholder {
opacity: 1;
}
}

1
src/style/layouts/_explore.scss
View File

@@ -21,6 +21,5 @@
position: relative;
z-index: 3;
margin-top: 72px;
margin-bottom: 72px;
}
}

44
src/style/molecules/_form.scss
View File

@@ -36,8 +36,9 @@
/*
** Light version
** Variants
*/
// Light version
&--light {
// Text input
.input__text {
@@ -46,45 +47,4 @@
}
}
}
}
// Text input
.input__text {
position: relative;
display: block;
width: 100%;
height: 48px;
padding: 0 24px;
color: #fff;
font-size: rem(16px);
font-family: $font-sans-light;
border: 2px solid rgba($color-secondary, 0.6);
border-radius: 50vh;
transition: border 300ms $ease-quart;
background: none;
outline: none;
@include breakpoint (sm) {
font-size: rem(18px);
height: 64px;
padding: 0 32px;
}
// States
&::placeholder {
color: #fff;
opacity: 0.75;
transition: all 300ms $ease-quart;
}
&:focus {
@extend %input__text--active;
}
}
%input__text--active {
border-color: $color-secondary;
&::placeholder {
opacity: 1;
}
}

99
src/style/molecules/_newsletter.scss
View File

@@ -1,58 +1,109 @@
// Newsletter
.newsletter {
max-width: 360px;
margin: 0 auto;
text-align: center;
background-color: $color-primary-dark;
padding: 56px 0;
@include breakpoint (sm) {
max-width: 444px;
padding: 96px 0;
}
.wrapper {
@include breakpoint (md) {
display: flex;
justify-content: space-between;
}
}
// Title
h2 {
margin-bottom: 40px;
color: $color-secondary;
}
// Text
&__text {
margin-bottom: 72px;
max-width: 400px;
margin: 0 auto 32px;
@include breakpoint (sm) {
margin-bottom: 96px;
margin-bottom: 40px;
}
@include breakpoint (md) {
margin-left: 0;
margin-right: 48px;
margin-bottom: 0;
text-align: left;
}
h2 {
margin-bottom: 16px;
@include breakpoint (md) {
text-align: left;
}
}
}
// Form
.form {
min-width: 270px;
max-width: 320px;
margin: 0 auto;
}
@include breakpoint (md) {
min-width: 320px;
max-width: 440px;
margin: 48px 0 0;
}
// Notice
&__notice {
margin-top: 32px;
}
/*
** Small version
*/
&--small {
.newsletter__text {
max-width: 344px;
margin-bottom: 32px;
// Title (if existing)
h2 {
margin-bottom: 24px;
@include breakpoint (sm) {
margin-bottom: 48px;
margin-bottom: 40px;
}
}
}
// Notice
&__notice {
margin-top: 16px;
text-align: center;
}
/*
** Light version
** Variants
*/
// Centered column mode
&--column {
max-width: 360px;
margin: 0 auto;
padding: 0;
background: none;
@include breakpoint (sm) {
max-width: 444px;
}
// Text
.newsletter__text {
max-width: 440px;
margin: 0 0 48px;
text-align: center;
@include breakpoint (sm) {
margin-bottom: 72px;
}
@include breakpoint (md) {
margin-bottom: 96px;
}
}
}
// Light version
&--light {
background: none;
.newsletter__notice {
p {
color: rgba($color-text, 0.5);

4
src/style/organisms/_footer.scss
View File

@@ -61,6 +61,10 @@
li {
margin-right: 20px;
&:last-child {
margin-right: 0;
}
}
a {
display: block;

6
src/style/organisms/_locations.scss
View File

@@ -1,10 +1,10 @@
.browse {
width: 100%;
overflow: hidden;
margin-bottom: 56px;
@include breakpoint (sm) {
margin-top: 120px;
margin-bottom: 52px;
}
// Description
@@ -50,7 +50,7 @@
grid-row-gap: pxVW(96);
min-height: 200px;
margin-top: 112px;
margin-bottom: pxVW(120);
margin-bottom: pxVW(72);
}
@include breakpoint (xl) {
grid-column-gap: 96px;
@@ -58,7 +58,7 @@
max-width: 1024px;
margin-left: auto;
margin-right: auto;
margin-bottom: 184px;
margin-bottom: 72px;
// To apply when having 4 locations:
// grid-template-columns: repeat(4, 1fr);

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

@@ -99,16 +99,23 @@
// Message
&__message {
h3 {
font-family: $font-serif;
font-size: rem(32px);
color: $color-secondary;
margin-bottom: 16px;
// Newsletter
.newsletter {
margin: 0;
padding: 0;
@include breakpoint (sm) {
margin-bottom: 24px;
font-size: rem(40px);
padding: 24px 0 0;
}
// Title
h2 {
font-size: rem(32px);
@include breakpoint (md) {
font-size: rem(40px);
}
}
}
}
}
}

10
src/style/organisms/_photos.scss
View File

@@ -74,6 +74,10 @@
@include breakpoint (sm) {
padding-bottom: 120px;
&:last-child {
padding-bottom: 0;
}
}
// Even photos
@@ -129,14 +133,16 @@
margin-top: 24px;
@include breakpoint (sm) {
margin-top: -184px;
padding-top: pxVW(224);
margin-top: -64px;
padding-top: pxVW(240);
padding-bottom: pxVW(120);
}
@include breakpoint (md) {
padding-top: pxVW(200);
}
@include breakpoint (xl) {
padding-top: 200px;
padding-bottom: 120px;
}
}
}

1
src/style/style.scss
View File

@@ -23,6 +23,7 @@
@import "atoms/switcher";
@import "atoms/counter";
@import "atoms/badge";
@import "atoms/inputs";
// Molecules
@import "molecules/location";