White gap in focus-border

[simonwep]

Improvement

Currently, if a custom color is applied to .pcr-app there's a white, non-transparent, gap between the focus border and the element (which looks really ugly in a dark envieroment): Unfortunately it's not possible to use any pseudo-elements (most of them are in-use and can't be removed because of stacking-issues).

The current focus-border is made through a double box-shadow where the first one makes the gap:

box-shadow: 0 0 0 1px rgba(white, 0.85), 0 0 0 3px $color;

But this causes a white (or colored) gap. Already tried to fix it with double-borders, but this would be really difficult since the focus-border is applied to many elements with different pseudo-elements and sizes.

Any help is highly appreciated :)

[sdbrannum]

Is there any reason

border: 1px solid transparent;
box-shadow: 0 0 0 3px $color;

won't work?

[simonwep]

@sdbrannum The idea is awesome! The only problem is that the background behind the border is still where which causes a transparency-pattern appearing behind the previous-color-button. Box-shadow also shrinks the element-size (I'm using box-sizing: border-box) which looks somehow weird and glitchy :/