spacedeck-open/styles/guides.scss

@import "vars";
@import "mixins";

$guide-gutter: 50px !default;

.space-guides {
    position:absolute;
    height:auto;
    width: auto;
    z-index: 5000;
    pointer-events: none !important;

    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;

    // compensate for border spacing
    // width: auto;
    // left: -50px;
    // right: -50px;

    table {
        @include box-sizing(content-box);
        width: 100%; // space width + (border spacing * 2)
        height:100%;

        position:absolute;
        table-layout: auto; 
        border-collapse: separate; 
        border-spacing: $guide-gutter 0px; 
        // border-collapse: collapse; 
        // border-spacing: 0px 0px; 

        .column td {
            border:1px solid rgba(40,140,215,0.6);;
            // background-color:rgba(40,140,215,0.125);
            &:first-child {
               // border-left:1px solid #448afe;
            }
            // -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.075), 0 0 10px rgba(255,255,255, 0.075);
        }

        .margin-top td,
        .margin-bottom td {
            // background-color:rgba(40,140,215,0.1);
            border-top:none;
            border-bottom:none;
            border-right:1px solid rgba(40,140,215,0.125);
            border-left:1px solid rgba(40,140,215,0.125);;
            height: $guide-gutter;
        }

        &.no-gutter .margin-top td:first-child,
        &.no-gutter .margin-bottom td:first-child {
            border-left:1px solid rgba(40,140,215,0.125);
        }

        &.no-gutter .column td,
        &.no-gutter .margin-top td,
        &.no-gutter .margin-bottom td{
            border-left:none;
        }
    }
}