superdesk-ui-framework 3.0.42 → 3.0.43

package/app/styles/_icon-font.scss

@@ -1,6 +1,5 @@
 // ICON FONT
 // Glyphs and icons for buttons, nav, and more
-// -------------------------------------------
 
 // All icons receive the styles of the <i> tag with a base class
 // of .i and are then given a unique class to add width, height,
@@ -62,33 +61,42 @@ $icon-base-size: 16px;
 .icon--light {
     opacity: 0.5;
 }
+
 .icon--blue {
     color: $sd-colour-interactive !important;
 }
+
 .icon--white {
     color: $white !important;
 }
+
 .icon--light-blue {
     color: #68abc8 !important;
     opacity: 1 !important;
 }
+
 .icon--dark-blue-grey {
     color: #31728e !important;
     opacity: 1 !important;
 }
+
 [class*=icon-].red,
 .icon--red {
     color: $fireBrick !important;
 }
+
 .icon--orange {
     color: $orange !important;
 }
+
 .icon--green {
     color: $green !important;
 }
+
 .icon--full-opacity {
     opacity: 1 !important;
 }
+
 .icon--disabled {
     opacity: 0.2 !important;
 }
@@ -295,34 +303,44 @@ $sd-icon-font: (
     &.icon-#{$name}:before {
         content: $value;
     }
+
     .icon-#{$name} {
         @if $name == descending {
             transform: rotate(180deg);
         }
+
         @if $name == dots-vertical {
             transform: rotate(90deg);
         }
+
         &.color--default {
             color: $icon-color;
         }
+
         &.color--primary {
             color: var(--sd-colour-primary) !important;
         }
+
         &.color--success {
             color: var(--sd-colour-success) !important;
         }
+
         &.color--warning {
             color: var(--sd-colour-warning) !important;
         }
+
         &.color--alert {
             color: var(--sd-colour-alert) !important;
         }
+
         &.color--highlight {
             color: var(--sd-colour-highlight) !important;
         }
+
         &.color--light {
             color: var(--color-text-lighter) !important;
         }
+
         &.color--white {
             color: hsla(214, 13%, 90, 1) !important;
         }
@@ -330,16 +348,18 @@ $sd-icon-font: (
         &.scale--1\.5x {
             --icon-base-size: 24px
         }
+
         &.scale--2x {
             --icon-base-size: 32px
         }
+
         &.scale--3x {
             --icon-base-size: 48px
         }
+
         &.scale--4x {
             --icon-base-size: 64px
         }
-
     }
 }
 
@@ -353,9 +373,11 @@ $sd-icon-font: (
     display: inline-flex !important;
     font-size: $icon-base-size;
     height: $icon-base-size;
+
     .icn-mix__icn {
         opacity: 0.6;
     }
+
     .icn-mix__sub-icn {
         position:absolute;
         font-size: 1.1rem;
@@ -372,21 +394,24 @@ $sd-icon-font: (
         z-index: 1;
         opacity: 1 !important;
     }
-    &--2x {
-        font-size: $icon-base-size *2;
+}
+
+.icn-mix--2x {
+    font-size: $icon-base-size *2;
+    height: $icon-base-size *2;
+
+    .icn-mix__icn {
+        opacity: 0.6;
+        width: $icon-base-size *2;
         height: $icon-base-size *2;
-        .icn-mix__icn {
-            opacity: 0.6;
-            width: $icon-base-size *2;
-            height: $icon-base-size *2;
-            line-height: $icon-base-size *2;
-            font-size: $icon-base-size *2;
-        }
-        .icn-mix__sub-icn {
-            font-size: 1.6rem;
-            inset-inline-end: -0.6rem;
-            inset-block-end: -0.3rem;
-        }
+        line-height: $icon-base-size *2;
+        font-size: $icon-base-size *2;
+    }
+    
+    .icn-mix__sub-icn {
+        font-size: 1.6rem;
+        inset-inline-end: -0.6rem;
+        inset-block-end: -0.3rem;
     }
 }
 
@@ -394,6 +419,7 @@ $sd-icon-font: (
     display: inline-block;
     height: 3.2rem;
     width: 3.2rem;
+
     [class^="icon-"],
     [class*=" icon-"] {
         width: 32px;
@@ -401,11 +427,12 @@ $sd-icon-font: (
         line-height: 32px;
         font-size: 32px;
     }
-    &--light {
-        [class^="icon-"],
-        [class*=" icon-"] {
-            opacity: 0.5;
-        }
+}
+
+.double-size-icn--light {
+    [class^="icon-"],
+    [class*=" icon-"] {
+        opacity: 0.5;
     }
 }
 
@@ -413,20 +440,23 @@ $sd-icon-font: (
     .icn-mix__sub-icn {
         background-color: $subnav-background !important;
     }
-    &--darker {
-        .icn-mix__sub-icn {
-            background-color: $subnav-background-darker !important;
-        }
+}
+
+.subnav--darker {
+    .icn-mix__sub-icn {
+        background-color: $subnav-background-darker !important;
     }
-    &--dark-blue-grey {
-        .icn-mix__sub-icn {
-            background-color: $subnav-background-dark-blue-grey !important;
-            color: scale-color($purple, $lightness: 50%);
-        }
-        .icn-mix__icn {
-            color: inherit;
-            opacity: 1;
-        }
+}
+
+.subnav--dark-blue-grey {
+    .icn-mix__sub-icn {
+        background-color: $subnav-background-dark-blue-grey !important;
+        color: scale-color($purple, $lightness: 50%);
+    }
+
+    .icn-mix__icn {
+        color: inherit;
+        opacity: 1;
     }
 }
 
@@ -434,14 +464,16 @@ $sd-icon-font: (
     .icn-mix__sub-icn {
         background-color: #f0f0f0;  
     }
-    &--dark-blue-grey {
-        .icn-mix__sub-icn {
-            background-color: $subnav-background-dark-blue-grey;
-            color: scale-color($purple, $lightness: 50%);
-        }
-        .icn-mix__icn {
-            color: inherit;
-            opacity: 1;
-        }
+}
+
+.side-panel__top-tools--dark-blue-grey {
+    .icn-mix__sub-icn {
+        background-color: $subnav-background-dark-blue-grey;
+        color: scale-color($purple, $lightness: 50%);
+    }
+
+    .icn-mix__icn {
+        color: inherit;
+        opacity: 1;
     }
 }

package/app/styles/_icon-labels.scss

@@ -35,6 +35,7 @@ $icon-size--small: 1.2rem;
     white-space: nowrap;
     cursor: default;
     line-height: 1;
+
     [class^="icon-"], & [class*=" icon-"] {
         color: $label-icon-color;
         margin-inline-end: .4rem;
@@ -49,6 +50,7 @@ $icon-size--small: 1.2rem;
     border-radius: $border-radius__base--full;
     padding-inline: 1.2rem;
     gap: 4px;
+
     [class^="icon-"], & [class*=" icon-"] {
         margin-inline-end: .2rem;
         margin-inline-start: -4px;
@@ -59,26 +61,29 @@ $icon-size--small: 1.2rem;
 
 .label-icon {
     @include label-icon;
-
     background: $label-icon-background;
     color: $label-icon-color;
 
     @each $name, $color in $label-icon-palette {
         &.label-icon--#{$name} {
             color: $color;
+
             [class^="icon-"], & [class*=" icon-"] {
                 color: $color !important;
             }
         }
     }
+
     &.label-icon--translucent {
         @include label-icon-translucent;
         background-color: $label-icon-background-translucent;
+
         @each $name, $color in $label-icon-palette {
             &.label-icon--#{$name} {
                 background-color: scale-color($color, $alpha: -88%);
             }
         }
+
         &.label-icon--large {
             [class^="icon-"], & [class*=" icon-"] {
                 margin-inline-start: -4px;
@@ -88,6 +93,7 @@ $icon-size--small: 1.2rem;
                 line-height: 1;
             }
         }
+
         &.label-icon--small {
             [class^="icon-"], & [class*=" icon-"] {
                 margin-inline-start: -3px;
@@ -98,6 +104,7 @@ $icon-size--small: 1.2rem;
             }
         }
     }
+
     &.label-icon--large {
         height: $sd-base-increment * 4;
         padding: 0 $sd-base-increment * 2;
@@ -105,6 +112,7 @@ $icon-size--small: 1.2rem;
         font-weight: 500;
         line-height: inherit;
     }
+
     &.label-icon--small{
         height: $sd-base-increment * 2;
         padding: 0 $sd-base-increment * 1;
@@ -113,11 +121,13 @@ $icon-size--small: 1.2rem;
         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;

package/app/styles/_labels.scss

@@ -18,6 +18,7 @@ $font-size__label--large: 1.2rem;
     background-color: transparent !important;
     color: $color;
 }
+
 @mixin label-translucent-style($color: $label-color-alt) {
     background-color: $label-background-translucent;
     color: $color;
@@ -42,6 +43,7 @@ $font-size__label--large: 1.2rem;
     white-space: nowrap;
     border: 1px solid transparent;
     font-weight: 500;
+
     &--large {
         padding-block-start: $padding-y__label--large;
         padding-block-end: $padding-y__label--large;
@@ -73,8 +75,9 @@ $font-size__label--large: 1.2rem;
     white-space: nowrap;
     color: var(--color-text--inverse);
     background-color: var(--sd-lbl-bg);
+
     [class^="icon-"], [class*=" icon-"] {
-      color: currentColor;
+        color: currentColor;
     }
   }
 
@@ -82,21 +85,26 @@ $font-size__label--large: 1.2rem;
     @include label;
     background: $label-background;
     color: $label-color;
+
     @each $name, $color in $label-palette {
         &.label--#{$name} {
             background: $color;
         }
     }
+
     &.label--hollow {
         @include label-hollow-style;
+
         @each $name, $color in $label-palette {
             &.label--#{$name} {
                 @include label-hollow-style($color);
             }
         }
     }
+
     &.label--translucent {
         @include label-translucent-style;
+
         @each $name, $color in $label-palette {
             &.label--#{$name} {
                 @include label-translucent-style($color);
@@ -104,18 +112,21 @@ $font-size__label--large: 1.2rem;
             }
         }
     }
-    &--annotation {
-        background-color: $annotation-color;
-        color: $grayMedium;
-    }
-    &--comment {
-        background-color: $comment-color;
-        color: $grayMedium;
-    }
-    &--no-transform {
-        text-transform: none;
-        letter-spacing: 0.04em;
-    }
+}
+
+.label--annotation {
+    background-color: $annotation-color;
+    color: $grayMedium;
+}
+
+.label--comment {
+    background-color: $comment-color;
+    color: $grayMedium;
+}
+
+.label--no-transform {
+    text-transform: none;
+    letter-spacing: 0.04em;
 }
 
 // link label
@@ -144,6 +155,7 @@ a.label {
         font-variant: normal;
         text-transform: none;
     }
+
     &:hover, &:focus {
         box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
     }
@@ -153,6 +165,7 @@ a.label {
     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

@@ -13,6 +13,7 @@
     pointer-events: none;
     border-radius: var(--b-radius--medium);
 }
+
 .sd-loading-overlay--plain {
     position: absolute;
     top: 0;
@@ -25,4 +26,4 @@
     justify-content: center;
     background-color: var(--sd-colour-overlay-actioning);
     pointer-events: none;
-}
+}