superdesk-ui-framework 2.4.21 → 3.0.0-rc12

package/app/styles/components/_sd-media-carousel.scss

@@ -73,7 +73,7 @@ $background: rgba(255,255,255,0.3),
 $background-hover: scale-color($background, $alpha: 50%),
 $background-active: scale-color($background, $alpha: 100%)) 
 {
-    border-radius: 50%;
+    border-radius: $border-radius__base--full;
     cursor: pointer;
     height: 3.6rem;
     line-height: 3.6rem;
@@ -127,7 +127,7 @@ $background-active: scale-color($background, $alpha: 100%))
     &--next-inner {
         right: 0;
         color: $sd-text;
-        border-radius: 50% 0 0 50%;
+        border-radius: $border-radius__base--full 0 0 $border-radius__base--full;
         box-shadow: none;
         &::after {
             content: "\e643";
@@ -136,7 +136,7 @@ $background-active: scale-color($background, $alpha: 100%))
     &--prev-inner {
         left: 0;
         color: $sd-text;
-        border-radius: 0 50% 50% 0;
+        border-radius: 0 $border-radius__base--full $border-radius__base--full 0;
         box-shadow: none;
         &::after {
             content: "\e642";
@@ -158,7 +158,7 @@ $background-active: scale-color($background, $alpha: 100%))
     &--next-inner, &--prev-inner {
         &:active {
             &::after {
-                color: $sd-blue;
+                color: $sd-colour-interactive;
             }
         }
     } 
@@ -191,7 +191,7 @@ $background-active: scale-color($background, $alpha: 100%))
 .sd-media-carousel__page-indicator {
     background-color: rgba(255,255,255,.2);
     border: 1px solid rgba(0,0,0,.4);
-    border-radius: 50%;
+    border-radius: $border-radius__base--full;
     cursor: pointer;
     display: inline-block;
     height: 1.4rem;
@@ -227,7 +227,7 @@ $background-active: scale-color($background, $alpha: 100%))
         border: 1px solid rgba(255,255,255,0.4);
     }
     &--active {
-        outline: 1px solid $sd-blue;
+        outline: 1px solid $sd-colour-interactive;
         border: 1px solid rgba(255,255,255,0.8);
         box-shadow: 0 1px 4px rgba(0,0,0,.35), 0 0 1px 1px rgba(0,0,0,.4);
         cursor: default;
@@ -266,8 +266,6 @@ $background-active: scale-color($background, $alpha: 100%))
     img {
         max-width: 100%;
         max-height: 6rem;
-        // width: auto;
-        //margin: auto;
         object-fit: cover;
         object-position: 50% 50%;
     }
@@ -288,18 +286,20 @@ $background-active: scale-color($background, $alpha: 100%))
     padding: 1.2rem;
     width: 100%;
     font-size: 1.4rem;
-    text-align: left;
+    text-align: start;
     font-weight: 300;
     line-height: 140%;
     border: 1px solid transparent;
-    transition: all ease-in-out 0.2s; 
-    &[contenteditable="true"] {
+    transition: all ease-in-out 0.2s;
+    background-color: transparent; 
+    &[contenteditable="true"],
+    &textarea:not(disabled) {
         &:hover {
-            border-color: scale-color($sd-blue, $alpha: -60%);
+            border-color: var(--sd-colour-interactive--alpha-60);
         }
         &:focus {
-            border-color: scale-color($sd-blue, $alpha: 100%);
-            box-shadow: inset 0 -1px 0 0 $sd-blue;
+            border-color: $sd-colour-interactive;
+            box-shadow: inset 0 -1px 0 0 $sd-colour-interactive;
         }
         &:empty {
             &:before {
@@ -314,6 +314,39 @@ $background-active: scale-color($background, $alpha: 100%))
     }
     
 }
+textarea.sd-media-carousel__media-caption, 
+textarea.sd-media-carousel__media-title {
+    color: inherit;
+    position: relative;
+    padding: 1.2rem;
+    width: 100%;
+    font-size: 1.4rem;
+    text-align: start;
+    font-weight: 300;
+    line-height: 140%;
+    border: 1px solid transparent;
+    transition: all ease-in-out 0.2s;
+    background-color: transparent; 
+    &:not(disabled) {
+        &:hover {
+            border-color: var(--sd-colour-interactive--alpha-60);
+        }
+        &:focus {
+            border-color: $sd-colour-interactive;
+            box-shadow: inset 0 0 0 4px var(--sd-colour-interactive--alpha-30);
+        }
+        &:empty {
+            &:before {
+                position: absolute;
+                content: attr(sd-placeholder) " ";
+                opacity: 0.55;
+                color: inherit;
+                font-weight: 300;
+                cursor: text;
+            }
+        }  
+    }
+}
 .sd-media-carousel__media-caption {
     min-height: 4rem;
 }

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

@@ -45,7 +45,7 @@ $photo-nav-transition: all 0.2s ease-out;
     grid-column: 1/2;
     grid-row: 1/2;
     text-align: center;
-    background-color: #111;
+    background-color: var(--sd-colour-bg__photo-preview);
     max-height: 100%; // needed for firefox
     &.actioning {
         &::before {
@@ -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);
         }
     }
 }
@@ -124,7 +124,7 @@ $photo-nav-transition: all 0.2s ease-out;
     padding: 0.8rem 2rem;
     margin: 1rem auto;
     line-height: 100%;
-    border-radius: 2rem;
+    border-radius: $border-radius__base--x-small;
     font-weight: 300;
     min-width: 16rem;
     @include text-overflow;
@@ -219,7 +219,7 @@ $photo-nav-transition: all 0.2s ease-out;
     width: 4.8rem;
     height: 4.8rem;
     border: 2px solid rgba(255, 255, 255, 0.6);
-    border-radius: 50%;
+    border-radius: $border-radius__base--full;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -243,10 +243,10 @@ $photo-nav-transition: all 0.2s ease-out;
         }
     }
     &:active {
-        border-color: #5ea9c8;
+        border-color: $sd-colour-interactive;
         background-color: rgba(0, 0, 0, 0.8);
         i {
-            color: #5ea9c8;
+            color: $sd-colour-interactive;
         }
     }
 }
@@ -299,9 +299,9 @@ $photo-nav-transition: all 0.2s ease-out;
     $background: rgba(0,0,0,1),
     $background-normal: scale-color($background, $alpha: -20%),
     $background-hover: scale-color($background, $alpha: -10%),
-    $background-active: $sd-blue) 
+    $background-active: $sd-colour-interactive) 
 {
-    border-radius: 50%;
+    border-radius: $border-radius__base--full;
     cursor: pointer;
     height: 5.6rem;
     line-height: 5.6rem;
@@ -338,11 +338,11 @@ $photo-nav-transition: all 0.2s ease-out;
 }
 
 .sd-photo-preview__slide-in-button {
-    position: absolute;
+    position: absolute !important;
     top: 2.4rem;
     right: 0;
     z-index: 2;
-    background-color: rgba(255,255,255,0.1);
+    background-color: hsla(0, 0%, 100%, 0.1);
     height:4.8rem;
     width:4.8rem;
     color: $white;
@@ -364,7 +364,7 @@ $photo-nav-transition: all 0.2s ease-out;
         opacity: 1;
     }
     &:active {
-        background-color: $sd-blue;
+        background-color: $sd-colour-interactive;
         opacity: 1;
     }
 }
@@ -394,8 +394,8 @@ $photo-nav-transition: all 0.2s ease-out;
     bottom: 0; 
     left:0;
     z-index: 0;
-    border: 2px dashed $sd-blue;
-    background-color: scale-color($sd-blue, $alpha: -90%);
+    border: 2px dashed $sd-colour-interactive;
+    background-color: var(--sd-colour-interactive--alpha-10);
 }
 
 .upload__info {
@@ -420,7 +420,7 @@ $photo-nav-transition: all 0.2s ease-out;
     text-align: center;
     padding-top: 3rem;
     text-align: center;
-    color: #a0a0a0;
+    color: var(--color-text-light);
     font-size: 2.4rem;
     font-weight: 300;
 }
@@ -429,8 +429,8 @@ $photo-nav-transition: all 0.2s ease-out;
     text-align: center;
     font-style: italic;
     margin: 2.2rem auto;
-    color: inherit;
-    opacity: 0.5;
+    color: var(--color-text-lighter);
+    opacity: 0.85;
     &::after, &::before {
         content: "___________";
         position: absolute;

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

@@ -13,37 +13,40 @@
     height: 100%; // adapts to the height of the parent element, usually .subnav. 
     max-height: $subnav-height;
     &--focused {
-        background-color: $white;
-        box-shadow: inset 0 0 0 1px rgba(61,143,177,0.5), inset 0 0 0 6px rgba(61,143,177,0.15);
+        background-color: var(--sd-colour-bg__searchbar);
+        box-shadow: inset 0 0 0 1px var(--sd-colour-interactive--alpha-50), inset 0 0 0 6px var(--sd-colour-interactive--alpha-20);
     }
     &--border-r {
-        border-right: 1px solid #dfdfdf;
+        border-right: 1px solid var(--sd-colour-line--x-light);
     }
     &--border-l {
-        border-left: 1px solid #dfdfdf;
+        border-left: 1px solid var(--sd-colour-line--x-light);
     }
     &--border-l-r {
-        border-right: 1px solid #dfdfdf;
-        border-left: 1px solid #dfdfdf;
+        border-right: 1px solid var(--sd-colour-line--x-light);
+        border-left: 1px solid var(--sd-colour-line--x-light);
     }
     &--border-bottom {
-        border-bottom: 1px solid rgba(123,123,123,0.2);
+        border-bottom: 1px solid var(--sd-colour-line--light);
     }
     &--small {
         height: 3.6rem;
     }
     &--boxed {
         height: 4rem;
-        border-radius: 4px;
-        border: 1px solid rgba(123,123,123,0.4);
-        background-color: $white;
+        border-radius: $border-radius__base--medium;
+        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 {
-            border-color: rgba(61,143,177,0.75);
-            box-shadow: inset 0 0 0 1px rgba(61,143,177,0.1), inset 0 0 0 4px rgba(61,143,177,0.1);
+        &.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);
 
         }
         &.sd-searchbar--invalid {
@@ -68,7 +71,7 @@
     flex-shrink: 1;
     font-size: 1.4rem;
     padding: 0;
-    color: inherit;
+    color: $sd-text;
     align-self: auto;
     background-color: transparent;
     border: 0;
@@ -76,7 +79,7 @@
     padding-right: 1rem;
     height: auto;
     &::placeholder {
-        color: $grayLight;
+        color: $sd-text-light;
         font-weight: 300;
         letter-spacing: 0.03rem;
     }
@@ -104,6 +107,7 @@
         font-weight: normal;
         font-variant: normal;
         text-transform: none;
+        color: $sd-text;
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
     }
@@ -117,50 +121,67 @@
 
 }
 .sd-searchbar__search-btn {
-    height: 2.8rem;;
-    width: 2.8rem;;
+    height: 2.8rem;
+    width: 2.8rem;
     flex-grow: 0;
     flex-shrink: 0;
     align-self: center;
-    margin: 0 0.8rem 0 0;
+    margin: 0;
+    margin-inline-end: 0.8rem;
     padding: 0;
-    opacity: 0.6;
+    opacity: 0.8;
     transition: all 0.2s ease-out;
-    background-color: rgba(61,143,177,0.25);
-    border-radius: 50%;
+    background-color: var(--sd-colour-interactive--alpha-30);
+    border-radius: $border-radius__base--full;
     display: flex;
     align-items: center;
     justify-content: center;
     i {
         transition: color 0.2s ease-out;
-        color: $sd-blue;
+        color: $sd-colour-interactive;
     }
     &:hover {
-        background-color: rgba(61,143,177,0.75);
+        background-color: var(--sd-colour-interactive--alpha-80);
         i {
             color: $white;
         }
     }
     &:active {
-        background-color: rgba(61,143,177,1);
+        background-color: $sd-colour-interactive;
+        opacity: 1;
         i {
             color: $white;
         }
     }
 }
+.sd-searchbar__search-btn--active {
+    background-color: $sd-colour-interactive;
+        opacity: 1;
+        i {
+            color: $white;
+        }
+}
+[dir="rtl"] {
+    .sd-searchbar__search-btn {
+        i.icon-chevron-right-thin {
+            transform: rotate(180deg);
+        }
+    }
+}
 .sd-searchbar__cancel {
     height: 1.6rem;
     width: 1.6rem;
     align-self: center;
     flex-grow: 0;
     flex-shrink: 0;
-    margin: 0 1rem 0 0;
+    margin: 0;
+    margin-inline-end: 1rem;
     padding: 0;
     opacity: 0.35;
     transition: opacity 0.2s ease-out;
     color: currentColor;
     i {
-        color: inherit; 
+        color: $sd-text; 
     }
     &:hover {
         opacity: 0.7;
@@ -173,7 +194,7 @@
     font-size: 1.3rem;
     line-height: 1.4rem;
     transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
-    color: $grayText;
+    color: $sd-text-light;
     font-weight: 300;
     margin: 0.5rem 0;
     letter-spacing: 0.03em;
@@ -184,109 +205,11 @@
     }
 }
 
-.subnav--dark-ui {
-    .sd-searchbar--focused {
-        background-color: rgba(0,0,0,0.25);
-    }
-    .sd-searchbar__search-btn {
-      [class^="big-icon--"],
-      [class*=" big-icon--"] {
-        color: $white;
-      }
-    }
-}
-
-.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 #e0e0e0;
-        white-space: nowrap;
-        @include transition(all, 0.3s, ease);
-        input {
-            height: 28px;
-            line-height: 100%;
-            font-size: 14px;
-            border: 0 !important;
-            width: 0;
-            padding: 0;
-            background-color: rgba(255,255,255,0);
-            @include transition(all, 0.3s, ease);
-            &:focus {
-                @include box-shadow(0, 0, 0, 0, #FFF);
-            }
-        }
-        .trigger-icon {
-            @include user-select(none);
-            width: 28px;
-            height: 28px;
-            display: inline-block;
-            @include opacity(50);
-            &:hover {
-                cursor: pointer;
-                @include opacity(80);
-            }
-            i {
-                padding: 7px 3px 4px 6px;
-            }
-        }
-        &--left-border {
-            border-right: 0 !important;
-            border-left: 1px solid #e0e0e0;
-        }
-    }
-    .separator-handler {
-        margin: 9px 0 0 5px;
-        border-right: 2px dotted #bcbcbc;
-        height: 30px;
-        float: left;
-    }
-
-    .search-close {
-        border: 0;
-        background: none;
-        display: none;
-        @include opacity(0);
-        &.visible {
-            @include opacity(40);
-            &:hover {
-                @include opacity(100);
-            }
-        }
-    }
-
-    &.extended {
-        flex-grow: 1;
-        background-color: white;
-        .search-handler {
-            input {
-                width: auto;
-                padding: 0 6px;
-                flex-grow: 1;
-            }
-            border-right: 1px solid #e0e0e0;
-        }
-        .separator-handler {
-            margin-left: 14px;
-        }
-        .search-close {
-            display: inline-block;
-        }
-    }
-}
-
 [data-theme="dark-ui"] {
     .sd-searchbar--boxed {
-        background-color: rgba(0,0,0,0.2);
-        box-shadow: inset 0 2px 4px rgba(0,0,0,0.4);
+        background-color: hsla(0, 0%, 0%, 0.2);
         &.sd-searchbar--focused {
-            border-color: rgba(61,143,177,0.75);
-            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/_sd-toaster.scss

@@ -3,6 +3,13 @@ $sd-toast-min-width: 32rem !default;
 $sd-toast-max-width: 56rem !default;
 $sd-toast-margin: 2rem !default;
 
+$sd-toast-position-top: 5.6rem;
+$sd-toast-z-index: 9999;
+
+$sd-toast-colour-bg:   var(--sd-colour-panel-bg--000);
+$sd-toast-colour-text: $sd-text-light;
+$sd-toast-shadow: var(--sd-shadow__toast);
+
 $toast-palette: $sd-basic-palette;
 $sd-toast-position-top: 5.6rem;
 $sd-toast-z-index: 9999;
@@ -63,10 +70,10 @@ $toast-sizes: (
 	position: relative!important;
     margin: 2rem 0 0;
     @include sd-padding('1-5');
-    border-radius: 3px;
+    border-radius: $border-radius__base--medium;
     overflow: hidden;
-	box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 2px 4px rgba(0, 0, 0, .12), 0 8px 12px rgba(0, 0, 0, .16);
-	background-color: $white;
+	box-shadow: $sd-toast-shadow;
+	background-color: $sd-toast-colour-bg;
 	min-width: $sd-toast-min-width;
     max-width: $sd-toast-max-width;
     pointer-events: all; 
@@ -81,7 +88,6 @@ $toast-sizes: (
         transition-property: transform, height;
         transition-duration:.3s;
         transition-timing-function: cubic-bezier(.54, 1.12, .38, 1.11);
-        //transition: transform cubic-bezier(.54, 1.12, .38, 1.11) .3s;
         transition-delay: 0;
         -webkit-transition-delay: 0;
     }
@@ -148,7 +154,7 @@ $toast-sizes: (
     padding: 0.4rem 1.2rem 0.4rem 1.2rem;
     font-size: 1.4rem;
     line-height: 150%;
-    color: $grayText;
+    color: $sd-toast-colour-text;
     p + p {
         margin-top: 0.8rem;
 
@@ -158,9 +164,10 @@ $toast-sizes: (
     display: flex;
     flex-direction: row;
     margin-bottom: 0.2rem;
+    color: $sd-text;
     time {
         font-size: 1.2rem;
-        color: $grayLight;
+        color: $sd-toast-colour-text;
         margin-right: 0.2rem;
     }
     .sd-toast__heading {