TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-04 17:04:59 +03:00
Code Issues Projects Releases Wiki Activity

Added background blur when the modal is open

Browse Source
This commit is contained in:
Djordje Vlaisavljevic 2022-07-05 17:09:58 +02:00
parent 3c0a5c8081
commit a1ed73808a
1 changed files with 3 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
ghost/sodo-search/src/components/PopupModal.js
View File

@ -126,7 +126,7 @@ function SearchBox() {
const {searchValue, dispatch} = useContext(AppContext); const {searchValue, dispatch} = useContext(AppContext);
return ( return (
<div className='flex items-center py-6 px-7'> <div className='flex items-center py-6 px-7'>
<SearchIcon className='mr-3' alt='Search' /> <SearchIcon className='mr-3 text-neutral-900' alt='Search' />
<input <input
autoFocus autoFocus
value={searchValue || ''} value={searchValue || ''}
@ -332,7 +332,7 @@ function NoResultsBox() {
function Search() { function Search() {
return ( return (
<> <>
<div className='bg-[rgba(0,0,0,0.2)] h-screen w-screen pt-20 antialiased'> <div className='bg-[rgba(0,0,0,0.2)] h-screen w-screen pt-20 antialiased z-50 relative'>
<div className='bg-white max-w-lg rounded-lg shadow-xl m-auto'> <div className='bg-white max-w-lg rounded-lg shadow-xl m-auto'>
<SearchBox /> <SearchBox />
<SearchResultBox /> <SearchResultBox />
@ -391,6 +391,7 @@ export default class PopupModal extends React.Component {
<Frame style={frameStyle} title='portal-popup' head={this.renderFrameStyles()}> <Frame style={frameStyle} title='portal-popup' head={this.renderFrameStyles()}>
<div onClick = {e => this.handlePopupClose(e)}></div> <div onClick = {e => this.handlePopupClose(e)}></div>
<PopupContent /> <PopupContent />
<div className='absolute top-0 bottom-0 left-0 right-0 block backdrop-blur-[2px] z-0 bg-gradient-to-br from-[rgba(0,0,0,0.2)] to-[rgba(0,0,0,0.1)]'></div>
</Frame> </Frame>
</div> </div>
); );