Permalink
Browse files

fix(Toolbar): Arrow positioning overflow

  • Loading branch information...
HHogg committed Sep 25, 2018
1 parent 4d2c89f commit d745b2b11499592a2374f6258cfb0c00a5cf4eb0
Showing with 6 additions and 8 deletions.
  1. +5 −6 src/Toolbar/Toolbar.css
  2. +1 −2 src/Toolbar/Toolbar.js
@@ -4,10 +4,7 @@

.Toolbar__popper {
position: absolute;
}

.Toolbar {
padding: var(--Toolbar-tip-size);
margin: var(--Toolbar-tip-size);
}

.Toolbar__content {
@@ -18,9 +15,11 @@

.Toolbar__tip {
position: absolute;
bottom: 0;
top: 100%;
width: var(--Toolbar-tip-size);
height: var(--Toolbar-tip-size);
transform: translateY(-50%) rotate(45deg);
margin: var(--Toolbar-tip-size);
transform: translateY(calc(-50% + var(--Toolbar-tip-size) * -1)) rotate(45deg);
background-color: var(--color-text--shade-2);
pointer-events: none;
}
@@ -150,8 +150,7 @@ export default class Toolbar extends Component {
className="Toolbar"
onExited={ () => this.handleExited() }
visible={ visible }>
<Base
backgroundColor="text-shade-2"
<div
className="Toolbar__tip"
ref={ (el) => this.elArrow = ReactDOM.findDOMNode(el) } />
<Base

0 comments on commit d745b2b

Please sign in to comment.