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

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

@@ -57,6 +57,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 +80,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 +156,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 +231,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 +305,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 +335,44 @@ $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;
@@ -470,7 +482,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 +490,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,21 +519,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 +561,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;

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;
+    }
+}

package/app/styles/components/_sd-grid-item.scss

@@ -4,8 +4,8 @@
 //border-radius
 $sd-grid-item-border-radius:            $border-radius__base--medium;
 //shadows
-$sd-grid-item-shadow:                   0 1px 4px rgba(0,0,0,.1), 0 1px 5px rgba(0,0,0,.16);
-$sd-grid-item-shadow-hover:             0 1px 6px rgba(0,0,0,.16), 0 2px 8px rgba(0,0,0,.26);
+$sd-grid-item-shadow:                   0 0 0 1px var(--sd-shadow-outline), 0 1px 4px hsla(0, 0%, 0%, 0.1), 0 1px 5px hsla(0, 0%, 0%, 0.16);
+$sd-grid-item-shadow-hover:             0 0 0 1px var(--sd-shadow-outline), 0 1px 6px hsla(0, 0%, 0%, 0.16), 0 2px 8px hsla(0, 0%, 0%, 0.26);
 $sd-grid-item-shadow-selected:          var(--sd-shadow__item--selected);
 $sd-grid-item-shadow-activated:         0 0 0 2px  var(--sd-colour-interactive--alpha-50);
 
@@ -74,9 +74,13 @@ $sd-grid-item-shadow-activated:         0 0 0 2px  var(--sd-colour-interactive--
         display: flex;
         flex-direction: row;
         align-items: center;
-        margin-inline-start: auto;
+        margin-inline-start: $sd-base-increment;
         justify-content: flex-end;
         visibility: hidden;
+        max-width: 0;
+        opacity: 0;
+        padding-inline-end: 0;
+        transition: all 0.2s ease;
         &--visible {
             visibility: visible;
             opacity: 0.5;
@@ -226,6 +230,10 @@ $sd-grid-item-shadow-activated:         0 0 0 2px  var(--sd-colour-interactive--
         }
         .sd-grid-item__footer-actions {
             visibility: visible;
+            padding-inline-end: 0.4rem;
+            max-width: 32px;
+            margin-inline-start: auto;
+            opacity: 1;
             &--visible {
                 opacity: 1;
             }
@@ -246,6 +254,16 @@ $sd-grid-item-shadow-activated:         0 0 0 2px  var(--sd-colour-interactive--
                 visibility: visible;
             }
         }
+        .sd-grid-item__footer-actions {
+            visibility: visible;
+            padding-inline-end: 0.4rem;
+            max-width: 32px;
+            margin-inline-start: auto;
+            opacity: 1;
+            &--visible {
+                opacity: 1;
+            }
+        }
     }
     &.sd-grid-item--overflow-v {
         overflow: visible;
@@ -402,42 +420,38 @@ $sd-grid-item-shadow-activated:         0 0 0 2px  var(--sd-colour-interactive--
             display: flex;
             flex-direction: row;
             align-items: center;
-            &--multi-l {
+            &--multi-l,
+            &--multi-r {
                 flex-grow: 1;
                 display: flex;
                 flex-direction: row;
                 align-items: center;
-                padding-inline-start: 0.4rem;
+                gap: $sd-base-increment;
+            }
+            &--multi-l {
+                justify-content: flex-start;
             }
             &--multi-r {
-                flex-grow: 1;
-                display: flex;
-                flex-direction: row;
-                align-items: center;
                 justify-content: flex-end;
-                padding-inline-end: 0.4rem;
             }
             &--single-r {
                 flex-grow: 0;
             }
+            &--left,
+            &--right {
+                gap: $sd-base-increment;
+            }
             &--left {
                 margin-inline-end: auto;
                 justify-content: flex-start;
-                @include sd-padding('0-5');
-                > * {
-                    margin: 0 0.4rem;
-                }
+                padding-inline-start: $sd-base-increment;
             }
             &--right {
                 margin-inline-start: auto;
                 justify-content: flex-end;
-                > * {
-                    margin: 0 0.4rem;
-                }
             }
         }
         .sd-grid-item__footer-block-item {
-            margin: 0 0.4rem;
             flex-shrink: 0;
         }
         time {

package/app/styles/components/_sd-notification-panel.scss

@@ -0,0 +1,48 @@
+.sd-notification-panel {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: auto 1fr auto;
+    position: fixed;
+    color: var(--color-text);
+    inset-block-start: $nav-height;
+    inset-block-end: 3.2rem;
+    inset-inline-end: -336px;
+    width: 32rem;
+    background: hsla(218, 13%, 12%, 0.82);
+    backdrop-filter: blur(6px);
+    box-shadow: 0 2px 12px hsla(0, 0%, 0%, 0.32), 0 1px 4px hsla(0, 0%, 0%, 0.32), 0 0 0 1px var(--sd-colour-line--light);
+    z-index: 100;
+    transition: inset-inline-end 0.2s ease;
+    border-radius: var(--b-radius--x-large);
+    margin: 12px 0;
+    &.sd-notification-panel--open {
+        inset-inline-end: 12px;
+    }
+}
+
+.sd-notification-panel__header {
+    grid-row: 1 / 2;
+    grid-column: 1 / 2;
+    height: $nav-height;
+    border-bottom: 1px solid var(--sd-colour-line--light);
+    padding-inline: $sd-base-increment * 2 $sd-base-increment;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.sd-notification-panel__title {
+    font-size: 16px;
+    color: var(--color-text);
+    font-weight: 300;
+    margin-inline-end: auto;
+    padding-inline-end: $sd-base-increment;
+}
+
+.sd-notification-panel__content {
+    grid-row: 2 / 2;
+    grid-column: 1 / 2;
+    overflow-y: auto;
+    position: relative;
+    padding: $sd-base-increment * 2;
+}

package/app/styles/components/_sd-photo-preview.scss

@@ -60,7 +60,7 @@ $photo-nav-transition: all 0.2s ease-out;
             background-repeat: no-repeat;
             background-position: center center;
             background-size: 60px;
-            background-color: rgba(0, 0, 0, 0.85);
+            background-color: var(--sd-colour-overlay-actioning);
         }
     }
 }