fix focus styles

This commit is contained in:
Rodrigo Antinarelli 2020-06-30 16:05:18 -03:00
parent 90ca52585a
commit 520e1c0774
3 changed files with 4 additions and 4 deletions

View File

@ -34,7 +34,7 @@ const Thumbnail = ({
ref={drag}
className={classnames(
className,
'flex flex-col flex-1 px-3 mb-8 cursor-pointer outline-none'
'flex flex-col flex-1 px-3 mb-8 cursor-pointer outline-none group'
)}
onDoubleClick={onClick}
role="button"
@ -45,7 +45,7 @@ const Thumbnail = ({
'flex flex-1 items-center justify-center rounded-md bg-black text-base text-white overflow-hidden mb-2 min-h-32',
isActive
? 'border-2 border-primary-light'
: 'border border-secondary-light hover:border-blue-300'
: 'border border-secondary-light group-focus:border-blue-300 hover:border-blue-300'
)}
>
{imageSrc ? (

View File

@ -24,7 +24,7 @@ const ThumbnailNoImage = ({
<div
ref={drag}
className={classnames(
'flex flex-row flex-1 px-4 py-3 cursor-pointer outline-none border-transparent hover:border-blue-300 rounded',
'flex flex-row flex-1 px-4 py-3 cursor-pointer outline-none border-transparent hover:border-blue-300 focus:border-blue-300 rounded',
isActive ? 'border-2 border-primary-light' : 'border'
)}
onDoubleClick={onClick}

View File

@ -717,7 +717,7 @@ module.exports = {
backgroundRepeat: ['responsive'],
backgroundSize: ['responsive'],
borderCollapse: ['responsive'],
borderColor: ['responsive', 'hover', 'focus', 'active'],
borderColor: ['responsive', 'hover', 'focus', 'active', 'group-focus'],
borderRadius: ['responsive', 'focus', 'first', 'last'],
borderStyle: ['responsive', 'focus'],
borderWidth: ['responsive', 'focus', 'first', 'last'],