Merge branch 'no-emoji-selector-outline-but-this-time-it-actually-works' into 'develop'

No outline for emoji selector when invisible, but this time it actually works

See merge request soapbox-pub/soapbox-fe!651
groups
Alex Gleason 2021-07-30 13:54:47 +00:00
commit 073871248f
3 zmienionych plików z 9 dodań i 2 usunięć

Wyświetl plik

@ -2,6 +2,7 @@
exports[`<EmojiSelector /> renders correctly 1`] = `
<div
className="emoji-react-selector-container"
onBlur={[Function]}
onFocus={[Function]}
tabIndex="-1"

Wyświetl plik

@ -81,6 +81,7 @@ class EmojiSelector extends ImmutablePureComponent {
return (
<HotKeys
handlers={this.handlers}
className='emoji-react-selector-container'
>
<div
className={classNames('emoji-react-selector', { 'emoji-react-selector--visible': visible, 'emoji-react-selector--focused': focused })}

Wyświetl plik

@ -68,6 +68,13 @@
transform: translateY(2px);
}
.emoji-react-selector-container {
&:hover,
&:focus {
outline: 0;
}
}
.emoji-react-selector {
position: absolute;
display: flex;
@ -76,7 +83,6 @@
border-radius: 9999px;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
opacity: 0;
outline: 0;
pointer-events: none;
transition: 0.1s;
z-index: 999;
@ -84,7 +90,6 @@
&--visible,
&--focused {
opacity: 1;
outline: unset;
pointer-events: all;
}