superdesk-ui-framework 3.0.42 → 3.0.43

package/app/styles/components/_sd-circular-progress.scss

@@ -1,6 +1,5 @@
 @import '../variables/_colors.scss';
 
-
 // extra small
 $circular-progress-size-xs: 20px;
 $circular-progress-stroke-xs: 2;
@@ -21,10 +20,10 @@ $circular-progress-stroke-l: 4;
 $circular-progress-size-xl: 102px;
 $circular-progress-stroke-xl: 6;
 
-
 .progress-bar-container {
     display: inline-block;
     position: relative;
+
     .progress-text {
         -moz-transform: translate(-50%, -50%);
         -ms-transform: translate(-50%, -50%);
@@ -51,15 +50,18 @@ $circular-progress-stroke-xl: 6;
     height: 20px;
     transform: rotate(-90deg);
     display: block;
+
     circle {
         stroke: rgba(123, 123, 123, 0.4);
         stroke-width: 2;
         fill: transparent;
     }
+
     .progressbar {
         stroke: $green;
         fill: transparent;
     }
+
     .error & {
         .progressbar {
             stroke: transparent !important;
@@ -79,6 +81,7 @@ $circular-progress-stroke-xl: 6;
     box-shadow: inset 0 0 0 0 currentColor;
     transition: box-shadow 0.3s ease-in-out;
     z-index: 2;
+
     i {
         color: $white;
         text-align: center;
@@ -89,16 +92,20 @@ $circular-progress-stroke-xl: 6;
         transition: all .14s ease-in;
         transition-delay: .2s;
     }
+
     &.progress-done--completed {
         box-shadow: inset 0 0 0 50px currentColor;
+
         i {
             transform: scale(1);
             opacity: 1; 
         }
     }
+
     &.progress-done--error {
         color: $red;
         box-shadow: inset 0 0 0 50px currentColor;
+
         i {
             transform: scale(1);
             opacity: 1; 
@@ -106,102 +113,125 @@ $circular-progress-stroke-xl: 6;
     }
 }
 
-.sd-circular-progress {
-    &--xs {
-        .progress-svg {
-            width: $circular-progress-size-xs;
-            height: $circular-progress-size-xs;
-            circle {
-                stroke-width: $circular-progress-stroke-xs;
-            }
+.sd-circular-progress--xs {
+    .progress-svg {
+        width: $circular-progress-size-xs;
+        height: $circular-progress-size-xs;
+
+        circle {
+            stroke-width: $circular-progress-stroke-xs;
         }
-        .progress-text {
-            display: none;
+    }
+
+    .progress-text {
+        display: none;
+    }
+
+    .progress-done {
+        margin: $circular-progress-stroke-xs - 1px;
+
+        i {
+            transition-duration: .12s;
         }
-        .progress-done {
-            margin: $circular-progress-stroke-xs - 1px;
+
+        &.progress-done--completed, &.progress-done--error {
+            box-shadow: inset 0 0 0 10px currentColor;
+
             i {
-                transition-duration: .12s;
-            }
-            &.progress-done--completed, &.progress-done--error {
-                box-shadow: inset 0 0 0 10px currentColor;
-                i {
-                  transform: scale(0.8);  
-                }
+              transform: scale(0.8);  
             }
         }
     }
-    &--s {
-        .progress-svg {
-            width: $circular-progress-size-s;
-            height: $circular-progress-size-s;
-            circle {
-                stroke-width: $circular-progress-stroke-s;
-            }
+}
+
+.sd-circular-progress--s {
+    .progress-svg {
+        width: $circular-progress-size-s;
+        height: $circular-progress-size-s;
+
+        circle {
+            stroke-width: $circular-progress-stroke-s;
         }
-        .progress-text {
-            display: none;
+    }
+
+    .progress-text {
+        display: none;
+    }
+
+    .progress-done {
+        margin: $circular-progress-stroke-s - 1px;
+
+        i {
+            transition-duration: .12s;
         }
-        .progress-done {
-            margin: $circular-progress-stroke-s - 1px;
-            i {
-                transition-duration: .12s;
-            }
-            &.progress-done--completed, &.progress-done--error {
-                box-shadow: inset 0 0 0 16px currentColor;
-            }
+
+        &.progress-done--completed, &.progress-done--error {
+            box-shadow: inset 0 0 0 16px currentColor;
         }
     }
-    &--m {
-        .progress-svg {
-            width: $circular-progress-size-m;
-            height: $circular-progress-size-m;
-            circle {
-                stroke-width: $circular-progress-stroke-m;
-            }
+}
+
+.sd-circular-progress--m {
+    .progress-svg {
+        width: $circular-progress-size-m;
+        height: $circular-progress-size-m;
+
+        circle {
+            stroke-width: $circular-progress-stroke-m;
         }
-        .progress-done {
-            margin: $circular-progress-stroke-m - 1px;
-            &.progress-done--completed, &.progress-done--error {
-                box-shadow: inset 0 0 0 26px currentColor;
-                i {
-                    transform: scale(1.4);
-                }
+    }
+
+    .progress-done {
+        margin: $circular-progress-stroke-m - 1px;
+
+        &.progress-done--completed, &.progress-done--error {
+            box-shadow: inset 0 0 0 26px currentColor;
+
+            i {
+                transform: scale(1.4);
             }
         }
     }
-    &--l {
-        .progress-svg {
-            width: $circular-progress-size-l;
-            height: $circular-progress-size-l;
-            circle {
-                stroke-width: $circular-progress-stroke-l;
-            }
+}
+
+.sd-circular-progress--l {
+    .progress-svg {
+        width: $circular-progress-size-l;
+        height: $circular-progress-size-l;
+
+        circle {
+            stroke-width: $circular-progress-stroke-l;
         }
-        .progress-done {
-            margin: $circular-progress-stroke-l - 1px;
-            &.progress-done--completed, &.progress-done--error {
-                i {
-                    transform: scale(2);
-                }
-                
+    }
+
+    .progress-done {
+        margin: $circular-progress-stroke-l - 1px;
+
+        &.progress-done--completed, &.progress-done--error {
+            i {
+                transform: scale(2);
             }
+            
         }
     }
-    &--xl {
-        .progress-svg {
-            width: $circular-progress-size-xl;
-            height: $circular-progress-size-xl;
-            circle {
-                stroke-width: $circular-progress-stroke-xl;
-            }
+}
+
+.sd-circular-progress--xl {
+    .progress-svg {
+        width: $circular-progress-size-xl;
+        height: $circular-progress-size-xl;
+
+        circle {
+            stroke-width: $circular-progress-stroke-xl;
         }
-        .progress-done {
-            margin: $circular-progress-stroke-xl - 1px;
-            &.progress-done--completed, &.progress-done--error  {
-                i {
-                    transform: scale(2.4);
-                }
+    }
+
+    .progress-done {
+        margin: $circular-progress-stroke-xl - 1px;
+        
+        &.progress-done--completed, &.progress-done--error  {
+            i {
+                transform: scale(2.4);
             }
         }
     }

package/app/styles/components/_sd-collapse-box.scss

@@ -1,5 +1,3 @@
-
-
 .sd-collapse-box {
     display: flex;
     flex-direction: column;
@@ -7,6 +5,7 @@
     position: relative;
     margin-bottom: 1rem;
     border: 1px solid var(--sd-colour--shadow-line--m);
+
     .sd-collapse-box__header {
         display: block;
         flex-grow: 0;
@@ -14,23 +13,18 @@
         min-height: 3.8rem;
         animation: fadeIn 0.3s ease-in 0s 1;    
     }
+
     .sd-collapse-box__tools {
         position: absolute;
         right: 1rem;
         top: 0.8rem;
         z-index: 2;
         color: var(--color-icon-default);
-        &--flex {
-            position: relative;
-            right: 0;
-            top: 0;
-            display: flex;
-            flex-direction: row;
-            margin: -1.4rem -1rem;
-        }
+
         .sd-collapse-box__collapse-btn {
             flex-grow: 1;
             color: var(--color-icon-default);
+
             &:hover {
                 .icn-btn {
                     background-color: hsla(214, 13%, 60%, 0.25);
@@ -38,6 +32,7 @@
                     opacity: 1;
                 }
             }
+
             &:active {
                 .icn-btn {
                     background-color: hsla(214, 13%, 70%, 0.25);
@@ -48,49 +43,64 @@
         }
     }
 
+    .sd-collapse-box__tools--flex {
+        position: relative;
+        right: 0;
+        top: 0;
+        display: flex;
+        flex-direction: row;
+        margin: -1.4rem -1rem;
+    }
+
     .sd-collapse-box__content-wraper {
         flex-grow: 1;
         position: relative;
         transition: all ease-in-out .4s;
         max-height: 0;
     }
+
     .sd-collapse-box__content {
         padding: 2rem;
         display: none;
         animation: fadeIn 0.3s ease-in 0s 1;
+    }
 
-        &--border-locked {
-            border-left: 4px solid $red;
-        }
-        &--border-success {
-            border-left: 4px solid $green;
-        }
+    .sd-collapse-box__content--border-locked {
+        border-left: 4px solid $red;
+    }
+
+    .sd-collapse-box__content--border-success {
+        border-left: 4px solid $green;
     }
+
     .sd-collapse-box__content-block { // place inside .sd-collapse-box__content
         padding: 1rem;
         margin: 0 -2rem 3rem -2rem;
-        &--top {
-            margin-top: 2.2rem;
-        }
     }
 
-    &--open {
-        .sd-collapse-box__content-wraper {
-            max-height: 80rem;
-        }
-        .sd-collapse-box__content {
-            display: block;
-            animation: fadeIn 0.3s ease-in 0s 1;
-        }
-        .sd-collapse-box__header {
-            display: none;
-            animation: fadeIn 0.3s ease-in 0s 1;    
-        }
+    .sd-collapse-box__content-block--top {
+        margin-top: 2.2rem;
     }
-    &--margin-small {
-        margin-bottom: 0.5rem;
+}
+
+.sd-collapse-box--open {
+    .sd-collapse-box__content-wraper {
+        max-height: 80rem;
     }
 
+    .sd-collapse-box__content {
+        display: block;
+        animation: fadeIn 0.3s ease-in 0s 1;
+    }
+
+    .sd-collapse-box__header {
+        display: none;
+        animation: fadeIn 0.3s ease-in 0s 1;    
+    }
+}
+
+.sd-collapse-box--margin-small {
+    margin-bottom: 0.5rem;
 }
 
 .sd-collapse-box__content, .sd-collapse-box__content-block {
@@ -108,6 +118,7 @@
     overflow: hidden;
     border-radius: $border-radius__base--x-small $border-radius__base--x-small 0 0;
 }
+
 .sd-collapse-box__sliding-toolbar {
     position: absolute;
     display: flex;
@@ -122,6 +133,7 @@
     animation: dropOut2 0.3s cubic-bezier(0.695, 0.105, 0.285, 1.275) 1;
     background-color: var(--sd-colour-bg__sliding-toolbar);
     box-shadow: var(--sd-shadow__sliding-toolbar);
+    
     .sliding-toolbar__inner {
         flex-grow: 1;
         display: flex;

package/app/styles/components/_sd-comment-box.scss

@@ -9,16 +9,19 @@
     height: 2.8rem;
     resize: none;
 }
+
 .comment-box__reply-toolbar {
     display: none;
     padding-top: 1rem;
-    &--active {
-        display: flex;
-        justify-content: flex-end;
-        align-items: center;
-        gap: var(--gap--small);
-    }
 }
+
+.comment-box__reply-toolbar--active {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    gap: var(--gap--small);
+}
+
 .comment-box__button-toolbar {
     margin-top: 1.2rem;
     display: flex;
@@ -26,10 +29,12 @@
     align-items: center;
     justify-content: flex-start;
     gap: var(--gap--small);
-    &--right {
-        justify-content: flex-end;
-    }
-    &--small {
-        margin-top: 0.6rem;
-    }
+}
+
+.comment-box__button-toolbar--right {
+    justify-content: flex-end;
+}
+
+.comment-box__button-toolbar--small {
+    margin-top: 0.6rem;
 }

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

@@ -14,35 +14,43 @@ $iconSize-small: 2.4rem;
     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__drop-target--height-l {
+    min-height: var(--width__container--xx-small);
+}
+
 .sd-dropzone__target-border {
     position: absolute;
     inset: 2px;
@@ -51,6 +59,7 @@ $iconSize-small: 2.4rem;
     transition: all 0.3s ease;
     z-index: 0;
 }
+
 .sd-dropzone__icon {
     width: 5.6rem;
     height: 5.6rem;
@@ -59,6 +68,7 @@ $iconSize-small: 2.4rem;
     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;
@@ -68,22 +78,26 @@ $iconSize-small: 2.4rem;
         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__icon--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;
@@ -93,6 +107,7 @@ $iconSize-small: 2.4rem;
     font-family: $baseFontFamilySerif;
     color: var(--color-text-light);
 }
+
 .sd-dropzone__description {
     opacity: 0.7;
     text-align: center;
@@ -103,12 +118,14 @@ $iconSize-small: 2.4rem;
     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-editor-popup.scss

@@ -3,16 +3,19 @@ $editor-popup-padding: 1.6rem;
 .editor-popup {
     display: none;
     position: fixed;
-    &--open {
-        display: inline-block;
-        z-index: 1040; // higher than top/bottom bars, lower than modals
-    }
-    &--annotation {
-        border-top: 3px solid $annotation-color;
-    }
-    &--comment {
-        border-top: 3px solid $comment-color;
-    }
+}
+
+.editor-popup--open {
+    display: inline-block;
+    z-index: 1040; // higher than top/bottom bars, lower than modals
+}
+
+.editor-popup--annotation {
+    border-top: 3px solid $annotation-color;
+}
+
+.editor-popup--comment {
+    border-top: 3px solid $comment-color;
 }
 
 .editor-popup__main {
@@ -20,6 +23,7 @@ $editor-popup-padding: 1.6rem;
     color: var(--color-text);
     width: 32rem;
     max-height: 100%;
+
     &.editor-popup__main--floating {
         background-color: var(--color-dropdown-menu-Bg);
         z-index: 2;
@@ -37,44 +41,54 @@ $editor-popup-padding: 1.6rem;
     padding: $editor-popup-padding;
     padding-bottom: 1rem;
 }
+
 .editor-popup__author-name {
+    @include text-overflow;
     display: block;
     margin: 0 0 0.2rem;
     font-weight: 500;
     line-height: 100%;
-    @include text-overflow;
 }
+
 .editor-popup__time {
     font-size: 1.1rem;
     font-weight: 400;
 }
+
 .editor-popup__header-text {
     flex-grow: 1;
     flex-shrink: 1;
     overflow: hidden;
 }
+
 .editor-popup__header-tools {
     margin:  -2rem -1rem 0 0.4rem;
+
     .icn-btn {
       opacity: 0.2;  
     }
+
     &:hover {
         .icn-btn {
             opacity: 1;  
           }
     }
 }
+
 // content
 .editor-popup__content-block {
     padding: $editor-popup-padding;
     position: relative;
-    &--scrollable {
-        max-height: 20rem;
-    }
+
     p + p {
         margin-top: 1rem;
     }
 }
+
+.editor-popup__content-block--scrollable {
+    max-height: 20rem;
+}
+
 .editor-popup__info-bar {
     margin-bottom: 0.4rem;
 }
@@ -86,4 +100,4 @@ $editor-popup-padding: 1.6rem;
 .editor-popup__secondary-content {
     background-color: hsla(214, 13%, 48%, 0.05);
     border-top: 1px solid var(--sd-colour-line--light);
-}
+}