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

package/app/styles/_icon-labels.scss

@@ -2,7 +2,7 @@
 
 /// Default background color for icon labels.
 $label-icon-background: transparent !default;
-$label-icon-background-translucent: rgba(123,123,123,0.16);
+$label-icon-background-translucent: hsla(0, 0%, 48%, 0.16);
 
 /// Default text color for icon labels.
 $label-icon-color: var(--color-label-text);
@@ -16,6 +16,12 @@ $label-icon-palette: $sd-basic-palette;
 /// Default padding inside labels.
 $label-icon-padding: 0.6rem !default;
 
+$label-height--default: 2.4rem;
+$label-height--large: 3.2rem;
+$label-height--small: 1.6rem;
+$icon-size--large: 2rem;
+$icon-size--small: 1.2rem;
+
 /// Generates base styles for a icon label.
 @mixin label-icon {
     display: inline-flex;
@@ -23,17 +29,31 @@ $label-icon-padding: 0.6rem !default;
     padding-inline-end: $label-icon-padding;
     vertical-align: middle;
     align-items: center;
+    justify-content: center;
     line-height: 1;
     font-size: 13px;
     white-space: nowrap;
     cursor: default;
+    line-height: 1;
+    [class^="icon-"], & [class*=" icon-"] {
+        color: $label-icon-color;
+        margin-inline-end: .4rem;
+        opacity: 1 !important;
+    }
+    
 }
 
 @mixin label-icon-translucent {
     font-size: 12px;
-    height: 24px;
+    height: $label-height--default;
     border-radius: $border-radius__base--full;
-    padding-inline: 0.8rem 1.2rem;
+    padding-inline: 1.2rem;
+    gap: 4px;
+    [class^="icon-"], & [class*=" icon-"] {
+        margin-inline-end: .2rem;
+        margin-inline-start: -4px;
+        line-height: 1;
+    }
 }
 
 
@@ -42,12 +62,6 @@ $label-icon-padding: 0.6rem !default;
 
     background: $label-icon-background;
     color: $label-icon-color;
-    
-    [class^="icon-"], & [class*=" icon-"] {
-        color: $label-icon-color;
-        margin-inline-end: .4rem;
-        opacity: 1 !important;
-    }
 
     @each $name, $color in $label-icon-palette {
         &.label-icon--#{$name} {
@@ -65,6 +79,48 @@ $label-icon-padding: 0.6rem !default;
                 background-color: scale-color($color, $alpha: -88%);
             }
         }
+        &.label-icon--large {
+            [class^="icon-"], & [class*=" icon-"] {
+                margin-inline-start: -4px;
+                height: $icon-size--large;
+                width: $icon-size--large;
+                font-size: $icon-size--large;
+                line-height: 1;
+            }
+        }
+        &.label-icon--small {
+            [class^="icon-"], & [class*=" icon-"] {
+                margin-inline-start: -3px;
+                height: $icon-size--small;
+                width: $icon-size--small;
+                font-size: $icon-size--small;
+                line-height: 1;
+            }
+        }
+    }
+    &.label-icon--large {
+        height: $sd-base-increment * 4;
+        padding: 0 $sd-base-increment * 2;
+        font-size: 1.4rem;
+        font-weight: 500;
+        line-height: inherit;
+    }
+    &.label-icon--small{
+        height: $sd-base-increment * 2;
+        padding: 0 $sd-base-increment * 1;
+        font-size: 1rem;
+        font-weight: 600;
+        line-height: inherit;
+        letter-spacing: 0.06em;
+        gap: 2px;
+        .label-icon--inner-label {
+            font-weight: 400;
+            letter-spacing: 0.06em;
+        }
+    }
+    .label-icon--inner-label {
+        font-weight: 300;
+        text-transform: uppercase;
+        line-height: inherit;
     }
-
 }

package/app/styles/_table-list.scss

@@ -0,0 +1,244 @@
+// Boxed lists
+// Simpler version of the list item.
+// ---------------------------------------------
+.table-list {
+    display: flex;
+    flex-direction: column;
+    align-self: stretch;
+    //gap: $sd-base-increment * 1.5;
+    &--comfortable {
+        gap: $sd-base-increment * 2;
+    }
+    &--contained {
+        gap: 0;
+    }
+}
+
+$table-list-palette: $sd-basic-palette;
+
+.table-list__item {
+    display: grid;
+    z-index: 1;
+    align-items: center;
+    grid-template-columns: [contentCol] 1fr [actionsVisible] auto [actionsHidden] auto;
+    position: relative;
+    flex-direction: row;
+    padding: 8px;
+    min-height: 4.2rem;
+    border-radius: var(--b-radius--medium);
+    background-color: var(--sd-item__main-Bg);
+    border: 1px solid var(--sd-colour-line--light);
+    transition: all 0.2s ease-in-out;
+    inset-inline-start: 0;
+    &::before {
+        content: "";
+        width: 6px;
+        position: absolute;
+        inset-block: 3px;
+        inset-inline-start: 3px;
+        background-color: var(--sd-colour-panel-bg--100);
+        z-index: 1;
+        border-radius: 2px;
+    }
+
+    &--margin {
+        margin-bottom: $sd-base-increment;
+    }
+
+    &--selected {
+        box-shadow: var(--sd-shadow__item--selected-thin);
+    }
+    &--clickable {
+        &:hover {
+            cursor: pointer;
+            border: 1px solid var(--sd-colour-line--strong);
+            box-shadow: 0 1px 4px 0 hsla(0, 0%, 0%, 0.1);
+        }
+        &:active {
+            border-color: var(--sd-colour-interactive);
+        }
+    }
+    &--draggable {
+        &::after {
+            content: "";
+            width: 20px;
+            position: absolute;
+            inset-block: -1px;
+            inset-inline-start: 0px;
+            background-image: url(../img/dots.svg);
+            background-repeat: no-repeat;
+            background-position: center center;
+            z-index: 2;
+            border-radius: var(--b-radius--small);
+            opacity: 0;
+        }
+        &:hover {
+            border-left-width: 16px;
+            &::after {
+                inset-inline-start: -18px;
+                opacity: 0.65;
+                cursor: grab;
+            }
+        }
+        &:active {
+            border-color: var(--sd-colour-interactive);
+            cursor: grabbing;
+            &::after {
+                opacity: 1 !important;
+                cursor: grabbing;
+            }
+        }
+    }
+    &.table-list__item--selected.table-list__item--clickable {
+        &:hover {
+            box-shadow: var(--sd-shadow__item--selected-thin);
+        }
+    }
+    &:hover {
+        .table-list__slide-in-actions,
+        .table-list__actions--slide-in {
+            padding-left: 0.6rem;
+            width: auto;
+            max-width: 56px;
+            overflow: visible;
+            opacity: 1;
+            transition: all ease-in 0.1s;
+            .icn-btn {
+                opacity: 0.4;
+                &:hover {
+                    opacity: 1;
+                }
+            }
+        }
+    }
+    &--disabled {
+        pointer-events: none;
+        opacity: 0.5;
+    }
+}
+
+.table-list__item-content {
+    grid-column: contentCol;
+    grid-row: mainRow;
+    display: grid;
+    grid-template-columns: [columnLeft] 180px [columncenter] 1fr [columnRight] auto;
+    padding: 0 0.2rem 0 0.8rem;
+    overflow: hidden;
+    position: relative;
+    align-items: center;
+    gap:8px;
+}
+.table-list__item-content-block {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    &--center {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+        font-size: 14px;
+        font-weight: 500;
+        span {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            max-width: 100%;
+        }
+    }
+}
+
+
+.table-list__slide-in-actions,
+.table-list__static-actions,
+.table-list__actions--slide-in,
+.table-list__actions--static {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    flex-grow: 0;
+    gap: 2px;
+}
+
+.table-list__slide-in-actions,
+.table-list__actions--slide-in {
+    grid-column: actionsHidden;
+    grid-row: mainRow;
+    width: 0;
+    max-width: 0;
+    overflow: hidden;
+    opacity: 0;
+    transition: all ease-in-out 0.2s;
+    .icn-btn {
+        flex: 0 0 auto;
+        opacity: 0;
+        transition: all ease-in-out 0.2s;
+    }
+}
+
+.table-list__static-actions,
+.table-list__actions--static  {
+    grid-column: actionsVisible;
+    grid-row: mainRow;
+    .icn-btn {
+        opacity: 0.4;
+        &:hover {
+            opacity: 1;
+        }
+    }
+}
+.table-list__item {
+    &.table-list__item--align-center {
+        .table-list__item-content {
+            justify-content: center;
+        }
+        
+    }
+}
+
+.table-list__add-bar-container {
+    min-height: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    &:hover {
+        .table-list__add-bar  {
+            opacity: 1;
+            height: 32px;
+            transform: scale(1);
+        }
+        &::after {
+            opacity: 1;
+        }
+    }
+    &::after {
+        content: '';
+        position: absolute;
+        height: 11px;
+        width: 100%;
+        border-radius: var(--b-radius--full);
+        background-color: hsla(0, 0%, 100%, 0.2);
+        border: 5px solid var(--sd-colour-interactive--alpha-30);
+        opacity: 0;
+        transition: all ease 0.3s;
+    }
+}
+.table-list__add-bar {
+    height: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    transition: all ease 0.3s;
+    z-index: 2;
+    padding: 2px;
+    border-radius: var(--b-radius--full);
+    background-color: var(--sd-colour-panel-bg--000);
+    transform: scale(0.5);
+}
+.side-panel__content-block {
+    .table-list__item-content {
+        grid-template-columns: [columnLeft] 140px [columncenter] 1fr [columnRight] auto;
+    }
+}

package/app/styles/app.scss

@@ -33,6 +33,7 @@
 @import 'content-divider';
 @import 'loaders';
 @import 'spinner';
+@import 'table-list';
 
 // Interface elements
 @import 'interface-elements/side-panel';

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

@@ -144,7 +144,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 +219,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;
     }
@@ -292,11 +293,11 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
 }
 
 //  Overrides for inner elements
-.sd-list-item {
-    .label {
-        margin-right: 0.6rem;
-    }
-}
+// .sd-list-item {
+//     .label {
+//         margin-right: 0.6rem;
+//     }
+// }
 
 .sd-list-item {
     .badge {
@@ -322,45 +323,44 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
 // Text specific styles
 .sd-list-item {
     time {
-        color: var(--color-text-lighter);
+        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;
@@ -470,7 +470,7 @@ $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;
@@ -478,7 +478,6 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
     display: flex;
     flex-direction: column;
     margin-left: 1rem;
-    margin-bottom: 0.8rem;
     .sd-list-item {
         margin-top: 0;
         border-top: 1px solid var(--sd-colour-line--x-light);
@@ -508,6 +507,8 @@ $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);
@@ -519,15 +520,18 @@ $sd-ListItem-column-border: 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;
             }
         }

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

@@ -1,28 +1,42 @@
+$iconSize-large: 3.6rem;
+$iconSize-small: 2.4rem;
+
 .sd-dropzone__drop-target {
     position: relative;
-    padding: 0;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     border-radius: var(--b-radius--medium);
-    min-height: 72px;
+    min-height: $sd-base-increment * 9;
     width: 100%;
-    padding: 16px;
-    gap: $sd-base-increment * 2;
+    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);
     }
-    &:hover, &.sd-dropzone__drop-target--ondragover {
+    &.sd-dropzone__drop-target--ondragover {
         background-color: var(--sd-colour-interactive--alpha-10);
         .sd-dropzone__target-border {
-            inset: 6px;
+            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);
         }
@@ -35,10 +49,11 @@
     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: 64px;
-    height: 64px;
+    width: 5.6rem;
+    height: 5.6rem;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -46,23 +61,37 @@
     border-radius: var(--b-radius--full);
     [class^="big-icon--"],
     [class*=" big-icon--"] {
-        width: 40px;
-        height: 40px;
-        font-size: 40px;
-        line-height: 40px;
+        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 {
-    opacity: 0.9;
     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;
@@ -70,9 +99,16 @@
     max-width: 320px;
     margin: 0 auto;
     font-size: 1.4rem;
+    position: relative;
+    z-index: 0;
+    pointer-events: none;
 }
 .sd-dropzone__input {
-    width: 100%;
-    height: 100%;
     opacity: 0;
+    position: absolute;
+    inset: 2px;
+    z-index: 1;
+    &:hover {
+        cursor: pointer;
+    }
 }