github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-07 20:31:06 -05:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #19388 from overleaf/rd-form-focus-visible

Browse source 
[web] Match :focus-visible pseudo-class with focused style

GitOrigin-RevId: 48da2565e27cb02e910ccea029f22fd5f89466ce
This commit is contained in:
Rebeka Dekany 2024-07-18 15:47:24 +02:00 committed by Copybot
parent ac0265f4e2
commit f948eeb9f1
4 changed files with 42 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
services/web/frontend/stylesheets/bootstrap-5/components/form.scss
View file

@ -54,6 +54,12 @@
} }
} }
} }
&:focus-visible {
outline: 0;
border-color: $input-focus-border-color;
box-shadow: $input-focus-box-shadow;
}
} }
.form-control { .form-control {
@ -150,3 +156,19 @@
); );
} }
} }
.form-control,
.form-select {
&:focus-visible {
color: $input-focus-color;
background-color: $input-focus-bg;
outline: 0;
border-color: $input-focus-border-color;
box-shadow: $input-focus-box-shadow;
}
&.is-invalid:focus-visible {
border-color: $form-feedback-invalid-color;
box-shadow: 0 0 0 2px var(--red-30);
}
}

14
services/web/frontend/stylesheets/components/forms.less
View file

@ -338,6 +338,20 @@ input[type='checkbox'],
} }
} }
.form-control:invalid {
&:focus {
border-color: @form-feedback-invalid-color;
box-shadow: @form-feedback-invalid-box-shadow;
}
}
.form-control[data-ol-dirty]:invalid {
&:focus-visible {
border-color: @form-feedback-invalid-color;
box-shadow: @form-feedback-invalid-box-shadow;
}
}
// Static form control text // Static form control text
// //
// Apply class to a `p` element to make any string of text align with labels in // Apply class to a `p` element to make any string of text align with labels in

3
services/web/frontend/stylesheets/core/mixins.less
View file

@ -1213,7 +1213,8 @@
} }
.form-control-focus() { .form-control-focus() {
&:focus { &:focus,
&:focus-visible {
&:extend(.input-focus-style); &:extend(.input-focus-style);
} }
} }

4
services/web/frontend/stylesheets/variables/all.less
View file

@ -277,6 +277,10 @@
//** Border color for textual input addons //** Border color for textual input addons
@input-group-addon-border-color: @input-border; @input-group-addon-border-color: @input-border;
//** Invalid state of the form input
@form-feedback-invalid-color: @red-50;
@form-feedback-invalid-box-shadow: 0 0 0 2px @red-30;
//== Dropdowns //== Dropdowns
// //
//## Dropdown menu container and contents. //## Dropdown menu container and contents.