mirrors/zotero
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

focus-ring mixin

Browse source 
@focus-ring adds an accent color box-shadow around the component
on :focus-visible.
This commit is contained in:
Bogdan Abaev 2023-12-21 09:15:48 -05:00 committed by Dan Stillman
parent 527c30b8c1
commit 55b97cd397
1 changed files with 12 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
scss/abstracts/_mixins.scss
View file

@ -142,3 +142,15 @@
} }
} }
} }
/*
This mixin replaces the default focus-rings - those are platform-specific, do not show up on some
components (e.g. toolbarbutton) and sometimes are too wide (e.g. around textfield on macOS).
Box-shadow is used to be able to set the radius.
*/
@mixin focus-ring($width: 1px, $radius: 5px) {
&:focus-visible {
outline: none;
box-shadow: 0 0 0 $width -moz-accent-color;
border-radius: $radius;
}
}