diff --git a/ui/src/shared/components/ContextMenu.js b/ui/src/shared/components/ContextMenu.js index bdf2eba29..7f73be4dd 100644 --- a/ui/src/shared/components/ContextMenu.js +++ b/ui/src/shared/components/ContextMenu.js @@ -14,8 +14,14 @@ const ContextMenu = OnClickOutside( {isDeleting - ?
- Confirm + ?
+ +
+ Confirm +
:
diff --git a/ui/src/style/pages/dashboards.scss b/ui/src/style/pages/dashboards.scss index 639721193..6c36a7531 100644 --- a/ui/src/style/pages/dashboards.scss +++ b/ui/src/style/pages/dashboards.scss @@ -194,7 +194,8 @@ $dash-graph-options-arrow: 8px; color 0.25s ease, background-color 0.25s ease; - &:hover { + &:hover, + &.active { cursor: pointer; color: $g20-white; background-color: $g5-pepper; @@ -209,6 +210,11 @@ $dash-graph-options-arrow: 8px; } } .dash-graph-context--confirm { + z-index: 3; + position: absolute; + top: calc(100% + 8px); + left: 50%; + transform: translateX(-50%); width: 58px; height: 24px; border-radius: 3px; @@ -218,14 +224,27 @@ $dash-graph-options-arrow: 8px; line-height: 24px; background-color: $c-curacao; color: $g20-white; - transition: - color 0.25s ease, - background-color 0.25s ease; + transition: background-color 0.25s ease; + + &:before { + position: absolute; + content: ''; + border: 6px solid transparent; + border-bottom-color: $c-curacao; + left: 50%; + top: 0; + transform: translate(-50%,-100%); + transition: border-color 0.25s ease; + } &:hover { background-color: $c-dreamsicle; cursor: pointer; } + &:hover:before { + border-bottom-color: $c-dreamsicle; + } + } /* Presentation Mode */