46 lines
814 B
SCSS
46 lines
814 B
SCSS
|
@mixin tagElement($color) {
|
||
|
|
position: relative;
|
||
|
|
& > div.dbg {
|
||
|
|
position: absolute;
|
||
|
|
top: -18px; right: 10px;
|
||
|
|
margin: 0; border: 0;
|
||
|
|
padding: 0 0.5em;
|
||
|
|
background-color: transparentize($color, 0.5);
|
||
|
|
font-size: 75%;
|
||
|
|
font-weight: normal;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
button#debug-toggle {
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
right: 0;
|
||
|
|
width: auto;
|
||
|
|
z-index: 10;
|
||
|
|
}
|
||
|
|
|
||
|
|
div#test {
|
||
|
|
div, span {
|
||
|
|
margin: 1em;
|
||
|
|
border: 1px solid transparent;
|
||
|
|
padding: 1em;
|
||
|
|
}
|
||
|
|
&.debug {
|
||
|
|
div {
|
||
|
|
border-color: dimgray;
|
||
|
|
@include tagElement(dimgray);
|
||
|
|
}
|
||
|
|
span {
|
||
|
|
border-color: deeppink;
|
||
|
|
@include tagElement(deeppink);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
div.blue {
|
||
|
|
font-weight: bold;
|
||
|
|
color: blue;
|
||
|
|
border: 2px solid blue;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|