superdesk-ui-framework 2.4.21 → 3.0.0-rc12

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);
@@ -14,27 +14,46 @@ $label-icon-color-alt: $white !default;
 $label-icon-palette: $sd-basic-palette;
 
 /// Default padding inside labels.
-$label-icon-padding: 0 0.6rem 0 0 !default;
+$label-icon-padding: 0.6rem !default;
 
-$label-icon-radius: 8px !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;
-    padding: $label-icon-padding;
+    padding: 0;
+    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;
-    border-radius: 12px;
-    padding: 0 12px 0 8px;
+    height: $label-height--default;
+    border-radius: $border-radius__base--full;
+    padding-inline: 1.2rem;
+    gap: 4px;
+    [class^="icon-"], & [class*=" icon-"] {
+        margin-inline-end: .2rem;
+        margin-inline-start: -4px;
+        line-height: 1;
+    }
 }
 
 
@@ -43,12 +62,6 @@ $label-icon-radius: 8px !default;
 
     background: $label-icon-background;
     color: $label-icon-color;
-    
-    [class^="icon-"], & [class*=" icon-"] {
-        color: $label-icon-color;
-        margin-right: .4rem;
-        opacity: 1 !important;
-    }
 
     @each $name, $color in $label-icon-palette {
         &.label-icon--#{$name} {
@@ -66,6 +79,48 @@ $label-icon-radius: 8px !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/_labels.scss

@@ -1,33 +1,16 @@
-/// @group label
 
-/// Default background color for labels.
-$label-background: $gray !default;
-
-/// Default text color for labels.
-$label-color: $white !default;
+$label-background: var(--sd-colour-bg--08) !default;
+$label-color: var(--color-text--inverse) !default;
 
 /// Alternate text color for labels.
-$label-color-alt: $gray !default;
-$label-background-translucent: rgba(123,123,123,0.16);
+$label-color-alt: var(--sd-colour-btn-txt-neutral) !default;
+$label-background-translucent: var(--sd-colour-bg-translucent--08);
 
 /// Coloring classes. A map of classes to output in the CSS.
 $label-palette: $sd-extended-palette;
 
-/// Default padding inside labels.
-$label-padding: 0 0.8rem !default;
-$label-padding-large: 0.5rem 1.2rem;
-$label-link-padding: 0 1.8rem 0 0.8rem;
-
-$label-lineheight-large: 1;
-
-/// Default radius of labels.
-$label-radius: 8px !default;
-$label-radius-large: 1.2rem;
-
-$label-sizes: (
-  label--default: 0.9rem,
-  label--large: 1.2rem,
-) !default;
+$font-size__label--default: 0.9rem;
+$font-size__label--large: 1.2rem;
 
 /// Removes background fill for hollow buttons.
 @mixin label-hollow-style($color: $label-color-alt) {
@@ -42,36 +25,61 @@ $label-sizes: (
 
 /// Generates base styles for a label.
 @mixin label {
-    display: inline-block;
-    padding: $label-padding;
+    display: inline-flex;
+    align-items: center;
+    vertical-align: middle;
+    justify-content: center;
+    padding-block-start: 0;
+    padding-block-end: 0;
+    padding-inline: $padding-x__label--default;
     vertical-align: middle;
-    border-radius: $label-radius;
+    border-radius: $border-radius__base--full;
     text-transform: uppercase;
-    line-height: 1.4rem;
+    line-height: $height__label--default;
+    height: $height__label--default;
     letter-spacing: 0.125em;
-    font-size: map-get($label-sizes, label--default);
+    font-size: $font-size__label--default;
     white-space: nowrap;
-    cursor: default;
     border: 1px solid transparent;
     font-weight: 500;
+    &--large {
+        padding-block-start: $padding-y__label--large;
+        padding-block-end: $padding-y__label--large;
+        padding-inline: $padding-x__label--large;
+        font-size: $font-size__label--large;
+        height: $height__label--large;
+        line-height: $height__label--large;
+    }
 }
 
+@mixin label-base {
+    display: inline-flex;
+    align-items: center;
+    vertical-align: middle;
+    justify-content: center;
+    margin: $label-margin;
+    padding-block-start: 0;
+    padding-block-end: 0;
+    padding-inline: $padding-x__label--default;
+    height: $height__label--default;
+    font-size: $font-size__label--default;
+    border: none;
+    border-radius: $border-radius__base--full;
+    text-transform: uppercase;
+    line-height: $height__label--default;
+    font-weight: 500;
+    letter-spacing: 0.125em;
+    text-align: center;
+    white-space: nowrap;
+    color: var(--color-text--inverse);
+    background-color: var(--sd-lbl-bg);
+    [class^="icon-"], [class*=" icon-"] {
+      color: currentColor;
+    }
+  }
 
 .label {
     @include label;
-
-    // Sizes
-    @each $size, $value in map-remove($label-sizes, label--default) {
-      &.#{$size} {
-        font-size: $value;
-        @if $size == label--large {
-          padding: $label-padding-large;
-          line-height: $label-lineheight-large;
-          border-radius: $label-radius-large;
-        }
-      }
-    }
-
     background: $label-background;
     color: $label-color;
     @each $name, $color in $label-palette {
@@ -81,8 +89,6 @@ $label-sizes: (
     }
     &.label--hollow {
         @include label-hollow-style;
-        
-
         @each $name, $color in $label-palette {
             &.label--#{$name} {
                 @include label-hollow-style($color);
@@ -91,19 +97,16 @@ $label-sizes: (
     }
     &.label--translucent {
         @include label-translucent-style;
-        
-
         @each $name, $color in $label-palette {
             &.label--#{$name} {
                 @include label-translucent-style($color);
-                background-color: scale-color($color, $alpha: -88%);
+                background-color: scale-color($color, $alpha: -80%);
             }
         }
     }
     &--annotation {
         background-color: $annotation-color;
         color: $grayMedium;
-
     }
     &--comment {
         background-color: $comment-color;
@@ -120,27 +123,36 @@ a.label {
     position: relative;
     text-decoration: none;
     cursor: pointer;
-    padding: $label-link-padding;
+    padding-block-start: 0;
+    padding-block-end: 0;
+    padding-inline-start: 0.8rem;
+    padding-inline-end: 1.8rem;
 
     &::before {
         display: inline-block;
         font-family: 'sd_icons';
         content: '\e6b0';
         position: absolute;
-        top: 0;
-        right: 0.3rem;
+        inset-block-start: 0;
+        inset-inline-end: 0.3rem;
         width: 1.6rem;
         height: 1.6rem;
         font-size: 1.6rem;
         font-family: 'sd_icons';
-        speak: none;
         font-style: normal;
         font-weight: normal;
         font-variant: normal;
         text-transform: none;
     }
-
     &:hover, &:focus {
         box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
     }
 }
+
+.label.label--hollow.label--darkBlue2 {
+    border: 1px solid var(--sd-navy-color);
+    color: var(--sd-navy-color);
+}
+.label.label--darkBlue2 {
+    background: var(--sd-navy-color);
+}

package/app/styles/_loaders.scss

@@ -0,0 +1,28 @@
+.sd-loading-overlay {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 3;
+    background-image: url(../img/three-dots.svg);
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: 60px;
+    background-color: var(--sd-colour-overlay-actioning);
+    pointer-events: none;
+    border-radius: var(--b-radius--medium);
+}
+.sd-loading-overlay--plain {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 10;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--sd-colour-overlay-actioning);
+    pointer-events: none;
+}

package/app/styles/_master-desk.scss

@@ -17,7 +17,7 @@ $board-header-border-color: var(--color-kanban-border);
         transition: border-color ease-in-out .2s;
         cursor: pointer;
         &:hover {
-           border-bottom-color: $sd-blue; 
+           border-bottom-color: $sd-colour-interactive; 
         }
     }
 }
@@ -34,8 +34,8 @@ $board-header-border-color: var(--color-kanban-border);
 }
 
 .sd-board__content-block {
-    border-radius: 2px;
-    background-color: var(--color-bg-00);
+    border-radius: $border-radius__base--x-small;
+    background-color: var(--sd-item__main-Bg);
     display: flex;
     flex-direction: column;
     @include sd-shadow('z2');
@@ -44,7 +44,7 @@ $board-header-border-color: var(--color-kanban-border);
         cursor: pointer;
         &:hover {
            @include sd-shadow('z3');
-           outline: 1px solid rgba(61, 143, 177, 0.35);
+           outline: 1px solid var(--sd-colour-interactive--alpha-50);
         }
     }
 }
@@ -53,7 +53,7 @@ $board-header-border-color: var(--color-kanban-border);
     flex-direction: column;
 }
 .sd-board__list-item {
-    border-bottom: 1px solid rgba(127, 127, 127, 0.2);
+    border-bottom: 1px solid var(--sd-colour-line--light);
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -145,16 +145,16 @@ $board-header-border-color: var(--color-kanban-border);
     border-radius: 3px;
     transition: all 0.2s ease-out;
     height: 4rem;
-    border: 1px solid var(--color-inset-search-border);
+    border: 1px solid var(--sd-colour-line--medium);
     color: inherit;
     box-shadow: inset 0 1px 2px 0 rgba(0,0,0,0.12);
     &:hover {
-        border-color: var(--color-inset-search-border-hover);
-        box-shadow: inset 0 1px 3px 0 rgba(0,0,0,0.18);
+        border-color: var(--sd-colour-line--strong);
+        box-shadow: inset 0 1px 3px 0 hsla(0, 0%, 0%, 0.18);
     }
     &:focus-within {
-        border-color: $sd-blue;
-        box-shadow: inset 0 1px 3px 0 rgba(0,0,0,0.18), 0 0 0 3px rgba(94,169,200,0.3);
+        border-color: var(--sd-colour-interactive);
+        box-shadow: inset 0 0 0 3px var(--sd-colour-interactive--alpha-30);
     }
     &::before {
         content: "\e618";
@@ -171,14 +171,15 @@ $board-header-border-color: var(--color-kanban-border);
         opacity: 0.4;
     }
 }
-.sd-inset-search__input {
+.sd-inset-search__input,
+input.sd-inset-search__input {
     flex-grow: 1;
     flex-shrink: 1;
     font-size: 1.4rem;
     padding: 0;
     color: inherit;
     align-self: auto;
-    background-color: transparent;
+    background-color: transparent !important;
     border: 0;
     box-shadow: none !important;
     padding: 0 1rem 0 3rem;
@@ -229,7 +230,7 @@ $board-header-border-color: var(--color-kanban-border);
         transition: border-color ease-in-out .2s;
         cursor: pointer;
         &:hover {
-           border-bottom-color: $sd-blue; 
+           border-bottom-color: $sd-colour-interactive; 
         }
     }
 }

package/app/styles/_mixins.scss

@@ -1,3 +1,4 @@
+@import 'variables';
 @mixin clearfix {
     *zoom: 1;
     &:before,
@@ -11,9 +12,6 @@
 }
 // Border radius
 @mixin border-radius($radius) {
-    -webkit-border-radius: $radius;
-       -moz-border-radius: $radius;
-        -ms-border-radius: $radius;
             border-radius: $radius;
 }
 @mixin box-shadow-both($shadow1 , $shadow2) {
@@ -89,31 +87,41 @@
     left: 0;
     right: 0;
     z-index: 3;
-    padding: 0 16px;
-    color: $sd-text;
+    padding: 0 $sd-base-increment * 2;
+    color: $sd-colour-text__base;
     animation: dropOut2 .3s cubic-bezier(.695,.105,.285,1.275) 1;
-    background-color: #d2e5ed;
-    box-shadow: 0 1px 4px 0 rgba(0,0,0,.2);
+    background-color: var(--sd-colour-bg__sliding-toolbar);
+    box-shadow: var(--sd-shadow__sliding-toolbar);
+    gap: $sd-base-increment;
+    height: $nav-height;
     &--right {
-        text-align: right;
+        text-align: end;
         justify-content: flex-end;
     }
     .sliding-toolbar__inner {
         flex-grow: 1;
         display: flex;
         align-items: center;
+        gap: $sd-base-increment;
         &--right {
-            text-align: right;
+            text-align: end;
         }
     }
     .sliding-toolbar__info-text {
-        font-weight: 300;
+        font-weight: 400;
         opacity: 0.75;
+        font-size: 1.4rem;
     }
-    .btn + .sliding-toolbar__info-text {
-        margin-left: 1rem;
+}
+.sliding-toolbar {
+    @include sliding-toolbar();
+    &--static {
+        position: static;
+        animation: none;
     }
-  }
+}
+
+
 
 // User select
 // For selecting text on the page