Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 | <template>
<div class="d-flex flex-column">
<p class="title">NEWSLETTER</p>
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut</p>
<form-comp
:formSpecs="{
fields: getFields, // form fields
task: 'newsletter', // specifies what form fields to use from the vuex store
submitText: 'Aboneaza-te', // submit button text
checkboxLabel: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut' // checkbox label
}"
@submit="submitNewsletter"/>
</div>
</template>
<script>
import formComp from '../utilities/form-utils/form-comp.vue';
import {mapGetters, mapMutations} from "vuex";
export default {
components: {formComp},
computed: {
...mapGetters({
getFields: 'newsletterFields'
})
},
methods: {
...mapMutations(['resetInputState']),
submitNewsletter() {
this.resetInputState({task: 'newsletter'})
}
}
}
</script>
<style lang="scss" scoped>
.title {
font-size: 1.8rem;
color: rgb(154, 117, 63);
}
.text {
font-size: 1rem;
color: rgb(0, 21, 44);
}
::v-deep .submit-button {
width: 100%;
margin-top: 2rem;
background-color: transparent;
font-family: SoleilBold;
color: rgb(0, 21, 44);
border-color: rgb(0, 21, 44);
}
::v-deep input:-webkit-autofill,
::v-deep input:-webkit-autofill:hover,
::v-deep input:-webkit-autofill:focus,
::v-deep input:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0 30px #f1eae2 inset !important;
}
@include media-breakpoint-up(lg) {
::v-deep .submit-button:hover {
color: white;
background-color: rgb(0, 21, 44);
}
}
@media screen and #{$ipad-pro-portrait-breakpoint},
screen and #{$ipad-pro-landscape-breakpoint},
screen and #{$ipad-landscape-breakpoint}{
.text {
font-size: 1.4rem;
}
::v-deep .submit-button:hover {
color: rgb(0, 21, 44);
background-color: transparent;
}
}
@include media-breakpoint-down(lg) {
.text {
font-size: 1.2rem;
}
}
@include media-breakpoint-down(sm) {
.text {
font-size: 1rem;
}
}
</style>
|