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

styling of CollectQuote dialog

Browse Source
This commit is contained in:
Settel 2021-12-02 19:07:15 +01:00
parent 96ad2f6533
commit f2e0166062
1 changed files with 19 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -12,7 +12,11 @@
<button class="collect-quote__button-close" @click="close">X</button> <button class="collect-quote__button-close" @click="close">X</button>
<form class="collect-quote__textinput-container"> <form class="collect-quote__textinput-container">
<input type="hidden" name="id" :value="quote.id" /> <input type="hidden" name="id" :value="quote.id" />
<textarea class="collect-quote__textinput" v-model="quote.quote" /> <textarea
class="collect-quote__textinput"
v-model="quote.quote"
placeholder="hier eintragen ..."
/>
</form> </form>
<div class="collect-quote__cta-container"> <div class="collect-quote__cta-container">
<button class="collect-quote__cta" @click="save">Save</button> <button class="collect-quote__cta" @click="save">Save</button>
@ -96,12 +100,25 @@ export default {
} }
&__textinput-container { &__textinput-container {
height: 100%;
margin: 48px 48px 0 48px; margin: 48px 48px 0 48px;
} }
&__textinput { &__textinput {
width: 100%; width: 100%;
height: 8em; height: 100%;
background: transparent;
color: $primary-text-color;
font-size: 16px;
border: 1px solid #808080;
outline: 0;
resize: none;
&:focus {
border-width: 3px;
border-image: linear-gradient(to right, #e0e0e0 0, #c0c0c0 30%, #e0e0e0 100%);
border-image-slice: 1;
}
} }
&__button-close { &__button-close {