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

Make newsletter form a reusable component

Browse Source
This commit is contained in:
Shelby Kay
2021-10-16 13:24:16 +02:00
parent e9e838ae1a
commit 8b07352431
7 changed files with 197 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
src/style/molecules/_newsletter-form.scss Normal file
View File

@@ -0,0 +1,107 @@
// Email Form
.newsletter-form {
&__email {
position: relative;
width: 100%;
max-width: 600px;
height: 56px;
margin-bottom: 20px;
padding: 0 24px;
border-radius: 100vh;
box-shadow: inset 0 0 0 2px $color-secondary;
transition: box-shadow 0.6s var(--ease-quart);
@include bp (sm) {
height: 64px;
padding: 0 30px;
}
input {
display: block;
width: 100%;
height: 100%;
font-size: rem(16px);
font-family: $font-sans;
font-weight: 300;
color: #333;
background: none;
border: none;
@include bp (sm) {
font-size: rem(18px);
}
&::placeholder {
color: $color-gray;
opacity: 1;
}
}
button {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
margin-left: 32px;
background-color: $color-secondary;
height: 32px;
width: 32px;
flex-shrink: 0;
border-radius: 100vh;
}
// States
&.is-focused {
box-shadow: inset 0 0 0 4px $color-secondary;
}
}
// Bottom details
&__bottom {
display: block;
text-align: center;
font-size: rem(14px);
max-width: 600px;
@include bp (sm) {
display: flex;
justify-content: center;
font-size: rem(16px);
}
.past-issues {
display: inline-flex;
align-items: center;
margin: 0 auto auto 0;
text-decoration: none;
color: $color-text;
span {
display: block;
padding-bottom: 2px;
font-size: rem(14px);
color: $color-text;
margin-left: 8px;
border-bottom: 1px solid $color-text;
@include bp (sm) {
margin-left: 12px;
padding-bottom: 0;
font-size: rem(16px);
}
}
}
p {
color: $color-gray;
line-height: 1.3;
margin-top: 16px;
margin-bottom: 0;
@include bp (sm) {
margin-top: 0;
}
}
}
}

100
src/style/organisms/_newsletter.scss
View File

@@ -35,106 +35,6 @@
}
}
// Form
&__email {
position: relative;
display: flex;
width: 100%;
max-width: 600px;
height: 64px;
margin-bottom: 20px;
padding: 0 30px;
border-radius: 100vh;
box-shadow: inset 0 0 0 2px $color-secondary;
transition: box-shadow 0.6s var(--ease-quart);
input {
display: block;
width: 100%;
font-size: rem(18px);
font-family: $font-sans;
font-weight: 300;
color: #333;
background: none;
border: none;
&::placeholder {
color: $color-gray;
opacity: 1;
}
}
button {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
margin-left: 32px;
background-color: $color-secondary;
height: 32px;
width: 32px;
flex-shrink: 0;
border-radius: 100vh;
}
// States
&.is-focused {
box-shadow: inset 0 0 0 4px $color-secondary;
}
}
// Past Issues
.past-issues {
display: block;
text-align: center;
font-size: rem(14px);
max-width: 600px;
@include bp (sm) {
display: flex;
justify-content: space-between;
font-size: rem(16px);
}
a {
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
color: $color-text;
@include bp (sm) {
justify-content: start;
}
}
span {
display: block;
padding-bottom: 2px;
font-size: rem(14px);
color: $color-text;
margin-left: 8px;
border-bottom: 1px solid $color-text;
@include bp (sm) {
margin-left: 12px;
padding-bottom: 0;
font-size: rem(16px);
}
}
p {
color: $color-gray;
line-height: 1.3;
margin-top: 16px;
margin-bottom: 0;
@include bp (sm) {
margin-top: 0;
}
}
}
// Variants
// Default color
&--default {

36
src/style/pages/_subscribe.scss
View File

@@ -12,6 +12,34 @@
}
}
// Email Form
.newsletter-form {
margin: 42px auto 70px;
padding: 0 20px;
max-width: max(432px, 70%);
@include bp (sm) {
max-width: 560px;
margin-top: 0;
margin-bottom: 120px;
}
&__email {
input {
color: #fff;
&::placeholder {
color: rgba($color-tertiary, 0.6);
}
}
}
&__bottom {
p {
color: rgba($color-tertiary, 0.6);
}
}
}
// Past Issues
&__issues {
margin: 64px auto 0;
@@ -46,4 +74,12 @@
}
}
}
.globe--cropped {
margin-top: 96px;
@include bp (sm) {
margin-top: 156px;
}
}
}

1
src/style/style.scss
View File

@@ -47,6 +47,7 @@
@import "molecules/switcher";
@import "molecules/heading";
@import "molecules/issue";
@import "molecules/newsletter-form";
// Organisms
@import "organisms/locations";