adminbruno
/
docuseal
mirror of https://github.com/docusealco/docuseal
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fix focus ring for all DaisyUI interactive components

Browse Source 
SCSS: add .input, .select, .checkbox, .radio, .toggle, .tab, .link
to :focus-visible rule so DaisyUI's higher-specificity component-level
rules are overridden by our 8px blue outline in both stylesheets.

Vue: remove !outline-0 and !ring-0 (which used !important to kill
outlines entirely) from 21 elements across 4 template_builder files:
- field_settings.vue (13 inputs/selects)
- payment_settings.vue (5 inputs/selects)
- fields.vue (2 inputs)
- formula_modal.vue (1 textarea)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
pull/599/head
Marcelo Paiva 3 weeks ago
parent 72842138e1
commit 57656baa4f
6 changed files with 37 additions and 23 deletions
Show Stats Download Patch File Download Diff File

9
app/javascript/application.scss
Unescape View File

@ -5,7 +5,14 @@
@import "tailwindcss/utilities"; @import "tailwindcss/utilities";
:focus-visible, :focus-visible,
.btn:focus-visible { .btn:focus-visible,
.input:focus-visible,
.select:focus-visible,
.checkbox:focus-visible,
.radio:focus-visible,
.toggle:focus-visible,
.tab:focus-visible,
.link:focus-visible {
outline-color: rgb(14, 99, 200); outline-color: rgb(14, 99, 200);
outline-style: solid; outline-style: solid;
outline-width: 8px; outline-width: 8px;

9
app/javascript/form.scss
Unescape View File

@ -5,7 +5,14 @@
@import "tailwindcss/utilities"; @import "tailwindcss/utilities";
:focus-visible, :focus-visible,
.btn:focus-visible { .btn:focus-visible,
.input:focus-visible,
.select:focus-visible,
.checkbox:focus-visible,
.radio:focus-visible,
.toggle:focus-visible,
.tab:focus-visible,
.link:focus-visible {
outline-color: rgb(14, 99, 200); outline-color: rgb(14, 99, 200);
outline-style: solid; outline-style: solid;
outline-width: 8px; outline-width: 8px;

26
app/javascript/template_builder/field_settings.vue
Unescape View File

@ -6,7 +6,7 @@
> >
<select <select
:placeholder="t('method')" :placeholder="t('method')"
class="select select-bordered select-xs font-normal w-full max-w-xs !h-7 !outline-0 bg-transparent" class="select select-bordered select-xs font-normal w-full max-w-xs !h-7 bg-transparent"
@change="[field.preferences ||= {}, field.preferences.method = $event.target.value, $emit('save')]" @change="[field.preferences ||= {}, field.preferences.method = $event.target.value, $emit('save')]"
> >
<option <option
@ -34,7 +34,7 @@
<select <select
:placeholder="t('default_value')" :placeholder="t('default_value')"
dir="auto" dir="auto"
class="select select-bordered select-xs w-full max-w-xs h-7 !outline-0 font-normal bg-transparent" class="select select-bordered select-xs w-full max-w-xs h-7 font-normal bg-transparent"
@change="[field.default_value = $event.target.value, !field.default_value && delete field.default_value, $emit('save')]" @change="[field.default_value = $event.target.value, !field.default_value && delete field.default_value, $emit('save')]"
> >
<option <option
@ -70,7 +70,7 @@
:placeholder="t('default_value')" :placeholder="t('default_value')"
dir="auto" dir="auto"
:type="field.type" :type="field.type"
class="input input-bordered input-xs w-full max-w-xs h-7 !outline-0 bg-transparent" class="input input-bordered input-xs w-full max-w-xs h-7 bg-transparent"
@blur="$emit('save')" @blur="$emit('save')"
> >
<label <label
@ -88,7 +88,7 @@
@click.stop @click.stop
> >
<select <select
class="select select-bordered select-xs w-full max-w-xs h-7 !outline-0 font-normal bg-transparent" class="select select-bordered select-xs w-full max-w-xs h-7 font-normal bg-transparent"
@change="onChangeValidation" @change="onChangeValidation"
> >
<option <option
@ -131,7 +131,7 @@
type="number" type="number"
min="0" min="0"
:value="lengthValidation.min" :value="lengthValidation.min"
class="input input-bordered w-full input-xs h-7 !outline-0 bg-transparent" class="input input-bordered w-full input-xs h-7 bg-transparent"
@input="field.validation.pattern = `.{${$event.target.value || 0},${lengthValidation.max || ''}}`" @input="field.validation.pattern = `.{${$event.target.value || 0},${lengthValidation.max || ''}}`"
@blur="$emit('save')" @blur="$emit('save')"
> >
@ -149,7 +149,7 @@
:placeholder="t('max')" :placeholder="t('max')"
type="number" type="number"
min="1" min="1"
class="input input-bordered w-full input-xs h-7 !outline-0 bg-transparent" class="input input-bordered w-full input-xs h-7 bg-transparent"
:value="lengthValidation.max" :value="lengthValidation.max"
@input="field.validation.pattern = `.{${lengthValidation.min},${$event.target.value || ''}}`" @input="field.validation.pattern = `.{${lengthValidation.min},${$event.target.value || ''}}`"
@blur="$emit('save')" @blur="$emit('save')"
@ -175,7 +175,7 @@
type="number" type="number"
min="0" min="0"
:value="field.validation?.min" :value="field.validation?.min"
class="input input-bordered w-full input-xs h-7 !outline-0 bg-transparent" class="input input-bordered w-full input-xs h-7 bg-transparent"
@input="[field.validation ||= {}, $event.target.value ? field.validation.min = $event.target.value : delete field.validation.min]" @input="[field.validation ||= {}, $event.target.value ? field.validation.min = $event.target.value : delete field.validation.min]"
@blur="$emit('save')" @blur="$emit('save')"
> >
@ -193,7 +193,7 @@
:placeholder="t('max')" :placeholder="t('max')"
type="number" type="number"
min="1" min="1"
class="input input-bordered w-full input-xs h-7 !outline-0 bg-transparent" class="input input-bordered w-full input-xs h-7 bg-transparent"
:value="field.validation?.max" :value="field.validation?.max"
@input="[field.validation ||= {}, $event.target.value ? field.validation.max = $event.target.value : delete field.validation.max]" @input="[field.validation ||= {}, $event.target.value ? field.validation.max = $event.target.value : delete field.validation.max]"
@blur="$emit('save')" @blur="$emit('save')"
@ -215,7 +215,7 @@
> >
<select <select
:placeholder="t('format')" :placeholder="t('format')"
class="select select-bordered select-xs font-normal w-full max-w-xs !h-7 !outline-0 bg-transparent" class="select select-bordered select-xs font-normal w-full max-w-xs !h-7 bg-transparent"
@change="[field.preferences ||= {}, field.preferences.format = $event.target.value, $emit('save')]" @change="[field.preferences ||= {}, field.preferences.format = $event.target.value, $emit('save')]"
> >
<option <option
@ -245,7 +245,7 @@
v-model="field.validation.pattern" v-model="field.validation.pattern"
:placeholder="t('regexp_validation')" :placeholder="t('regexp_validation')"
dir="auto" dir="auto"
class="input input-bordered input-xs w-full max-w-xs h-7 !outline-0 bg-transparent" class="input input-bordered input-xs w-full max-w-xs h-7 bg-transparent"
@blur="$emit('save')" @blur="$emit('save')"
> >
<label <label
@ -266,7 +266,7 @@
v-model="field.validation.message" v-model="field.validation.message"
:placeholder="t('error_message')" :placeholder="t('error_message')"
dir="auto" dir="auto"
class="input input-bordered input-xs w-full max-w-xs h-7 !outline-0 bg-transparent" class="input input-bordered input-xs w-full max-w-xs h-7 bg-transparent"
@blur="$emit('save')" @blur="$emit('save')"
> >
<label <label
@ -286,7 +286,7 @@
<select <select
v-model="field.preferences.format" v-model="field.preferences.format"
:placeholder="t('format')" :placeholder="t('format')"
class="select select-bordered select-xs font-normal w-full max-w-xs !h-7 !outline-0 bg-transparent" class="select select-bordered select-xs font-normal w-full max-w-xs !h-7 bg-transparent"
@change="$emit('save')" @change="$emit('save')"
> >
<option <option
@ -312,7 +312,7 @@
> >
<select <select
:placeholder="t('format')" :placeholder="t('format')"
class="select select-bordered select-xs font-normal w-full max-w-xs !h-7 !outline-0 bg-transparent" class="select select-bordered select-xs font-normal w-full max-w-xs !h-7 bg-transparent"
@change="[field.preferences.format = $event.target.value, $emit('save')]" @change="[field.preferences.format = $event.target.value, $emit('save')]"
> >
<option <option

4
app/javascript/template_builder/fields.vue
Unescape View File

@ -48,7 +48,7 @@
<input <input
v-model="defaultFieldsSearch" v-model="defaultFieldsSearch"
:placeholder="t('search_field')" :placeholder="t('search_field')"
class="input input-ghost input-xs px-0 text-base mb-2 !outline-0 !rounded bg-transparent w-full" class="input input-ghost input-xs px-0 text-base mb-2 !rounded bg-transparent w-full"
> >
<hr class="mb-2"> <hr class="mb-2">
</template> </template>
@ -137,7 +137,7 @@
<input <input
v-model="customFieldsSearch" v-model="customFieldsSearch"
:placeholder="t('search_field')" :placeholder="t('search_field')"
class="input input-ghost input-xs px-0 text-base mb-1 !outline-0 !rounded bg-transparent w-full" class="input input-ghost input-xs px-0 text-base mb-1 !rounded bg-transparent w-full"
> >
<hr class="mb-2"> <hr class="mb-2">
</template> </template>

2
app/javascript/template_builder/formula_modal.vue
Unescape View File

@ -55,7 +55,7 @@
<textarea <textarea
ref="textarea" ref="textarea"
v-model="formula" v-model="formula"
class="base-textarea !rounded-xl !text-base font-mono w-full !outline-0 !ring-0 !px-3" class="base-textarea !rounded-xl !text-base font-mono w-full !px-3"
:readonly="!editable" :readonly="!editable"
required="true" required="true"
@input="resizeTextarea" @input="resizeTextarea"

10
app/javascript/template_builder/payment_settings.vue
Unescape View File

@ -28,7 +28,7 @@
<select <select
v-model="field.preferences.currency" v-model="field.preferences.currency"
:placeholder="t('price')" :placeholder="t('price')"
class="select select-bordered select-xs font-normal w-full max-w-xs !h-7 !outline-0" class="select select-bordered select-xs font-normal w-full max-w-xs !h-7"
@change="save" @change="save"
> >
<option <option
@ -55,14 +55,14 @@
v-if="'payment_link_id' in field.preferences" v-if="'payment_link_id' in field.preferences"
v-model="field.preferences.payment_link_id" v-model="field.preferences.payment_link_id"
placeholder="plink_XXXXX" placeholder="plink_XXXXX"
class="input input-bordered input-xs w-full max-w-xs h-7 !outline-0" class="input input-bordered input-xs w-full max-w-xs h-7"
@blur="save" @blur="save"
> >
<input <input
v-else-if="'price_id' in field.preferences" v-else-if="'price_id' in field.preferences"
v-model="field.preferences.price_id" v-model="field.preferences.price_id"
placeholder="Price ID: price_XXXXX" placeholder="Price ID: price_XXXXX"
class="input input-bordered input-xs w-full max-w-xs h-7 !outline-0" class="input input-bordered input-xs w-full max-w-xs h-7"
@blur="save" @blur="save"
> >
<input <input
@ -70,7 +70,7 @@
type="number" type="number"
:placeholder="t('price')" :placeholder="t('price')"
disabled="true" disabled="true"
class="input input-bordered input-xs w-full max-w-xs h-7 !outline-0" class="input input-bordered input-xs w-full max-w-xs h-7"
@blur="save" @blur="save"
> >
<input <input
@ -78,7 +78,7 @@
v-model="field.preferences.price" v-model="field.preferences.price"
type="number" type="number"
:placeholder="t('price')" :placeholder="t('price')"
class="input input-bordered input-xs w-full max-w-xs h-7 !outline-0" class="input input-bordered input-xs w-full max-w-xs h-7"
@blur="save" @blur="save"
> >
<label <label

Write Preview
Loading…
Cancel
Save