box shadow added to MetaItem popup menu

This commit is contained in:
NikolaBorislavovHristov 2019-01-18 16:36:58 +02:00
parent 8cb2019e53
commit 51854561b7
2 changed files with 17 additions and 13 deletions

View file

@ -81,7 +81,7 @@ class MetaItem extends Component {
<div className={styles['title']}>{this.props.title}</div>
{
this.props.menu.length > 0 ?
<Popup className={this.props.popupClassName} onOpen={this.onMenuPopupOpen} onClose={this.onMenuPopupClose}>
<Popup className={classnames(styles['menu-popup-container'], this.props.popupClassName)} onOpen={this.onMenuPopupOpen} onClose={this.onMenuPopupClose}>
<Popup.Label>
<Icon
className={classnames(styles['menu-icon'], { 'active': this.state.menuPopupOpen })}

View file

@ -130,20 +130,24 @@
}
}
.menu-items-container {
background-color: var(--color-surfacelighter);
min-width: calc(var(--poster-relative-size) * 0.6);
max-width: var(--poster-relative-size);
.menu-popup-container {
--box-shadow: 0 0 2em .15em var(--color-background);
.menu-item {
width: 100%;
color: var(--color-backgrounddarker);
font-size: 1.2em;
padding: 0.5em;
.menu-items-container {
background-color: var(--color-surfacelighter);
min-width: calc(var(--poster-relative-size) * 0.6);
max-width: var(--poster-relative-size);
&:hover {
background-color: var(--color-surfacelight);
cursor: pointer;
.menu-item {
width: 100%;
color: var(--color-backgrounddarker);
font-size: 1.2em;
padding: 0.5em;
&:hover {
background-color: var(--color-surfacelight);
cursor: pointer;
}
}
}
}