Created by: brianfeister
Assumes that users will append it to the :after pseudo class of .arrow. Both the size of the outline (perceived thickness of faux outline) and also the color can accept parameters. All math is handled dynamically.
Opting in would look like:
&.top .arrow {
#popoverArrow > .top( @arrowWidth, @black );
&:after {
#popoverArrow > #outlinedArrow > #top > .inner-arrow( @mainArrowWidth, @outlineWidth, @white );
}
}This pull request was originally made (by mistake) against master here: https://github.com/twitter/bootstrap/pull/4323
To answer @markdotto's question about -1.5 and 3 in the math, it's in order to preserve the intended result of the arrowWidth variable. Based on the pythagorean theorem, despite the clipping effect being done by CSS (which doesn't effect the darker arrow which is behind the main popover bg in the DOM, the point of origin for the 0-width DOM element is technically inside of the main popover body. As a result, calculating the y-axis width of the new element I'm creating would overlap the content of the tooltip if I used *2 in my math. The -3px in the math is just a shim - the best way I could come up with for ensuring that the integrity of the arrow size is maintained (according to the pythagorean theorem) without the arrow being disconnected from the popover body.
Also, for what it's worth - if we didn't care about the passed var being an exact match for the y-axis width of the arrow, we could clean it up, and even with that limitation I'm sure @fat could do this better :)