superdesk-ui-framework 3.0.0-beta.0 → 3.0.1-beta.1

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,7 +37,7 @@
         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 {
@@ -86,6 +86,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;
@@ -298,7 +301,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 +454,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;
@@ -596,6 +595,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;
@@ -676,7 +676,7 @@ $planningEditor-width: 53rem;
         }
     } 
 }
-.sd-main-content-grid__filter.open-filters {
+.open-filters {
     .side-panel__container {
         width: var(--width__container--x-small);
         overflow-y: auto;
@@ -697,6 +697,9 @@ $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;
+    }
 }
 .sd-content-wrapper__left-tabs { 
     grid-column: sideTabsLeft;
@@ -706,10 +709,12 @@ $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;
 
@@ -724,7 +729,7 @@ $planningEditor-width: 53rem;
 }
 
 // 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;
@@ -770,7 +775,7 @@ $planningEditor-width: 53rem;
         grid-row: contentContainer;
         z-index: 1;
         overflow: auto;
-        background-color: var(--color-bg-50);
+        background-color: var(--sd-colour-panel-bg--100);
 
     }    
     .bottom-bar {
@@ -881,3 +886,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 {

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

@@ -2,9 +2,6 @@ $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-Bg-darkUi: #2d2d2d;
-
-
 
 .side-panel {
     margin: 0;
@@ -22,8 +19,8 @@ $side-panel-Bg-darkUi: #2d2d2d;
         position: relative;
         min-height: 4.8rem;
         display: flex;
-        flex-direction: row;
-        align-items: center;
+        flex-direction: column;
+        justify-content: center;
         background-color: inherit;
         &--border-b, &--border-bottom {
             box-shadow: 0 1px 0 var(--sd-colour-line--x-light);
@@ -31,10 +28,20 @@ $side-panel-Bg-darkUi: #2d2d2d;
         .nav-tabs {
             flex-grow: 1;
         }
-        &--dark-blue-grey {
+        &--dark-blue-grey, &--blueGreyDarker {
             background-color: $subnav-background-dark-blue-grey;
             color: $white;
         }
+        &--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__sliding-toolbar {
         @include sliding-toolbar; // See mixins.scss for details
@@ -48,7 +55,8 @@ $side-panel-Bg-darkUi: #2d2d2d;
     }
     
     .side-panel__heading {
-        @include sd-padding('2', 'x');
+        padding-inline-start: $sd-base-increment * 2;
+        padding-inline-end: $sd-base-increment * 2;
         margin: 0;
         font-size: 1.5rem;
         color: inherit;
@@ -84,6 +92,7 @@ $side-panel-Bg-darkUi: #2d2d2d;
         grid-row: 2/3;
         z-index: 1;
         overflow: auto;
+        position: relative;
         &--flex {
             display: flex;
             flex-direction: column;
@@ -363,9 +372,12 @@ $side-panel-Bg-darkUi: #2d2d2d;
         grid-row: 3/4;
         z-index: 2;
         &--button-box, &--button-box-large {
-            padding: 1rem 2rem;
+            padding: $sd-base-increment * 1.5 $sd-base-increment * 2;
             position: relative;
             box-shadow: 0 -1px 0 hsla(0, 0%, 0%, 0.08);
+            display: flex;
+            gap: $sd-base-increment;
+            align-items: center;
             &::before {
                 position: absolute;
                 content: '';
@@ -376,23 +388,26 @@ $side-panel-Bg-darkUi: #2d2d2d;
                 border-bottom: 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;
+            }
         }
         &--button-box-large {
-            padding: 1.4rem 2rem;
-            .btn + .btn, .side-panel__footer-buttons--flex + .btn {
-                margin-top: 1rem;
-                margin-left: 0;
-            }
+            padding: $sd-base-increment * 2 $sd-base-increment * 3;
+            gap: $sd-base-increment * 1.5;
+            // .btn + .btn, .side-panel__footer-buttons--flex + .btn {
+                
+            // }
         }
         .side-panel__footer-buttons--flex {
             display: flex;
             flex-direction: row;
             align-items: center;
             flex-basis: 0;
-            .btn + .btn {
-                margin-left: 0.8rem;
-                margin-top: 0;
-            }
+            gap: 0.8rem;
         } 
     }
     &.side-panel--shadow-left::after,
@@ -425,26 +440,6 @@ $side-panel-Bg-darkUi: #2d2d2d;
             background-color: rgba(255, 255, 255, 0.2);
         }
     }
-    // &--dark-ui, &--dark {
-    //     background-color: $side-panel-Bg-darkUi;
-    //     color: $white;
-    //     .side-panel__heading {
-    //         color: scale-color($white, $alpha: -50%);
-    //         &--big {
-    //             color: scale-color($white, $alpha: -20%);
-    //         }
-    //     }
-    //     .side-panel__footer--button-box, .side-panel__footer--button-box-large {
-    //         background-color: rgba(94, 169, 200, 0.03);
-    //         &::before {
-    //             background-image: linear-gradient(to top,rgba(0,0,0,.14) 0%,rgba(0,0,0,0) 100%);
-    //         }
-    //     }
-    //     .dropdown__caret {
-    //         border-top: 4px solid #FFF;
-    //         opacity: .6;
-    //     }
-    // }
     &--bg-000, &--light {
         background-color: $side-panel-Bg-000;
     }
@@ -456,26 +451,60 @@ $side-panel-Bg-darkUi: #2d2d2d;
     }
 }
 
-// DARK UI ---------------------------------------------
-//------------------------------------------------------
+.side-panel__header--has-close {
+    .sd-nav-tabs {
+        margin-inline-end: 4rem;
+    }
+    .side-panel__heading {
+        padding-inline-end: $sd-base-increment * 5;
+    }
+}
 
-// .dark-ui,
-// [class^="--dark-ui"],
-// [class*="--dark-ui"] {
-//     .side-panel {
-//         background-color: $side-panel-Bg-darkUi;
-//         color: $white;
-//         &.side-panel--transparent {
-//             background-color: transparent;
-//             .side-panel__header {
-//                 box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.25);
-//             }
-//             .side-panel__footer {
-//                 &--button-box, &--button-box-large {
-//                     background-color: var(--sd-colour-interactive--alpha-10);
-//                 }
-//             }
-//         }
-//     }
-// }
 
+.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;
+    }
+} 

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

@@ -56,10 +56,7 @@
     flex-direction: row;
     align-items: center;
     padding: 0 20px;
-    z-index: 2;
-    &--white {
-        //background-color: $white;
-    }
+    z-index: 3;
     &--justify-space-between {
         justify-content: space-between;
     }

package/app/styles/layout/_container.scss

@@ -0,0 +1,32 @@
+.sd-container {
+    display: flex;
+    align-items: center;
+    align-self: stretch;
+    &--inline-flex {
+        display: inline-flex;
+    }
+    &--block {
+        display: block;
+    }
+
+    &--direction-row {
+        flex-direction: row;
+    }
+    &--direction-column {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    &--gap-none {
+        gap: 0;
+    }
+    &--gap-small {
+        gap: $sd-base-increment;
+    }
+    &--gap-medium {
+        gap: $sd-base-increment * 1.5;
+    }
+    &--gap-large {
+        gap: $sd-base-increment * 2;
+    }
+}