superdesk-ui-framework 7.0.0-dev-hg0 → 7.0.0-dev-hg2

package/app/styles/grids/_grid-layout.scss

@@ -0,0 +1,1162 @@
+@use "../variables/colors";
+@use "../variables/dimensions";
+
+// Complete CSS Grid layout
+
+// ------ Basic page with space for the main navigation on the left ------ //
+.sd-page-grid--basic {
+    margin: 0;
+    display: grid;
+    grid-template-columns: auto 1fr;
+    grid-template-rows: 4.8rem 1fr auto auto;
+    grid-gap: 0;
+    height: 100vh;
+    position: relative;
+    background-color: var(--sd-colour-panel-bg--100);
+
+    .sd-main-menu {
+        grid-column: 1/2;
+        grid-row: 1/5;
+        background-color: var(--sd-colour-bg--02);
+        width: 30rem;
+        box-shadow: inset -4px 0 12px hsla(0, 0%, 0%, 0.9);
+        display: none;
+
+        .sd-left-nav__btn {
+            color: hsla(0, 0%, 100%, 0.75);
+        }
+
+        .sd-left-nav__group-header {
+            border-block-start: 1px solid hsla(0, 0%, 100%, 0.14);
+        }
+    }
+
+    .sd-top-menu {
+        grid-column: 2/3;
+        grid-row: 1/2;
+        z-index: 2;
+        position: static;
+    }
+
+    .sd-content {
+        grid-column: 2/3;
+        grid-row: 2/3;
+        z-index: 1;
+        background-color: var(--sd-colour-panel-bg--100);
+        overflow: auto;
+    }
+
+    .bottom-bar,
+    .sd-bottom-bar {
+        grid-column: 2/3;
+        grid-row: 4/5;
+    }
+}
+
+.bottom-bar,
+.sd-bottom-bar {
+    min-height: 3.2rem;
+    background-color: var(--sd-colour-bottom-bar);
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    display: grid;
+    grid-template-rows: auto;
+    grid-template-columns: dimensions.$sd-sidebarMenu-width 1fr auto auto;
+    color: hsla(0, 0%, 100%, 0.75);
+}
+
+.sd-bottom-bar__action {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: dimensions.$sd-sidebarMenu-width;
+    text-align: center;
+    padding: 0;
+    background-color: var(--sd-colour-top-menu__btn);
+    transition: all 0.2s ease;
+
+    &:hover {
+        background-color: hsl(0, 0%, 0%);
+        cursor: pointer;
+    }
+
+    &:active {
+        background-color: var(--sd-colour-interactive);
+    }
+}
+
+.sd-bottom-bar__action--disabled {
+    pointer-events: none !important;
+    opacity: 0.3;
+}
+
+.sd-page-content__left-tabs,
+.sd-page-content__right-tabs {
+    flex-grow: 0;
+    flex-shrink: 0;
+    position: relative;
+
+    &::after {
+        display: block;
+        inset-block-end: 0;
+        content: '';
+        width: 4px;
+        position: absolute;
+        z-index: 80;
+        inset-block-start: 0;
+    }
+}
+
+.sd-page-content__left-tabs::after {
+    inset-inline-end: -4px;
+    background-image: linear-gradient(to right, rgba(0, 0, 0, .25) 0, transparent 100%);
+}
+
+.sd-page-content__right-tabs::after {
+    inset-inline-start: -4px;
+    background-image: linear-gradient(to left, rgba(0, 0, 0, .25) 0, transparent 100%);
+}
+
+// Container for layouts consisting of a main content block with 1 or 2 slide-in panes 
+.sd-column-box--3,
+.sd-column-box--2 {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: row;
+    overflow-x: hidden;
+    overflow-y: auto;
+}
+
+.sd-column-box--3 {
+    z-index: 1;
+}
+
+.sd-column-box__main-column {
+    flex-grow: 1;
+    flex-shrink: 1;
+    overflow: auto;
+    background-color: colors.$mainListBackGround;
+}
+
+.sd-column-box__main-column--padded {
+    padding: 2rem;
+}
+
+.sd-column-box__main-column--20 {
+    width: 20%;
+}
+
+.sd-column-box__main-column--30 {
+    width: 30%;
+}
+
+.sd-column-box__main-column--40 {
+    width: 40%;
+}
+
+// 50% is the default width
+
+.sd-column-box__main-column--60 {
+    width: 60%;
+}
+
+.sd-column-box__main-column--70 {
+    width: 70%;
+}
+
+.sd-column-box__main-column--80 {
+    width: 80%;
+}
+
+.sd-column-box__main-column--photo-preview {
+    display: flex;
+    flex-direction: column;
+    background-color: var(--sd-colour-bg__photo-preview);
+    position: relative;
+
+    .sd-photo-preview {
+        flex-grow: 1;
+    }
+}
+
+.sd-column-box__main-column--left {
+    border-inline-end: 1px solid var(--sd-colour-line--light);
+}
+
+.sd-column-box__main-column--border-right {
+    border-inline-end: 2px solid var(--sd-colour-line--medium);
+}
+
+.sd-column-box__main-column--flex {
+    display: flex;
+    flex-direction: column;
+}
+
+.sd-column-box__main-column-top-bar {
+    padding: 0.8rem 2.4rem;
+    border-block-end: 1px solid var(--sd-colour-line--x-light);
+    display: flex;
+    flex-direction: row;
+    gap: dimensions.$sd-base-increment;
+}
+
+.sd-column-box__main-column-inner {
+    overflow-y: auto;
+    padding: 2rem;
+    flex-grow: 1;
+}
+
+.sd-column-box__slide-in-column {
+    width: 26rem;
+    transition: all .2s ease-out;
+    display: flex;
+    flex-direction: column;
+    border-inline-start: 1px solid var(--sd-colour-line--light);
+    overflow-x: hidden;
+    position: relative;
+    flex-shrink: 0;
+    background-color: var(--sd-colour-bg__slide-in-column-inner);
+
+    &::before {
+        display: block;
+        inset-block-start: 0;
+        inset-block-end: 0;
+        content: '';
+        width: 4px;
+        position: absolute;
+        inset-inline-start: 0;
+        z-index: 80;
+        background-image: linear-gradient(to right, hsla(0, 0%, 0%, 0.12) 0%, transparent 100%);
+    }
+
+    .sd-column-box__slide-in-column-inner {
+        opacity: 1;
+        transition: all 0.1s ease-out;
+        transition-delay: 0.2s;
+        background-color: var(--sd-colour-bg__slide-in-column-inner);
+    }
+
+    &.sd-column-box__slide-in-column--light {
+        background-color: var(--sd-colour-panel-bg--000);
+
+        .sd-column-box__slide-in-column-inner {
+            background-color: var(--sd-colour-panel-bg--000);
+        }
+    }
+}
+
+.sd-column-box__slide-in-column--large {
+    width: 40rem;
+}
+
+.sd-column-box__slide-in-column--closed {
+    width: 0;
+    border-inline-start: 1px solid transparent;
+    overflow: hidden;
+
+    .sd-column-box__slide-in-column-inner {
+        opacity: 0;
+        transition: all 0.1s ease-out;
+        transition-delay: 0;
+    }
+}
+
+.sd-slide-in-panel {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+.sd-slide-in-panel__header {
+    flex-grow: 0;
+    flex-shrink: 0;
+    z-index: 2;
+    position: relative;
+    min-height: 4.8rem;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    box-shadow: 0 1px 0 var(--sd-colour-line--light);
+}
+
+.sd-slide-in-panel__heading {
+    padding: 0 2rem 0 1.6rem;
+    margin: 0;
+    font-size: 1.5rem;
+    color: var(--color-text-muted);
+    font-weight: 300;
+    letter-spacing: 0.02em;
+    margin-inline-end: auto;
+}
+
+.sd-slide-in-panel__heading--marg-b10 {
+    margin-block-end: 1rem;
+}
+
+.sd-slide-in-panel__heading--marg-b16 {
+    margin-block-end: 1.6rem;
+}
+
+.sd-slide-in-panel__heading--marg-b20 {
+    margin-block-end: 2rem;
+}
+
+.sd-slide-in-panel__close {
+    z-index: 2;
+    color: var(--color-text-subdued);
+    margin-inline-end: dimensions.$sd-base-increment * 1.5;
+}
+
+.sd-slide-in-panel__content {
+    flex-grow: 1;
+    overflow-y: auto;
+}
+
+.sd-slide-in-panel__content-block {
+    padding: 1.6rem;
+
+    .sd-slide-in-panel__heading {
+        padding: 0;
+    }
+}
+
+.sd-slide-in-panel__content-block--first {
+    padding-block-start: 3.2rem
+}
+
+.sd-slide-in-panel__footer {
+    position: relative;
+    flex-grow: 0;
+    flex-shrink: 0;
+    z-index: 2;
+    position: relative;
+    min-height: 4.8rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: dimensions.$sd-base-increment * 1.5 dimensions.$sd-base-increment * 2;
+
+    &::before {
+        position: absolute;
+        content: '';
+        inset-block-start: -0.4rem;
+        inset-inline-start: 0;
+        inset-inline-end: 0;
+        height: 0.4rem;
+        border-block-end: 1px solid var(--sd-colour--shadow-line);
+        background-image: linear-gradient(to top, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0) 100%);
+    }
+}
+
+.sd-page-content__content-block {
+    transition: all 0.2s ease-out;
+    transition-delay: 0.1s;
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+    overflow-x: hidden;
+    flex-grow: 1;
+    position: relative;
+
+    .subnav {
+        flex-shrink: 0;
+        flex-grow: 0;
+    }
+
+    .sd-list-item-group {
+        margin: 2.4rem;
+        opacity: 1;
+        transition: opacity 0.2s ease-in;
+        transition-delay: 0.1s;
+    }
+
+    .sd-column-box--3 {
+        opacity: 1;
+        transition: opacity 0.2s ease-in;
+        transition-delay: 0.1s;
+    }
+
+    .sd-list-header {
+        margin: 2.4rem 2.4rem -2rem 2.4rem;
+    }
+}
+
+.sd-page-content__content-block--double-sidebar {
+    width: calc(100vw - #{dimensions.$sd-sidebarMenu-width * 2});
+}
+
+.sd-page-content__content-block--right::before {
+    border-inline-start: 3px solid var(--sd-colour__splitter);
+    background-image: linear-gradient(to right, rgba(0, 0, 0, .2) 0, transparent 100%);
+    display: block;
+    inset-block-end: 0;
+    content: '';
+    width: 6px;
+    position: absolute;
+    z-index: 8000;
+    inset-block-start: 0;
+}
+
+.sd-edit-panel {
+    background-color: colors.$white;
+    transition: all .2s ease-out;
+    display: flex;
+    flex-direction: column;
+    overflow-x: hidden;
+}
+
+// ------ Basic page with space for the main navigation on the left ------ //
+
+.sd-page-content--split {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+
+    // override basic behaviour of the sd-sidebar-menu
+    .sd-sidebar-menu {
+        position: relative;
+        inset-block-start: 0;
+        inset-block-end: auto;
+    }
+
+    // Content block width modifiers
+    .sd-page-content__content-block--100 {
+        width: calc(100vw - #{dimensions.$sd-sidebarMenu-width});
+    }
+
+    .sd-page-content__content-block--70 {
+        width: calc(70vw - #{dimensions.$sd-sidebarMenu-width});
+    }
+
+    .sd-page-content__content-block--50 {
+        width: calc(50vw - #{dimensions.$sd-sidebarMenu-width});
+    }
+
+    .sd-page-content__content-block--30 {
+        width: calc(30vw - #{dimensions.$sd-sidebarMenu-width});
+    }
+}
+
+$planningEditor-width: 53rem;
+
+.sd-page-content--slide-in {
+    display: flex;
+    flex-direction: row;
+
+    // override basic behaviour of the sd-sidebar-menu
+    .sd-sidebar-menu {
+        position: relative;
+        inset-block-start: 0;
+        inset-block-end: auto;
+    }
+
+    .sd-page-content__content-block--main {
+        width: calc(100vw - #{dimensions.$sd-sidebarMenu-width});
+    }
+
+    .sd-page-content__content-block--30-slide {
+        width: 0;
+
+        .side-panel {
+            opacity: 0;
+            transition: opacity 0.2s ease-in;
+            transition-delay: 0s;
+
+        }
+    }
+}
+
+.sd-page-content--slide-in--open {
+    .sd-page-content__content-block--main {
+        width: calc(100vw - #{dimensions.$sd-sidebarMenu-width + $planningEditor-width});
+    }
+
+    .sd-page-content__content-block--30-slide {
+        width: $planningEditor-width;
+
+        .side-panel {
+            opacity: 1;
+            transition-delay: 0.2s;
+        }
+    }
+}
+
+// Page specific behaviour
+
+.sd-page-content--split {
+    &.edit-closed {
+        #leftContent.sd-page-content__content-block {
+            width: calc(100vw - #{dimensions.$sd-sidebarMenu-width});
+        }
+
+        #editPane.sd-page-content__content-block {
+            width: 0;
+            opacity: 0;
+        }
+
+        .open-preview .sd-preview-panel {
+            width: 50rem;
+        }
+    }
+}
+
+.sd-page-content--split {
+    &.sd-page-content--split-left {
+        #leftContent.sd-page-content__content-block {
+            width: 0;
+            opacity: 0;
+
+            .sd-list-item-group {
+                opacity: 0;
+                transition-delay: 0s;
+            }
+
+            .sd-column-box--3 {
+                opacity: 0;
+                transition-delay: 0s;
+            }
+
+            .sd-list-header {
+                opacity: 0;
+                transition-delay: 0s;
+            }
+        }
+
+    }
+
+    &.sd-page-content__content-block.shift-to-left {
+        #editPane.sd-page-content__content-block {
+            width: calc(100vw - #{dimensions.$sd-sidebarMenu-width});
+        }
+
+        #leftContent.sd-page-content__content-block {
+            width: 0;
+        }
+    }
+}
+
+// ----------- OTHER ELEMENTS ----------- //
+
+.sd-sidebar-menu__btn--closed {
+    .sd-sidebar-menu__helper-icon {
+        transform: rotate(180deg);
+    }
+}
+
+.sd-filters-panel,
+.sd-preview-panel,
+.sd-publish-panel {
+    width: 0;
+    transition: all .2s ease-out;
+    display: flex;
+    flex-direction: column;
+    overflow-x: hidden;
+
+    .side-panel {
+        opacity: 0;
+        transition: all 0.1s ease-out;
+        transition-delay: 0;
+    }
+}
+
+.sd-filters-panel {
+    background-color: var(--sd-colour-panel-bg--100);
+    border-inline-end: 0px solid hsla(0, 0%, 0%, 0);
+}
+
+.sd-preview-panel {
+    background-color: var(--sd-colour-panel-bg--100);
+    border-inline-start: 0px solid hsla(0, 0%, 0%, 0);
+}
+
+.open-filters {
+    .sd-filters-panel {
+        width: 36rem;
+        border-inline-end: 2px solid var(--sd-colour__side-panel-border);
+
+        .side-panel {
+            opacity: 1;
+            transition: all 0.2s ease-out;
+            transition-delay: .2s;
+        }
+    }
+
+    .sd-filters-panel--border-left {
+        border-inline-end: none;
+        border-inline-start: 2px solid var(--sd-colour__side-panel-border);
+    }
+}
+
+.open-preview {
+    .sd-preview-panel {
+        width: 36rem;
+        border-inline-start: 1px solid rgba(0, 0, 0, 0.25);
+        flex-shrink: 0;
+
+        .side-panel {
+            opacity: 1;
+            transition: all 0.2s ease-out;
+            transition-delay: .2s;
+        }
+    }
+
+    .sd-preview-panel--dark-ui {
+        border-left-color: rgba(0, 0, 0, 0.4);
+    }
+
+    .authoring & {
+        .sd-preview-panel {
+            width: auto;
+            max-width: 32rem;
+        }
+    }
+}
+
+.sd-filters-panel,
+.sd-preview-panel {
+    .side-panel {
+        opacity: 0;
+    }
+}
+
+.text-label {
+    display: inline-block;
+    min-width: 4rem;
+    color: var(--color-text-muted);
+    font-weight: 300;
+}
+
+.text-label--auto {
+    min-width: auto;
+}
+
+.sd-content-navigation-panel {
+    width: 20rem;
+    background-color: var(--sd-colour-background__left-nav);
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+    overflow-x: hidden;
+    border-right-color: var(--sd-colour-line--light);
+    border-right-style: solid;
+    border-right-width: 0;
+    transition: all .2s ease-out .1s;
+
+    .subnav {
+        flex-shrink: 0;
+    }
+
+    .content-nav-closed & {
+        width: 0;
+
+        .sd-content-nav {
+            opacity: 0;
+            transition: all .1s ease-out;
+        }
+
+        &.sd-content-navigation-panel--border-right {
+            border-right-width: 0;
+        }
+    }
+}
+
+.sd-content-navigation-panel--border-right {
+    border-right-width: 2px;
+}
+
+// publish panel
+.sd-publish-panel {
+    .open-publish & {
+        width: 40rem;
+        flex-shrink: 0;
+
+        .side-panel {
+            opacity: 1;
+            transition: all 0.2s ease-out;
+            transition-delay: .2s;
+        }
+    }
+}
+
+.authoring {
+    .open-publish {
+        .sd-publish-panel {
+            width: auto;
+            max-width: 32rem;
+            flex-grow: 1;
+            flex-shrink: 1;
+        }
+    }
+}
+
+// GRID LAYOUT TEST ------------------------------------------------------------------------------------------------------------------------
+//------------------------------------------------------------------------------------------------------------------------------------------
+
+// Main content structure for layouts like Monitoring list and Global Search. Consists of top toolbar (subnav), manin content area and 
+// slide-in panels on the left (filte panel) and right (preview panel).
+.sd-main-content-grid {
+    margin: 0;
+    display: grid;
+    grid-template-columns: [slideInLeft] auto [mainContent] 1fr [slideInRight] auto [overlayContainer] 0;
+    grid-template-rows: [headerToolbar] auto [contentBlock] 1fr;
+    overflow: auto;
+    &.sd-main-content-grid--full-height {
+        height: 100%;
+    }
+}
+
+.sd-main-content-grid__header {
+    grid-column: 1/4;
+    grid-row: headerToolbar;
+    display: flex;
+    flex-direction: column;
+}
+
+.sd-main-content-grid__content {
+    grid-column: mainContent;
+    grid-row: contentBlock;
+    overflow-y: auto;
+    background-color: colors.$mainListBackGround;
+
+    &.sd-main-content-grid__content--with-filters {
+        display: grid;
+        grid-template-rows: [filterBar] auto [innerContent] 1fr;
+    }
+}
+
+//---- With filter tags on top -----------
+// use this combination when there is a filter bar on top of the content (e.g. Global Search)
+.sd-main-content-grid__content {
+    &.sd-main-content-grid__content--with-filters {
+        display: grid;
+        grid-template-rows: [filterBar] auto [innerContent] 1fr;
+    }
+}
+
+.sd-main-content-grid__content-filter-bar {
+    grid-row: filterBar;
+}
+
+.sd-main-content-grid__content-inner {
+    grid-row: innerContent;
+    overflow-y: auto;
+}
+
+.sd-main-content-grid__filter {
+    grid-column: slideInLeft;
+    grid-row: contentBlock;
+    overflow-y: auto;
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr;
+}
+
+.sd-main-content-grid__preview {
+    grid-column: slideInRight;
+    grid-row: contentBlock;
+    overflow-y: auto;
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr;
+}
+
+.sd-main-content-grid__overlay {
+    grid-column: overlayContainer;
+    grid-row: 1/-1;
+    overflow: visible;
+    width: 0;
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr;
+    position: relative;
+}
+
+.side-panel__container {
+    grid-column: 1/2;
+    width: 0;
+    overflow: hidden;
+    transition: all ease-in-out 0.1s;
+
+    .side-panel {
+        opacity: 0;
+        transition: opacity ease-in-out 0.4s;
+    }
+}
+
+.sd-main-content-grid__preview.open-preview {
+    .side-panel__container {
+        width: var(--width__container--medium);
+        overflow-y: auto;
+
+        &.side-panel__container--xxx-small {
+            width: var(--width__container--xxx-small);
+        }
+
+        &.side-panel__container--xx-small {
+            width: var(--width__container--xx-small);
+        }
+
+        &.side-panel__container--x-small {
+            width: var(--width__container--x-small);
+        }
+
+        &.side-panel__container--small {
+            width: var(--width__container--small);
+        }
+
+        &.side-panel__container--large {
+            width: var(--width__container--large);
+        }
+
+        &.side-panel__container--x-large {
+            width: var(--width__container--x-large);
+        }
+
+        &.side-panel__container--xx-large {
+            width: var(--width__container--xx-large);
+        }
+
+        &.side-panel__container--xxx-large {
+            width: var(--width__container--xxx-large);
+        }
+
+        &.side-panel__container--full {
+            width: var(--width__container--full);
+        }
+
+        .side-panel {
+            opacity: 1;
+        }
+    }
+}
+
+.open-filters {
+    .side-panel__container {
+        width: var(--width__container--x-small);
+        overflow-y: auto;
+
+        .side-panel {
+            opacity: 1;
+        }
+
+        &.side-panel__container--small {
+            width: var(--width__container--x-small);
+        }
+
+    }
+}
+
+// main section fot placing left navigation bar, main content, splitter and editor.
+.sd-content-wrapper {
+    margin: 0;
+    display: grid;
+    grid-template-columns: [sideTabsLeft] auto [contentArea] 1fr [contentSplitter] auto [authoringArea] auto;
+    grid-template-rows: 1fr;
+
+    .sd-main-content-grid {
+        grid-column: contentArea;
+    }
+}
+
+.sd-content-wrapper--editor-full {
+    grid-template-columns: [sideTabsLeft] auto [contentArea] auto [contentSplitter] auto [authoringArea] 1fr;
+}
+
+.sd-content-wrapper__left-tabs {
+    grid-column: sideTabsLeft;
+
+    &.sd-sidebar-menu {
+        position: static;
+        box-shadow: 1px 0 0 rgba(0, 0, 0, 0.08), 1px 0 4px rgba(0, 0, 0, 0.16);
+        //z-index: 10;
+    }
+}
+
+.sd-content-wrapper__main-content-area {
+    overflow: auto;
+}
+
+.content-splitter--visible {
+    &.sd-content-wrapper__content-splitter {
+        display: block;
+        grid-column: contentSplitter;
+        // this styling might be moved to an inner element
+        width: 3px;
+        background-color: hsl(214, 13%, 40%);
+        cursor: col-resize;
+    }
+}
+
+.content-splitter--disabled {
+    &.sd-content-wrapper__content-splitter {
+        pointer-events: none;
+    }
+}
+
+.sd-content-wrapper__content-splitter {
+    display: none;
+}
+
+.sd-content-wrapper__authoring-content-area {
+    grid-column: authoringArea;
+    display: grid;
+    display: grid;
+    //border-inline-start: 2px solid hsla(214, 13%, 45%, 1);
+    grid-template-rows: 1fr;
+    grid-auto-columns: auto;
+    overflow-y: auto;
+}
+
+// main page structure - top bar, slide-in main navigation, content area and footer (open items bar).
+.sd-page-grid,
+.sd-page-grid--test {
+    margin: 0;
+    display: grid;
+    grid-template-columns: [slideInNavigation] auto [contentContainer] 1fr [notificationPanel] 0;
+    grid-template-rows: [mainToolbar] 4.8rem [contentContainer] 1fr [footerBar] auto;
+    grid-gap: 0;
+    height: 100vh;
+    position: relative;
+
+    .sd-main-menu {
+        grid-column: slideInNavigation;
+        grid-row: 1/-1;
+        background-color: hsla(214, 13%, 16%, 1);
+        display: grid;
+        grid-template-columns: 1fr;
+        grid-template-rows: 1fr;
+
+        .sd-main-menu__inner {
+            display: grid;
+            grid-template-columns: 1fr;
+            grid-template-rows: 1fr;
+            width: 0;
+            overflow: hidden;
+            transition: opacity ease-in-out 0.2s, width ease-in-out 0.1s;
+            opacity: 0;
+        }
+
+        .sd-main-menu__navigation {
+            display: grid;
+            grid-template-columns: 1fr;
+            grid-template-rows: [mainMenuHeader] dimensions.$nav-height [mainMenuContent] 1fr [mainMenuFooter] auto;
+            width: 0;
+            overflow: hidden;
+            transition: opacity ease-in-out 0.2s, width ease-in-out 0.1s;
+            opacity: 0;
+            box-shadow: inset -8px 0px 12px -4px rgba(0, 0, 0, 0.4), inset -1px 0px 0 0 hsla(214, 13%, 90%, 0.24);
+        }
+
+        .sd-main-menu__header {
+            display: flex;
+            align-items: center;
+            box-shadow: 0 2px 3px hsla(0, 0%, 0%, 0.4);
+            border-block-end: 1px solid hsla(214, 13%, 60%, 0.08);
+        }
+
+        .sd-main-menu__title {
+            font-size: 1.6rem;
+            font-weight: 300;
+            opacity: 0.65;
+            padding-inline-start: 2.4rem;
+        }
+
+        .sd-main-menu__content {
+            overflow-y: auto;
+        }
+
+        .sd-main-menu__footer {
+            display: flex;
+            flex-direction: column;
+            align-items: stretch;
+            justify-content: center;
+            box-shadow: 0 -2px 3px hsla(0, 0%, 0%, 0.24);
+            border-block-start: 1px solid hsla(214, 13%, 60%, 0.08);
+
+            .sd-main-menu__footer-logo {
+                display: flex;
+                align-items: center;
+                border-block-start: 1px solid hsla(214, 13%, 60%, 0.08);
+                background: url(../img/SD-logo.svg) no-repeat center;
+                height: 7.6rem;
+            }
+
+            .sd-main-menu__footer-info {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                text-align: center;
+                font-size: 10px;
+                font-weight: 300;
+                letter-spacing: 0.05em;
+                padding: 6px 0 6px;
+                opacity: 0.5;
+            }
+
+            .sd-main-menu__footer-content {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                text-align: center;
+                font-size: 12px;
+                padding: 8px 0 8px;
+                opacity: 0.85;
+                height: 3.2rem;
+                border-block-start: 1px solid hsla(214, 13%, 60%, 0.08);
+                background-color: hsla(214, 13%, 6%, 0.24);
+            }
+        }
+
+        &.sd-main-menu--open {
+
+            .sd-main-menu__inner,
+            .sd-main-menu__navigation {
+                width: 30rem;
+                opacity: 1;
+            }
+        }
+
+        .sd-left-nav {
+            width: 100%;
+        }
+    }
+
+    .sd-top-menu {
+        grid-column: contentContainer;
+        grid-row: mainToolbar;
+        z-index: 2;
+        position: static;
+    }
+
+    .sd-content {
+        grid-column: contentContainer;
+        grid-row: contentContainer;
+        z-index: 1;
+        overflow: auto;
+        background-color: var(--sd-colour-panel-bg--100);
+    }
+
+    .sd-notifications-slot {
+        grid-column: notificationPanel;
+        grid-row: contentContainer;
+        z-index: 2;
+        position: relative;
+        width: 0;
+    }
+
+    .bottom-bar,
+    .sd-bottom-bar {
+        grid-column: contentContainer;
+        grid-row: footerBar;
+    }
+}
+
+// EDITOR 3 Layout ======================================= //
+
+.sd-authoring-page {
+    display: grid;
+    grid-template-columns: [authoringMain] 1fr [authoringSideTabs] auto [publishContainer] 0px;
+    grid-template-rows: [authoringHeader] auto [authoringMainRow] 1fr;
+}
+
+.sd-authoring-page__header {
+    grid-column: 1/3;
+    grid-row: authoringHeader;
+    display: flex;
+    flex-direction: column;
+}
+
+.sd-authoring-page__main-container {
+    grid-column: authoringMain;
+    grid-row: authoringMainRow;
+    display: flex;
+    position: relative;
+    flex-direction: column;
+    position: relative;
+    min-width: 60rem;
+}
+
+.sd-authoring-page__side-tabs {
+    grid-column: authoringSideTabs;
+    grid-row: authoringMainRow;
+    //position: relative;
+}
+
+.sd-authoring-page__publish-container {
+    grid-column: publishContainer;
+    grid-row: 1/-1;
+    position: relative;
+    overflow: visible;
+    width: 0 !important;
+}
+
+// =================================== END EDITOR 3 Layout //
+
+.sd-overlay-panel-2 {
+    z-index: 2;
+    position: absolute;
+    inset-block-start: 0;
+    inset-block-end: 0;
+    width: 0;
+    background: var(--sd-colour-panel-bg--100);
+    color: var(--color-text);
+    overflow: hidden;
+    transition: all 0.1s ease-out;
+
+    .side-panel {
+        opacity: 0;
+        transition: all 0s ease-out;
+        transition-delay: 0;
+    }
+}
+
+.sd-overlay-panel-2--left {
+    box-shadow: 2px 0px 0px 0px hsl(0, 0%, 40%), 2px 0px 12px 0px hsla(0, 0%, 0%, 0.3);
+    inset-inline-start: 0;
+}
+
+.sd-overlay-panel-2--right {
+    box-shadow: -2px 0px 0px 0px hsl(0, 0%, 40%), -2px 0px 12px 0px hsla(0, 0%, 0%, 0.3);
+    inset-inline-end: 0;
+}
+
+.sd-overlay-panel-2--open {
+    width: 32.8rem;
+    overflow: auto;
+
+    .side-panel {
+        opacity: 1;
+        transition: all 0.2s ease-out;
+        transition-delay: .1s;
+    }
+
+    &.sd-overlay-panel--medium {
+        width: 40rem;
+    }
+
+    &.sd-overlay-panel--large {
+        width: 68rem;
+    }
+}
+
+.sd-authoring-page__publish-container,
+.sd-main-content-grid__overlay {
+    .sd-overlay-panel {
+        inset-block-start: 0;
+        inset-block-end: 0;
+        z-index: 100;
+    }
+}
+
+.sd-main-content-grid {
+    &>.sd-nav-tabs__content {
+        display: contents;
+
+        .sd-nav-tabs__pane {
+            display: contents;
+        }
+    }
+}