diff --git a/src/containers/visualization.js b/src/containers/visualization.js index 61bea93..e28f419 100644 --- a/src/containers/visualization.js +++ b/src/containers/visualization.js @@ -41,7 +41,7 @@ import AppDispatcher from '../app-dispatcher'; import NotificationsDataManager from '../data-managers/notifications-data-manager'; import NotificationsFactory from '../data-managers/notifications-factory'; -import 'react-contextmenu/public/styles.5bb557.css'; +import '../styles/context-menu.css'; class Visualization extends React.Component { static getStores() { diff --git a/src/styles/context-menu.css b/src/styles/context-menu.css new file mode 100644 index 0000000..c21fffc --- /dev/null +++ b/src/styles/context-menu.css @@ -0,0 +1,80 @@ +/* Copied from react-contextmenu/examples */ + +.react-contextmenu { + min-width: 160px; + padding: 5px 0; + margin: 2px 0 0; + font-size: 16px; + color: #373a3c; + text-align: left; + background-color: #fff; + background-clip: padding-box; + border: 1px solid rgba(0,0,0,.15); + border-radius: .25rem; + outline: none; + opacity: 0; + pointer-events: none; + transition: opacity 250ms ease !important; +} + +.react-contextmenu.react-contextmenu--visible { + opacity: 1; + pointer-events: auto; +} + +.react-contextmenu-item { + padding: 3px 20px; + font-weight: 400; + line-height: 1.5; + color: #373a3c; + text-align: inherit; + white-space: nowrap; + background: 0 0; + border: 0; +cursor: pointer; +} + +.react-contextmenu-item.react-contextmenu-item--active, +.react-contextmenu-item.react-contextmenu-item--selected { + color: #fff; + background-color: #20a0ff; + border-color: #20a0ff; + text-decoration: none; +} + +.react-contextmenu-item.react-contextmenu-item--disabled, +.react-contextmenu-item.react-contextmenu-item--disabled:hover { + color: #878a8c; + background-color: transparent; + border-color: rgba(0,0,0,.15); +} + +.react-contextmenu-item--divider { + margin-bottom: 3px; + padding: 2px 0; + border-bottom: 1px solid rgba(0,0,0,.15); + cursor: inherit; +} +.react-contextmenu-item--divider:hover { + background-color: transparent; + border-color: rgba(0,0,0,.15); +} + +.react-contextmenu-item.react-contextmenu-submenu { +padding: 0; +} + +.react-contextmenu-item.react-contextmenu-submenu > .react-contextmenu-item { +} + +.react-contextmenu-item.react-contextmenu-submenu > .react-contextmenu-item:after { + content: "\25B6"; + display: inline-block; + position: absolute; + right: 7px; +} + +.example-multiple-targets::after { + content: attr(data-count); + display: block; +}