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

package/app/styles/layout/_editor.scss

@@ -0,0 +1,306 @@
+// ========== Outer Editor Layout (Frame) ========== //
+.sd-editor-grid {
+    display: grid;
+    grid-template-columns: [sideBarLeft] auto [editorContent] 1fr [sideTabPinned] auto [sideTabOverlay] auto [sideTabsBar] auto [editorOverlay] 0 [editorOverlay-end];
+    grid-template-rows: [editorSubnav] auto [editorContent] 1fr [editorContent-end];
+    height: 100%;
+}
+.sd-editor-grid__editor-subnav {
+    grid-column: 1 / 6;
+    grid-row: editorSubnav;
+    height: $nav-height;
+}
+.sd-editor-grid__sidebar-left {
+    grid-column: sideBarLeft;
+    grid-row: editorContent;
+    display: grid;
+    grid-template-rows: 1fr;
+    grid-template-columns: 1fr;
+    width: $sd-sidebarMenu-width;
+    overflow-y: auto;
+}
+.sd-editor-grid__editor-content {
+    grid-column: editorContent;
+    grid-row: editorContent;
+    background-color: #D4CED0;
+    position: relative;
+    overflow-y: auto;
+}
+.sd-editor-grid__sidetabs-content-pinned {
+    grid-column: sideTabPinned;
+    grid-row: editorContent;
+    position: relative;
+    overflow-x: visible;
+    overflow-y: hidden;
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr;
+    width: 0;
+    z-index: 1;
+    transition: all 0.2s ease;
+    &.sidetab-content-pinned--pinned {
+        overflow-y: auto;
+        overflow-x: hidden;
+        width: auto;
+        max-height: 100%;
+    }
+    &.sidetab-content-pinned--open {
+        overflow-y: auto;
+        overflow-x: hidden;
+        width: auto;
+        max-height: 100%;
+    }
+}
+.sd-editor-grid__sidetabs-content-overlay {
+    grid-column: sideTabOverlay;
+    grid-row: editorContent;
+    position: relative;
+    overflow-x: visible;
+    overflow-y: hidden;
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr;
+    width: 0;
+    background-color: var(--sd-colour-panel-bg--000);
+    z-index: 10;
+    .sidetabs-content-overlay__inner {
+        opacity: 0;
+        position: absolute;
+        overflow: hidden;
+        top: 0;
+        width: 0;
+        bottom: 0;
+        inset-inline-end: -320px;
+        transition: width 0.2s ease-in-out, opacity 0.2s ease;
+        box-shadow: -2px 0 12px hsla(0, 0%, 0%, 0), -3px 0 0 0px hsla(214, 13%, 60%, 0);
+        display: grid;
+        grid-template-columns: 1fr;
+        grid-template-rows: 1fr;
+        z-index: 10;
+    }
+    &.sidetab-content-overlay--open {
+        overflow: visible;
+        .sidetabs-content-overlay__inner {
+            opacity: 1;
+            width: 320px;
+            position: absolute;
+            overflow: hidden;
+            inset-inline-end: 0;
+            box-shadow: -2px 0 12px hsla(0, 0%, 0%, 0.4), -3px 0 0 0px hsla(214, 13%, 60%, 1);
+        }
+    }
+}
+.sd-editor-grid__sidetabs-bar {
+    display: grid;
+    grid-template-rows: 1fr;
+    grid-template-columns: 1fr;
+    grid-column: sideTabsBar;
+    grid-row: editorContent;
+    width: $sd-sidebarMenu-width;
+    overflow-y: auto;
+    z-index: 11;
+
+}
+.sd-editor-grid__editor-overlay {
+    grid-column: editorOverlay;
+    grid-row-start: editorSubnav;
+    grid-row-end: editorContent-end;
+    position: relative;
+    display: grid;
+    grid-template-rows: 1fr;
+    grid-template-columns: 1fr;
+    z-index: 100;
+}
+
+// ========== Main Editor Layout ========== //
+
+.sd-editor-content {
+    display: grid;
+    grid-template-columns: [editorMain] 1fr;
+    grid-template-rows: [editorToolbar] auto [editorMainContainer] 1fr;
+    position: relative;
+    height: 100%;
+}
+.sd-editor-content__toolbar {
+    grid-column: editorMain;
+    grid-row: editorToolbar;
+    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;
+//     display: flex;
+//     flex-direction: column;
+//     overflow-y: auto;
+//     p {
+//         font-size: 16px;
+//         line-height: 1.5;
+//         margin-bottom: 24px;
+//     }
+// }
+.sd-editor-content__main-container {
+    grid-column: editorMain;
+    grid-row: editorMainContainer;
+    display: grid;
+    display: grid;
+    grid-template-rows: [authoringHeader] auto [authoringBody] 1fr;
+    grid-template-columns: [bookmarkBar] auto [mainContent] 1fr;
+    flex-direction: column;
+    overflow-y: auto;
+    p {
+        font-size: 16px;
+        line-height: 1.5;
+        margin-bottom: 24px;
+    }
+}
+.sd-editor-content__authoring-header {
+
+    grid-column: 1 / 3;
+    grid-row: authoringHeader;
+
+
+
+    display: flex;
+    flex-direction: column;
+    background-color: var(--sd-colour-panel-bg--100);
+    position: relative;
+    margin: 0;
+    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;
+    transition: max-height 0.12s ease-in;
+    & > .authoring-header__holder {
+        height: auto;
+        opacity: 1;
+        overflow: visible;
+        transition: opacity 0.4s 0.1s;
+        margin: 0 auto;
+        width: 100%;
+        max-width: var(--width__container--xxx-large);
+    }
+    &.authoring-header--collapsed {
+        max-height: 0;
+        padding: 0 $sd-base-increment * 1.5;
+        .authoring-header__toggle {
+            i {
+                transform: rotate(180deg);
+            }
+        }
+        & > .authoring-header__holder {
+            height: 0px;
+            opacity: 0;
+            overflow: hidden;
+            transition: opacity 0.4s 0.1s;
+        }
+    }
+}
+.authoring-header__toggle {
+    position: absolute;
+    width: 37px;
+    height: 25px;
+    border: 0;
+    padding: 0 0 4px;
+    inset-inline-start: 50%;
+    margin-left: -18.5px;
+    margin-block-start: -18.5px;
+    bottom: -25px;
+    background-color: var(--sd-colour-panel-bg--100);
+    z-index: 3;
+    line-height: 0;
+    border-radius: 0 0 22px 22px;
+    box-shadow: 0 -2px 0 0 var(--sd-colour-panel-bg--100), 0 1px 3px 0 rgba(0, 0, 0, 0.3);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    transition: all ease-in 0.12s;
+    &:hover {
+        height: 32px;
+        bottom: -32px;
+        padding-top: 2px;
+        i {
+            opacity: 1;
+        }
+    }
+    i {
+        height: 15px;
+        transition: all 0.5s;
+        opacity: 0.75;
+    }
+}
+
+.sd-editor-content__authoring-body {
+
+    grid-column: mainContent;
+    grid-row: authoringBody;
+
+    background-color: var(--sd-colour-panel-bg--000);
+    padding: 3.2rem 4rem 5.2rem 4rem;
+}
+
+.sd-editor-content__authoring-bookmark-bar {
+    grid-column: bookmarkBar;
+    grid-row: authoringBody;
+    width: $sd-sidebarMenu-width;
+    background-color: var(--sd-colour-panel-bg--000);
+    display: grid;
+    grid-template-rows: 1fr;
+    grid-template-columns: 1fr;
+}
+
+.sd-editor-toolbar__content {
+    display: inline-flex;
+    gap: 8px;
+    dl {
+        display: flex;
+        gap: 4px;
+        font-size: 1.2rem;
+        &:not(:first-child) {
+            border-inline-start: 1px solid var(--sd-colour-line--light);
+            padding-inline-start: 8px;
+        }
+    }
+    dt {
+        font-weight: 500;
+    }
+    dd,
+    dd time {
+        font-weight: 400;
+        color: var(--color-text-light);
+    }
+}
+
+.sd-editor-grid__sidetabs-bar,
+.sd-editor-grid__sidebar-left {
+    position: relative;
+    ::-webkit-scrollbar {
+        width: 4px;
+        height: 4px;
+        margin: -1px 0;
+        position: absolute;
+        inset-block-end: 0;
+    }
+    ::-webkit-scrollbar:hover {
+        background-color: var(--sd-colour__webkit-scrollbar--hover);
+        background-color: transparent;
+        cursor: pointer;
+    }
+    
+    ::-webkit-scrollbar-thumb {
+        background: var(--sd-colour__webkit-scrollbar-thumb);
+    }
+    ::-webkit-scrollbar-thumb:hover {
+        background: var(--sd-colour__webkit-scrollbar-thumb--hover);
+        cursor: pointer;
+    }
+
+}

package/app/styles/layout/_general.scss

@@ -14,7 +14,7 @@
     float: right;
     margin: 0 0 0 5px;
     .navbtn {
-      border-left: 1px solid rgba(0,0,0,0.1) !important;
+      border-left: 1px solid var(--sd-colour-line--x-light) !important;
       border-right: 0 !important;
     }
     > .btn {
@@ -26,12 +26,11 @@
 
 a.text-link {
   text-decoration: none;
-  color: $sd-blueMedium;
+  color: var(--sd-colour-interactive--darken-10);
   transition: all 0.1s ease-in;
   display: inline-block;
   cursor: pointer;
   &:hover {
-    color: darken($sd-blueMedium, 10%);
     text-decoration: underline;
   }
   [class^="icon-"], [class*=" icon-"] {
@@ -57,7 +56,7 @@ a.text-link {
     margin: 0.4rem 0.4rem 0.4rem 0;
     font-size: 1.4rem;
     padding: 0 .6rem 0 0;
-    border-right: 1px dotted rgba(123, 123, 123, 0.75);
+    border-right: 1px dotted var(--sd-colour-line--medium);
     &:last-child {
       padding-right: 0;
       border-right: none;
@@ -68,7 +67,7 @@ a.text-link {
     padding: 0 .8rem 0 0;
     margin: 0.6rem 0.8rem 0.6rem 0;
     font-size: 1.4rem;
-    border-right: 1px dotted rgba(123, 123, 123, 0.75);
+    border-right: 1px dotted var(--sd-colour-line--medium);
     &:last-child {
       padding-right: 0;
       border-right: none;

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

@@ -28,7 +28,7 @@ $sd-contentNavBtn-transition: background-color 0.2s ease-out, color 0.1s ease-ou
     }
     &:active, &--active {
         background-color: $sd-contentNavBtn-bgActiveColor;
-        color: $sd-blue;
+        color: $sd-colour-interactive;
     }
 }
 .sd-content-nav-title {

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

@@ -1,17 +1,17 @@
 // LEFT NAVIGATION
 // ----
 
-$sd-leftNav-bgColor: $white;
-$sd-leftNav-borderColor: #dedede;
-$sd-leftNav-width: 20rem;
+$sd-leftNav-bgColor: var(--sd-colour-background__left-nav);
+$sd-leftNav-borderColor: var(--sd-colour-line--light);
+$sd-leftNav-width: 24rem;
 
-$sd-leftNavBtn-bgColor: rgba(94,169,200,0);
-$sd-leftNavBtn-bgHoverColor: rgba(94,169,200,0.2);
-$sd-leftNavBtn-bgActiveColor: rgba(94,169,200,0.1);
+$sd-leftNavBtn-bgColor: transparent;
+$sd-leftNavBtn-bgHoverColor: $sd-colour-background__menu-item--hover;
+$sd-leftNavBtn-bgActiveColor: var(--sd-colour-interactive--alpha-10);
 $sd-leftNavBtn-transition: background-color 0.2s ease-out, color 0.1s ease-out;
 
 $sd-leftNavBtn-border: 4px solid rgba(94,169,200,0);
-$sd-leftNavBtn-borderActive: 4px solid rgba(94,169,200,1);
+$sd-leftNavBtn-borderActive: 4px solid var(--sd-colour-interactive--active);
 
 .sd-left-nav {
     background: $sd-leftNav-bgColor;
@@ -25,32 +25,46 @@ $sd-leftNavBtn-borderActive: 4px solid rgba(94,169,200,1);
         top: 0;
         bottom: 0;
         left: 0;
-    }  
+    }
+    &--default {
+        background: $sd-leftNav-bgColor;
+        border-right: 1px solid $sd-leftNav-borderColor;
+    }
+    &--blanc {
+        border-color: transparent;
+        background: transparent;
+        .sd-left-nav__group-header {
+            border-top-color: transparent;
+        }
+    }   
 }
 
 .sd-left-nav__btn {
     width: 100%;
-    text-align: left;
+    text-align: start;
     display: block;
-    font-size: 1.3rem;
+    font-size: 1.4rem;
     line-height: 100%;
     text-decoration: none;
-    color: $grayDark;
     background-color: $sd-leftNavBtn-bgColor;
-    padding: 1.6rem 0 1.6rem 3rem;
-    border-right: $sd-leftNavBtn-border;
+    padding-block-start: 1.6rem;
+    padding-block-end: 1.6rem;
+    padding-inline: 3rem 0;
+    border-inline-end: $sd-leftNavBtn-border;
     transition: $sd-leftNavBtn-transition;
+    color: var(--color-text);
     &:hover {
         background-color: $sd-leftNavBtn-bgHoverColor;
-        color: $sd-text;
+        color: var(--color-text);
         text-decoration: none;
+        cursor: pointer;
     }
     &:active, &--active {
         background-color: $sd-leftNavBtn-bgActiveColor;
-        color: $sd-blue;
+        color: $sd-colour-interactive;
     }
    &--active {
-        border-right: $sd-leftNavBtn-borderActive;
+        border-inline-end: $sd-leftNavBtn-borderActive;
     }
 }
 
@@ -61,8 +75,10 @@ $sd-leftNavBtn-borderActive: 4px solid rgba(94,169,200,1);
     line-height: 100%;
     text-transform: uppercase;
     letter-spacing: 0.1em;
-    color: $grayText;
-    padding: 2.6rem 0 0.9rem 1.6rem;
+    color: var(--color-text-light);
+    padding-block-start: 2.6rem;
+    padding-block-end: 0.9rem;
+    padding-inline: 1.6rem 0;
     border-top: 1px solid $sd-leftNav-borderColor;
     margin-top: 1rem;
     &--first, &:first-child {

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

@@ -1,7 +1,7 @@
 
-$sd-sidebarMenu-background: var(--color-bg-150);
-$sd-sidebarMenu-secondLevel-background: #b7bec1;
-$sd-sideTabMenu-background: var(--color-bg-200);
+$sd-sidebarMenu-background: var(--sd-colour-sidebar-menu--00);
+$sd-sidebarMenu-secondLevel-background: var(--sd-colour-sidebar-menu--10);
+$sd-sideTabMenu-background: var(--sd-colour-sidebar-menu--20);
 
 .sd-sidebar-menu {
   position: absolute;
@@ -30,14 +30,14 @@ $sd-sideTabMenu-background: var(--color-bg-200);
 .sd-sidebar-menu__spacer {
   width: $sd-sidebarMenu-width / 2;
   margin: 1.8rem auto;
-  border-top: 1px dotted #9b9b9b;
+  border-top: 1px dotted var(--sd-colour-line--medium);
   border-bottom: 0;
 }
 
 .sd-sidebar-menu__btn {
   display: block;
   margin: 0.6rem auto;
-  border-radius: 50%;
+  border-radius: $border-radius__base--full;
   height:3.6rem;
   width: 3.6rem;
   opacity: .7;
@@ -47,14 +47,14 @@ $sd-sideTabMenu-background: var(--color-bg-200);
   cursor: pointer;
   &:hover {
     opacity: 1;
-    background-color: rgba(255, 255, 255, .6);
+    background-color: var(--sd-colour-sidebar-menu--10);
   }
   &:active {
-    background-color: $sd-blue;
+    background-color: var(--sd-colour-interactive--active);
     opacity: 1;
   }
   &--active, &--active:hover {
-    background-color: darken($sd-blue, 11%);
+    background-color: var(--sd-colour-interactive--active);
     opacity: 1;
 
     .sd-sidebar-menu__main-icon {
@@ -123,6 +123,7 @@ $sd-sideTabMenu-background: var(--color-bg-200);
   background-color: $sd-sideTabMenu-background;
   z-index: 16;
   transition: all .3s ease;
+  overflow-y: auto;
   &--right {
     right: 0;
     box-shadow: inset 4px 0 5px -3px rgba(0, 0, 0, 0.25);
@@ -141,20 +142,27 @@ $sd-sideTabMenu-background: var(--color-bg-200);
   text-align: center;
   padding: 0;
   margin:0;
-  box-shadow: 0 1px 0 rgba(0,0,0,0.12);
+  box-shadow: 0 1px 0 var(--sd-colour-line--x-light);
   border-width: 0 0 1px 0;
   background: none;
   &:hover {
-    background: rgba(255,255,255,0.15);
+    background: hsla(0, 0%, 0%, 0.1);
     cursor: pointer;
   }
 }
 
 .sd-sidetab-menu__helper-icon,
 .sd-sidetab-menu__main-icon {
+  color: $sd-text-light;
   position: absolute;
   top: 10px;
   left: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  i {
+    color: $sd-text-light;
+  }
 }
 .sd-sidetab-menu__helper-icon {
   opacity: 0;
@@ -166,8 +174,18 @@ $sd-sideTabMenu-background: var(--color-bg-200);
   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,
+.sd-sidetab-menu__main-icon i {
   opacity: 1;
   transition: all 0.2s, transform 0.2s;
 }
@@ -183,8 +201,7 @@ $sd-sideTabMenu-background: var(--color-bg-200);
 
 .active {
   .sd-sidetab-menu__btn {
-    background: rgba(255,255,255,0.2);
-    border-color: rgba(0,0,0,0.18);
+    background: hsla(0, 0%, 0%, 0.2);
   }
   .sd-sidetab-menu__btn:hover {
     .sd-sidetab-menu__helper-icon {
@@ -198,28 +215,43 @@ $sd-sideTabMenu-background: var(--color-bg-200);
       width:0.8rem;
       left: 2.0rem;
       font-size: 8px;
+      i {
+        opacity: 0;
+        height:0.8rem;
+        width:0.8rem;
+        left: 2.0rem;
+        font-size: 8px;
+      }
     }
   }
 }
 
 .sd-sidetab-menu__btn--active {
-  background: rgba(255,255,255,0.2);
-  border-color: rgba(0,0,0,0.18);
-  .sd-sidetab-menu__main-icon {
-    color: darken($sd-blue, 16%) !important;
+  background: hsla(0, 0%, 100%, 0.24);
+  .sd-sidetab-menu__main-icon,
+  .sd-sidetab-menu__main-icon i {
+    color: var(--sd-colour-interactive--active) !important;
   }
   &:hover {
-    .sd-sidetab-menu__helper-icon {
+    .sd-sidetab-menu__helper-icon,
+    .sd-sidetab-menu__helper-icon i {
       opacity: 1;
       transform: rotate(180deg);
       transition: all 0.3s 0.2s, transform 0.2s 0.2s;
     }
     .sd-sidetab-menu__main-icon {
       opacity: 0;
-      height:0.8rem;
-      width:0.8rem;
-      left: 2.0rem;
+      //height:0.8rem;
+      //width:0.8rem;
+      //left: 2.0rem;
       font-size: 8px;
+      i {
+        opacity: 0;
+        height:0.8rem !important;
+        width:0.8rem !important;
+        font-size: 8px !important;
+        //left: 2.0rem
+      }
     }
   }
 }
@@ -230,7 +262,7 @@ $sd-sideTabMenu-background: var(--color-bg-200);
 .sd-side-menu__btn {
   display: block;
   margin: 0.6rem auto;
-  border-radius: 50%;
+  border-radius: $border-radius__base--full;
   height:3.6rem;
   width: 3.6rem;
   opacity: .7;
@@ -239,14 +271,14 @@ $sd-sideTabMenu-background: var(--color-bg-200);
   position: relative;
   &:hover {
     opacity: 1;
-    background-color: rgba(255, 255, 255, .6);
+    background-color: var(--sd-colour__side-menu--hover);
   }
   &:active {
-    background-color: $sd-blue;
+    background-color: $sd-colour-interactive;
     opacity: 1;
   }
   &--active, &--active:hover {
-    background-color: darken($sd-blue, 11%);
+    background-color: var(--sd-colour-interactive--active);
     opacity: 1;
   }
 }
@@ -323,3 +355,63 @@ $sd-sideTabMenu-background: var(--color-bg-200);
   }
 }
 
+.sd-quickbar-menu {
+  width: $sd-sidebarMenu-width;
+  background-color: var(--sd-colour-panel-bg--050);
+  z-index: 1;
+  overflow-y: auto;
+  position: relative;
+  ul {
+    margin-top: 24px;
+  }
+  &__list-item--active {
+    .sd-quickbar__btn, .sd-quickbar__btn:hover  {
+          background-color: var(--sd-colour-interactive--alpha-10);
+          border-inline-end-color: var(--sd-colour-interactive);
+    }
+}
+}
+.sd-quickbar__btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  width: $sd-sidebarMenu-width;
+  height: $sd-sidebarMenu-width;
+  text-align: center;
+  padding: 0;
+  margin:0;
+  border: 2px solid transparent;
+  border-width: 0 2px;
+  transition: all .3s ease;
+  i {
+    color: var(--color-text-light);
+    opacity: 0.75;
+  }
+  &:hover {
+    background-color: var(--sd-colour-panel-bg--200);
+    cursor: pointer;
+    i {
+      opacity: 1;
+    }
+  }
+  &--active {
+    background-color: var(--sd-colour-interactive--alpha-10);
+    border-inline-end-color: var(--sd-colour-interactive);
+    i {
+      opacity: 1;
+      color: var(--sd-colour-interactive);
+    }
+  }
+}
+.sd-quickbar-menu {
+  &--right {
+    .sd-quickbar__btn--active {
+      border-inline-end-color: transparent;
+      border-inline-start-color: var(--sd-colour-interactive);
+    }
+
+  }
+}
+
+