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";
: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-style: solid;
outline-width: 8px;

9
app/javascript/form.scss
Unescape View File

@ -5,7 +5,14 @@
@import "tailwindcss/utilities";
: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-style: solid;
outline-width: 8px;

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

@ -6,7 +6,7 @@
>
<select
: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')]"
>
<option
@ -34,7 +34,7 @@
<select
:placeholder="t('default_value')"
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')]"
>
<option
@ -70,7 +70,7 @@
:placeholder="t('default_value')"
dir="auto"
: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')"
>
<label
@ -88,7 +88,7 @@
@click.stop
>
<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"
>
<option
@ -131,7 +131,7 @@
type="number"
min="0"
: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 || ''}}`"
@blur="$emit('save')"
>
@ -149,7 +149,7 @@
:placeholder="t('max')"
type="number"
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"
@input="field.validation.pattern = `.{${lengthValidation.min},${$event.target.value || ''}}`"
@blur="$emit('save')"
@ -175,7 +175,7 @@
type="number"
min="0"
: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]"
@blur="$emit('save')"
>
@ -193,7 +193,7 @@
:placeholder="t('max')"
type="number"
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"
@input="[field.validation ||= {}, $event.target.value ? field.validation.max = $event.target.value : delete field.validation.max]"
@blur="$emit('save')"
@ -215,7 +215,7 @@
>
<select
: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')]"
>
<option
@ -245,7 +245,7 @@
v-model="field.validation.pattern"
:placeholder="t('regexp_validation')"
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')"
>
<label
@ -266,7 +266,7 @@
v-model="field.validation.message"
:placeholder="t('error_message')"
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')"
>
<label
@ -286,7 +286,7 @@
<select
v-model="field.preferences.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')"
>
<option
@ -312,7 +312,7 @@
>
<select
: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')]"
>
<option

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

@ -48,7 +48,7 @@
<input
v-model="defaultFieldsSearch"
: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">
</template>
@ -137,7 +137,7 @@
<input
v-model="customFieldsSearch"
: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">
</template>

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

@ -55,7 +55,7 @@
<textarea
ref="textarea"
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"
required="true"
@input="resizeTextarea"

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

@ -28,7 +28,7 @@
<select
v-model="field.preferences.currency"
: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"
>
<option
@ -55,14 +55,14 @@
v-if="'payment_link_id' in field.preferences"
v-model="field.preferences.payment_link_id"
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"
>
<input
v-else-if="'price_id' in field.preferences"
v-model="field.preferences.price_id"
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"
>
<input
@ -70,7 +70,7 @@
type="number"
:placeholder="t('price')"
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"
>
<input
@ -78,7 +78,7 @@
v-model="field.preferences.price"
type="number"
: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"
>
<label

Write Preview
Loading…
Cancel
Save