settel/knowyt
1
0
Fork 0
Code Issues Pull Requests Packages Releases Activity

styling (WIP)

Browse Source
This commit is contained in:
Settel 2021-11-09 22:28:52 +01:00
parent a956f8e2f2
commit 2eb4d73472
2 changed files with 37 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
client/src/components/CollectQuote.vue
View File

@ -9,11 +9,11 @@
</div> </div>
</div> </div>
<div class="collect-quote__inputgroup"> <div class="collect-quote__inputgroup">
<form> <form class="collect-quote__textinput-container">
<input type="hidden" name="id" :value="quote.id" /> <input type="hidden" name="id" :value="quote.id" />
<textarea v-model="quote.quote" cols="60" rows="4" /> <textarea class="collect-quote__textinput" v-model="quote.quote" />
</form> </form>
<button @click="save">Save</button> <button class="collect-quote__cta" @click="save">Save</button>
</div> </div>
</div> </div>
</div> </div>
@ -64,21 +64,52 @@ export default {
width: 50%; width: 50%;
height: 100%; height: 100%;
border-right: 1px solid #ffffff; border-right: 1px solid #ffffff;
padding: 48px; overflow: hidden;
} }
&__title { &__title {
font-size: 32px; font-size: 32px;
font-family: "Wendy One"; font-family: "Wendy One";
margin-bottom: 16px; margin: 48px 0 16px 48px;
} }
&__quote { &__quote {
align-self: center; align-self: center;
max-width: 400px; max-width: 400px;
margin: 0 48px;
} }
&__inputgroup { &__inputgroup {
width: 50%;
height: 100%;
display: flex;
flex-direction: column;
}
&__textinput-container {
margin: 48px 48px 0 48px;
}
&__textinput {
width: 100%;
}
&__cta {
align-self: flex-end;
margin: 48px;
background-color: #40a020;
width: 80px;
height: 48px;
border: 4px solid #c0c060;
border-radius: 8px;
color: #ffff80;
font-family: Dosis;
font-size: 24px;
&:hover {
background-color: #60c040;
color: #ffffc0;
}
} }
} }
</style> </style>