Skip to content

Instantly share code, notes, and snippets.

@keithdevon
Created March 27, 2018 09:39
Show Gist options
  • Save keithdevon/8543d50489465230b8d1a8a506024485 to your computer and use it in GitHub Desktop.
Save keithdevon/8543d50489465230b8d1a8a506024485 to your computer and use it in GitHub Desktop.
Styling for the Neat 2 grid overlay
/*
* Layout debugging display
*/
body {
&.env--local {
.grid-overlay {
display: none;
position: fixed;
z-index: 99999999;
top: 0;
left: $base-spacing;
right: $base-spacing;
height: 100vh;
pointer-events: none; // allows the user to 'click through' the element
&.is--visible {
display: block;
}
&__inner {
@extend .outer-container;
@include grid-visual(rgba($highrise-green, 0.2));
height: 100vh;
@include grid-media($large-screen){
@include grid-visual(rgba($highrise-green, 0.2), $large-screen);
}
}
&-toggle {
position: fixed;
top: initial;
bottom: $base-spacing*2;
left: $base-spacing*2;
cursor: pointer;
pointer-events: all; // makes this element clickable
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment