This repository has been archived by the owner on Nov 20, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
_debug.scss
73 lines (65 loc) · 1.85 KB
/
_debug.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
/*
---
name: Debugging styles
category:
- debug
- debug/styles
sourcePath: /shared/_debug.scss
---
For debugging *visually* the classes below probably will help you. Place them
on any element you would like to.
- `debug-vertical-rhythm` (shows the vertical baseline grid)
- `debug-breakpoints` (shows the currently active breakpoint)
- `debug-box-model` (draws an outline around the element and *every* child element)
```html
<button onclick="document.documentElement.classList.toggle('debug-breakpoints')">debug-breakpoints</button>
<button onclick="document.body.classList.toggle('debug-vertical-rhythm')">debug-vertical-rhythm</button>
<button onclick="document.body.classList.toggle('debug-box-model')">debug-box-model</button>
```
*/
.debug-vertical-rhythm {
position: relative;
&::after {
background-color: transparent;
background-image: linear-gradient(transparent 50%, rgba(#37f, 0.25) 0%);
background-repeat: repeat;
background-size: 100% vertical-base();
content: "";
min-height: 100%;
left: 0;
pointer-events: none;
position: absolute;
top: 0;
width: 100%;
z-index: $z-debug;
}
}
.debug-breakpoints {
position: relative;
&::after {
background-color: #37f;
bottom: 0;
color: #fff;
font-family: monospace;
font-size: 0.75rem;
line-height: vertical-base();
padding: vertical-base(0.5) 1rem;
position: fixed;
right: 0;
white-space: pre-wrap;
z-index: $z-debug;
@each $name, $width in $breakpoints {
@include media(">=#{$width}") {
content: "breakpoint: #{$name} (#{$width})";
}
}
}
}
.debug-box-model {
&,
& *,
& *::after,
& *::before {
outline: 1px solid rgba(#f33, 0.5);
}
}