87 lines
1.3 KiB
CSS
87 lines
1.3 KiB
CSS
/* Debug utilities */
|
|
.debug,
|
|
.debug * {
|
|
outline: 1px solid blue;
|
|
}
|
|
.debug:before {
|
|
content: "N/A";
|
|
@apply absolute pin-t pin-l;
|
|
@apply bg-neptune-2 bold text-white;
|
|
@apply p-0x;
|
|
}
|
|
@screen sm {
|
|
.debug,
|
|
.debug * {
|
|
outline: 1px solid teal;
|
|
}
|
|
.debug:before {
|
|
content: "sm";
|
|
@apply bg-mercury-2;
|
|
}
|
|
}
|
|
@screen md {
|
|
.debug,
|
|
.debug * {
|
|
outline: 1px solid orange;
|
|
}
|
|
.debug:before {
|
|
content: "md";
|
|
@apply bg-saturn-2;
|
|
}
|
|
}
|
|
@screen lg {
|
|
.debug,
|
|
.debug * {
|
|
outline: 1px solid red;
|
|
}
|
|
.debug:before {
|
|
content: "lg";
|
|
@apply bg-mars-2;
|
|
}
|
|
}
|
|
@screen xl {
|
|
.debug,
|
|
.debug * {
|
|
outline: 1px solid pink;
|
|
}
|
|
.debug:before {
|
|
content: "xl";
|
|
@apply bg-venus-2;
|
|
}
|
|
}
|
|
|
|
/* See classes on hover */
|
|
.debug-class *[class] {
|
|
outline: 1px solid green;
|
|
cursor: pointer;
|
|
&:before {
|
|
position: absolute;
|
|
margin-top: -2rem;
|
|
content: attr(class);
|
|
@apply .text-white .p-0x;
|
|
@apply .hidden;
|
|
@apply .bg-green;
|
|
}
|
|
&:hover {
|
|
&:before {
|
|
@apply .inline;
|
|
}
|
|
}
|
|
*[class] {
|
|
outline: 1px solid orange;
|
|
&:before {
|
|
@apply .bg-orange;
|
|
}
|
|
*[class] {
|
|
outline: 1px solid red;
|
|
&:before {
|
|
@apply .bg-red;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Make images without alt pop for debug */
|
|
img:not([alt]) {
|
|
filter: grayscale(100%);
|
|
}
|