Last active
March 1, 2024 07:51
-
-
Save klickreflex/e2d444c15553b2f00545f9dd902c0da7 to your computer and use it in GitHub Desktop.
base styles to set focus
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
:root { | |
--focus-outline-width: 2px; | |
--focus-outline-offset: 3px; | |
--focus-outline-color: currentColor; | |
--focus-outline-style: dotted; | |
} | |
@layer base { | |
:focus { | |
@apply transition; | |
outline-width: var(--focus-outline-width); | |
outline-offset: var(--focus-outline-offset); | |
outline-color: var(--focus-outline-color); | |
outline-style: var(--focus-outline-style); | |
} | |
*:focus:not(:focus-visible) { | |
outline: none; | |
} | |
/* Use .focus-nested to set focus styling on direct children of a focussed element */ | |
*:focus:not(:focus-visible) > .focus-nested { | |
outline: none !important; | |
} | |
} | |
/* | |
Helper classes used when currentColor provides too little contrast | |
(e.g. a white-on-black button on dark background) | |
*/ | |
.focus-white, | |
.focus-white:focus { | |
--focus-outline-color: theme('colors.white'); | |
} | |
.focus-black { | |
--focus-outline-color: theme('colors.black') | |
} | |
.focus-blue { | |
--focus-outline-color: theme('colors.blue.800') | |
} | |
.focus-green { | |
--focus-outline-color: theme('colors.green.600') | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@layer base { | |
/* Remove native browser search reset button */ | |
[type="search"]::-webkit-search-cancel-button, | |
[type="search"]::-webkit-search-decoration { | |
appearance: none; | |
} | |
/* Override some of Tailwind's defaults */ | |
[type='text'], | |
[type='email'], | |
[type='url'], | |
[type='password'], | |
[type='number'], | |
[type='date'], | |
[type='datetime-local'], | |
[type='month'], | |
[type='search'], | |
[type='tel'], | |
[type='time'], | |
[type='week'], | |
[type='checkbox'], | |
[type='radio'], | |
[multiple], | |
textarea, | |
select { | |
@apply transition rounded; | |
box-shadow: none; | |
outline-width: 0; | |
outline-color: transparent; | |
&:focus, | |
&:focus-visible, | |
/* Override global outline removal */ | |
&:focus:not(:focus-visible) { | |
box-shadow: none; | |
outline-width: var(--focus-outline-width); | |
outline-offset: var(--focus-outline-offset); | |
outline-color: var(--focus-outline-color); | |
outline-style: var(--focus-outline-style); | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment