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

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

@@ -322,7 +322,7 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
 // Text specific styles
 .sd-list-item {
     time {
-        color: $grayText;
+        color: var(--color-text-lighter);
         font-size: 1.2rem;
         letter-spacing: 0.025em;
         flex-shrink: 0;
@@ -513,6 +513,11 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
             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 {
         .sd-list-item {
             + .sd-list-item {
@@ -540,15 +545,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,78 @@
+.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;
+    width: 100%;
+    padding: 16px;
+    gap: $sd-base-increment * 2;
+    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 {
+        background-color: var(--sd-colour-interactive--alpha-10);
+        .sd-dropzone__target-border {
+            inset: 6px;
+            border-color: var(--sd-colour-interactive);
+        }
+    }
+    &:active {
+        .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;
+}
+.sd-dropzone__icon {
+    width: 64px;
+    height: 64px;
+    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--"] {
+        width: 40px;
+        height: 40px;
+        font-size: 40px;
+        line-height: 40px;
+        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;
+}
+.sd-dropzone__description {
+    opacity: 0.7;
+    text-align: center;
+    max-width: 320px;
+    margin: 0 auto;
+    font-size: 1.4rem;
+}
+.sd-dropzone__input {
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+}

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

package/app/styles/components/_subnav.scss

@@ -52,7 +52,7 @@
   flex-grow: 1;
 }
 .subnav__page-title {
-  padding: 1rem 2rem;
+  padding: 0 1.6rem;
   color: inherit;
   font-size: 1.8rem;
   line-height: 2.8rem;
@@ -67,6 +67,23 @@
     flex-grow: 1;
 }
 
+.subnav__divider {
+  display: inline-flex;
+  height: 100%;
+  &--small {
+    width: $sd-base-increment * 1.5;
+  }
+  &--medium {
+    width: $sd-base-increment * 2;
+  }
+  &--large {
+    width: $sd-base-increment * 3;
+  }
+  &--x-large {
+    width: $sd-base-increment * 4;
+  }
+}
+
 
 .subnav {
   &.subnav--level2 {
@@ -76,6 +93,9 @@
       z-index: 2;
       box-shadow: none;
   }
+  .sd-nav-tabs {
+    box-shadow: none;
+  }
 }
 
 .subnav__sliding-toolbar {
@@ -97,53 +117,53 @@ $navbutton-bg-color-darker-hover: var(--color-navbutton-bg-100-hover);
 $navbutton-focus-box-shadow: inset 0 0 0 1px var(--sd-colour-interactive--alpha-70), 0 0 0 2px $sd-colour--focus-shadow;
   
 @mixin navbutton-base {
-  position: relative;
-  height: $subnav-height;
-  width: 4.8rem;
+    position: relative;
+    height: $subnav-height;
+    width: 4.8rem;
 
-  display: inline-flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  
-  background: $navbutton-bg-color;
-  color: inherit;
-  text-align: center;
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
 
-  text-decoration: none;
-  border: 0;
-  border: 0px solid $navbutton-border-color;
-  border-inline-width: 1px 0;
-  cursor: pointer;
-  transition: $navbutton-transition;
+    background: $navbutton-bg-color;
+    color: inherit;
+    text-align: center;
 
-  i {
-    opacity: 0.75;
-    vertical-align: baseline !important;
-    transition: opacity 0.2s ease-out;
-  }
-  [class^="big-icon--"], [class*=" big-icon--"],
-  [class^="icon-"], [class*=" icon-"] {
-    color: currentColor;
-  }
-  &:hover {
-    background: $navbutton-bg-color-hover;
-      > i {
-          opacity: 1;
-      }
-  }
-  &:active{
-    background: $navbutton-bg-color-active;
-      > i {
-          opacity: 1;
-      }
-  }
-  &:focus-visible {
-    box-shadow: $navbutton-focus-box-shadow;
-    > i {
-      opacity: 1;
-  }
-  }
+    text-decoration: none;
+    border: 0;
+    border: 0px solid $navbutton-border-color;
+    border-inline-width: 1px 0;
+    cursor: pointer;
+    transition: $navbutton-transition;
+
+    i {
+        opacity: 0.75;
+        vertical-align: baseline !important;
+        transition: opacity 0.2s ease-out;
+    }
+    [class^="big-icon--"], [class*=" big-icon--"],
+    [class^="icon-"], [class*=" icon-"] {
+        color: currentColor;
+    }
+    &:hover {
+        background: $navbutton-bg-color-hover;
+        > i {
+            opacity: 1;
+        }
+    }
+    &:active {
+        background: $navbutton-bg-color-active;
+        > i {
+            opacity: 1;
+        }
+    }
+    &:focus-visible {
+        box-shadow: $navbutton-focus-box-shadow;
+        > i {
+            opacity: 1;
+        }
+    }
 }
   
 .sd-navbtn {
@@ -261,17 +281,20 @@ $navbutton-focus-box-shadow: inset 0 0 0 1px var(--sd-colour-interactive--alpha-
   
 .navbtn {
     position: relative;
-    display: inline-block;
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
     height: $subnav-height;
     width: 4.8rem;
-    padding: 0 10px;
+    padding: 0;
     background: transparent;
     color: $sd-text;
     text-align: center;
-    line-height: 5.6rem;
     text-decoration: none;
-    border: 0;
-    border-left: 1px solid var(--sd-colour-line--x-light);
+    border: 0px solid transparent;
+    border-color: $navbutton-border-color;
+    border-inline-width: 1px 0;
     cursor:pointer;
     background: transparent;
     transition: background-color 0.2s ease-out, color 0.1s ease-out;
@@ -282,16 +305,16 @@ $navbutton-focus-box-shadow: inset 0 0 0 1px var(--sd-colour-interactive--alpha-
     }
     [class^="big-icon--"],
     [class*=" big-icon--"] {
-      line-height: 1;
-      color: $sd-text;
-      display: block;
+        line-height: 1;
+        color: $sd-text;
+        display: block;
     }
     .big-icon--send-to {
-      margin-left: 0.3rem;
+        margin-left: 0.3rem;
     }
     [class^="icon-"],
     [class*=" icon-"] {
-      color: $sd-text;
+        color: $sd-text;
     }
     &:hover {
         background: var(--color-navbutton-bg-hover);
@@ -300,12 +323,11 @@ $navbutton-focus-box-shadow: inset 0 0 0 1px var(--sd-colour-interactive--alpha-
         }
     }
     &.navbtn--left {
-      border-left: none;
-      border-right: 1px solid var(--sd-colour-line--x-light);
+        border-inline-width: 0 1px;
     }
     &.navbtn--blue {
         background: $sd-colour-interactive;
-        border-left: 1px solid var(--sd-colour-interactive--lighten-10);
+        border-color: var(--sd-colour-interactive--lighten-10);
         color: $white;
         &.disabled {
             background: var(--sd-colour-interactive--lighten-30);
@@ -315,11 +337,11 @@ $navbutton-focus-box-shadow: inset 0 0 0 1px var(--sd-colour-interactive--alpha-
       width: auto;
       line-height: $subnav-height;
       padding: 0 20px;
-      border-left: none;
+      border-inline-width: 0 1px;
       font-size: 1.5rem;
     }
     &.navbtn--border-r {
-      border-right: 1px solid var(--sd-colour-line--x-light) !important;
+      border-inline-end: 1px !important;
     }
     &.navbtn--highlighted {
       background-color: $purple !important;
@@ -536,7 +558,7 @@ $navbutton-focus-box-shadow: inset 0 0 0 1px var(--sd-colour-interactive--alpha-
     .dropdown__caret {
       position: absolute;
       top: 50%;
-      right: 1rem;
+      inset-inline-end: 1rem;
     }
   }
   .navbtn {