Add Newsletter Component and Page
All checks were successful
continuous-integration/drone/push Build is passing

- Newsletter form on Subscribe page and at the end of the photos
This commit is contained in:
2020-04-28 22:10:29 +02:00
parent 955de7d1e4
commit 6fe4df4189
22 changed files with 478 additions and 137 deletions

View File

@@ -0,0 +1,89 @@
// Form
.form {
label {
cursor: pointer;
}
// Group item
// &__group {
// }
// Input group
&__inputgroup {
position: relative;
button {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
width: 32px;
height: 32px;
@include breakpoint (sm) {
right: 20px;
}
}
// Hover
&:hover {
.input__text {
@extend %input__text--active;
}
}
}
/*
** Light version
*/
&--light {
// Text input
.input__text {
&, &::placeholder {
color: $color-text;
}
}
}
}
// 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;
}
}