kopia lustrzana https://gitlab.com/soapbox-pub/soapbox
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!651merge-requests/652/merge
commit
073871248f
|
@ -2,6 +2,7 @@
|
|||
|
||||
exports[`<EmojiSelector /> renders correctly 1`] = `
|
||||
<div
|
||||
className="emoji-react-selector-container"
|
||||
onBlur={[Function]}
|
||||
onFocus={[Function]}
|
||||
tabIndex="-1"
|
||||
|
|
|
@ -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 })}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
Ładowanie…
Reference in New Issue