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

package/app/styles/interface-elements/_side-panel.scss

@@ -0,0 +1,595 @@
+@use "../mixins";
+@use "../variables/colors";
+@use "../variables/dimensions";
+
+$side-panel-Bg: var(--sd-colour-panel-bg--000);
+$side-panel-Bg-000: var(--sd-colour-panel-bg--000);
+$side-panel-Bg-100: var(--sd-colour-panel-bg--100);
+$side-panel-Bg-200: var(--sd-colour-panel-bg--200);
+
+.side-panel {
+    margin: 0;
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: auto 1fr auto;
+    grid-gap: 0;
+    height: 100%;
+    position: relative;
+    background-color: $side-panel-Bg;
+
+    .side-panel__header {
+        grid-column: 1/2;
+        grid-row: 1/2;
+        z-index: 2;
+        position: relative;
+        min-height: 4.8rem;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        background-color: inherit;
+
+        .nav-tabs {
+            flex-grow: 1;
+        }
+    }
+
+    .side-panel__header--border-b,
+    .side-panel__header--border-bottom {
+        box-shadow: 0 1px 0 var(--sd-colour-line--x-light);
+    }
+
+    .side-panel__header--dark-blue-grey,
+    .side-panel__header--blueGreyDarker {
+        background-color: colors.$subnav-background-dark-blue-grey;
+        color: colors.$white;
+    }
+
+    .side-panel__header--light {
+        background-color: var(--sd-colour-panel-bg--000);
+    }
+
+    .side-panel__header--darker {
+        background-color: var(--sd-colour-panel-bg--100);
+    }
+
+    .side-panel__header-inner {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        position: relative;
+        min-height: 4.8rem;
+    }
+
+    .side-panel__header-wrapper {
+        display: flex;
+    }
+
+    .side-panel__sliding-toolbar {
+        @include mixins.sliding-toolbar; // See mixins.scss for details
+
+        &.side-panel__sliding-toolbar {
+            text-align: end;
+            justify-content: flex-end;
+
+            &>.btn {
+                margin-inline-start: dimensions.$sd-base-increment;
+            }
+        }
+    }
+
+    .side-panel__heading {
+        padding-inline-start: dimensions.$sd-base-increment * 2;
+        padding-inline-end: dimensions.$sd-base-increment * 2;
+        margin: 0;
+        font-size: 1.5rem;
+        color: inherit;
+        opacity: 0.8;
+        font-weight: 400;
+        letter-spacing: 0.02em;
+    }
+
+    .side-panel__heading--big {
+        color: colors.$sd-text;
+        font-weight: 400;
+        font-size: 1.8rem;
+        letter-spacing: 0.01em;
+    }
+
+    .side-panel__btn-group {
+        padding-inline: 0.8rem;
+        padding-block: 0.8rem;
+        z-index: 2;
+        color: var(--color-text-muted);
+    }
+
+    .side-panel__tools {
+        position: absolute;
+        inset-inline-end: dimensions.$sd-base-increment;
+        inset-block-start: dimensions.$sd-base-increment;
+        z-index: 2;
+        color: inherit;
+
+        .icn-btn {
+            margin-inline-start: 0.2rem;
+        }
+    }
+
+    .side-panel__content {
+        grid-column: 1/2;
+        grid-row: 2/3;
+        z-index: 1;
+        overflow: auto;
+        position: relative;
+    }
+
+    .side-panel__content--flex {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .side-panel__content--split {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        grid-template-rows: 1fr;
+
+        .side-panel__content-block--left {
+            grid-column: 1/2;
+            grid-row: 1/2;
+            overflow-y: auto;
+            background-color: rgba(0, 0, 0, .1);
+        }
+
+        .side-panel__content-block--right {
+            grid-column: 2/3;
+            grid-row: 1/2;
+            overflow-y: auto;
+        }
+    }
+
+    .side-panel__content-tab-nav {
+        min-height: 4.8rem;
+        flex-grow: 0;
+        flex-shrink: 0;
+    }
+
+    .side-panel__content-tab-content {
+        flex-grow: 1;
+        overflow: auto;
+    }
+
+    .side-panel__image-actions {
+        position: absolute;
+        inset-block-start: 1.8rem;
+        inset-inline-end: 0.5rem;
+        z-index: 2;
+    }
+
+    .side-panel__content-block {
+        padding: var(--space--2);
+
+        .side-panel__heading {
+            padding: 0;
+        }
+    }
+
+    .side-panel__content-block--pad-top-0 {
+        padding-block-start: 0;
+    }
+
+    .side-panel__content-block--boxed {
+        padding: 1.6rem;
+        border-radius: dimensions.$border-radius__base--medium;
+        margin-block-end: 1rem;
+    }
+
+    .side-panel__content-block--pad-small {
+        padding: 1.4rem 2rem 0.6rem;
+    }
+
+    .side-panel__content-block--flex {
+        display: flex;
+        align-items: flex-start;
+    }
+
+    .side-panel__content-block--image {
+        position: relative;
+
+        .side-panel__image-actions {
+            visibility: hidden;
+        }
+
+        img {
+            display: block;
+            max-width: 100%;
+            max-height: 100%;
+            height: auto;
+            margin: auto;
+        }
+
+        &:hover {
+            .side-panel__image-actions {
+                visibility: visible;
+            }
+        }
+    }
+
+    .side-panel__content-block--padding-0 {
+        padding: 0;
+    }
+
+    .side-panel__content-block--padding-1-5 {
+        padding: var(--space--1-5);
+    }
+
+    .side-panel__content-block--padding-3 {
+        padding: var(--space--3);
+    }
+
+    .side-panel__content-block--space-between {
+        justify-content: space-between;
+    }
+
+    .side-panel__content-block--overlay-panel-inside {
+        padding: 0;
+        overflow: hidden !important;
+        display: flex;
+        flex-direction: column;
+
+        >div {
+            display: flex;
+            flex-direction: column;
+            flex-grow: 1;
+            overflow-x: hidden;
+            overflow-y: auto;
+
+            &>span {
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                flex-grow: 1;
+                padding: 2rem;
+                width: 100%;
+            }
+        }
+    }
+
+    // collapsible header
+    .side-panel-collapsible-header {
+        position: relative;
+        padding: .8rem 2rem;
+        box-shadow: 0px 1px 3px -1px rgba(0, 0, 0, 0.2);
+        margin-block-end: 1rem;
+        min-height: 40px;
+        //transition: min-height 0.3s 0.3s ease-in;
+
+        &.active {
+            min-height: 150px;
+            //transition: min-height 1s ease-in;
+
+            .side-panel-collapsible-header__collapsible {
+                height: auto;
+                opacity: 1;
+                padding: .8rem 0;
+            }
+        }
+    }
+
+    .side-panel-collapsible-header__fixed {
+        padding: 0;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .side-panel-collapsible-header__collapsible {
+        height: 0;
+        padding: 0;
+        overflow: hidden;
+        opacity: 0;
+        transition: opacity 0.3s 0.4s;
+    }
+
+    .side-panel-collapsible-header__toggle {
+        position: absolute;
+        width: 21px;
+        height: 21px;
+        border: 0;
+        padding: 0;
+        inset-inline-start: 50%;
+        margin-inline-start: -10.5px;
+        inset-block-end: -11px;
+        background-color: #fff;
+        z-index: 3;
+        line-height: 0;
+        border-radius: dimensions.$border-radius__base--full;
+        box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.4);
+        transition: transform 0.5s;
+
+        &.active {
+            -webkit-transform: rotate(180deg);
+            transform: rotate(180deg);
+        }
+    }
+
+    .side-panel__content-block-heading {
+        font-size: 1.9rem;
+        line-height: 120%;
+        font-weight: 500;
+        margin: 2rem 0;
+    }
+
+    .side-panel__content-block-heading--small-margin {
+        margin: 1rem 0;
+    }
+
+    .side-panel__content-block-text {
+        font-size: 1.5rem;
+        line-height: 140%;
+        font-weight: 300;
+        word-wrap: break-word;
+        padding-block-end: 1rem;
+    }
+
+    // Use only inside cside-panel__content-block--flex for grouping and positioning content
+    .side-panel__content-block-inner {
+        flex-grow: 0;
+
+        .double-size-icn {
+            margin: 0.1rem 1rem 0 0;
+        }
+    }
+
+    .side-panel__content-block-inner--right {
+        text-align: end;
+    }
+
+    .side-panel__content-block-inner--grow {
+        flex-grow: 1;
+    }
+
+    // Social media overlay - Superdesk targeted publishing
+    .side-panel__content-block-overlay {
+        position: absolute;
+        inset-block-start: 0;
+        inset-block-end: 0;
+        inset-inline-start: 0;
+        inset-inline-end: 0;
+        width: 0;
+        padding: 0 !important;
+
+        .side-panel {
+            opacity: 0;
+            transition: all 0.2s ease-in-out;
+            position: absolute;
+            width: 34rem;
+            inset-block-start: 0;
+            inset-block-end: 0;
+            inset-inline-end: 0;
+            inset-inline-start: 34rem;
+            background-color: #222;
+            z-index: 2;
+        }
+    }
+
+    .side-panel__content-block-overlay--open {
+        .side-panel {
+            inset-inline-start: 0;
+            opacity: 1;
+        }
+    }
+
+    // Social media overlay - Publisher output control
+    .side-panel__content-block-overlay-grid {
+        grid-column: 1/2;
+        grid-row: 2/3;
+        z-index: 1;
+        position: relative;
+        width: 0;
+
+        .side-panel {
+            opacity: 0;
+            transition: all .2s ease-in-out;
+            position: absolute;
+            width: 40rem;
+            inset-block-start: 0;
+            inset-block-end: 0;
+            inset-inline-end: 0;
+            inset-inline-start: 40rem;
+            background-color: #222;
+            z-index: 2;
+        }
+    }
+
+    .side-panel__content-block-overlay-grid--open {
+        .side-panel {
+            inset-inline-start: 0;
+            opacity: 1;
+        }
+    }
+
+    .side-panel__top-tools {
+        padding: 2rem;
+        background-color: rgba(0, 0, 0, 0.06);
+        padding: 1.2rem 1rem 1.2rem 2rem;
+        display: flex;
+        align-items: center;
+
+        .side-panel__top-tools-left {
+            text-align: start;
+            flex-grow: 1;
+        }
+
+        .side-panel__top-tools-right {
+            text-align: end;
+            flex-grow: 1;
+        }
+    }
+
+    .side-panel__top-tools--dark-blue-grey {
+        background: colors.$subnav-background-dark-blue-grey;
+        color: colors.$white;
+    }
+
+    .side-panel__footer {
+        grid-column: 1/2;
+        grid-row: 3/4;
+        z-index: 2;
+
+        .side-panel__footer-buttons--flex {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            flex-basis: 0;
+            gap: 0.8rem;
+        }
+    }
+
+    .side-panel__footer--button-box,
+    .side-panel__footer--button-box-large {
+        padding: dimensions.$sd-base-increment * 1.5 dimensions.$sd-base-increment * 2;
+        position: relative;
+        box-shadow: 0 -1px 0 hsla(0, 0%, 0%, 0.08);
+        display: flex;
+        gap: dimensions.$sd-base-increment;
+        align-items: center;
+
+        &::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.05) 0%, rgba(0, 0, 0, 0) 100%);
+        }
+
+        &>.btn {
+            flex: 1 0 auto;
+        }
+
+        &>.icn-btn {
+            flex: 0 0 auto;
+        }
+    }
+
+    .side-panel__footer--button-box-large {
+        padding: dimensions.$sd-base-increment * 2 dimensions.$sd-base-increment * 3;
+        gap: dimensions.$sd-base-increment * 1.5;
+    }
+
+    &.side-panel--shadow-left::after,
+    &.side-panel--left::after {
+        display: block;
+        inset-block-start: 0;
+        inset-block-end: 0;
+        content: '';
+        width: 4px;
+        position: absolute;
+        inset-inline-end: 0;
+        z-index: 80;
+        background-image: linear-gradient(to left, rgba(0, 0, 0, .12) 0%, rgba(0, 0, 0, 0) 100%);
+    }
+
+    &.side-panel--shadow-right::after,
+    &.side-panel--right::after {
+        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, rgba(0, 0, 0, .12) 0%, rgba(0, 0, 0, 0) 100%);
+    }
+
+    &.side-panel--transparent {
+        background-color: transparent;
+    }
+}
+
+.side-panel--bg-000,
+.side-panel--light {
+    background-color: $side-panel-Bg-000;
+}
+
+.side-panel--bg-100,
+.side-panel--light-grey {
+    background-color: $side-panel-Bg-100;
+}
+
+.side-panel--bg-200,
+.side-panel--grey {
+    background-color: $side-panel-Bg-200;
+}
+
+.side-panel__header--has-close {
+    .sd-nav-tabs {
+        margin-inline-end: 4rem;
+    }
+
+    .side-panel__heading {
+        padding-inline-end: dimensions.$sd-base-increment * 5;
+    }
+}
+
+.side-panel__container.panel-open,
+.side-panel__container.panel-open,
+.panel-open .side-panel__container,
+.open-filters .side-panel__container {
+    width: var(--width__container--small);
+    overflow-y: auto;
+
+    .side-panel {
+        opacity: 1;
+    }
+
+    &.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--medium {
+        width: var(--width__container--medium);
+    }
+
+    &.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__container--auto {
+        width: auto;
+    }
+
+    &.side-panel__container--left {
+        margin-inline-end: auto;
+    }
+
+    &.side-panel__container--right {
+        margin-inline-start: auto;
+    }
+}