form styling

TODO.md

@@ -6,6 +6,10 @@
 ## Menu
 * Proper background images for hover effect
 
+## contact
+* social icons at bottom right of form
+* form background image
+
 ## General
 * loading transitions
 * nav buttons

assets/scss/_buefy.scss

@@ -2,7 +2,24 @@ $link: $color__primary-500;
 $link-hover: $color__primary-700;
 
 $primary: #f00;
+$white: $color__neutral-900;
+$danger: $color__accent-danger-300;
+$success: $color__accent-success-300;
 
 @import "~bulma/sass/utilities/_all.sass";
 @import "~bulma/bulma.sass";
 @import "~buefy/src/scss/buefy";
+
+.label {
+  color: $color__neutral-700;
+  @include font-title(600);
+}
+
+.input, .textarea {
+  font-weight: 600;
+}
+
+.help {
+  font-weight: 600;
+  font-size: .8em;
+}

components/ContentPage.vue

@@ -72,6 +72,7 @@ $z-index-top: 10;
 .content {
   position: absolute;
   width: 100%;
+  min-height: 100%;
   top: 0;
   right: 0;
 

pages/contact.vue

@@ -1,13 +1,22 @@
 <template>
-  <ContentPage heading="The Contact Page Heading">
+  <ContentPage heading="Contact Me">
 
-    <b-field label="Name">
+    <form class="contact-form">
+      <div class="form-content">
+        <b-field label="Name"
+                 :type="attemptedSubmit && form.name.length < 1 ? 'is-danger' : ''"
+                 :message="attemptedSubmit && form.name.length < 1 ? 'Please include your name.' : ''"
+        >
           <b-input v-model.trim="form.name"
+                   @input="$v.form.name.$touch()"
                    placeholder="Your name ...">
           </b-input>
         </b-field>
 
-    <b-field label="Email">
+        <b-field label="Email"
+                 :type="attemptedSubmit && form.email.length < 1 ? 'is-danger' : ''"
+                 :message="attemptedSubmit && form.email.length < 1 ? 'Please include your email address.' : ''"
+        >
           <b-input v-model="form.email"
                    type="email"
                    placeholder="Your email ...">
@@ -20,30 +29,45 @@
           </b-input>
         </b-field>
 
-    <b-field label="Message">
+        <b-field label="Message"
+                 :type="attemptedSubmit && form.message.length < 1 ? 'is-danger' : ''"
+                 :message="attemptedSubmit && form.message.length < 1 ? 'Please include a message.' : ''"
+        >
           <b-input v-model="form.message"
                    placeholder="Your message ..."
                    type="textarea">
           </b-input>
         </b-field>
 
-    <button class="button is-success is-outlined"
+        <button class="btn-submit"
+                type="button"
                 @click.prevent="onSubmit"
                 :disabled="isDisabled">
           Send
         </button>
+      </div>
+    </form>
+
+    <BackgroundImageLoader slot="background"
+                           class="background"
+                           image-url="https://via.placeholder.com/1920x1080"
+    >
+      <div slot="overlay" class="background-tint background-overlay"></div>
+    </BackgroundImageLoader>
   </ContentPage>
 </template>
 
 <script>
 import ContentPage from '@/components/ContentPage'
 import { required, email } from 'vuelidate/lib/validators'
+import BackgroundImageLoader from '@/components/BackgroundImageLoader'
 
 export default {
   name: 'HomePage',
 
   components: {
-    ContentPage
+    ContentPage,
+    BackgroundImageLoader,
   },
 
   data() {
@@ -104,5 +128,57 @@ export default {
 </script>
 
 <style scoped lang="scss">
+
+.contact-form {
+  padding: 1rem 1rem 2rem;
+  border-radius: 2px;
+  background-color: rgba(#fff, .95);
+  background: linear-gradient(
+                to bottom right,
+                rgba(#fff, .9),
+                rgba($color__neutral-800, .9)
+              ),
+              url(https://via.placeholder.com/800x800);
+  background-size: cover;
+  background-position: center center;
+  
+  @media (min-width: $bp__layout) {
+    padding: 2rem;
+  }
+}
+
+.form-content {
+  max-width: 30em;
+  margin: 0 auto;
+}
+
+.background-overlay {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+
+.btn-submit {
+  font-size: 1.2em;
+  border: 2px solid $color__neutral-300;
+  padding: .2em .8em;
+  @include font-title(600);
+  color: $color__neutral-500;
+  cursor: pointer;
+
+  transition: opacity .3s;
+  opacity: .7;
+
+  &:hover {
+    opacity: 1;
+  }
+
+  &:disabled {
+    opacity: .1;
+    cursor: auto;
+  }
+}
 </style>