@mixin displayMarquee($c) { > .c-frame-edit { // All other frames //@include test($c, 0.4); display: block; } > .c-frame > .c-frame-edit { // Line object frame //@include test($c, 0.4); display: block; } } .l-layout { @include abs(); display: flex; flex-direction: column; overflow: auto; &__grid-holder { display: none; } &__frame { position: absolute; } } .is-editing { .l-shell__main-container { &[s-selected], &[s-selected-parent] { // Display grid and allow edit marquee to display in main layout holder when editing > .l-layout { background: $editUIGridColorBg; > [class*="__grid-holder"] { display: block; } } } } .l-layout__frame { &[s-selected], &[s-selected-parent] { // Display grid and allow edit marquee to display in nested layouts when editing > * > * > .l-layout { background: $editUIGridColorBg; box-shadow: inset $editUIGridColorFg 0 0 2px 1px; > [class*='grid-holder'] { display: block; } } } } /*********************** EDIT MARQUEE CONTROL */ *[s-selected-parent] { > .l-layout { // When main shell layout is the parent @include displayMarquee(deeppink); } > * > * > * { // When a sub-layout is the parent @include displayMarquee(blue); } } }