Skip to content
This repository has been archived by the owner on Jan 6, 2022. It is now read-only.

Commit

Permalink
fix: overlay to be not enough filled the.
Browse files Browse the repository at this point in the history
AtuyL committed Nov 30, 2018

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
1 parent 2f826ac commit c3698de
Showing 1 changed file with 8 additions and 3 deletions.
11 changes: 8 additions & 3 deletions app/components/title-field.js
Original file line number Diff line number Diff line change
@@ -5,12 +5,13 @@ import Icon from './icon'
import { Plain as PlainButton, Green as GreenButton } from './button'

const Overlay = styled.div`
position: absolute;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.2);
z-index: 1;
`

const EditableFieldWrapper = styled.div`
@@ -36,6 +37,10 @@ const EditableFieldWrapper = styled.div`
}
`

const ActiveEditableFieldWrapper = styled(EditableFieldWrapper)`
z-index: 1;
`

const InputFieldStyle = styled.input`
:focus {
outline: none;
@@ -109,7 +114,7 @@ class TitleField extends Component {
return (
<div onClick={e => e.stopPropagation()}>
<Overlay onClick={() => this.cancel()} />
<EditableFieldWrapper className='bg-white nt1 nb1 nl1 shadow-1 flex justify-between'>
<ActiveEditableFieldWrapper className='bg-white nt1 nb1 nl1 shadow-1 flex justify-between'>
{/* why innerRef in following component? check here - styled-components/styled-components#102 */}
<InputField
className='bn f6 pl1 normal w-100'
@@ -122,7 +127,7 @@ class TitleField extends Component {
) : (
<PlainButton onClick={() => this.cancel()}>Save</PlainButton>
)}
</EditableFieldWrapper>
</ActiveEditableFieldWrapper>
</div>
)
}

0 comments on commit c3698de

Please sign in to comment.