superdesk-ui-framework 3.0.0-beta.0 → 3.0.0-rc12

package/app/styles/form-elements/_select-grid.scss

@@ -0,0 +1,79 @@
+.select-grid__overlay-panel {
+    z-index: 1500 !important;
+    margin-top: 1px;
+}
+
+.select-grid__panel {
+    width: 380px;
+    max-height: 560px;
+    background-color: var(--color-dropdown-menu-Bg);
+    box-shadow: var(--sd-shadow__dropdown);
+    border-radius: var(--b-radius--small);
+    display: flex;
+    flex-direction: column;
+}
+
+.select-grid__header {
+    padding: 1rem;
+    box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
+}
+
+.select-grid__body {
+    overflow-y: auto;
+    margin: 0;
+    padding: 1rem;
+    position: relative;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
+}
+
+.select-grid__item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    color: var(--color-text);
+    border-radius: var(--b-radius--small);
+
+    &:hover, &:focus {
+        cursor: pointer;
+    }
+
+    &:hover {
+        background: $sd-colour-background__menu-item--hover;
+    }
+
+    &:focus {
+        outline: 2px solid var(--sd-colour-interactive);
+        outline-offset: -2px;
+    }
+}
+
+.sd-input--grid-select {
+    .btn {
+        grid-row: 2/3;
+        grid-column: 2/4;
+        background-color: var(--color-input-bg);
+        border-bottom: 1px solid var(--color-input-border);
+        width: 4rem;
+    }
+
+    .btn:hover {
+        background-color: var(--color-input-bg--hover);
+        border-bottom-color: var(--color-input-border-hover);
+        box-shadow: none;
+    }
+
+    .btn:focus {
+        background-color: var(--sd-colour-interactive--alpha-20);
+        border-bottom-color: var(--sd-colour-interactive);
+        box-shadow: 0 1px 0 0 var(--sd-colour-interactive);
+    }
+}
+
+.form__item--auto-width {
+    .sd-input--grid-select {
+        .btn {
+            margin-top: 0;
+        }
+    }
+}

package/app/styles/grids/_basic-grid.scss

@@ -2,15 +2,9 @@
 // Grid has equal columns, default setup is 'no wrap'
 // ---------------------------------------------
 
-@mixin flex($grow, $shrink, $basis) {
-    -webkit-flex: $grow $shrink $basis;
-        -ms-flex: $grow $shrink $basis;
-            flex: $grow $shrink $basis;
-}
 
-$flex-grid-gap:          1rem; // space between items is $flex-grid-gap*2
-$flex-grid-gap-small:    0.4rem; // alternative small gap
-$flex-grid-box-bg:       white;
+$flex-grid-gap:          $sd-base-increment * 2; // space between items is $flex-grid-gap*2
+$flex-grid-gap-small:    $sd-base-increment; // alternative small gap
 $flex-grid-columns:      6; // max number of columns supported
 
 // map for media breakpoints, 'small' is mandatory and reserved as mobile first
@@ -25,7 +19,7 @@ $flex-grid-media: (
     @for $i from $flex-grid-columns through 1 {
         &-#{$i} {
             .flex-grid__item {
-                @include flex(0, 0, 100% / $i);
+               flex: 0 0 100% / $i;
                 max-width: 100% / $i;
             }
         }
@@ -34,9 +28,28 @@ $flex-grid-media: (
 @mixin basic-grid-boxed {
     @for $i from $flex-grid-columns through 1 {
         &-#{$i} {
-            .flex-grid__item {
-                @include flex(0, 0, calc(#{100% / $i} - #{$flex-grid-gap * 2}));
-                max-width: calc(#{100% / $i} - #{$flex-grid-gap * 2});
+            .flex-grid__item, 
+            & > .sd-check__wrapper, 
+            & > .btn,
+            & > .icn-btn,
+            & > .toggle-button  {
+                flex: 0 0 calc(#{100% / $i} - #{$flex-grid-gap / $i * ($i - 1)});
+                max-width: calc(#{100% / $i} - #{$flex-grid-gap / $i * ($i - 1)});
+            }
+            & > .btn,
+            & > .icn-btn, 
+            & > .toggle-button {
+                flex-shrink: 0;
+            }
+            .sd-check__wrapper {
+                display: flex;
+                .sd-checkbox.sd-checkbox--button-style {
+                    display: flex;
+                    flex-grow: 1;
+                    label {
+                        flex-grow: 1;
+                    }
+                }
             }
         }
     }
@@ -45,9 +58,18 @@ $flex-grid-media: (
 @mixin basic-grid-boxed-small {
     @for $i from $flex-grid-columns through 1 {
         &-#{$i} {
-            .flex-grid__item, .sd-check__wrapper, .btn, .toggle-button {
-                @include flex(0, 0, calc(#{100% / $i} - #{$flex-grid-gap-small * 2}));
-                max-width: calc(#{100% / $i} - #{$flex-grid-gap-small * 2});
+            .flex-grid__item, 
+            & > .sd-check__wrapper, 
+            & > .btn,
+            & > .icn-btn, 
+            & > .toggle-button {
+                flex: 0 0 calc(#{100% / $i} - #{$flex-grid-gap-small / $i * ($i - 1)});
+                max-width: calc(#{100% / $i} - #{$flex-grid-gap-small / $i * ($i - 1)});
+            }
+            & > .btn,
+            & > .icn-btn, 
+            & > .toggle-button {
+                flex-shrink: 0;
             }
             .sd-check__wrapper {
                 display: flex;
@@ -67,8 +89,8 @@ $flex-grid-media: (
 .flex-grid {
     display: flex;
     flex-direction: row;
-    overflow: hidden;
-    overflow-x: auto;
+    // overflow: hidden;
+    // overflow-x: auto;
     .flex-grid__item {
         position: relative;
 
@@ -89,26 +111,23 @@ $flex-grid-media: (
         flex-grow: 1;
     }
     &--boxed {
-        margin-left: -$flex-grid-gap;
-        margin-right: -$flex-grid-gap;
+        gap: $flex-grid-gap;
         .flex-grid__item {
-            margin: $flex-grid-gap;
-            //background-color: $flex-grid-box-bg;
+            margin: 0;
         }
     }
 
     &--boxed-small {
-        margin-left: -$flex-grid-gap-small;
-        margin-right: -$flex-grid-gap-small;
+        gap: $flex-grid-gap-small;
         .flex-grid__item, .sd-check__wrapper, .btn, .toggle-button {
-            margin: $flex-grid-gap-small !important;
-            //background-color: $flex-grid-box-bg;
+            margin: 0 !important;
         }
     }
 
     &--plain {
+        gap: $flex-grid-gap;
         .flex-grid__item {
-            margin: $flex-grid-gap;
+            margin: 0;
             padding: 0;
         }
     }
@@ -136,6 +155,13 @@ $flex-grid-media: (
     }
 }
 
+.flex-grid.flex-grid--boxed + .flex-grid.flex-grid--boxed {
+    margin-top: $flex-grid-gap;
+}
+.flex-grid.flex-grid--boxed--small + .flex-grid.flex-grid--boxed--small {
+    margin-top: $flex-grid-gap-small;
+}
+
 // Media queries
 @each $name, $value in $flex-grid-media {
     @media only screen and (min-width: $value) {

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

@@ -11,20 +11,20 @@
     grid-gap: 0;
     height: 100vh;
     position: relative;
-    background-color: aquamarine;
+    background-color: var(--sd-colour-panel-bg--100);
 
     .sd-main-menu {
         grid-column: 1/2;
         grid-row: 1/5;
-        background-color: #272727;
+        background-color: var(--sd-colour-bg--02);
         width: 30rem;
-        box-shadow: inset -4px 0 12px rgba(0,0,0,0.9);
+        box-shadow: inset -4px 0 12px hsla(0, 0%, 0%, 0.9);
         display: none;
         .sd-left-nav__btn {
-            color: rgba(255, 255, 255, 0.75);
+            color: hsla(0, 0%, 100%, 0.75);
         }
         .sd-left-nav__group-header {
-            border-top: 1px solid rgba(255, 255, 255, 0.14);
+            border-top: 1px solid hsla(0, 0%, 100%, 0.14);
         }
     }
     .sd-top-menu {
@@ -37,20 +37,48 @@
         grid-column: 2/3;
         grid-row: 2/3;
         z-index: 1;
-        background-color: var(--color-bg-50);
+        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;
     }
 }
 
@@ -86,6 +114,9 @@
     overflow-x: hidden;
     overflow-y: auto;
 }
+.sd-column-box--3 {  
+    z-index: 1;
+}
 .sd-column-box__main-column {
     flex-grow: 1;
     flex-shrink: 1;
@@ -185,6 +216,12 @@
             transition-delay: 0;
         }
     }
+    &.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-slide-in-panel {
     display: flex;
@@ -298,7 +335,7 @@
 }
 
 .sd-page-content__content-block--right::before {
-    border-left: 3px solid #6C6C6C;
+    border-left: 3px solid var(--sd-colour__splitter);
     background-image: linear-gradient(to right,rgba(0,0,0,.2) 0,transparent 100%);
     display: block;
     bottom: 0;
@@ -451,25 +488,21 @@ $planningEditor-width: 53rem;
     }
 }
 .sd-filters-panel {
-    background-color: $sd-filters-bg;
-    border-right: 0px solid rgba(0, 0, 0, 0); 
+    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-left: 0px solid rgba(0, 0, 0, 0);
-    &--dark-ui {
-        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-right: 2px solid rgba(0, 0, 0, 0.25);
+        border-inline-end: 2px solid var(--sd-colour__side-panel-border);
 
         &--border-left {
-            border-right: none;
-            border-left: 2px solid rgba(0, 0, 0, 0.25);
+            border-inline-end: none;
+            border-inline-start: 2px solid var(--sd-colour__side-panel-border);
         }
         .side-panel {
             opacity: 1;
@@ -572,20 +605,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 ------------------------------------------------------------------------------------------------------------------------
 //------------------------------------------------------------------------------------------------------------------------------------------
 
@@ -596,6 +615,7 @@ $planningEditor-width: 53rem;
     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__header {
     grid-column: 1/4;
@@ -671,12 +691,39 @@ $planningEditor-width: 53rem;
     .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;
         }
     } 
 }
-.sd-main-content-grid__filter.open-filters {
+.open-filters {
     .side-panel__container {
         width: var(--width__container--x-small);
         overflow-y: auto;
@@ -697,6 +744,12 @@ $planningEditor-width: 53rem;
     display: grid;
     grid-template-columns: [sideTabsLeft] auto [contentArea] 1fr [contentSplitter] auto [authoringArea] auto;
     grid-template-rows: 1fr;
+    .sd-main-content-grid {
+        grid-column: contentArea;
+    }
+    &--editor-full {
+        grid-template-columns: [sideTabsLeft] auto [contentArea] auto [contentSplitter] auto [authoringArea] 1fr;
+    }
 }
 .sd-content-wrapper__left-tabs { 
     grid-column: sideTabsLeft;
@@ -706,38 +759,50 @@ $planningEditor-width: 53rem;
         //z-index: 10;
     }
 }
+
+
 .sd-content-wrapper__main-content-area { 
-    grid-column: contentArea;
     overflow: auto;
 }
-.sd-content-wrapper__content-splitter { 
-    grid-column: contentSplitter;
 
-    // this styling might be moved to an inner element
-    width: 3px;
-    background-color: #666;
-    cursor: col-resize;
+.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;
+    }
+
+}
+.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--test {
+.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;
@@ -750,14 +815,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;
@@ -770,23 +902,23 @@ $planningEditor-width: 53rem;
         grid-row: contentContainer;
         z-index: 1;
         overflow: auto;
-        background-color: var(--color-bg-50);
-
-    }    
-    .bottom-bar {
+        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;
-        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;
@@ -881,3 +1013,12 @@ $planningEditor-width: 53rem;
         z-index: 100;
     }
 }
+
+.sd-main-content-grid {
+    & > .sd-nav-tabs__content {
+        display: contents;
+        .sd-nav-tabs__pane {
+            display: contents;
+        }
+    }
+}

package/app/styles/grids/_layout-grid.scss

@@ -26,7 +26,7 @@ $layout-grid-media: (
     @for $i from 1 through $layout-grid-columns {
         &--col-#{$i} {
             $col-width: ($i / $layout-grid-columns) * 100%;
-            @include flex(0, 0, $col-width);
+            flex: 0 0 $col-width;
             max-width: $col-width;
         }
     }
@@ -35,7 +35,7 @@ $layout-grid-media: (
     @for $i from 1 through $layout-grid-columns {
         &-#{$i} {
             $col-width: ($i / $layout-grid-columns) * 100%;
-            @include flex(0, 0, $col-width);
+            flex: 0 0 $col-width;
             min-width: $col-width;
         }
     }
@@ -44,7 +44,7 @@ $layout-grid-media: (
     @for $i from 1 through $layout-grid-columns {
         &-#{$i} {
             $box-col-width: calc(#{($i / $layout-grid-columns) * 100%} - #{$layout-grid-gap * 2});
-            @include flex(0, 0, $box-col-width);
+            flex: 0 0 $box-col-width;
             min-width: $box-col-width;
         }
     }
@@ -53,7 +53,7 @@ $layout-grid-media: (
     @for $i from 1 through $layout-grid-columns {
         &-#{$i} {
             $box-col-width: calc(#{($i / $layout-grid-columns) * 100%} - #{$layout-grid-gap-small * 2});
-            @include flex(0, 0, $box-col-width);
+            flex: 0 0 $box-col-width;
             min-width: $box-col-width;
         }
     }

package/app/styles/grids/_sd-kanban-list.scss

@@ -44,11 +44,11 @@ $background-main: $sd-background;
     grid-row: 1/2;
     z-index: 1;
     position: relative;
-    min-height: 2rem;
+    min-height: 2.4rem;
     display: flex;
     flex-direction: row;
     align-items: center;
-    border-bottom: 4px solid #4d4d4d;
+    border-bottom: 4px solid var(--sd-colour-bg--09);
     padding: 0 0 0.4rem 0;
     margin: 0 0.1rem;
     .sd-list-header {