superdesk-ui-framework 3.0.1-beta.1 → 3.0.1-beta.4

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

@@ -40,17 +40,45 @@
         background-color: var(--sd-colour-panel-bg--100);
         overflow: auto;
     }    
-    .bottom-bar {
-        height:3rem;
-        background-color: var(--sd-colour-bottom-bar);
+    .bottom-bar,
+    .sd-bottom-bar {
         grid-column: 2/3;
         grid-row: 4/5;
-        z-index: 2;
-        display: flex;
-        align-items: center;
-        flex-direction: row;
-        color: rgba(255, 255, 255, 0.75);
-        padding: 0 10px; 
+    }
+}
+
+.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: $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: $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);
+    }
+    &--disabled {
+        pointer-events: none !important;
+        opacity: 0.3;
     }
 }
 
@@ -571,20 +599,6 @@ $planningEditor-width: 53rem;
     }
 }
 
-// DARK UI ---------------------------------------------
-//------------------------------------------------------
-
-// .dark-ui,
-// [class^="--dark-ui"],
-// [class*="--dark-ui"] {
-//     .sd-filters-panel {
-//         background-color: $sd-filters-darkUI-bg;
-//     }
-// }
-
-
-
-
 // GRID LAYOUT TEST ------------------------------------------------------------------------------------------------------------------------
 //------------------------------------------------------------------------------------------------------------------------------------------
 
@@ -671,6 +685,9 @@ $planningEditor-width: 53rem;
     .side-panel__container {
         width: var(--width__container--medium);
         overflow-y: auto;
+        &.side-panel__container--xx-large{
+            width: var(--width__container--xx-large);
+        }
         .side-panel {
             opacity: 1;
         }
@@ -715,34 +732,44 @@ $planningEditor-width: 53rem;
     overflow: auto;
 }
 
-.sd-content-wrapper__content-splitter { 
-    grid-column: contentSplitter;
+.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;
+    }
 
-    // this styling might be moved to an inner element
-    width: 3px;
-    background-color: #666;
-    cursor: col-resize;
+}
+.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;
+    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;
-    background-color: aquamarine;
 
     .sd-main-menu {
         grid-column: slideInNavigation;
         grid-row: 1/-1;
-        background-color: #272727;
+        background-color: hsla(214, 13%, 16%, 1);
         display: grid;
         grid-template-columns: 1fr;
         grid-template-rows: 1fr;
@@ -755,14 +782,81 @@ $planningEditor-width: 53rem;
             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.6);
         }
+        .sd-main-menu__navigation {
+            display: grid;
+            grid-template-columns: 1fr;
+            grid-template-rows: [mainMenuHeader] $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-bottom: 1px solid hsla(214, 13%, 60%, 0.08);
+        }
+        .sd-main-menu__title {
+            font-size: 1.6rem;
+            font-weight: 300;
+            opacity: 0.65;
+            padding-left: 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-top: 1px solid hsla(214, 13%, 60%, 0.08);
+            .sd-main-menu__footer-logo {
+                display: flex;
+                align-items: center;
+                border-top: 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-top: 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__inner,
+            .sd-main-menu__navigation {
                 width: 30rem;
                 opacity: 1;
             }
         }
+        .sd-left-nav {
+            width: 100%;
+        }
     }
     .sd-top-menu {
         grid-column: contentContainer;
@@ -776,22 +870,22 @@ $planningEditor-width: 53rem;
         z-index: 1;
         overflow: auto;
         background-color: var(--sd-colour-panel-bg--100);
-
-    }    
-    .bottom-bar {
+    }   
+    .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;
-        height:3rem;
-        background-color: var(--sd-colour-bottom-bar);
-        z-index: 2;
-        display: flex;
-        align-items: center;
-        flex-direction: row;
-        color: rgba(255, 255, 255, 0.75);
-        padding: 0 10px; 
     }
 }
 
+
 // EDITOR 3 Layout ======================================= //
 .sd-authoring-page {
     display: grid;

package/app/styles/layout/_container.scss

@@ -20,6 +20,9 @@
     &--gap-none {
         gap: 0;
     }
+    &--gap-x-small {
+        gap: $sd-base-increment / 2;
+    }
     &--gap-small {
         gap: $sd-base-increment;
     }

package/app/styles/layout/_editor.scss

@@ -134,19 +134,45 @@
     justify-content: space-between;
     align-items: center;
     box-shadow: 0px 1px 3px -1px rgba(0, 0, 0, 0.2);
+    &--custom {
+        height: auto;
+        flex-direction: column;
+        align-items: stretch;
+        padding: 0;
+    }
+}
+.sd-editor-content__save-bar {
+    height: $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);
+    &--custom {
+        height: auto;
+        flex-direction: column;
+        align-items: stretch;
+        padding: 0;
+    }
 }
-// .sd-editor-content__main-container {
-//     grid-column: editorMain;
-//     grid-row: editorMainContainer;
-//     display: flex;
-//     flex-direction: column;
-//     overflow-y: auto;
-//     p {
-//         font-size: 16px;
-//         line-height: 1.5;
-//         margin-bottom: 24px;
-//     }
-// }
+.sd-editor-content__toolbar-inner {
+    height: $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;
@@ -166,9 +192,6 @@
 
     grid-column: 1 / 3;
     grid-row: authoringHeader;
-
-
-
     display: flex;
     flex-direction: column;
     background-color: var(--sd-colour-panel-bg--100);
@@ -177,7 +200,7 @@
     padding: $sd-base-increment * 3 $sd-base-increment * 1.5;
     z-index: 2;
     box-shadow: 0px 1px 4px -1px rgba(0, 0, 0, 0.25);
-    max-height: 800px;
+    max-height: 1400px;
     transition: max-height 0.12s ease-in;
     & > .authoring-header__holder {
         height: auto;
@@ -202,6 +225,21 @@
             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: $sd-base-increment * 3 $sd-base-increment * 1.5;
+    }
+    &.authoring-header--padding-medium {
+        padding: $sd-base-increment * 3 $sd-base-increment * 3;
+    }
+    &.authoring-header--padding-large {
+        padding: $sd-base-increment * 3 $sd-base-increment * 4;
     }
 }
 .authoring-header__toggle {
@@ -302,5 +340,59 @@
         background: var(--sd-colour__webkit-scrollbar-thumb--hover);
         cursor: pointer;
     }
+}
+
+.sd-editor__container {
+    grid-column: 1 / 2;
+    display: grid;
+    grid-template-rows: 1fr;
+    grid-auto-columns: auto;
+    overflow-y: auto;
+
+    width: 0;
+    min-width: 0;
+    overflow: hidden;
+    opacity: 0;
+    transition: all ease-in-out 0.1s;
+    .sd-content-wrapper__main-content-area.sd-main-content-grid {
+        grid-column: 1 / 2 !important;
+    }
+}
+
+.open-editor {
+    .sd-editor__container {
+        opacity: 1;
+        overflow-y: auto;
+        width: auto;
+        min-width: 45vw;
+        //min-width: 45%;
+        //max-width: 1200px;
 
+    }
 }
+
+.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);
+    }
+}

package/app/styles/menus/_sd-bottom-tabs.scss

@@ -0,0 +1,70 @@
+.sd-bottom-nav-list {
+    display: flex;
+    flex-grow: 1;
+    flex-shrink: 1;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    min-height: 3.2rem;
+    overflow-x: auto;
+    grid-column: 2/3;
+    .sd-bottom-nav-list__item {
+        flex: 0 1 24rem;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        height: 3.2rem;
+        padding: 0 0.8rem 0 1.6rem;
+        gap: 0.8rem;
+        border-inline-end: 1px solid hsla(214, 13%, 90%, 0.14);
+        background-color: var(--sd-colour-bottom-bar__item);
+        overflow: hidden;
+        .sd-bottom-nav-list__item-title {
+            font-size: 1.4rem;
+            line-height: 1;
+            color: hsla(214, 13%, 80%, 1);
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            display: flex;
+            flex: 1 1;
+            align-self: stretch;
+            align-items: center;
+            gap: 8px;
+            &:hover {
+                color: var(--sd-colour-interactive);
+                cursor: pointer;
+            }
+            [class^="icon-"],
+            [class*=" icon-"] {
+                flex-shrink: 0;
+                color: inherit !important;
+                opacity: 0.75;
+            }
+            span {
+                padding-top: 2px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                display: flex;
+                display: inline-block;
+                flex-shrink: 1;
+            }
+        }
+        &--active {
+            background-color: var(--sd-colour-bottom-bar__item--active);
+            .sd-bottom-nav-list__item-title,
+            .sd-bottom-nav-list__item-title:hover {
+                color: hsla(214, 13%, 98%, 1);
+            }
+        }
+        &--disabled {
+            opacity: 0.5;
+            pointer-events: none;
+            .sd-bottom-nav-list__item-title {
+                pointer-events: none;
+            }
+        }
+    }
+}

package/app/styles/menus/_sd-left-navigation.scss

@@ -4,6 +4,7 @@
 $sd-leftNav-bgColor: var(--sd-colour-background__left-nav);
 $sd-leftNav-borderColor: var(--sd-colour-line--light);
 $sd-leftNav-width: 24rem;
+$sd-leftNav-width-large: 32rem;
 
 $sd-leftNavBtn-bgColor: transparent;
 $sd-leftNavBtn-bgHoverColor: $sd-colour-background__menu-item--hover;
@@ -33,9 +34,31 @@ $sd-leftNavBtn-borderActive: 4px solid var(--sd-colour-interactive--active);
     &--blanc {
         border-color: transparent;
         background: transparent;
+        border-right-width: 0;
         .sd-left-nav__group-header {
             border-top-color: transparent;
         }
+    }
+    &--large {
+        width: $sd-leftNav-width-large;
+        max-width: 100%;
+        .sd-left-nav__group-header {
+            padding-inline: 2.4rem 0;
+        }
+        .sd-left-nav__btn {
+            padding-inline: 4rem 0;
+        }
+    }
+    &--reverse-border {
+        .sd-left-nav__btn {
+            border-inline-end: none;
+            border-inline-start: $sd-leftNavBtn-border;
+
+           &--active {
+                border-inline-end: none;
+                border-inline-start: $sd-leftNavBtn-borderActive;
+            }
+        }
     }   
 }
 
@@ -75,7 +98,7 @@ $sd-leftNavBtn-borderActive: 4px solid var(--sd-colour-interactive--active);
     line-height: 100%;
     text-transform: uppercase;
     letter-spacing: 0.1em;
-    color: var(--color-text-light);
+    color: var(--color-text-lighter);
     padding-block-start: 2.6rem;
     padding-block-end: 0.9rem;
     padding-inline: 1.6rem 0;

package/app/styles/menus/_sd-sidebar-menu.scss

@@ -132,10 +132,18 @@ $sd-sideTabMenu-background: var(--sd-colour-sidebar-menu--20);
   &--static {
     position: static;
   }
+  .badge {
+    position: absolute;
+    inset-block-start: 3px;
+    inset-inline-end: 3px;
+    z-index: 1;
+  }
 }
 
 .sd-sidetab-menu__btn {
-  display:block;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   position: relative;
   width: 100%;
   height: $sd-sidebarMenu-width;
@@ -155,8 +163,8 @@ $sd-sideTabMenu-background: var(--sd-colour-sidebar-menu--20);
 .sd-sidetab-menu__main-icon {
   color: $sd-text-light;
   position: absolute;
-  top: 10px;
-  left: 10px;
+  inset-block-start: 1rem;
+  inset-inline-start: 1rem;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -164,25 +172,19 @@ $sd-sideTabMenu-background: var(--sd-colour-sidebar-menu--20);
     color: $sd-text-light;
   }
 }
-.sd-sidetab-menu__helper-icon {
+
+.sd-sidetab-menu__helper-icon,
+i.sd-sidetab-menu__helper-icon {
   opacity: 0;
   margin: 0;
-  left: 1.2rem;
+  inset-block-start: 1.2rem;
+  inset-inline-start: 1.2rem;
   width: 2.4rem;
   height: 2.4rem;
   font-size: 2.4rem;
   line-height: 2.4rem;
   z-index: 2;
   transition: all 0.4s 0s, transform 0.3s 0s;
-  i {
-    opacity: 0;
-    margin: 0;
-    width: 2.4rem;
-    height: 2.4rem;
-    font-size: 2.4rem;
-    line-height: 2.4rem;
-    transition: all 0.4s 0s, transform 0.3s 0s;
-  }
 }
 .sd-sidetab-menu__main-icon,
 .sd-sidetab-menu__main-icon i {

package/app/styles/menus/_sd-top-menu.scss

@@ -17,19 +17,33 @@ $sd-topMenu-background: var(--sd-colour-top-menu);
 }
 
 .sd-top-menu__collapse-nav {
-    display: inline-block;
     height: $nav-height;
-    line-height: $nav-height + 3;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     width: $sd-sidebarMenu-width;
     text-align: center;
     padding: 0;
     background-color: var(--sd-colour-top-menu__btn);
-    box-shadow: 2px 0 5px 0 rgba(0,0,0,.35);
+    box-shadow: 2px 0 5px 0 hsla(0, 0%, 0%, 0.35);
     position: relative;
+    transition: all 0.3s ease;
     &:hover {
-        background: #000;
+        background-color: hsl(0, 0%, 0%);
         cursor: pointer;
     }
+    &.is-active {
+        margin-inline-start: -$sd-sidebarMenu-width;
+        background-color: hsla(0, 0%, 0%, 0.02);
+        box-shadow: none;
+        &:hover {
+            background-color: hsla(0, 0%, 0%, 0.24);
+        }
+    }
+    &--disabled {
+        pointer-events: none !important;
+        opacity: 0.5;
+    }
 }
 .sd-top-menu__header {
     display: inline-block;
@@ -38,7 +52,7 @@ $sd-topMenu-background: var(--sd-colour-top-menu);
     font-size: 1.5rem;
     text-align: center;
     padding: 0 2rem;
-    color: #aaa;
+    color: hsl(214, 13%, 75%);
     margin: 0;
 }