superdesk-ui-framework 2.4.21 → 3.0.0-rc12

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

@@ -1,10 +1,7 @@
-$side-panel-Bg: var(--color-bg-00);
-$side-panel-Bg-00: var(--color-bg-00);
-$side-panel-Bg-50: var(--color-bg-50);
-$side-panel-Bg-100: var(--color-bg-100);
-$side-panel-Bg-darkUi: #2d2d2d;
-
-
+$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 {
     margin: 0;
@@ -18,38 +15,53 @@ $side-panel-Bg-darkUi: #2d2d2d;
     .side-panel__header {
         grid-column: 1/2;
         grid-row: 1/2;
-        z-index: 1;
+        z-index: 2;
         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 {
-            box-shadow: 0 1px 0 rgba(0,0,0,.12);
+        &--border-b, &--border-bottom {
+            box-shadow: 0 1px 0 var(--sd-colour-line--x-light);
         }
         .nav-tabs {
             flex-grow: 1;
         }
-        &--dark-blue-grey {
+        &--dark-blue-grey, &--blueGreyDarker {
             background-color: $subnav-background-dark-blue-grey;
             color: $white;
         }
-        &--border-bottom {
-            box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
+        &--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
+        &.side-panel__sliding-toolbar {
+            text-align: end;
+            justify-content: flex-end;
+            & > .btn {
+                margin-left: $sd-base-increment;
+            }
+        }
     }
     
     .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;
         opacity: 0.8;
-        font-weight: 300;
+        font-weight: 400;
         letter-spacing: 0.02em;
         &--big {
             color: $sd-text;
@@ -60,15 +72,15 @@ $side-panel-Bg-darkUi: #2d2d2d;
     }
     .side-panel__close {
         position: absolute;
-        right: $sd-base-increment; // equals 0.8rem or 8px
-        top: $sd-base-increment;
+        inset-inline-end: $sd-base-increment; // equals 0.8rem or 8px
+        inset-block-start: $sd-base-increment;
         z-index: 2;
-        color: $gray;
+        color: var(--color-text-light);
     }
     .side-panel__tools {
         position: absolute;
-        right: $sd-base-increment;
-        top: $sd-base-increment;
+        inset-inline-end: $sd-base-increment;
+        inset-block-start: $sd-base-increment;
         z-index: 2;
         color: inherit;
         .icn-btn {
@@ -80,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;
@@ -123,7 +136,7 @@ $side-panel-Bg-darkUi: #2d2d2d;
         }
         &--boxed {
             padding: 1.6rem;
-            border-radius: 3px;
+            border-radius: $border-radius__base--medium;
             margin-bottom: 1rem;
         }
         &--pad-small {
@@ -224,7 +237,7 @@ $side-panel-Bg-darkUi: #2d2d2d;
             background-color: #fff;
             z-index: 3;
             line-height: 0;
-            border-radius: 50%;
+            border-radius: $border-radius__base--full;
             box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.4);
             transition: transform 0.5s;
 
@@ -265,7 +278,7 @@ $side-panel-Bg-darkUi: #2d2d2d;
     .side-panel__content-block-inner {
         flex-grow: 0;
         &--right {
-            text-align: right;
+            text-align: end;
         }
         &--grow {
             flex-grow: 1;
@@ -342,11 +355,11 @@ $side-panel-Bg-darkUi: #2d2d2d;
         display: flex;
         align-items: center;
         .side-panel__top-tools-left {
-            text-align: left;
+            text-align: start;
             flex-grow: 1;
         }
         .side-panel__top-tools-right {
-            text-align: right;
+            text-align: end;
             flex-grow: 1;
         }
         &--dark-blue-grey {
@@ -359,9 +372,12 @@ $side-panel-Bg-darkUi: #2d2d2d;
         grid-row: 3/4;
         z-index: 2;
         &--button-box, &--button-box-large {
-            //background-color: #f1f1f1;
-            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: '';
@@ -369,26 +385,29 @@ $side-panel-Bg-darkUi: #2d2d2d;
                 left: 0;
                 right: 0;
                 height: 0.4rem;
-                border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+                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,
@@ -421,58 +440,71 @@ $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;
     }
-    &--bg-00, &--light {
-        background-color: $side-panel-Bg-00;
+    &--bg-100, &--light-grey {
+        background-color: $side-panel-Bg-100;
     }
-    &--bg-50, &--light-grey {
-        background-color: $side-panel-Bg-50;
+    &--bg-200, &--grey {
+        background-color: $side-panel-Bg-200;
     }
-    &--bg-100, &--grey {
-        background-color: $side-panel-Bg-100;
+}
+
+.side-panel__header--has-close {
+    .sd-nav-tabs {
+        margin-inline-end: 4rem;
+    }
+    .side-panel__heading {
+        padding-inline-end: $sd-base-increment * 5;
     }
 }
 
-// DARK UI ---------------------------------------------
-//------------------------------------------------------
 
-.dark-ui,
-[class^="--dark-ui"],
-[class*="--dark-ui"] {
+.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 {
-        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);
-                // background-color: rgba(94, 169, 200, 0.03);
-            }
-            .side-panel__footer {
-                &--button-box, &--button-box-large {
-                    background-color: rgba(94, 169, 200, 0.1);
-                }
-            }
-        }
+        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

@@ -28,10 +28,9 @@
     bottom: 0;
     left: 0;
     right: 0;
-    background-color: #f8f8f8;
+    background-color: var(--sd-colour-panel-bg--100);
     display: flex;
     flex-direction: column;
-
     &--double-left-nav {
         left: 400px;
     } 
@@ -39,10 +38,10 @@
 
 .sd-page__sidebar {
     & + .sd-page__main-content {
-        left: 200px;
+        left: 240px;
     }
     & + .sd-content-navigation-panel {
-        left: 200px;
+        left: 240px;
         top: 0;
         bottom: 0;
         position: absolute;
@@ -52,15 +51,12 @@
 .sd-page__header {
     height:48px;
     flex-shrink: 0;
-    border-bottom: 1px solid #dedede;
+    border-bottom: 1px solid var(--sd-colour-line--light);
     display: flex;
     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;
     }
@@ -85,6 +81,7 @@
     flex-grow: 1;
     padding: 20px;
     overflow: auto;
+    background-color: $mainListBackGround;
 
     &--centered-dashboard {
         display: grid;
@@ -123,13 +120,6 @@
         opacity: 0;
         transition: all 0.2s ease-out;
         transition-delay: .1s;
-        .side-panel__header {
-            background-color: $sd-background-darkUI;
-        }
-    }
-    &--dark-ui {
-        background-color: $sd-background-darkUI !important;
-        color: $white;
     }
     &--open {
         width:40rem;
@@ -141,12 +131,14 @@
             width:68rem;
         }
     }
-
 }
 
-.dark-ui {
-    .sd-page__content {
-        background-color: $grayMedium;
-        color: $white;
+[data-theme="dark-ui"] {
+    .sd-overlay-panel {
+        .side-panel {
+            .side-panel__header {
+                background-color: var(--sd-colour-bg--01);
+            }
+        }
     }
 }

package/app/styles/layout/_container.scss

@@ -0,0 +1,35 @@
+.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-x-small {
+        gap: $sd-base-increment / 2;
+    }
+    &--gap-small {
+        gap: $sd-base-increment;
+    }
+    &--gap-medium {
+        gap: $sd-base-increment * 1.5;
+    }
+    &--gap-large {
+        gap: $sd-base-increment * 2;
+    }
+}