fix(ui): Textarea smaller and ghost buttons
This commit is contained in:
parent
1deb3df8ce
commit
5f1c28e588
|
@ -196,25 +196,25 @@ const focus = () => textarea.value.focus()
|
|||
@keydown.ctrl.shift.x.exact.prevent="strikethrough" @keydown.ctrl.k.exact.prevent="link" :maxlength="max"
|
||||
:placeholder="placeholder" v-model="model" id="textarea_id" />
|
||||
<div class="textarea-buttons">
|
||||
<Button @click="preview = !preview" icon="bi-eye" color="secondary" :aria-pressed="preview || undefined" />
|
||||
<Button ghost @click="preview = !preview" icon="bi-eye" color="secondary" :aria-pressed="preview || undefined" />
|
||||
|
||||
<div class="separator" />
|
||||
|
||||
<Button @click="heading1" icon="bi-type-h1" color="secondary" :aria-pressed="isHeading1 || undefined" :disabled="preview" />
|
||||
<Button @click="heading2" icon="bi-type-h2" color="secondary" :aria-pressed="isHeading2 || undefined" :disabled="preview" />
|
||||
<Button @click="paragraph" icon="bi-paragraph" color="secondary" :aria-pressed="isParagraph || undefined" :disabled="preview" />
|
||||
<Button @click="quote" icon="bi-quote" color="secondary" :aria-pressed="isQuote || undefined" :disabled="preview" />
|
||||
<Button @click="orderedList" icon="bi-list-ol" color="secondary" :aria-pressed="isOrderedList || undefined"
|
||||
<Button ghost @click="heading1" icon="bi-type-h1" color="secondary" :aria-pressed="isHeading1 || undefined" :disabled="preview" />
|
||||
<Button ghost @click="heading2" icon="bi-type-h2" color="secondary" :aria-pressed="isHeading2 || undefined" :disabled="preview" />
|
||||
<Button ghost @click="paragraph" icon="bi-paragraph" color="secondary" :aria-pressed="isParagraph || undefined" :disabled="preview" />
|
||||
<Button ghost @click="quote" icon="bi-quote" color="secondary" :aria-pressed="isQuote || undefined" :disabled="preview" />
|
||||
<Button ghost @click="orderedList" icon="bi-list-ol" color="secondary" :aria-pressed="isOrderedList || undefined"
|
||||
:disabled="preview" />
|
||||
<Button @click="unorderedList" icon="bi-list-ul" color="secondary" :aria-pressed="isUnorderedList || undefined"
|
||||
<Button ghost @click="unorderedList" icon="bi-list-ul" color="secondary" :aria-pressed="isUnorderedList || undefined"
|
||||
:disabled="preview" />
|
||||
|
||||
<div class="separator" />
|
||||
|
||||
<Button @click="bold" icon="bi-type-bold" color="secondary" :disabled="preview" />
|
||||
<Button @click="italics" icon="bi-type-italic" color="secondary" :disabled="preview" />
|
||||
<Button @click="strikethrough" icon="bi-type-strikethrough" color="secondary" :disabled="preview" />
|
||||
<Button @click="link" icon="bi-link-45deg" color="secondary" :disabled="preview" />
|
||||
<Button ghost @click="bold" icon="bi-type-bold" color="secondary" :disabled="preview" />
|
||||
<Button ghost @click="italics" icon="bi-type-italic" color="secondary" :disabled="preview" />
|
||||
<Button ghost @click="strikethrough" icon="bi-type-strikethrough" color="secondary" :disabled="preview" />
|
||||
<Button ghost @click="link" icon="bi-link-45deg" color="secondary" :disabled="preview" />
|
||||
|
||||
<span v-if="max !== Infinity && typeof max === 'number'" class="letter-count">{{ max - model.length }}</span>
|
||||
</div>
|
||||
|
|
|
@ -102,7 +102,7 @@
|
|||
> textarea {
|
||||
display: block;
|
||||
width: 100%;
|
||||
min-height: 240px;
|
||||
min-height: 160px;
|
||||
padding: 8px 12px 40px;
|
||||
font-family: monospace;
|
||||
background: transparent;
|
||||
|
|
Loading…
Reference in New Issue