// ==========================================================================
// View layout
// Use when you need to quickly see your grid structure
//
// Adapted for Anvil by @see8ch
// ==========================================================================


// ==========================================================================
// Mixin
// ==========================================================================

@mixin mark($color) {
	outline: 4px solid rgba($color, 0.25) !important;
	background-color: rgba($color, 0.15) !important;
}


// ==========================================================================
// Elements to mark
// Add your own selectors for a more complete grid
// ==========================================================================

// Example:
// .container {
//     @include mark(green);
// }

// _grid-responsive
.row {
	@include mark(blue);
}
[class*="span"] {
	@include mark(red);
}

// Creates a line down the middle of the window to help with centering.
html:after {
	content: "";
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	margin-left: -2px;
	width: 50%;
	border-right: 4px rgba(blue, 0.25) solid;
	z-index: 99;
	pointer-events: none; // Lets users interact with the site normally
}