I have incorporated Vue and Vuetify into an RTL application. My goal is to create a layout like the one shown here:
https://i.sstatic.net/RTdrE.png
Essentially, I want two brackets surrounding some text and three buttons (each leading to different locations, although currently using the same button for simplicity).
This is what I have so far:
<template>
<v-dialog
v-model="showModal"
@click:outside="handleClose"
outlined
width="750"
>
<v-card>
<div>
<div style="float: left; width: 33%;">{</div>
<div style="float: left; width: 34%;">
<p>TEXT</p>
<div>
<v-btn fab dark target="_blank" rel="noopener">
<v-icon>mdi-hand-heart-outline</v-icon>
</v-btn>
<v-btn fab dark :target="_blank" rel="noopener">
<v-icon>mdi-linkedin</v-icon>
</v-btn>
<v-btn fab dark target="_blank" rel="noopener">
<v-icon>mdi-github</v-icon>
</v-btn>
</div>
</div>
<div style="float: left; width: 33%;">}</div>
<br style="clear: left;" />
</div>
</v-card>
</v-dialog>
</template>
This is what I currently have implemented:
https://i.sstatic.net/TmVk4.png
I am struggling with the design of this template. How can I adjust the size of the brackets to always match the size of the text and buttons? Additionally, I am unsure why the left bracket appears on the opposite side (possibly due to RTL direction).