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

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

@@ -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: $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 +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,21 +507,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 +549,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);
 

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-searchbar.scss

@@ -35,14 +35,15 @@
     &--boxed {
         height: 4rem;
         border-radius: $border-radius__base--medium;
-        border: 1px solid rgba(123,123,123,0.4);
+        border: 1px solid var(--color-border-line--medium);
         background-color: var(--sd-colour-bg__searchbar);
         box-shadow: inset 0 2px 4px rgba(0,0,0,0.14);
         transition: box-shadow 0.2s ease-out;
         &:hover {
             border-color: rgba(123,123,123,0.6);
         }
-        &.sd-searchbar--focused {
+        &.sd-searchbar--focused,
+        &:focus-within {
             transition: box-shadow 0.2s ease-out;
             border-color: var(--sd-colour-interactive--alpha-70);
             box-shadow: inset 0 0 0 1px var(--sd-colour-interactive--alpha-50), inset 0 0 0 4px var(--sd-colour-interactive--alpha-20);
@@ -197,105 +198,11 @@
     }
 }
 
-// .flat-searchbar {
-//     flex-grow: 0;
-//     .search-handler {
-//         min-width: 48px;
-//         height: $nav-height;
-//         padding: 10px 10px 10px 14px;
-//         background: none;
-//         display: flex;
-//         border-right: 1px solid var(--sd-colour-line--light);
-//         white-space: nowrap;
-//         transition: all 0.3s ease;
-//         input {
-//             height: 28px;
-//             line-height: 100%;
-//             font-size: 14px;
-//             border: 0 !important;
-//             width: 0;
-//             padding: 0;
-//             color: $sd-text;
-//             background-color: transparent;
-//             transition: all 0.3s ease;
-//             &:focus {
-//                 box-shadow: none;
-//             }
-//             &::placeholder {
-//                 color: $sd-text-light;
-//                 font-weight: 300;
-//                 letter-spacing: 0.03rem;
-//             }
-//         }
-//         .trigger-icon {
-//             @include user-select(none);
-//             width: 28px;
-//             height: 28px;
-//             display: inline-block;
-//             opacity: 0.5;
-//             &:hover {
-//                 cursor: pointer;
-//                 opacity: 0.8;
-//             }
-//             i {
-//                 padding: 7px 3px 4px 6px;
-//             }
-//         }
-//         &--left-border {
-//             border-right: 0 !important;
-//             border-left: 1px solid var(--sd-colour-line--light);
-//         }
-
-//     }
-//     .separator-handler {
-//         margin: 9px 0 0 5px;
-//         border-right: 2px dotted var(--sd-colour-line--medium);
-//         height: 30px;
-//         float: left;
-//     }
-
-//     .search-close {
-//         border: 0;
-//         background: none;
-//         display: none;
-//         opacity: 0;
-//         &.visible {
-//             opacity: 0.4;
-//             &:hover {
-//                 opacity: 1;
-//             }
-//         }
-//     }
-
-//     &.extended {
-//         flex-grow: 1;
-//         background-color: var(--sd-colour-bg__searchbar);
-//         .search-handler {
-//             input {
-//                 width: auto;
-//                 padding: 0 6px;
-//                 flex-grow: 1;
-//             }
-//             border-right: 1px solid var(--sd-colour-line--light);
-//         }
-//         .separator-handler {
-//             margin-left: 14px;
-//         }
-//         .search-close {
-//             display: inline-block;
-//         }
-//         &:focus-within {
-//             box-shadow: inset 0 0 0 1px var(--sd-colour-interactive--alpha-50), inset 0 0 0 6px var(--sd-colour-interactive--alpha-20);
-//         }
-//     }
-// }
-
 [data-theme="dark-ui"] {
     .sd-searchbar--boxed {
-        background-color: rgba(0,0,0,0.2);
+        background-color: hsla(0, 0%, 0%, 0.2);
         &.sd-searchbar--focused {
-            background-color: rgba(0,0,0,0.25) !important;
-            //box-shadow: inset 0 0 0 1px rgba(61,143,177,0.2), inset 0 0 0 4px rgba(61,143,177,0.16);
+            background-color: hsla(0, 0%, 0%, 0.25) !important;
         }
 
     }