[Canvas] Decrease size of tray toggle (#25470) (#25575)

* decrease size of toggle bar * change bg colors for toggle
elastic · Nov 13, 2018 · 1593c10 · 1593c10
1 parent 57618ae
commit 1593c10
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 2 deletions.
diff --git a/x-pack/plugins/canvas/public/components/expression/expression.js b/x-pack/plugins/canvas/public/components/expression/expression.js
@@ -27,7 +27,7 @@ export const Expression = ({
   toggleAutocompleteEnabled,
 }) => {
   return (
-    <EuiPanel>
+    <EuiPanel className="canvasTray__panel">
       <ExpressionInput
         functionDefinitions={functionDefinitions}
         error={error}

diff --git a/x-pack/plugins/canvas/public/components/toolbar/toolbar.scss b/x-pack/plugins/canvas/public/components/toolbar/toolbar.scss
@@ -1,3 +1,25 @@
+.canvasToolbar {
+  position: relative;
+}
+
+.canvasTray__toggle {
+  position: absolute;
+  top: $euiSize * -1.25;
+  left: 50%;
+  background-color: $euiColorLightestShade;
+  margin: 0;
+  border-radius: $euiBorderRadius $euiBorderRadius 0 0;
+
+  > .euiFlexItem {
+    margin: 0;
+  }
+
+  button {
+    padding: $euiSizeXS $euiSizeM;
+    box-shadow: 0 -2px 1px rgba($euiColorFullShade, .10)
+  }
+}
+
 .canvasToolbar__controls {
   padding: $euiSizeM;
   height: 100%;

diff --git a/x-pack/plugins/canvas/public/components/toolbar/tray/tray.js b/x-pack/plugins/canvas/public/components/toolbar/tray/tray.js
@@ -11,7 +11,7 @@ import { EuiFlexGroup, EuiFlexItem, EuiButtonIcon } from '@elastic/eui';
 export const Tray = ({ children, done }) => {
   return (
     <Fragment>
-      <EuiFlexGroup justifyContent="spaceAround">
+      <EuiFlexGroup className="canvasTray__toggle" justifyContent="spaceAround">
         <EuiFlexItem grow={false}>
           <EuiButtonIcon size="s" onClick={done} aria-label="Dismiss tray" iconType="arrowDown" />
         </EuiFlexItem>

diff --git a/x-pack/plugins/canvas/public/components/toolbar/tray/tray.scss b/x-pack/plugins/canvas/public/components/toolbar/tray/tray.scss
@@ -3,3 +3,8 @@
   flex-direction: column;
   @include euiBottomShadowFlat;
 }
+
+.canvasTray__panel {
+  background-color: $euiColorLightestShade;
+  border-radius: 0;
+}