rayelliott
/
marc-leopold
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

form styling

This commit is contained in:
ManjaroOne666 2019-01-27 18:26:13 +00:00
parent 60159f2276
commit 2504f479cc
4 changed files with 127 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
TODO.md
View File

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

17
assets/scss/_buefy.scss
View File

@ -2,7 +2,24 @@ $link: $color__primary-500;
$link-hover: $color__primary-700; $link-hover: $color__primary-700;
$primary: #f00; $primary: #f00;
$white: $color__neutral-900;
$danger: $color__accent-danger-300;
$success: $color__accent-success-300;
@import "~bulma/sass/utilities/_all.sass"; @import "~bulma/sass/utilities/_all.sass";
@import "~bulma/bulma.sass"; @import "~bulma/bulma.sass";
@import "~buefy/src/scss/buefy"; @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;
}

1
components/ContentPage.vue
View File

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

134
pages/contact.vue
View File

@ -1,49 +1,73 @@
<template> <template>
<ContentPage heading="The Contact Page Heading"> <ContentPage heading="Contact Me">
<b-field label="Name"> <form class="contact-form">
<b-input v-model.trim="form.name" <div class="form-content">
placeholder="Your name ..."> <b-field label="Name"
</b-input> :type="attemptedSubmit && form.name.length < 1 ? 'is-danger' : ''"
</b-field> :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"
<b-input v-model="form.email" :type="attemptedSubmit && form.email.length < 1 ? 'is-danger' : ''"
type="email" :message="attemptedSubmit && form.email.length < 1 ? 'Please include your email address.' : ''"
placeholder="Your email ..."> >
</b-input> <b-input v-model="form.email"
</b-field> type="email"
placeholder="Your email ...">
</b-input>
</b-field>
<b-field label="Subject"> <b-field label="Subject">
<b-input v-model="form.subject" <b-input v-model="form.subject"
placeholder="Your subject ..."> placeholder="Your subject ...">
</b-input> </b-input>
</b-field> </b-field>
<b-field label="Message"> <b-field label="Message"
<b-input v-model="form.message" :type="attemptedSubmit && form.message.length < 1 ? 'is-danger' : ''"
placeholder="Your message ..." :message="attemptedSubmit && form.message.length < 1 ? 'Please include a message.' : ''"
type="textarea"> >
</b-input> <b-input v-model="form.message"
</b-field> placeholder="Your message ..."
type="textarea">
</b-input>
</b-field>
<button class="button is-success is-outlined" <button class="btn-submit"
@click.prevent="onSubmit" type="button"
:disabled="isDisabled"> @click.prevent="onSubmit"
Send :disabled="isDisabled">
</button> 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> </ContentPage>
</template> </template>
<script> <script>
import ContentPage from '@/components/ContentPage' import ContentPage from '@/components/ContentPage'
import { required, email } from 'vuelidate/lib/validators' import { required, email } from 'vuelidate/lib/validators'
import BackgroundImageLoader from '@/components/BackgroundImageLoader'
export default { export default {
name: 'HomePage', name: 'HomePage',
components: { components: {
ContentPage ContentPage,
BackgroundImageLoader,
}, },
data() { data() {
@ -104,5 +128,57 @@ export default {
</script> </script>
<style scoped lang="scss"> <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> </style>