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

package/app/styles/_tooltips.scss

@@ -32,7 +32,7 @@
     overflow: hidden;
     text-overflow: ellipsis;
     padding: 0.8rem 1.2rem 0.9rem;
-    border-radius: $border-radius__base--small;
+    border-radius: var(--b-radius--small);
     box-shadow: 0 8px 18px -5px rgba(0, 0, 0, 0.45);
     background: var(--sd-colour-background__tooltip);
     color: hsl(0, 0%, 100%);
@@ -258,7 +258,7 @@
 
 .p-tooltip {
   position:absolute;
-  z-index: 1000;
+  z-index: 2000 !important;
   min-width: 3em;
   max-width: 21em;
 }
@@ -281,7 +281,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   padding: 0.8rem 1.2rem 0.9rem;
-  border-radius: $border-radius__base--small;
+  border-radius: var(--b-radius--small);
   background: var(--sd-colour-background__tooltip);
   box-shadow: 0 8px 18px -5px rgba(0, 0, 0, 0.45);
   color: hsl(0, 0%, 100%);

package/app/styles/_variables.scss

@@ -1,4 +1,3 @@
-@import 'variables/design-tokens-general';
 @import 'variables/dimensions';
 @import 'variables/typography';
 @import 'variables/colors';

package/app/styles/app.scss

@@ -1,5 +1,5 @@
 //@import 'normalize';
-@import 'variables/new-colors';
+@import 'design-tokens';
 @import 'variables';
 @import 'reboot';
 @import 'animations';
@@ -32,6 +32,9 @@
 @import 'thumb-carousel';
 @import 'content-divider';
 @import 'loaders';
+@import 'spinner';
+@import 'table-list';
+@import 'hamburger';
 
 // Interface elements
 @import 'interface-elements/side-panel';
@@ -45,6 +48,8 @@
 // Layout
 @import 'layout/general';
 @import 'layout/basic-layout';
+@import 'layout/editor';
+@import 'layout/container';
 
 // Components
 @import 'components/list-item';
@@ -61,6 +66,10 @@
 @import 'components/sd-circular-progress';
 @import 'components/sd-toaster';
 @import 'components/subnav';
+@import 'components/theme-selector';
+@import 'components/sd-dropzone';
+@import 'components/sd-notification-panel';
+@import 'components/sd-pagination';
 
 // Dropdowns
 @import 'dropdowns/basic-dropdown';
@@ -76,15 +85,19 @@
 @import 'form-elements/checkbox';
 @import 'form-elements/radio';
 @import 'form-elements/autocomplete';
+@import 'form-elements/select-grid';
+@import 'form-elements/input-wrap';
 
 // Menus
 @import 'menus/sd-sidebar-menu';
 @import 'menus/sd-top-menu';
 @import 'menus/sd-left-navigation';
 @import 'menus/sd-content-navigation';
+@import 'menus/sd-bottom-tabs';
 
 // Editor
-@import 'editor-themes';
+@import 'editor/editor-themes';
+@import 'editor/editor-buttons';
 
 // Publisher specific
 @import 'publisher-styles';
@@ -95,6 +108,7 @@
 @import 'pr-superdesk-theme';
 @import 'primereact/pr-dialog';
 @import 'primereact/pr-menu';
+@import 'primereact/pr-skeleton';
 
 // React Components
 @import 'avatar';

package/app/styles/components/_card-item.scss

@@ -2,17 +2,16 @@
 // ---------------------------------------------
 
 //color variables
-$card-item-header-bg-normal: #607d8b;
-$card-item-header-bg-inactive: #b1b1b1;
+$card-item-header-bg-normal: hsl(200, 18%, 46%);
+$card-item-header-bg-inactive: hsl(0, 0%, 69%);
 $card-item-header-bg-active: $sd-blueMedium;
-$card-item-header-bg-light: #bfbfbf;
+$card-item-header-bg-light: var(--sd-colour-panel-bg--300);
 $card-item-header-bg-gradient-1: linear-gradient(180deg, rgba(96,184,194,1) 2%, rgba(30,176,108,1) 90%);
 $card-item-header-bg-secondary: $subnav-background-blue-grey-darker;
 $card-item-top-border-height: 0.4rem;
 $card-item-rounded-radius: $border-radius__base--large;
 $card-item-default-radius: $border-radius__base--medium;
 
-
 //shadows
 $card-item-shadow: 0 1px 4px rgba(0,0,0,.1), 0 1px 5px rgba(0,0,0,.16);
 $card-item-shadow-hover: 0 1px 6px rgba(0,0,0,.16), 0 2px 12px rgba(0,0,0,.36);
@@ -105,22 +104,36 @@ $card-item-shadow-hover-light: 0 1px 6px rgba(0,0,0,.1), 0 2px 12px rgba(31, 17,
         &--empty {
             height:8px;
         }
+        &--light,
+        &--white  {
+            
+            background-color: var(--sd-item__main-Bg);
+            color: $sd-text;
+            box-shadow: 0 1px 0 var(--sd-colour-line--light);
+            &::before {
+                background-color: hsla(214, 13%, 50%, 0.5);
+            }
+        }
         &--light {
             background-color: $card-item-header-bg-light;
-        }
-        &--white {
-            background-color: $white;
-            color: $sd-text;
-            box-shadow: 0 1px 0 rgba(136, 136, 136, 0.25);
+            .sd-card__thumbnail {
+                background-color: var(--sd-item__thumb-Bg--light);
+            }
         }
         &--gradient-1 {
             background: $card-item-header-bg-gradient-1;
+            .sd-card__thumbnail {
+                background-color: transparent;
+            }
         }
         &--blank {
             background-color: transparent;
             &::before {
                 background-color: transparent;
             }
+            .sd-card__thumbnail {
+                background-color: transparent;
+            }
         }
         &--with-thumb {
             position: relative;
@@ -210,16 +223,17 @@ $card-item-shadow-hover-light: 0 1px 6px rgba(0,0,0,.1), 0 2px 12px rgba(31, 17,
         }
     }
     .sd-card__thumbnail {
-        padding-top: 0.4rem;
+        margin-top: 0.4rem;
         line-height: 0;
+        background-color: var(--sd-item__thumb-Bg);
         & + .sd-card__heading {
-            background-color: $white;
+            background-color: var(--sd-item__main-Bg);
             font-weight: 500;
             text-align: center;
             color: $sd-text;
             padding: 1rem 1.6rem;
             width: 100%;
-            box-shadow: 0 1px 0 rgba(136, 136, 136, 0.25);
+            box-shadow: 0 1px 0 var(--sd-colour-line--light);
         }
     }
     .sd-card__content {
@@ -250,7 +264,7 @@ $card-item-shadow-hover-light: 0 1px 6px rgba(0,0,0,.1), 0 2px 12px rgba(31, 17,
             .value-label {
                 float: right;
                 font-size: 13px;
-                color: #333;
+                color: var(--color-text);
                 font-weight: 400;
                 text-transform: none;
                 letter-spacing: 0em;
@@ -299,7 +313,7 @@ $card-item-shadow-hover-light: 0 1px 6px rgba(0,0,0,.1), 0 2px 12px rgba(31, 17,
 
         li, .sd-card__content-list-item {
             padding: 16px;
-            border-bottom: 1px solid #ebebeb;
+            border-bottom: 1px solid var(--sd-colour-line--light);
             &--inline {
                 display: flex;
                 h4 { flex: 1 1; }
@@ -316,7 +330,7 @@ $card-item-shadow-hover-light: 0 1px 6px rgba(0,0,0,.1), 0 2px 12px rgba(31, 17,
             }
             &--border-bottom {
                 &:last-child {
-                    border-bottom: 1px solid #ebebeb;
+                    border-bottom: 1px solid var(--sd-colour-line--light);
                 }
             }
             &--small {
@@ -332,7 +346,7 @@ $card-item-shadow-hover-light: 0 1px 6px rgba(0,0,0,.1), 0 2px 12px rgba(31, 17,
         .creation-time {
             display: block;
             font-size: 12px;
-            color: #999;
+            color: var(--color-text-light);
             i {
                 display: inline-block;
                 opacity: 0.5;
@@ -391,12 +405,10 @@ $card-item-shadow-hover-light: 0 1px 6px rgba(0,0,0,.1), 0 2px 12px rgba(31, 17,
         align-items: center;
         @include sd-padding('1-5', 'x');
         min-height: $sd-base-increment * 6;
-        background-color: $sd-background;
+        background-color: var(--sd-item__main-Bg);
         border-radius: 0 0 $card-item-default-radius $card-item-default-radius;
-        box-shadow: 0 -1px 0 0 rgba(0,0,0,.1);
-        &--light {
-            background-color: $white;
-        }
+        box-shadow: 0 -1px 0 0 var(--sd-colour-line--light);
+        gap: $sd-base-increment;
         &--right-align {
             justify-content: flex-end;
         }

package/app/styles/components/_list-item.scss

@@ -16,6 +16,7 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
     flex-direction: row;
     background-color: $sd-ListItem-background;
     transition: background-color 0.2s linear;
+    flex-shrink: 0;
     &:hover {
         background-color: $sd-ListItem-background-hover;
         cursor: pointer;
@@ -57,6 +58,17 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
         }
     }
     &.actioning {
+        &:hover {
+            //pointer-events: none;
+            //cursor: default !important;
+            cursor: progress;
+            .sd-list-item__action-menu {
+                padding: 0;
+                width: 0;
+                overflow: hidden;
+                opacity: 0;
+            }
+        }
         &::before {
             content: '';
             position: absolute;
@@ -69,7 +81,8 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
             background-repeat: no-repeat;
             background-position: center center;
             background-size: 45px;
-            background-color: rgba(255, 255, 255, 0.65);
+            background-color: var(--sd-colour-overlay-actioning);
+            border-radius: var(--b-radius--small);
         }
     }
     &.locked {
@@ -144,7 +157,7 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
     flex-direction: column;
     justify-content: center;
     border-right: 1px solid $sd-ListItem-column-border;
-    padding: 0 0.8rem;
+    padding: 0 $sd-base-increment * 1.5;
     overflow: hidden;
     flex-shrink: 0;
     &:last-child, &:last-of-type, &:only-child {
@@ -219,6 +232,7 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
     justify-content: flex-start;
     align-items: center;
     overflow: hidden;
+    gap: var(--gap--small);
     &:first-child {
         margin: 0.8rem 0 0.2rem;
     }
@@ -291,12 +305,6 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
     flex-grow: 1;
 }
 
-//  Overrides for inner elements
-.sd-list-item {
-    .label {
-        margin-right: 0.6rem;
-    }
-}
 
 .sd-list-item {
     .badge {
@@ -307,14 +315,15 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
 .sd-list-item {
     [class^="icon-"],
     [class*=" icon-"] {
-        opacity: 0.6;
+        opacity: 0.75;
         vertical-align: middle;
+        color: var(--color-icon-default);
     }
     time {
         [class^="icon-"],
         [class*=" icon-"] {
             vertical-align: top;
-            margin-right: 0.2rem;
+            margin-inline-end: 0.2rem;
         }  
     }
 }
@@ -322,58 +331,68 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
 // Text specific styles
 .sd-list-item {
     time {
-        color: $grayText;
+        color: var(--color-text-light);
         font-size: 1.2rem;
         letter-spacing: 0.025em;
         flex-shrink: 0;
-        padding-left: 1em;
     }
     .sd-list-item__slugline {
         color: $sd-slugline;
         font-weight: 500;
         font-size: 1.2rem;
         text-transform: uppercase;
-        margin-right: 1rem;
+        flex-shrink: 0;
     }
     .sd-list-item__headline {
         color: $sd-text;
         font-weight: 500;
         font-size: 1.3rem;
-        margin-right: 1rem;
     }
     .sd-list-item__normal {
         color: $sd-text;
         font-weight: 300;
-        margin-right: 1rem;
     }
     .sd-list-item__strong {
         color: $sd-text;
         font-weight: 500;
-        margin-right: 1rem;
     }
     .sd-list-item__text-label {
-        color: $sd-text;
-        opacity: 0.7;
-        font-weight: 300;
+        color: var(--color-text-light);
+        font-weight: 400;
         font-style: italic;
-        margin-right: 0.3rem;
         &--normal {
             font-style: normal;
         }
     }
+    .sd-list-item__compound-text {
+        display: flex;
+        flex-direction: row;
+        gap: var(--gap--x-small);
+    }
     .sd-list-item__inline-icon,
     .sd-list-item__inline-text {
-        margin-right: 0.6rem;
+        margin-inline-end: 0.6rem;
+    }
+
+    .sd-list-item__icon-group {
+        display: flex;
+        align-items: flex-start;
+        gap: var(--gap--small);
+        min-height: 2rem;
+        margin-inline-end: 4px;
+        .sd-list-item__inline-icon {
+            margin: 0;
+        }
     }
     .sd-list-item__text-strong {
         font-weight: 500;
         color: $sd-text;
     }
     .sd-list-item__element-rm-10 {
-        margin-right: 1rem;
+        margin-inline-end: 1rem;
     }
     .sd-list-item__element-lm-10 {
-        margin-left: 1rem;
+        margin-inline-start: 1rem;
     }
     .sd-list-item__location {
         padding-left: 1.6rem;
@@ -405,7 +424,7 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
     width: 3rem;
     background-color: $avatarBG;
     border-radius: $border-radius__base--full;
-    margin-right: 0.6rem;
+    margin-inline-end: 0.6rem;
     color: $white;
     text-align: center;
     text-transform: uppercase;
@@ -434,8 +453,8 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
         border: 1px dashed rgba(123, 123, 123, 0.6);
     }
     &--on-right {
-        margin-right: 0;
-        margin-left: 0.6rem;
+        margin-inline-end: 0;
+        margin-inline-start: 0.6rem;
     }
 }
 
@@ -470,15 +489,14 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
 .sd-list-item-nested {
     display: flex;
     flex-direction: column;
-    margin-top: .8rem;
+    //margin-top: .8rem;
 }
 .sd-list-item-nested__childs {
     position: relative;
     z-index: 0;
     display: flex;
     flex-direction: column;
-    margin-left: 1rem;
-    margin-bottom: 0.8rem;
+    margin-inline-start: 1rem;
     .sd-list-item {
         margin-top: 0;
         border-top: 1px solid var(--sd-colour-line--x-light);
@@ -508,21 +526,31 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
 
 // sd list item GROUP
 .sd-list-item-group {
+    display: flex;
+    flex-direction: column;
     .sd-list-item {
         + .sd-list-item {
             border-top: 1px solid var(--sd-colour-line--x-light);
         }
     }
+    .sd-list-item-nested {
+        + .sd-list-item {
+            border-top: 1px solid var(--sd-colour-line--x-light);
+        }
+    }
     &--space-between-items {
+        gap: var(--gap--small);
         .sd-list-item {
+            border-radius: var(--b-radius--small);
             + .sd-list-item {
-                margin-top: .8rem;
                 border-top: none;
             }
+            .sd-list-item__border {
+                border-radius: var(--b-radius--small) 0 0 var(--b-radius--small);
+            }
         }
         .sd-list-item-nested {
             + .sd-list-item {
-                margin-top: .8rem;
                 border-top: none;
             }
         }
@@ -540,15 +568,15 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
 
 .sd-list-header {
     display: flex;
-    height: 2rem;
-    margin-bottom: 0.8rem;
+    height: 2.4rem;
+    margin-bottom: $sd-base-increment;
     align-items: center;
     .sd-list-header__name {
         font-size: 1.1rem;
         letter-spacing: .08em;
         font-weight: 500;
         text-transform: uppercase;
-        color: $gray;
+        color: var(--color-text-light);
         a {
             color: $sd-colour-interactive;
             text-decoration: none;
@@ -561,7 +589,7 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
         }  
     }
     .sd-list-header__number {
-        margin-left: 1rem;
+        margin-inline-start: 1rem;
     }
     .sd-list-header__stretch-bar {
         flex-grow: 1;

package/app/styles/components/_sd-collapse-box.scss

@@ -3,9 +3,10 @@
 .sd-collapse-box {
     display: flex;
     flex-direction: column;
-    border-radius: $border-radius__base--x-small;
+    border-radius: $border-radius__base--small;
     position: relative;
     margin-bottom: 1rem;
+    border: 1px solid var(--sd-colour--shadow-line--m);
     .sd-collapse-box__header {
         display: block;
         flex-grow: 0;
@@ -18,7 +19,7 @@
         right: 1rem;
         top: 0.8rem;
         z-index: 2;
-        color: $gray;
+        color: var(--color-icon-default);
         &--flex {
             position: relative;
             right: 0;
@@ -29,17 +30,17 @@
         }
         .sd-collapse-box__collapse-btn {
             flex-grow: 1;
-            color: $gray;
+            color: var(--color-icon-default);
             &:hover {
                 .icn-btn {
-                    background-color: rgba(155, 155, 155, 0.25);
+                    background-color: hsla(214, 13%, 60%, 0.25);
                     color: $white;
                     opacity: 1;
                 }
             }
             &:active {
                 .icn-btn {
-                    background-color: rgba(155, 155, 155, 0.35);
+                    background-color: hsla(214, 13%, 70%, 0.25);
                     color: $sd-colour-interactive;
                     opacity: 1;
                 }
@@ -70,7 +71,6 @@
         margin: 0 -2rem 3rem -2rem;
         &--top {
             margin-top: 2.2rem;
-            background-color: rgba(0,0,0,0.04);
         }
     }
 

package/app/styles/components/_sd-comment-box.scss

@@ -1,11 +1,11 @@
 .comment-box__reply-item {
-    border-bottom: 1px solid rgba(123,123,123,0.2);
+    border-bottom: 1px solid var(--sd-colour-line--light);
 }
 
 .comment-box__input {
     padding: 0.4rem;
-    border-radius: $border-radius__base--x-small;
-    border: 1px solid rgba(123,123,123,0.4);
+    border-radius: $border-radius__base--small;
+    border: 1px solid var(--sd-colour-line--light);
     height: 2.8rem;
     resize: none;
 }
@@ -13,7 +13,10 @@
     display: none;
     padding-top: 1rem;
     &--active {
-        display: block;
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        gap: var(--gap--small);
     }
 }
 .comment-box__button-toolbar {
@@ -22,6 +25,7 @@
     flex-direction: row;
     align-items: center;
     justify-content: flex-start;
+    gap: var(--gap--small);
     &--right {
         justify-content: flex-end;
     }

package/app/styles/components/_sd-dropzone.scss

@@ -0,0 +1,114 @@
+$iconSize-large: 3.6rem;
+$iconSize-small: 2.4rem;
+
+.sd-dropzone__drop-target {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--b-radius--medium);
+    min-height: $sd-base-increment * 9;
+    width: 100%;
+    padding: $sd-base-increment * 3;
+    gap: $sd-base-increment * 1;
+    transition: all 0.2s ease;
+    background-color: var(--sd-colour-bg-translucent--10);
+    &--height-l {
+        min-height: var(--width__container--xx-small);
+    }
+    &.sd-dropzone__drop-target--ondragover {
+        background-color: var(--sd-colour-interactive--alpha-10);
+        .sd-dropzone__target-border {
+            inset: 4px;
+            border-color: var(--sd-colour-interactive);
+        }
+        .sd-dropzone__icon {
+            opacity: 1;
+            color: var(--sd-colour-interactive);
+        }
+    }
+    &:hover {
+        background-color: var(--sd-colour-interactive--alpha-10);
+        cursor: pointer;
+        .sd-dropzone__target-border {
+            border-color: var(--sd-colour-interactive--alpha-30);
+        }
+    }
+    &:active {
+        background-color: var(--sd-colour-interactive--alpha-20);
+        .sd-dropzone__target-border {
+            border-color: var(--sd-colour-interactive);
+        }
+    }
+}
+
+.sd-dropzone__target-border {
+    position: absolute;
+    inset: 2px;
+    border: 2px dashed var(--sd-colour-line--medium);
+    border-radius: var(--b-radius--medium);
+    transition: all 0.3s ease;
+    z-index: 0;
+}
+.sd-dropzone__icon {
+    width: 5.6rem;
+    height: 5.6rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: hsla(0, 0%, 100%, 0.5);
+    border-radius: var(--b-radius--full);
+    [class^="big-icon--"],
+    [class*=" big-icon--"] {
+        margin-top: -4px;
+        width: $iconSize-large;
+        height: $iconSize-large;
+        font-size: $iconSize-large;
+        line-height: $iconSize-large;
+        opacity: 0.5;
+    }
+    &--small {
+        width: 4rem;
+        height: 4rem;
+        [class^="big-icon--"],
+        [class*=" big-icon--"] {
+            width: $iconSize-small;
+            height: $iconSize-small;
+            font-size: $iconSize-small;
+            line-height: $iconSize-small;
+            opacity: 0.5;
+        }
+    }
+}
+.sd-dropzone__action {
+    margin: 0 auto;
+}
+.sd-dropzone__heading {
+    text-align: center;
+    max-width: 400px;
+    margin: 0 auto;
+    font-size: 1.8rem;
+    font-weight: 700;
+    font-family: $baseFontFamilySerif;
+    color: var(--color-text-light);
+}
+.sd-dropzone__description {
+    opacity: 0.7;
+    text-align: center;
+    max-width: 320px;
+    margin: 0 auto;
+    font-size: 1.4rem;
+    position: relative;
+    z-index: 0;
+    pointer-events: none;
+}
+.sd-dropzone__input {
+    opacity: 0;
+    position: absolute;
+    inset: 2px;
+    z-index: 1;
+    &:hover {
+        cursor: pointer;
+    }
+}