embedded panel styles (#58654)

Merging to WIP draft branch
elastic · Feb 27, 2020 · af080f0 · af080f0
1 parent 7f08b83
commit af080f0
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 1 deletion.
diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/embeddable/embeddable.tsx b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/embeddable/embeddable.tsx
@@ -31,7 +31,7 @@ const embeddablesRegistry: {
 const renderEmbeddable = (embeddableObject: IEmbeddable, domNode: HTMLElement) => {
   return (
     <div
-      className="embeddable"
+      className="canvasEmbeddable"
       style={{ width: domNode.offsetWidth, height: domNode.offsetHeight, cursor: 'auto' }}
     >
       <I18nContext>

diff --git a/x-pack/legacy/plugins/canvas/public/style/hackery.scss b/x-pack/legacy/plugins/canvas/public/style/hackery.scss
@@ -46,3 +46,27 @@
     max-height: 680px; // limit for large screen displays
   }
 }
+
+.canvasEmbeddable .embPanel {
+  border: none;
+  background: none;
+
+  .embPanel__title {
+    margin-bottom: $euiSizeXS;
+  }
+
+  .embPanel__optionsMenuButton {
+    border-radius: $euiBorderRadius;
+  }
+
+  .canvas-isFullscreen & {
+    .embPanel__optionsMenuButton {
+      opacity: 0;
+    }
+
+    &:focus .embPanel__optionsMenuButton,
+    &:hover .embPanel__optionsMenuButton {
+      opacity: 1;
+    }
+  }
+}