Make newsletter form a reusable component

2021-10-16 13:24:16 +02:00
parent e9e838ae1a
commit 8b07352431
7 changed files with 197 additions and 132 deletions
--- a/src/style/molecules/_newsletter-form.scss
+++ b/src/style/molecules/_newsletter-form.scss
@@ -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;
+            }
+        }
+    }
+}