diff --git a/src/components/EntityList.jsx b/src/components/EntityList.jsx index c915e06..49d1410 100644 --- a/src/components/EntityList.jsx +++ b/src/components/EntityList.jsx @@ -28,8 +28,14 @@ const EntityPlaceholder = (props) => { const EntityItem = (props) => { const item = props.item; + let className = 'entity-item ' + (item.selected ? 'selected' : ''); + + if(item.className){ + className += ' ' + item.className; + } + return ( -
  • +
  • {item.cover && item.cover} diff --git a/src/components/EntityList.scss b/src/components/EntityList.scss index a9b16e5..90ce092 100644 --- a/src/components/EntityList.scss +++ b/src/components/EntityList.scss @@ -98,7 +98,7 @@ ul.entity-list { // Highligth Column .entity-list.column{ - .entity-item { + .entity-item:not(.disabled) { border-bottom: solid var(--line-width) var(--gray-1); transition: background-color 300ms ease-in; @@ -154,3 +154,20 @@ ul.entity-list { } } } + + +// When an item is disabled +.entity-item.disabled{ + position: relative; + &:before{ + content: ""; // ::before and ::after both require content + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: var(--gray-1); + opacity: .7; + } + +} diff --git a/src/components/Nav.jsx b/src/components/Nav.jsx index 6ac18bc..e728423 100644 --- a/src/components/Nav.jsx +++ b/src/components/Nav.jsx @@ -38,7 +38,7 @@ export const Nav = (props) => { } else { return