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

package/app/styles/layout/_basic-layout.scss

@@ -0,0 +1,149 @@
+@use "../variables/colors";
+@use "../variables/dimensions";
+
+// LAYOUT : Basic Layouts : layout/basic-layout.scss
+
+.sd-page {
+    position: absolute;
+    inset-block-start: 48px;
+    inset-block-end: 0;
+    inset-inline-start: 0;
+    inset-inline-end: 0;
+    background: #fff;
+    overflow: hidden;
+}
+
+.sd-page__sidebar {
+    position: absolute;
+    inset-block-start: 0;
+    inset-block-end: 0;
+    inset-inline-start: 0;
+}
+
+.sd-page__main-content {
+    position: absolute;
+    inset-block-start: 0;
+    inset-block-end: 0;
+    inset-inline-start: 0;
+    inset-inline-end: 0;
+    background-color: var(--sd-colour-panel-bg--100);
+    display: flex;
+    flex-direction: column;
+}
+
+.sd-page__main-content--double-left-nav {
+    inset-inline-start: 400px;
+} 
+
+.sd-page__sidebar {
+    & + .sd-page__main-content {
+        inset-inline-start: 240px;
+    }
+
+    & + .sd-content-navigation-panel {
+        inset-inline-start: 240px;
+        inset-block-start: 0;
+        inset-block-end: 0;
+        position: absolute;
+    }
+}
+
+.sd-page__header {
+    height:48px;
+    flex-shrink: 0;
+    border-block-end: 1px solid var(--sd-colour-line--light);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 0 20px;
+    z-index: 3;
+}
+
+.sd-page__header--justify-space-between {
+    justify-content: space-between;
+}
+
+.sd-page__element-grow {
+    flex-grow: 1;
+    display: inline-block;
+}
+
+.sd-page__element-grow--x-padding {
+    padding: 0 20px;
+}
+
+.sd-page__page-heading {
+    font-size: 1.6rem;
+    color: colors.$sd-text;
+    font-weight: 500;
+}
+
+.sd-page__content {
+    flex-grow: 1;
+    padding: 20px;
+    overflow: auto;
+    background-color: colors.$mainListBackGround;
+}
+
+.sd-page__content--centered-dashboard {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr;
+    align-items: center;
+    justify-content: center;
+
+    .sd-grid-list {
+        width: 60%;
+        margin: 0 auto;
+    }
+}
+
+.sd-page__flex-helper {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    min-height: 0; // fix for Firefox
+}
+
+.sd-overlay-panel {
+    z-index: 2;
+    position: absolute;
+    inset-block-start: dimensions.$subnav-height;
+    inset-inline-end: 0;
+    inset-block-end: 3rem;
+    width: 0;
+    background-color: colors.$white;
+    color: colors.$sd-text;
+    box-shadow: -2px 0 12px 0 rgba(0,0,0,0.3);
+    overflow: hidden;
+    transition: all 0.1s ease-out;
+
+    .side-panel {
+        opacity: 0;
+        transition: all 0.2s ease-out;
+        transition-delay: .1s;
+    }
+}
+
+.sd-overlay-panel--open {
+    width:40rem;
+    overflow: auto;
+
+    .side-panel {
+        opacity: 1;
+    }
+    
+    &.sd-overlay-panel--large {
+        width:68rem;
+    }
+}
+
+[data-theme="dark-ui"] {
+    .sd-overlay-panel {
+        .side-panel {
+            .side-panel__header {
+                background-color: var(--sd-colour-bg--01);
+            }
+        }
+    }
+}

package/app/styles/layout/_container.scss

@@ -0,0 +1,45 @@
+@use "sass:math";
+@use "../variables/dimensions";
+
+.sd-container {
+    display: flex;
+    align-items: center;
+    align-self: stretch;
+}
+
+.sd-container--inline-flex {
+    display: inline-flex;
+}
+
+.sd-container--block {
+    display: block;
+}
+
+.sd-container--direction-row {
+    flex-direction: row;
+}
+
+.sd-container--direction-column {
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+.sd-container--gap-none {
+    gap: 0;
+}
+
+.sd-container--gap-x-small {
+    gap: math.div(dimensions.$sd-base-increment, 2);
+}
+
+.sd-container--gap-small {
+    gap: dimensions.$sd-base-increment;
+}
+
+.sd-container--gap-medium {
+    gap: dimensions.$sd-base-increment * 1.5;
+}
+
+.sd-container--gap-large {
+    gap: dimensions.$sd-base-increment * 2;
+}

package/app/styles/layout/_editor.scss

@@ -0,0 +1,464 @@
+@use "../variables/dimensions";
+
+// ========== Outer Editor Layout (Frame) ========== //
+
+.sd-editor-grid {
+    display: grid;
+    grid-template-columns: [sideBarLeft] auto [editorContent] 1fr [sideTabPinned] auto [sideTabOverlay] auto [sideTabsBar] auto [editorOverlay] 0 [editorOverlay-end];
+    grid-template-rows: [editorSubnav] auto [editorContent] 1fr [editorContent-end];
+    height: 100%;
+}
+
+.sd-editor-grid__editor-subnav {
+    grid-column: 1 / 6;
+    grid-row: editorSubnav;
+}
+
+.sd-editor-grid__sidebar-left {
+    grid-column: sideBarLeft;
+    grid-row: editorContent;
+    display: grid;
+    grid-template-rows: 1fr;
+    grid-template-columns: 1fr;
+    width: dimensions.$sd-sidebarMenu-width;
+    overflow-y: auto;
+}
+
+.sd-editor-grid__editor-content {
+    grid-column: editorContent;
+    grid-row: editorContent;
+    background-color: #D4CED0;
+    position: relative;
+    overflow-y: auto;
+}
+
+.sd-editor-grid__sidetabs-content-pinned {
+    grid-column: sideTabPinned;
+    grid-row: editorContent;
+    position: relative;
+    overflow-x: visible;
+    overflow-y: hidden;
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr;
+    width: 0;
+    z-index: 1;
+    transition: all 0.2s ease;
+
+    &.sidetab-content-pinned--pinned {
+        overflow-y: auto;
+        overflow-x: hidden;
+        width: auto;
+        max-height: 100%;
+    }
+
+    &.sidetab-content-pinned--open {
+        overflow-y: auto;
+        overflow-x: hidden;
+        width: auto;
+        max-height: 100%;
+    }
+}
+
+.sd-editor-grid__sidetabs-content-overlay {
+    grid-column: sideTabOverlay;
+    grid-row: editorContent;
+    position: relative;
+    overflow-x: visible;
+    overflow-y: hidden;
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr;
+    width: 0;
+    background-color: var(--sd-colour-panel-bg--000);
+    z-index: 10;
+
+    .sidetabs-content-overlay__inner {
+        opacity: 0;
+        position: absolute;
+        overflow: hidden;
+        inset-block-start: 0;
+        width: 0;
+        inset-block-end: 0;
+        inset-inline-end: -320px;
+        transition: width 0.2s ease-in-out, opacity 0.2s ease;
+        box-shadow: -2px 0 12px hsla(0, 0%, 0%, 0), -3px 0 0 0px hsla(214, 13%, 60%, 0);
+        display: grid;
+        grid-template-columns: 1fr;
+        grid-template-rows: 1fr;
+        z-index: 10;
+    }
+
+    &.sidetab-content-overlay--open {
+        overflow: visible;
+
+        .sidetabs-content-overlay__inner {
+            opacity: 1;
+            width: auto;
+            position: absolute;
+            overflow: hidden;
+            inset-inline-end: 0;
+            box-shadow: -2px 0 12px hsla(0, 0%, 0%, 0.4), -3px 0 0 0px hsla(214, 13%, 60%, 1);
+        }
+    }
+}
+
+.sd-editor-grid__sidetabs-bar {
+    display: grid;
+    grid-template-rows: 1fr;
+    grid-template-columns: 1fr;
+    grid-column: sideTabsBar;
+    grid-row: editorContent;
+    width: dimensions.$sd-sidebarMenu-width;
+    overflow-y: auto;
+    z-index: 11;
+}
+
+.sd-editor-grid__editor-overlay {
+    grid-column: editorOverlay;
+    grid-row-start: editorSubnav;
+    grid-row-end: editorContent-end;
+    position: relative;
+    display: grid;
+    grid-template-rows: 1fr;
+    grid-template-columns: 1fr;
+    z-index: 100;
+}
+
+// ========== Main Editor Layout ========== //
+
+.sd-editor-content {
+    display: grid;
+    grid-template-columns: [editorMain] 1fr;
+    grid-template-rows: [editorToolbar] auto [editorMainContainer] 1fr;
+    position: relative;
+    height: 100%;
+}
+
+.sd-editor-content__toolbar {
+    grid-column: editorMain;
+    grid-row: editorToolbar;
+    height: dimensions.$nav-height;
+    position: relative;
+    padding: 4px 20px;
+    background-color: var(--sd-colour-panel-bg--000);
+    z-index: 3;
+    transition: all 0.5s;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    box-shadow: 0px 1px 3px -1px rgba(0, 0, 0, 0.2);
+}
+
+.sd-editor-content__toolbar--custom {
+    height: auto;
+    flex-direction: column;
+    align-items: stretch;
+    padding: 0;
+}
+
+.sd-editor-content__save-bar {
+    height: dimensions.$nav-height;
+    position: relative;
+    padding: 4px 20px;
+    //background-color: var(--sd-colour-panel-bg--000);
+    background-color: var(--sd-colour-interactive);
+    z-index: 3;
+    transition: all 0.5s;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    box-shadow: 0px 1px 3px -1px rgba(0, 0, 0, 0.2);
+}
+
+.sd-editor-content__save-bar--custom {
+    height: auto;
+    flex-direction: column;
+    align-items: stretch;
+    padding: 0;
+}
+
+.sd-editor-content__toolbar-inner {
+    height: dimensions.$nav-height;
+    position: relative;
+    padding: 4px 20px;
+    background-color: var(--sd-colour-panel-bg--000);
+    z-index: 3;
+    transition: all 0.5s;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    box-shadow: 0px 1px 3px -1px rgba(0, 0, 0, 0.2);
+}
+
+.sd-editor-content__main-container {
+    grid-column: editorMain;
+    grid-row: editorMainContainer;
+    display: grid;
+    display: grid;
+    grid-template-rows: [authoringHeader] auto [authoringBody] 1fr;
+    grid-template-columns: [bookmarkBar] auto [mainContent] 1fr;
+    flex-direction: column;
+    overflow-y: auto;
+
+    p {
+        font-size: 16px;
+        line-height: 1.5;
+        margin-block-end: 24px;
+    }
+}
+
+/**
+    max-height is used for animation, but might cause issues when content height is greater
+    the class should only be applied if header has the capability to be collapsed
+*/
+.sd-editor-content__authoring-header--collapsible {
+    max-height: 1400px;
+}
+
+.sd-editor-content__authoring-header {
+    grid-column: 1 / 3;
+    grid-row: authoringHeader;
+    display: flex;
+    flex-direction: column;
+    background-color: var(--sd-colour-panel-bg--100);
+    position: relative;
+    margin: 0;
+    padding: dimensions.$sd-base-increment * 3 dimensions.$sd-base-increment * 1.5;
+    z-index: 2;
+    box-shadow: 0px 1px 4px -1px rgba(0, 0, 0, 0.25);
+    transition: max-height 0.12s ease-in;
+
+    &>.authoring-header__holder {
+        height: auto;
+        opacity: 1;
+        overflow: visible;
+        transition: opacity 0.4s 0.1s;
+        margin: 0 auto;
+        width: 100%;
+        max-width: var(--width__container--xxx-large);
+    }
+
+    &.authoring-header--collapsed {
+        max-height: 0;
+        padding: 0 dimensions.$sd-base-increment * 1.5 !important;
+
+        .authoring-header__toggle {
+            i {
+                transform: rotate(180deg);
+            }
+        }
+
+        &>.authoring-header__holder {
+            height: 0px;
+            opacity: 0;
+            overflow: hidden;
+            transition: opacity 0.4s 0.1s;
+        }
+
+        &.authoring-header--padding-small,
+        &.authoring-header--padding-medium,
+        &.authoring-header--padding-large {
+            padding-block-start: 0 !important;
+            padding-block-end: 0 !important;
+        }
+    }
+
+    &.authoring-header--padding-small {
+        padding: dimensions.$sd-base-increment * 3 dimensions.$sd-base-increment * 1.5;
+    }
+
+    &.authoring-header--padding-medium {
+        padding: dimensions.$sd-base-increment * 3 dimensions.$sd-base-increment * 3;
+    }
+
+    &.authoring-header--padding-large {
+        padding: dimensions.$sd-base-increment * 3 dimensions.$sd-base-increment * 4;
+    }
+}
+
+.authoring-header__toggle {
+    position: absolute;
+    width: 37px;
+    height: 25px;
+    border: 0;
+    padding: 0 0 4px;
+    inset-inline-start: 50%;
+    margin-inline-start: -18.5px;
+    margin-block-start: -18.5px;
+    inset-block-end: -25px;
+    background-color: var(--sd-colour-panel-bg--100);
+    z-index: 3;
+    line-height: 0;
+    border-radius: 0 0 22px 22px;
+    box-shadow: 0 -2px 0 0 var(--sd-colour-panel-bg--100), 0 1px 3px 0 rgba(0, 0, 0, 0.3);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    transition: all ease-in 0.12s;
+
+    &:hover {
+        height: 32px;
+        inset-block-end: -32px;
+        padding-block-start: 2px;
+
+        i {
+            opacity: 1;
+        }
+    }
+
+    i {
+        height: 15px;
+        transition: all 0.5s;
+        opacity: 0.75;
+    }
+}
+
+.sd-editor-content__authoring-body {
+
+    grid-column: mainContent;
+    grid-row: authoringBody;
+
+    background-color: var(--sd-colour-panel-bg--000);
+}
+
+.sd-editor-content__authoring-body-padding {
+    padding: 3.2rem 4rem 5.2rem 4rem;
+}
+
+.sd-editor-content__authoring-bookmark-bar {
+    grid-column: bookmarkBar;
+    grid-row: authoringBody;
+    width: dimensions.$sd-sidebarMenu-width;
+    background-color: var(--sd-colour-panel-bg--000);
+    display: grid;
+    grid-template-rows: 1fr;
+    grid-template-columns: 1fr;
+}
+
+.sd-editor-toolbar__content {
+    display: inline-flex;
+    gap: 8px;
+
+    dl {
+        display: flex;
+        gap: 4px;
+        font-size: 1.2rem;
+
+        &:not(:first-child) {
+            border-inline-start: 1px solid var(--sd-colour-line--light);
+            padding-inline-start: 8px;
+        }
+    }
+
+    dt {
+        font-weight: 500;
+    }
+
+    dd,
+    dd time {
+        font-weight: 400;
+        color: var(--color-text-muted);
+    }
+}
+
+.sd-editor-grid__sidetabs-bar,
+.sd-editor-grid__sidebar-left {
+    position: relative;
+
+    ::-webkit-scrollbar {
+        width: 4px;
+        height: 4px;
+        margin: -1px 0;
+        position: absolute;
+        inset-block-end: 0;
+    }
+
+    ::-webkit-scrollbar:hover {
+        background-color: var(--sd-colour__webkit-scrollbar--hover);
+        background-color: transparent;
+        cursor: pointer;
+    }
+
+    ::-webkit-scrollbar-thumb {
+        background: var(--sd-colour__webkit-scrollbar-thumb);
+    }
+
+    ::-webkit-scrollbar-thumb:hover {
+        background: var(--sd-colour__webkit-scrollbar-thumb--hover);
+        cursor: pointer;
+    }
+}
+
+.sd-editor__container-wrapper {
+    grid-column: 1 / 2;
+    display: grid;
+    grid-template-rows: 1fr;
+    grid-auto-columns: auto;
+    width: 0;
+    min-width: 0;
+    max-width: 0;
+    transition: all ease-in-out 0.2s;
+}
+
+.sd-editor__container {
+    overflow-y: auto;
+    overflow: hidden;
+    opacity: 0;
+    transition: all ease-in-out 0.2s;
+    transition-delay: 0.2s;
+
+    .sd-content-wrapper__main-content-area.sd-main-content-grid {
+        grid-column: 1 / 2 !important;
+    }
+}
+
+.open-editor {
+    .sd-editor__container-wrapper {
+        width: auto;
+        min-width: 45vw;
+        max-width: 45vw;
+    }
+
+    .sd-editor__container {
+        opacity: 1;
+        overflow-y: auto;
+
+        &.sd-editor__container--large {
+            min-width: 52vw;
+        }
+    }
+}
+
+.sd-content-wrapper--editor-full .open-editor .sd-editor__container-wrapper {
+    min-width: auto;
+    max-width: none;
+}
+
+.sd-editor__input--title {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    width: 100%;
+    color: var(--color-text);
+    border: 0;
+    border: 2px solid var(--color-input-border);
+    font-size: 3.2rem;
+    font-weight: 500;
+    background-color: transparent;
+    transition: all ease 0.3s;
+    padding: 0 1.6rem;
+    min-height: 5.6rem;
+    border-radius: var(--b-radius--large);
+    display: block;
+
+    &:hover {
+        border-color: var(--color-input-border-hover);
+    }
+
+    &:focus {
+        outline: none;
+        border-color: var(--sd-colour-interactive--alpha-50);
+        box-shadow: inset 0 0 0 4px var(--sd-colour-interactive--alpha-20);
+    }
+}