superdesk-ui-framework 2.4.21 → 3.0.1-beta.2

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,12 +37,12 @@
         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: #222;
+        background-color: var(--sd-colour-bottom-bar);
         grid-column: 2/3;
         grid-row: 4/5;
         z-index: 2;
@@ -86,11 +86,14 @@
     overflow-x: hidden;
     overflow-y: auto;
 }
+.sd-column-box--3 {  
+    z-index: 1;
+}
 .sd-column-box__main-column {
     flex-grow: 1;
     flex-shrink: 1;
-    // width: 50%;
     overflow: auto;
+    background-color: $mainListBackGround;
     &--padded {
         padding: 2rem;
     }
@@ -116,23 +119,30 @@
     &--photo-preview {
         display: flex;
         flex-direction: column;
-        background-color: #212121;
+        background-color: var(--sd-colour-bg__photo-preview);
         position: relative;
         .sd-photo-preview {
             flex-grow: 1;
         }
     }
     &--left {
-        border-right: 1px solid #BEBCBC;
+        border-right: 1px solid var(--sd-colour-line--light);
     }
     &--border-right {
-        border-right: 2px solid #8f8f8f;
+        border-right: 2px solid var(--sd-colour-line--medium);
     }
     &--flex {
         display: flex;
         flex-direction: column;
     }
 }
+.sd-column-box__main-column-top-bar {
+    padding: 0.8rem 2.4rem;
+    border-bottom: 1px solid var(--sd-colour-line--x-light);
+    display: flex;
+    flex-direction: row;
+    gap: $sd-base-increment;
+}
 .sd-column-box__main-column-inner {
     overflow-y: auto;
     padding: 2rem;
@@ -143,10 +153,11 @@
     transition: all .2s ease-out;
     display: flex;
     flex-direction: column;
-    border-left: 1px solid rgba(0, 0, 0, 0.27);
+    border-left: 1px solid var(--sd-colour-line--light);
     overflow-x: hidden;
     position: relative;
     flex-shrink: 0;
+    background-color: var(--sd-colour-bg__slide-in-column-inner);
     &::before{
         display: block;
         top: 0;
@@ -156,29 +167,20 @@
         position: absolute;
         left: 0;
         z-index: 80;
-        background-image: linear-gradient(to right, rgba(0, 0, 0, 0.12) 0%, transparent 100%);
+        background-image: linear-gradient(to right, hsla(0, 0%, 0%, 0.12) 0%, transparent 100%);
     }
     .sd-column-box__slide-in-column-inner {
         opacity: 1;
         transition: all 0.1s ease-out;
         transition-delay: 0.2s;
-        background-color: rgba(255, 255, 255, 0.7);
+        background-color: var(--sd-colour-bg__slide-in-column-inner);
     }
     &--large {
         width: 40rem;
     }
-    &--dark-ui {
-        background-color: #3b3b3b;
-        .sd-column-box__slide-in-column-inner {
-            background-color: #3b3b3b;
-        }
-        .sd-slide-in-panel__heading {
-            color: rgba(255,255,255,0.75);
-        }
-    }
     &--closed {
         width: 0;
-        border-left: 1px solid rgba(187, 187, 187, 0);
+        border-left: 1px solid transparent;
         overflow: hidden;
         .sd-column-box__slide-in-column-inner {
             opacity: 0;
@@ -201,15 +203,16 @@
     display: flex;
     flex-direction: row;
     align-items: center;
-    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
+    box-shadow: 0 1px 0 var(--sd-colour-line--light);
 }
 .sd-slide-in-panel__heading {
     padding: 0 2rem 0 1.6rem;
     margin: 0;
     font-size: 1.5rem;
-    color: $gray;
+    color: var(--color-text-light);
     font-weight: 300;
     letter-spacing: 0.02em;
+    margin-right: auto;
     &--marg-b10 {
         margin-bottom: 1rem;
     }
@@ -221,11 +224,9 @@
     }
 }
 .sd-slide-in-panel__close {
-    position: absolute;
-    right: 1rem;
-    top: 1.1rem;
     z-index: 2;
-    color: $gray;
+    color: var(--color-text-lighter);
+    margin-right: $sd-base-increment * 1.5;
 }
 .sd-slide-in-panel__content {
     flex-grow: 1;
@@ -240,6 +241,28 @@
         padding: 0;
     }
 }
+.sd-slide-in-panel__footer {
+    position: relative;
+    flex-grow: 0;
+    flex-shrink: 0;
+    z-index: 2;
+    position: relative;
+    min-height: 4.8rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: $sd-base-increment * 1.5 $sd-base-increment * 2;
+    &::before {
+        position: absolute;
+        content: '';
+        top: -0.4rem;
+        left: 0;
+        right: 0;
+        height: 0.4rem;
+        border-bottom: 1px solid var(--sd-colour--shadow-line);
+        background-image: linear-gradient(to top, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0) 100%);
+    }
+}
 
 
 
@@ -278,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;
@@ -431,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: #fff;
-    border-left: 0px solid rgba(0, 0, 0, 0);
-    &--dark-ui {
-        background-color: darken($grayMedium, 10%);
-    }
-
+    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;
@@ -488,7 +507,7 @@ $planningEditor-width: 53rem;
 .text-label {
     display: inline-block;
     min-width: 4rem;
-    color: $gray;
+    color: var(--color-text-light);
     font-weight: 300;
     &--auto {
         min-width: auto;
@@ -555,13 +574,13 @@ $planningEditor-width: 53rem;
 // DARK UI ---------------------------------------------
 //------------------------------------------------------
 
-.dark-ui,
-[class^="--dark-ui"],
-[class*="--dark-ui"] {
-    .sd-filters-panel {
-        background-color: $sd-filters-darkUI-bg;
-    }
-}
+// .dark-ui,
+// [class^="--dark-ui"],
+// [class*="--dark-ui"] {
+//     .sd-filters-panel {
+//         background-color: $sd-filters-darkUI-bg;
+//     }
+// }
 
 
 
@@ -576,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;
@@ -587,6 +607,7 @@ $planningEditor-width: 53rem;
     grid-column: mainContent;
     grid-row: contentBlock;
     overflow-y: auto;
+    background-color: $mainListBackGround;
     &.sd-main-content-grid__content--with-filters {
         display: grid;
         grid-template-rows: [filterBar] auto [innerContent] 1fr;
@@ -648,22 +669,25 @@ $planningEditor-width: 53rem;
 
 .sd-main-content-grid__preview.open-preview {
     .side-panel__container {
-        width:460px;
+        width: var(--width__container--medium);
         overflow-y: auto;
+        &.side-panel__container--xx-large{
+            width: var(--width__container--xx-large);
+        }
         .side-panel {
             opacity: 1;
         }
     } 
 }
-.sd-main-content-grid__filter.open-filters {
+.open-filters {
     .side-panel__container {
-        width:360px;
+        width: var(--width__container--x-small);
         overflow-y: auto;
         .side-panel {
             opacity: 1;
         }
         &.side-panel__container--small {
-            width: 300px;
+            width: var(--width__container--x-small);
         }
 
     } 
@@ -676,6 +700,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;
@@ -685,25 +712,38 @@ $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;
@@ -711,7 +751,7 @@ $planningEditor-width: 53rem;
     grid-gap: 0;
     height: 100vh;
     position: relative;
-    background-color: aquamarine;
+    //background-color: aquamarine;
 
     .sd-main-menu {
         grid-column: slideInNavigation;
@@ -749,14 +789,14 @@ $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 {
         grid-column: contentContainer;
         grid-row: footerBar;
         height:3rem;
-        background-color: #222;
+        background-color: var(--sd-colour-bottom-bar);
         z-index: 2;
         display: flex;
         align-items: center;
@@ -860,3 +900,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;
         }
     }
@@ -94,7 +94,7 @@ $layout-grid-media: (
         &-styled {
             .grid__item {
                 background-color: white;
-                border-radius: 2px;
+                border-radius: $border-radius__base--x-small;
                 box-shadow: 0 1px 4px rgba(0,0,0,.12);
             }
         }
@@ -109,7 +109,7 @@ $layout-grid-media: (
         &-styled {
             .grid__item {
                 background-color: white;
-                border-radius: 2px;
+                border-radius: $border-radius__base--x-small;
                 box-shadow: 0 1px 4px rgba(0,0,0,.12);
             }
         }

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 {