Skip to content

Commit

Permalink
New debugger implementation
Browse files Browse the repository at this point in the history
  • Loading branch information
Zaydek Michels-Gualtieri committed Jan 5, 2021
1 parent bff5534 commit bf0e9a7
Showing 1 changed file with 21 additions and 4 deletions.
25 changes: 21 additions & 4 deletions src/sass/head/debugger.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,16 @@
@mixin -zero-out($inset: 0) {
position: absolute;
top: $inset;
right: $inset;
bottom: $inset;
left: $inset;
content: "";
@content;
}

// Based on https://codepen.io/zaydek/pen/vYXjdXe.
//
// prettier-ignore
@mixin debugger {
[data-debug] * {
// TODO: Extract:
Expand All @@ -12,9 +24,14 @@
}

[data-debug] .spacer:empty {
align-self: stretch;
background-color: hsla(210deg, 100%, 50%, 0.05);
outline: 2px dashed hsla(210deg, 100%, 50%, 0.5);
outline-offset: -2px; // Invert
align-self: stretch; // Stretch on the cross-axis
outline: revert; // No-op debug `outline`

position: relative;
&::before {
@include -zero-out(-1px) {
background-color: hsla(210deg, 100%, 50%, 0.1);
}
}
}
}

0 comments on commit bf0e9a7

Please sign in to comment.