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

package/app/styles/components/_subnav.scss

@@ -0,0 +1,777 @@
+@use "sass:color";
+@use "sass:math";
+@use "../mixins";
+@use "../variables/colors";
+@use "../variables/dimensions";
+
+// SUBNAV
+
+.subnav {
+    @include mixins.transition(all, 0.3s, ease);
+    position: relative;
+    display: flex;
+    height: dimensions.$subnav-height;
+    background: colors.$subnav-background;
+    border-block-end: 0px;
+    box-shadow: var(--sd-shadow__subnav);
+    z-index: 3;
+    align-items: center;
+    color: colors.$sd-text;
+    flex-shrink: 0;
+
+    .sd-check__group {
+        padding: 0;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+    }
+}
+
+.subnav--padded {
+    padding: 10px 20px;
+}
+
+.subnav--darker {
+    background: colors.$subnav-background-darker !important;
+}
+
+.subnav--dark-blue-grey, .subnav--blueGreyDarker {
+    background: colors.$subnav-background-dark-blue-grey !important;
+    color: colors.$white;
+
+    .navbtn:hover {
+        background: rgba(255, 255, 255, 0.20);
+    }
+}
+
+.subnav--mid-blue-grey, .subnav--blueGrey {
+    background: colors.$subnav-background-blue-grey !important;
+    color: colors.$white;
+}
+
+.subnav--absolute {
+    position: absolute;
+    inset-block-start:48px;
+    inset-inline-start:0;
+    inset-inline-end:0;
+}
+
+.subnav + .subnav,
+.subnav--lower-z-index {
+    z-index: 2;
+}
+
+.subnav__element-grow {
+    flex-grow: 1;
+}
+
+.subnav__page-title {
+    @include mixins.text-overflow();
+    @include mixins.text-normal();
+    padding: 0 1.6rem;
+    color: inherit;
+    font-size: 1.8rem;
+    line-height: 2.8rem;
+    flex-grow: 1;
+}
+
+.subnav__page-title--no-grow {
+    flex-grow: 0;
+}
+
+.subnav__desk-stage {
+    flex-grow: 1;
+}
+
+.subnav__divider {
+    display: inline-flex;
+    height: 100%;
+}
+
+.subnav__divider--small {
+    width: dimensions.$sd-base-increment * 1.5;
+}
+
+.subnav__divider--medium {
+    width: dimensions.$sd-base-increment * 2;
+}
+
+.subnav__divider--large {
+    width: dimensions.$sd-base-increment * 3;
+}
+
+.subnav__divider--x-large {
+    width: dimensions.$sd-base-increment * 4;
+}
+
+.subnav {
+    &.subnav--level2 {
+        position: absolute;
+        inset-block-start:0;
+        inset-inline-start: 0;
+        z-index: 2;
+        box-shadow: none;
+    }
+
+    .sd-nav-tabs {
+        box-shadow: none;
+    }
+}
+
+.subnav__sliding-toolbar {
+    @include mixins.sliding-toolbar; // See mixins.scss for details
+}
+
+
+// NEW NAVBUTTONS
+
+$navbutton-transition: all 0.2s ease-out, color 0.1s ease-out;
+$navbutton-focus-box-shadow: inset 0 0 0 1px var(--sd-colour-interactive--alpha-70), inset 0 0 0 3px var(--sd-colour-interactive--alpha-40);
+
+@mixin navbutton-base {
+    position: relative;
+    height: dimensions.$subnav-height;
+    width: 4.8rem;
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+    color: var(--color-text);
+    text-align: center;
+    text-decoration: none;
+    border: 0;
+    border: 0px solid var(--sd-colour-line--x-light);
+    border-inline-width: 1px 0;
+    cursor: pointer;
+    transition: $navbutton-transition;
+
+    i {
+        opacity: 0.75;
+        vertical-align: baseline !important;
+        transition: opacity 0.2s ease-out;
+    }
+
+    [class^="big-icon--"], [class*=" big-icon--"],
+    [class^="icon-"], [class*=" icon-"] {
+        color: currentColor;
+    }
+
+    &:hover {
+        background: var(--color-navbutton-bg-hover);
+
+        > i {
+            opacity: 1;
+        }
+    }
+
+    &:active {
+        background: transparent;
+        box-shadow: inset 0 0 0 4px var(--color-navbutton-shadow-active);
+
+        > i {
+            opacity: 1;
+        }
+    }
+
+    &:focus-visible {
+        box-shadow: $navbutton-focus-box-shadow;
+
+        > i {
+            opacity: 1;
+        }
+    }
+}
+
+.sd-navbtn {
+    @include navbutton-base;
+
+    &.sd-navbtn--highlight {
+        background: var(--sd-colour-highlight);
+        border-color: var(--sd-colour-highlight);
+        color: colors.$white;
+
+        &:hover {
+            background-color: var(--sd-colour-highlight--hover);
+            border-color: var(--sd-colour-highlight--hover);
+        }
+
+        &:active {
+            background: var(--sd-colour-highlight);
+            border-color: var(--sd-colour-highlight);
+        }
+    }
+
+    &.sd-navbtn--darker {
+        background: var(--color-navbutton-bg-100);
+
+        &:hover {
+            background-color: var(--color-navbutton-bg-100-hover);
+        }
+
+        &:active {
+            background: var(--color-navbutton-bg-100);
+        }
+    }
+
+    &.sd-navbtn--dark {
+        background: var(--color-navbutton-bg-dark);
+        color: colors.$white;
+
+        &:hover {
+            background-color: var(--color-navbutton-bg-dark-hover);
+        }
+
+        &:active {
+            background: var(--color-navbutton-bg-dark);
+        }
+    }
+
+    &.sd-navbtn--primary,
+    &.sd-navbtn--active {
+        background: var(--sd-colour-interactive);
+        border-color: var(--sd-colour-interactive);
+        color: colors.$white;
+
+        &:hover {
+            background-color:  var(--sd-colour-interactive--hover);
+            border-color:  var(--sd-colour-interactive--hover);
+        }
+
+        &:active {
+            background: var(--sd-colour-interactive);
+            border-color: var(--sd-colour-interactive);
+        }
+    }
+
+    .badge {
+        position: absolute;
+        inset-block-start: math.div(dimensions.$sd-base-increment, 2);
+        inset-inline-end: math.div(dimensions.$sd-base-increment, 2);
+        z-index: 1;
+    }
+}
+
+.sd-navbtn--left {
+    border-width: 0 1px 0 0;
+}
+
+.sd-navbtn--textual {
+    padding-inline: var(--space--1);
+    width: auto;
+
+    .sd-navbtn__text {
+        margin-inline: var(--space--0-5);
+        display: inline-flex;
+        font-size: 1.4rem;
+        position: relative;
+        margin-inline-end: math.div(dimensions.$sd-base-increment, 2);
+        margin-inline-start: dimensions.$sd-base-increment;
+    }
+
+    i {
+        margin-inline-start: math.div(dimensions.$sd-base-increment, 2);
+    }
+}
+
+.dropdown {
+    .sd-navbtn {
+        &.sd-navbtn--textual {
+            .sd-navbtn__text {
+                color: currentColor;
+                padding-inline-end: 16px;
+
+                &::after {
+                    content: '';
+                    display: inline-flex;
+                    width: 0;
+                    height: 0;
+                    position: absolute;
+                    inset-block-start: calc(50% - 2px);
+                    inset-inline-end: 0;
+                    vertical-align: middle;
+                    //margin-block-start: -2px;
+                    margin-inline-start: 8px;
+                    border-inline-start:  4px solid transparent;
+                    border-inline-end: 4px solid transparent;
+                    border-block-start:   4px solid currentColor;
+                    opacity: .75;
+                    @include mixins.transition(all, 0.1s, ease-in);
+                }
+            }
+        }
+    }
+}
+
+.dropdown.open {
+    .sd-navbtn {
+        background-color: var(--color-dropdown-menu-Bg);
+        position: relative;
+        box-shadow: 0 8px 0 0px var(--color-dropdown-menu-Bg), -2px -1px 8px -2px rgba(0, 0, 0, 0.24), 3px -1px 8px -2px rgba(0, 0, 0, 0.24);
+        border-color: transparent !important;
+        z-index: 2001;
+
+        i {
+            opacity: 1;
+            color: colors.$sd-colour-interactive;
+        }
+
+        &.sd-navbtn--textual {
+            .sd-navbtn__text {
+                color: colors.$sd-colour-interactive;
+
+                &::after {
+                    opacity: 1;
+                }
+            }
+        }
+    }
+
+    .sd-create-btn {
+        background-color: var(--color-dropdown-menu-Bg);
+        position: relative;
+        box-shadow: 0 8px 0 0px var(--color-dropdown-menu-Bg), -2px -1px 8px -2px rgba(0, 0, 0, 0.24), 3px -1px 8px -2px rgba(0, 0, 0, 0.24);
+        border-color: transparent !important;
+        z-index: 1001;
+    }
+}
+
+.navbtn {
+    position: relative;
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    height: dimensions.$subnav-height;
+    width: 4.8rem;
+    padding: 0;
+    background: transparent;
+    color: colors.$sd-text;
+    text-align: center;
+    text-decoration: none;
+    border: 0px solid transparent;
+    border-color: var(--sd-colour-line--x-light);
+    border-inline-width: 1px 0;
+    cursor:pointer;
+    background: transparent;
+    transition: background-color 0.2s ease-out, color 0.1s ease-out;
+
+    i {
+        opacity: 0.75;
+        vertical-align: baseline !important;
+        transition: opacity 0.2s ease-out;
+    }
+
+    [class^="big-icon--"],
+    [class*=" big-icon--"] {
+        line-height: 1;
+        color: colors.$sd-text;
+        display: block;
+    }
+
+    .big-icon--send-to {
+        margin-inline-start: 0.3rem;
+    }
+
+    [class^="icon-"],
+    [class*=" icon-"] {
+        color: colors.$sd-text;
+    }
+
+    &:hover {
+        background: var(--color-navbutton-bg-hover);
+
+        > i {
+            opacity: 1;
+        }
+    }
+
+    &.navbtn--left {
+        border-inline-width: 0 1px;
+    }
+
+    &.navbtn--blue {
+        background: colors.$sd-colour-interactive;
+        border-color: var(--sd-colour-interactive--lighten-10);
+        color: colors.$white;
+
+        &.disabled {
+            background: var(--sd-colour-interactive--lighten-30);
+        }
+    }
+
+    &.navbtn--text-only {
+        width: auto;
+        line-height: dimensions.$subnav-height;
+        padding: 0 20px;
+        border-inline-width: 0 1px;
+        font-size: 1.5rem;
+    }
+
+    &.navbtn--border-r {
+        border-inline-end: 1px !important;
+    }
+
+    &.navbtn--highlighted {
+        background-color: colors.$purple !important;
+        transition: all 0.3s;
+        padding: 0 0 0 9px;
+        color: colors.$white;
+
+        &:hover {
+            background-color: color.adjust(colors.$purple, $lightness: -10%);
+        }
+    }
+
+    &.navbtn--darker {
+        background-color: rgba(0, 0, 0, 0.05);
+    }
+
+    &.navbtn--active {
+        background-color: colors.$sd-colour-interactive;
+
+        > i {
+            opacity: 1;
+            color: colors.$white;
+        }
+    }
+
+    &.navbtn--publish {
+        background-color: rgba(0, 0, 0, 0.05);
+    }
+}
+
+.dropdown.open {
+    .navbtn {
+        background: var(--color-dropdown-menu-Bg);
+        color: colors.$sd-colour-interactive;
+        box-shadow: -2px -1px 5px -2px rgba(0, 0, 0, 0.2), 3px -1px 5px -2px rgba(0, 0, 0, 0.2);
+        z-index: dimensions.$zindexDropdown + 1;
+
+        > i {
+            opacity: 1;
+            color: colors.$sd-colour-interactive;
+        }
+    }
+
+    .sd-create-btn {
+        i {
+            color: colors.$white;
+        }
+    }
+}
+
+.subnav__stretch-bar {
+    margin-inline: var(--space--1-5);
+    display: flex;
+    flex-grow: 1;
+    flex-shrink: 1;
+    align-items: center;
+
+    &.subnav__stretch-bar--right {
+        text-align: end;
+        justify-content: flex-end;
+    }
+}
+
+.subnav__content-bar {
+    margin-inline: var(--space--1-5);
+    display: flex;
+    flex-direction: row;
+    flex-grow: 0;
+    flex-shrink: 1;
+    align-items: center;
+
+    &.subnav__content-bar--right {
+        text-align: end;
+        justify-content: flex-end;
+        }
+}
+
+.subnav__spacer {
+    width: 1px;
+    height: dimensions.$subnav-height;
+    flex-grow: 0;
+    border-inline-start: 1px solid rgba(0,0,0,.1);
+    margin: auto 2rem;
+}
+
+.subnav__spacer--dotted {
+    border-inline-start: 1px dotted rgba(0,0,0,.3);
+    height: math.div(dimensions.$subnav-height, 2);
+}
+
+.subnav__spacer--no-r-margin {
+    margin-inline-end: -0.1rem;
+}
+
+.subnav__spacer--no-l-margin {
+    margin-inline-start: 0;
+}
+
+.subnav__spacer--no-margin {
+    margin-inline-start: 0;
+    margin-inline-end: 0;
+}
+
+.subnav__button-stack {
+    position: relative;
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+}
+
+.subnav__button-stack--square-buttons {
+    height:48px;
+    margin: 0 0 0 16px;
+    display: flex;
+    flex-wrap: nowrap;
+    flex-grow: 0;
+    flex-shrink: 1;
+    max-width: 100%;
+}
+
+.subnav__button-stack--custom-buttons {
+    margin: 0 auto;
+    padding: 10px 12px;
+    border: 1px solid rgba(0,0,0,0.1);
+    border-width: 0 1px;
+    box-sizing: border-box;
+    display: flex;
+    max-width: 100%;
+
+    .btn {
+        flex-grow: 0;
+        margin:0 4px;
+    }
+
+    .btn__text--short {
+        display: none;
+    }
+
+    .btn__text {
+        display: inline;
+    }
+}
+
+.subnav__button-stack--right {
+    text-align: end;
+    padding-inline-end: 2rem;
+}
+
+.subnav__button-stack--padded {
+    padding: 0 1rem;
+    flex-shrink: 0;
+}
+
+.subnav__button-stack--custom-buttons {
+    .btn__text--short {
+        display: none;
+    }
+
+    .btn__text {
+        display: inline;
+    }
+}
+
+.compact {
+    .subnav__button-stack--custom-buttons {
+        .btn__text--short {
+            display: inline;
+        }
+
+        .btn__text {
+            display: none;
+        }
+    }
+}
+
+.subnav__button-stack--default {
+    display: flex;
+    flex-grow: 1;
+    justify-content: flex-end;
+    padding: 10px 0;
+
+    .btn {
+        flex-grow: 0;
+        margin:0 4px;
+    }
+
+    .btn--close {
+        .btn__text--alt-icon {
+            display: none;
+        }
+
+        .btn__text {
+            display: inline;
+        }
+    }
+}
+
+.subnav__button-stack--default {
+    &.compact {
+        .btn--close {
+            padding: 0 3px 0 6px;
+
+            .btn__text--alt-icon {
+                display: inline;
+                opacity: 0.7;
+            }
+
+            .btn__text {
+                display: none;
+            }
+        }
+    }
+}
+
+
+// PLANNING SPECIFIC ADDITIONS FOR RESPONSIVE BEHAVIOUR OF THE SUBNAV BAR
+
+.subnav--responsive {
+    .navbtn.navbtn--text-only {
+        font-size: 1.4rem;
+    }
+
+    .subnav__stretch-bar {
+        margin-inline-end: 0;
+    }
+
+    .subnav__spacer {
+        margin-inline-start: 1.2rem;
+    }
+
+    #planning-dropdown {
+        display: none;
+        margin-inline-start: -1.2rem;
+    }
+
+    .dropdown__toggle {
+        white-space: nowrap;
+        position: relative;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        padding-inline-end: 2.6rem !important;
+
+        .dropdown__caret {
+            position: absolute;
+            inset-block-start: 50%;
+            inset-inline-end: 1rem;
+        }
+    }
+
+    .navbtn {
+        flex-shrink: 0;
+    }
+
+    .navbtn.navbtn--text-only {
+        flex-shrink: 1;
+        padding: 0 1.2rem;
+    }
+}
+
+.sd-page-content--slide-in--open {
+    .subnav--responsive {
+        .sd-check__wrapper + .sd-check__wrapper {
+            margin-inline-start: 0.4rem;
+        }
+
+        .subnav__stretch-bar {
+            margin: 0 1.2rem;
+            margin-inline-end: 0;
+        }
+
+        .subnav__button-stack--padded {
+            padding: 0 0.6rem;
+        }
+
+        .navbtn.navbtn--text-only {
+            font-size: 1.3rem;
+        }
+    }
+}
+
+
+// ------------- MEDIA QUERIES ---------------------
+
+@media only screen and (max-width: 1366px) {
+    .sd-page-content--slide-in--open .sd-page-content__content-block--30-slide {
+        width: 50rem;
+    }
+
+    .sd-page-content--slide-in--open .sd-page-content__content-block--main {
+        width: calc(100vw - 54.8rem);
+    }
+}
+
+// Editing Closed
+
+@media only screen and (max-width: 800px) {
+    .subnav--responsive {
+        #planning-dropdown {
+            display: block;
+        }
+
+        #planning-buttons {
+            display: none;
+        }
+
+        .dropdown__toggle {
+            max-width: 160px;
+        }
+
+        &.compact--level-1 {
+            .dropdown__toggle {
+                max-width: 160px;
+            }
+        }
+    }
+}
+
+@media only screen and (max-width: 1024px) {
+    .subnav--responsive.compact--level-1 {
+        #planning-dropdown {
+            display: block;
+        }
+
+        #planning-buttons {
+            display: none;
+        }
+    }
+}
+
+// Editing Open
+
+@media only screen and (max-width: 1480px) {
+    .sd-page-content--slide-in--open {
+        .subnav--responsive {
+            &.compact--level-1 {
+                #planning-dropdown {
+                    display: block;
+                }
+
+                #planning-buttons {
+                    display: none;
+                }
+            }
+        }
+    }
+}
+
+@media only screen and (max-width: 1250px) {
+    .sd-page-content--slide-in--open {
+        .subnav--responsive {
+            #planning-dropdown {
+                display: block;
+            }
+
+            #planning-buttons {
+                display: none;
+            }
+
+            .dropdown__toggle {
+                max-width: 160px;
+            }
+        }
+    }
+}