/* Grid
========================================================================== */
// Grid background .grid {
background-image: linear-gradient(to bottom, hsla(200, 100%, 50%, .3) 1px, transparent 1px); background-position: left top; background-repeat: repeat; background-size: 100% #{$leading + 'px'}; background-size: 100% #{$leading-rem + 'rem'}; @media screen and (min-width: #{ $max-width + 5 + 'em'}) { $leading: $leading-desktop; $leading-rem: $leading-rem-desktop; background-size: 100% #{$leading + 'px'}; background-size: 100% #{$leading-rem + 'rem'}; }
}
// Double grid background .grid-double {
@extend .grid; background-image: linear-gradient(to bottom, hsla(200, 100%, 50%, .3) 1px, transparent 1px, transparent #{ .5 * $leading + 'px'}, hsla(200, 100%, 50%, .2) #{ .5 * $leading + 'px'}, transparent #{ .5 * $leading + 1 + 'px'}, transparent #{$leading + 'px'}); @media screen and (min-width: #{ $max-width + 5 + 'em'}) { $leading: $leading-desktop; $leading-rem: $leading-rem-desktop; background-image: linear-gradient(to bottom, hsla(200, 100%, 50%, .3) 1px, transparent 1px, transparent #{ .5 * $leading + 'px'}, hsla(200, 100%, 50%, .2) #{ .5 * $leading + 'px'}, transparent #{ 0.5 * $leading + 1 + 'px'}, transparent #{$leading + 'px'}); }
}
// Grid button .toggleWrapper {
@if $edit-mode == true { display: block; } @else if $edit-mode == false { display: none; } position: fixed; top: #{$leading + 'px'}; right: #{$leading + 'px'}; background-color: #231F20; border-radius: 25px; padding: 0 10px 0 20px; height: 32px; @media screen and (min-width: #{ $max-width + 5 + 'em'}) { right: #{$leading-desktop + 'px'}; top: #{$leading-desktop + 'px'}; }
}
.btnToggleGrid {
background: url("../../assets/images/grid-icons.png") top right no-repeat; background-size: 32px; display: block; font-size: 14px; text-decoration: none; padding-right: 35px; height: 32px; line-height: 34px; font-family: Helvetica, Arial, sans-serif; text-transform: uppercase; font-weight: 700; color: #fff; @media screen and (min-width: #{ $max-width + 5 + 'em'}) { $leading: $leading-desktop; $leading-rem: $leading-rem-desktop; top: #{$leading + 'px'}; right: #{$leading + 'px'}; } &:hover { color: #fff; } &:active { color: #f00; }
}
.double-grid {
background-position-y: -32px;
}
.grid-off {
background-position-y: -64px;
}