Added in the main form styles

nmebrown · Jan 11, 2021 · 9f1a450 · 9f1a450
1 parent 08fd8bb
commit 9f1a450
Show file tree

Hide file tree

Showing 6 changed files with 189 additions and 23 deletions.
diff --git a/src/index.html b/src/index.html
@@ -13,7 +13,7 @@
     <link rel="preconnect" href="https://fonts.gstatic.com">
     <link rel="preconnect" href="https://code.jquery.com/">
 
-    <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,700;1,300&family=Roboto+Slab:wght@600&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400&family=Roboto+Slab:wght@600&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="styles/main.css">
     <meta name="theme-color" content="">
 </head>
@@ -30,21 +30,32 @@
         </header>
 
         <main role="main" class="main">
-            <h1>Connect with your MP</h1>
+            <section class="page-section page-section--header">
+                <h1>Connect with your MP</h1>
+                <p>Connect with your political representatives on issues that matter to you.</p>
+            </section>
 
             <section class="page-section page-section--form">
-                <form>
-                    <label for="first_name">First name</label>
-                    <input type="text" id="first_name" name="first_name">
-
-                    <label for="last_name">Last name</label>
-                    <input type="text" id="last_name" name="last_name">
-
-                    <label for="email">Email address</label>
-                    <input type="email" id="email" name="email">
-
-                    <label for="postal_code">Postal code</label>
-                    <input type="text" id="postal_code" name="postal_code">
+                <form class="form">
+                    <div class="form__item">
+                        <label for="first_name" class="form__label">First name</label>
+                        <input type="text" id="first_name" name="first_name" placeholder="Jane" class="form__input">
+                    </div>
+
+                    <div class="form__item">
+                        <label for="last_name" class="form__label">Last name</label>
+                        <input type="text" id="last_name" name="last_name" placeholder="Smith" class="form__input">
+                    </div>
+
+                    <div class="form__item">
+                        <label for="email" class="form__label">Email address</label>
+                        <input type="email" id="email" name="email" placeholder="jane.smith@example.com" class="form__input">
+                    </div>
+
+                    <div class="form__item">
+                        <label for="postal_code" class="form__label">Postal code</label>
+                        <input type="text" id="postal_code" name="postal_code" placeholder="K1A 0A6" class="form__input">
+                    </div>
 
                     <input type="submit" value="Connect" class="btn btn--primary">
                 </form>
@@ -57,7 +68,7 @@ <h1>Connect with your MP</h1>
         </main>
 
         <footer>
-            <p>Copyright 2021</p>
+            <small>Copyright 2021</small>
         </footer>
     </div>
 

diff --git a/src/styles/core/_forms.scss b/src/styles/core/_forms.scss
@@ -0,0 +1,117 @@
+// ----------------------------------------------------------------------------
+// Forms
+// ----------------------------------------------------------------------------
+//
+// Form field styling for base forms and common variants.
+//
+// ----------------------------------------------------------------------------
+
+// -------------------------------------
+// Default Elements
+// -------------------------------------
+form {
+    margin: 0;
+}
+
+a,
+area,
+button,
+[role='button'],
+input,
+label,
+select,
+summary,
+textarea {
+    touch-action: manipulation;
+}
+
+input,
+textarea,
+select {
+    border: 1px solid $light-grey;
+    appearance: none;
+    border-radius: 0;
+    max-width: 100%;
+    outline: none;
+    position: relative;
+
+    &[disabled] {
+        background-color: $background-color--disabled;
+        border-color: $text-color--disabled;
+        color: $text-color--disabled;
+        cursor: default;
+    }
+
+    // -------------------------------------
+    // Placeholders
+    // -------------------------------------
+    &::placeholder {
+        @include font-placeholder;
+    }
+
+    &:-moz-placeholder {
+        @include font-placeholder;
+    }
+
+    &:-ms-input-placeholder {
+        @include font-placeholder;
+    }
+
+    &::-ms-input-placeholder {
+        @include font-placeholder;
+    }
+
+    &::-webkit-input-placeholder {
+        @include font-placeholder;
+    }
+}
+
+button,
+input[type='submit'],
+label[for] {
+    cursor: pointer;
+}
+
+textarea {
+    min-height: 100px;
+}
+
+select::-ms-expand {
+    display: none;
+}
+
+// Force option color (affects IE only)
+option {
+    background-color: $background-color;
+    color: $text-color;
+}
+
+
+
+// -------------------------------------
+// Form Styles
+// -------------------------------------
+.form__item {
+    margin: ($site-gutter / 2) 0;
+}
+
+
+.form__label {
+    @include font-size(18);
+    display: block;
+    font-weight: 700;
+    margin: 0 0 ($paragraph-gutter / 2);
+}
+
+.form__input,
+.form__textarea {
+    @include font-size(16);
+    border-radius: 3px;
+    margin: 0 0 ($paragraph-gutter / 2);
+    padding: 10px 15px;
+    width: 100%;
+
+    &:focus {
+        border-color: $primary-color;
+    }
+}
diff --git a/src/styles/core/_grid.scss b/src/styles/core/_grid.scss
@@ -9,7 +9,7 @@
     @supports (display:grid) {
         display: grid;
         grid-template-columns: [full-start] minmax((#{$site-gutter} / 2), 1fr) [main-start] minmax(0, #{$site-width}) [main-end] minmax((#{$site-gutter} / 2), 1fr) [full-end];
-        grid-template-rows: 1fr 2fr 1fr;
+        grid-template-rows: minmax(auto, 200px) 1fr minmax(auto, 200px);
         max-width: initial;
         width: 100%;
     }
@@ -25,6 +25,7 @@
 }
 
 
+// -------------------------------------
 // Container
 // -------------------------------------
 @mixin container {
@@ -49,9 +50,34 @@
 
 // Page section default styles
 .page-section {
-    padding: $site-gutter 0;
+    padding: $site-gutter;
 
     @include bp(laptop) {
-        padding: ($site-gutter * 2) 0;
+        padding: ($site-gutter * 2);
     }
 }
+
+.page-section--header {
+    padding-bottom: 0;
+}
+
+
+
+// -------------------------------------
+// Theme styles
+// -------------------------------------
+body {
+    background-color: $background-color--site;
+}
+
+header {
+    align-self: end;
+}
+
+main {
+    background-color: $background-color;
+}
+
+footer {
+    align-self: start;
+}
diff --git a/src/styles/core/_typography.scss b/src/styles/core/_typography.scss
@@ -37,7 +37,13 @@ $font--header: 'Roboto Slab', Georgia, serif;
     line-height: 1.2;
 }
 
-
+// Placeholder text mixin
+@mixin font-placeholder {
+    @include font-default;
+    @include font-size(16);
+    @include line-height(24);
+    color: rgba($text-color, .5);
+}
 
 // -------------------------------------
 // Base Styles

diff --git a/src/styles/main.scss b/src/styles/main.scss
@@ -12,6 +12,6 @@
 // Core
 @import './core/grid';
 @import './core/typography';
-// @import './core/forms';
+@import './core/forms';
 // @import './core/button/button';
 // @import './core/button/button--text';
diff --git a/src/styles/tools/_variables.scss b/src/styles/tools/_variables.scss
@@ -16,15 +16,21 @@
 // Universal Colors
 $black: #000;
 $grey: #999;
+$light-grey: #eee;
 $white: #fff;
 
 // Theme Colors
 $primary-color: $black;
 $secondary-color: $white;
 
 $text-color: $black;
-$text-color-contrast: $white;
-$text-color-disabled: $grey;
+$text-color--contrast: $white;
+$text-color--disabled: $grey;
+
+$background-color: $white;
+$background-color--site: $light-grey;
+$background-color--contrast: $black;
+$background-color--disabled: $light-grey;
 
 
 // -------------------------------------
@@ -41,6 +47,6 @@ $site-width: 1440px !default;
 // -------------------------------------
 // Spacing
 // -------------------------------------
-$site-gutter: 20px;
+$site-gutter: 40px;
 $section-gutter: ($site-gutter * 2) $site-gutter; // for padding value
 $paragraph-gutter: 0 0 20px !default; // for margin value