diff options
| -rw-r--r-- | src/client/views/nodes/LinkMenu.scss | 13 | ||||
| -rw-r--r-- | src/client/views/nodes/LinkMenu.tsx | 6 | ||||
| -rw-r--r-- | src/client/views/nodes/LinkMenuItem.scss | 30 |
3 files changed, 33 insertions, 16 deletions
diff --git a/src/client/views/nodes/LinkMenu.scss b/src/client/views/nodes/LinkMenu.scss index 09a830c9e..d2e411c3d 100644 --- a/src/client/views/nodes/LinkMenu.scss +++ b/src/client/views/nodes/LinkMenu.scss @@ -10,5 +10,18 @@ overflow-y: scroll; } +.linkMenu-group { + margin-bottom: 10px; + + &:last-child { + margin-bottom: 0; + } + + .linkMenu-group-name { + border-bottom: 0.5px solid lightgray; + margin-bottom: 4px; + } +} + diff --git a/src/client/views/nodes/LinkMenu.tsx b/src/client/views/nodes/LinkMenu.tsx index 7e4c15312..8aca130a5 100644 --- a/src/client/views/nodes/LinkMenu.tsx +++ b/src/client/views/nodes/LinkMenu.tsx @@ -31,9 +31,9 @@ export class LinkMenu extends React.Component<Props> { let linkItems: Array<JSX.Element> = []; groups.forEach((group, groupType) => { linkItems.push( - <div key={groupType} className="link-menu-group"> - <p className="link-menu-group-name">{groupType}:</p> - <div className="link-menu-group-wrapper"> + <div key={groupType} className="linkMenu-group"> + <p className="linkMenu-group-name">{groupType}:</p> + <div className="linkMenu-group-wrapper"> {this.renderGroup(group, groupType)} </div> </div> diff --git a/src/client/views/nodes/LinkMenuItem.scss b/src/client/views/nodes/LinkMenuItem.scss index 16a1df331..25d167231 100644 --- a/src/client/views/nodes/LinkMenuItem.scss +++ b/src/client/views/nodes/LinkMenuItem.scss @@ -1,13 +1,19 @@ @import "../globalCssVariables"; .linkMenu-item { - border-top: 0.5px solid $main-accent; - padding: 6px; + // border-top: 0.5px solid $main-accent; position: relative; display: flex; font-size: 12px; + .link-name { position: relative; + + p { + padding: 4px 6px; + line-height: 12px; + border-radius: 5px; + } } .linkMenu-item-content { @@ -15,27 +21,25 @@ } .link-metadata { - margin-top: 6px; - padding: 3px; - border-top: 0.5px solid $light-color-secondary; - .link-metadata-row { - margin-left: 6px; - } + padding: 0 10px 0 16px; + margin-bottom: 4px; + color: $main-accent; + font-style: italic; + font-size: 10.5px; } - &:last-child { - border-bottom: 0.5px solid $main-accent; - } &:hover { .linkMenu-item-buttons { display: flex; } .linkMenu-item-content { &.expand-two p { - width: calc(100% - 46px); + width: calc(100% - 52px); + background-color: lightgray; } &.expand-three p { - width: calc(100% - 78px); + width: calc(100% - 84px); + background-color: lightgray; } } } |