diff options
| -rw-r--r-- | client/modalImage/modal.css | 21 | ||||
| -rw-r--r-- | client/modalImage/modalImage.container.js | 6 |
2 files changed, 24 insertions, 3 deletions
diff --git a/client/modalImage/modal.css b/client/modalImage/modal.css index fb3c7ab5..9589b8f4 100644 --- a/client/modalImage/modal.css +++ b/client/modalImage/modal.css @@ -32,6 +32,27 @@ display: block; text-align: center; } +.modal .prev span, +.modal .next span, +.modal .close span { + background: #222; + border-radius: 50%; + width: 40px; + height: 40px; + text-align: center; + display: flex; + justify-content: center; + align-items: center; + box-shadow: 0 1px 2px rgba(255,255,255,0.4); + transition: all 0.2s cubic-bezier(0,0,1,1); + user-select: none; +} +.desktop .modal .prev:hover span, +.desktop .modal .prev:hover span, +.desktop .modal .prev:hover span { + background: #000; + box-shadow: 0 1px 2px rgba(255,255,255,0.6); +} .modal .prev { position: absolute; top: 0; left: 0; diff --git a/client/modalImage/modalImage.container.js b/client/modalImage/modalImage.container.js index 7ff03a3b..5479ca5f 100644 --- a/client/modalImage/modalImage.container.js +++ b/client/modalImage/modalImage.container.js @@ -83,9 +83,9 @@ class ModalImage extends Component { {caption && <div class='caption'>{caption}</div>} </div> </div> - <div onClick={() => this.prev()}className='prev'>{'<'}</div> - <div onClick={() => this.next()} className='next'>{'>'}</div> - <div onClick={() => this.close()} className='close'>{'x'}</div> + <div onClick={() => this.prev()}className='prev'><span>{'<'}</span></div> + <div onClick={() => this.next()} className='next'><span>{'>'}</span></div> + <div onClick={() => this.close()} className='close'><span>{'×'}</span></div> </div> ) } |