Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-20 10:42:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

metaitem focus styles updated

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-07-23 13:37:56 +03:00
parent 686b9229a9
commit a5f6ea5dac
2 changed files with 18 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/common/MetaItem/MetaItem.js
View file

@ -25,7 +25,7 @@ const MetaItem = React.memo(({ className, menuClassName, id, type, name, posterS
}, [menuOpen]);
const placeholderIcon = ICON_FOR_TYPE[type] || 'ic_movies';
return (
<Input className={classnames(className, styles['meta-item-container'], styles[`poster-shape-${posterShape}`])} title={name} type={'button'} data-id={id} onClick={onClick} onContextMenu={onContextMenu}>
<Input className={classnames(className, styles['meta-item-container'], styles[`poster-shape-${posterShape}`], { 'active': menuOpen })} title={name} type={'button'} data-id={id} onClick={onClick} onContextMenu={onContextMenu}>
<div className={styles['poster-image-container']}>
<div className={styles['placeholder-image-layer']}>
<Icon className={styles['placeholder-image']} icon={placeholderIcon} />

23
src/common/MetaItem/styles.less
View file

@ -2,8 +2,20 @@
background-color: var(--color-backgroundlight);
cursor: pointer;
&:hover, &:focus {
&:hover, &:focus, &:global(.active) {
outline: var(--focusable-border-size) solid var(--color-surfacelighter);
.title-bar-container {
background-color: var(--color-surfacelighter);
.title {
color: var(--color-backgrounddarker);
}
.menu-icon {
fill: var(--color-backgrounddarker);
}
}
}
&.poster-shape-square {
@ -114,9 +126,10 @@
.title {
flex-grow: 1;
padding: 0 0.5em;
line-height: 1.1em;
max-height: 2.2em;
line-height: 2.5em;
color: var(--color-surfacelighter);
white-space: nowrap;
text-overflow: ellipsis;
}
.menu-icon {
@ -127,15 +140,13 @@
fill: var(--color-surfacelighter);
&:hover, &:global(.active) {
background-color: var(--color-surfacedarker);
background-color: var(--color-surface80);
}
}
}
}
.menu-container {
--box-shadow: -0.6em .6em .5em -0.1em var(--color-backgrounddark40);
.menu-items-container {
min-width: 8em;
max-width: 12em;