Simonwep/pickr

White gap in focus-border

Open

#137 opened on Aug 10, 2019

View on GitHub
 (2 comments) (0 reactions) (0 assignees)JavaScript (4,037 stars) (281 forks)batch import
help wantedimprovement

Description

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): image 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 :)

Contributor guide

Tech stack
javascriptcss
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
CSS box shadowCSS pseudo elementsDeveloper tools for inspecting elements
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60
Research direction
Investigate the current CSS implementation of the focus border using double box shadow in the Pickr source code (likely in the .pcr app class). Consider replacing the double box shadow with a single box shadow combined with an outline or an outline offset to eliminate the white gap. Alternatively, explore using a border with transparent color or inset box shadow. Check if any existing pseudo elements can be repurposed or if the stacking context can be adjusted to avoid the gap. Test the solution across different color themes to ensure no regressions.