|
Lines 1-5
Link Here
|
| 1 |
<template> |
1 |
<template> |
| 2 |
<span v-if="clearable" class="textarea-group"> |
2 |
<span v-if="clearable" class="textarea-with-clear-wrapper"> |
| 3 |
<textarea |
3 |
<textarea |
| 4 |
:id="id" |
4 |
:id="id" |
| 5 |
v-model="model" |
5 |
v-model="model" |
|
Lines 15-23
Link Here
|
| 15 |
class="clear-button" |
15 |
class="clear-button" |
| 16 |
@click="clearInput" |
16 |
@click="clearInput" |
| 17 |
:aria-label="$__('Clear')" |
17 |
:aria-label="$__('Clear')" |
|
|
18 |
:title="$__('Clear')" |
| 18 |
tabindex="-1" |
19 |
tabindex="-1" |
| 19 |
> |
20 |
> |
| 20 |
<i class="fa fa-times"></i> |
21 |
<svg |
|
|
22 |
xmlns="http://www.w3.org/2000/svg" |
| 23 |
width="10" |
| 24 |
height="10" |
| 25 |
viewBox="0 0 10 10" |
| 26 |
> |
| 27 |
<path |
| 28 |
d="M6.895455 5l2.842897-2.842898c.348864-.348863.348864-.914488 0-1.263636L9.106534.261648c-.348864-.348864-.914489-.348864-1.263636 0L5 3.104545 2.157102.261648c-.348863-.348864-.914488-.348864-1.263636 0L.261648.893466c-.348864.348864-.348864.914489 0 1.263636L3.104545 5 .261648 7.842898c-.348864.348863-.348864.914488 0 1.263636l.631818.631818c.348864.348864.914773.348864 1.263636 0L5 6.895455l2.842898 2.842897c.348863.348864.914772.348864 1.263636 0l.631818-.631818c.348864-.348864.348864-.914489 0-1.263636L6.895455 5z" |
| 29 |
></path> |
| 30 |
</svg> |
| 21 |
</button> |
31 |
</button> |
| 22 |
</span> |
32 |
</span> |
| 23 |
<textarea |
33 |
<textarea |
|
Lines 75-88
export default {
Link Here
|
| 75 |
</script> |
85 |
</script> |
| 76 |
|
86 |
|
| 77 |
<style scoped> |
87 |
<style scoped> |
| 78 |
.textarea-group { |
88 |
.textarea-with-clear-wrapper { |
| 79 |
position: relative; |
89 |
position: relative; |
| 80 |
display: inline-block; |
90 |
display: inline-block; |
| 81 |
} |
91 |
} |
| 82 |
|
92 |
|
| 83 |
/* Textarea with clear button gets padding for the button */ |
93 |
/* Textarea with clear button gets padding for the button and matches select2 styling */ |
| 84 |
textarea.textarea-with-clear { |
94 |
textarea.textarea-with-clear { |
| 85 |
padding-right: 2rem; |
95 |
padding: 0.375rem 2rem 0.375rem 0.75rem; |
|
|
96 |
line-height: 1.5; |
| 86 |
} |
97 |
} |
| 87 |
|
98 |
|
| 88 |
.clear-button { |
99 |
.clear-button { |
|
Lines 114-120
textarea.textarea-with-clear {
Link Here
|
| 114 |
border-radius: 2px; |
125 |
border-radius: 2px; |
| 115 |
} |
126 |
} |
| 116 |
|
127 |
|
| 117 |
.clear-button i { |
128 |
.clear-button svg { |
| 118 |
font-size: 1rem; |
129 |
fill: currentColor; |
| 119 |
} |
130 |
} |
| 120 |
</style> |
131 |
</style> |
| 121 |
- |
|
|