form styling
This commit is contained in:
ManjaroOne666
parent
60159f2276
commit
2504f479cc
4
TODO.md
4
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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -72,6 +72,7 @@ $z-index-top: 10;
|
|||
.content {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,49 +1,73 @@
|
|||
<template>
|
||||
<ContentPage heading="The Contact Page Heading">
|
||||
<ContentPage heading="Contact Me">
|
||||
|
||||
<b-field label="Name">
|
||||
<b-input v-model.trim="form.name"
|
||||
placeholder="Your name ...">
|
||||
</b-input>
|
||||
</b-field>
|
||||
<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-input v-model="form.email"
|
||||
type="email"
|
||||
placeholder="Your email ...">
|
||||
</b-input>
|
||||
</b-field>
|
||||
<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 ...">
|
||||
</b-input>
|
||||
</b-field>
|
||||
|
||||
<b-field label="Subject">
|
||||
<b-input v-model="form.subject"
|
||||
placeholder="Your subject ...">
|
||||
</b-input>
|
||||
</b-field>
|
||||
<b-field label="Subject">
|
||||
<b-input v-model="form.subject"
|
||||
placeholder="Your subject ...">
|
||||
</b-input>
|
||||
</b-field>
|
||||
|
||||
<b-field label="Message">
|
||||
<b-input v-model="form.message"
|
||||
placeholder="Your message ..."
|
||||
type="textarea">
|
||||
</b-input>
|
||||
</b-field>
|
||||
<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"
|
||||
@click.prevent="onSubmit"
|
||||
:disabled="isDisabled">
|
||||
Send
|
||||
</button>
|
||||
<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>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue