superdesk-ui-framework 3.0.62 → 3.0.64

package/app/styles/components/_list-item.scss

@@ -40,10 +40,10 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
         &::before {
             content: '';
             position: absolute;
-            top: 0;
-            right: 0;
-            bottom: 0;
-            left: 0;
+            inset-block-start: 0;
+            inset-inline-end: 0;
+            inset-block-end: 0;
+            inset-inline-start: 0;
             z-index: 3;
             background-image: url(../img/three-dots.svg);
             background-repeat: no-repeat;
@@ -64,9 +64,9 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
         &:after {
             content: "";
             position: absolute;
-            top: 0;
-            bottom: 0;
-            right: 20%;
+            inset-block-start: 0;
+            inset-block-end: 0;
+            inset-inline-end: 20%;
             width: 10rem;
             background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMTYiIGhlaWdodD0iMTE2IiB2aWV3Qm94PSIwIDAgMTE2IDExNiI+PHBhdGggZmlsbD0iIzdCN0I3QiIgZD0iTTU4IDBDMjYgMCAwIDI2IDAgNThzMjYgNTggNTggNTggNTgtMjYgNTgtNThTOTAgMCA1OCAwem0zNy4xIDM4LjhMNDYuMyA4Ny42Yy0uNS41LTEuMi41LTEuNyAwTDE4LjkgNjEuOGMtLjUtLjUtLjUtMS4yIDAtMS43bDguMi04LjJjLjUtLjUgMS4yLS41IDEuNyAwTDQ1IDY4LjFjLjMuMy44LjMgMS4xIDBsMzkuMi0zOS4yYy41LS41IDEuMi0uNSAxLjcgMGw4LjIgOC4yYy40LjUuNCAxLjItLjEgMS43eiIvPjwvc3ZnPg==);
             background-repeat:  no-repeat;
@@ -151,8 +151,8 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
 .sd-list-item__dot {
     content: '';
     position: absolute;
-    top: 6px;
-    left: 6px;
+    inset-block-start: 6px;
+    inset-inline-start: 6px;
     width: 6px;
     height: 6px;
     border-radius: $border-radius__base--full;
@@ -179,7 +179,7 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
     display: flex;
     flex-direction: column;
     justify-content: center;
-    border-right: 1px solid $sd-ListItem-column-border;
+    border-inline-end: 1px solid $sd-ListItem-column-border;
     padding: 0 $sd-base-increment * 1.5;
     overflow: hidden;
     flex-shrink: 0;
@@ -198,7 +198,7 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
 }
 
 .sd-list-item__column--no-right-padding {
-    padding-right: 0;
+    padding-inline-end: 0;
 }
 
 .sd-list-item__column--grow {
@@ -215,17 +215,17 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
 
     .sd-list-item__item-type {
         opacity: 1;
-        margin-top: -0.2rem;
+        margin-block-start: -0.2rem;
         transition: opacity 0.1s linear;
     }
 
     .sd-list-item__checkbox-container {
         position: absolute;
         padding: 0 0.8rem;
-        top: 0;
-        bottom:0;
-        left:0;
-        right:0;
+        inset-block-start: 0;
+        inset-block-end:0;
+        inset-inline-start:0;
+        inset-inline-end:0;
         display: flex;
         flex-direction: column;
         justify-content: center;
@@ -450,13 +450,13 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
     }
 
     .sd-list-item__location {
-        padding-left: 1.6rem;
+        padding-inline-start: 1.6rem;
         position: relative;
 
         &::before {
             position: absolute;
-            left: 0;
-            top:0.1rem;
+            inset-inline-start: 0;
+            inset-block-start:0.1rem;
             font-family: 'sd_icons';
             content: "\e602";
             display: inline-block;
@@ -551,7 +551,7 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
 .sd-list-item-nested {
     display: flex;
     flex-direction: column;
-    //margin-top: .8rem;
+    //margin-block-start: .8rem;
 }
 
 .sd-list-item-nested__childs {
@@ -562,8 +562,8 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
     margin-inline-start: 1rem;
 
     .sd-list-item {
-        margin-top: 0;
-        border-top: 1px solid var(--sd-colour-line--x-light);
+        margin-block-start: 0;
+        border-block-start: 1px solid var(--sd-colour-line--x-light);
     }
 }
 
@@ -577,7 +577,7 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
         transition: all ease-in 0.2s;
         max-height: 0;
         opacity: 0;
-        margin-bottom: 0;
+        margin-block-end: 0;
         overflow: hidden;
     }
 }
@@ -597,13 +597,13 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
 
     .sd-list-item {
         + .sd-list-item {
-            border-top: 1px solid var(--sd-colour-line--x-light);
+            border-block-start: 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);
+            border-block-start: 1px solid var(--sd-colour-line--x-light);
         }
     }
 }
@@ -615,7 +615,7 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
         border-radius: var(--b-radius--small);
 
         + .sd-list-item {
-            border-top: none;
+            border-block-start: none;
         }
 
         .sd-list-item__border {
@@ -625,14 +625,14 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
 
     .sd-list-item-nested {
         + .sd-list-item {
-            border-top: none;
+            border-block-start: none;
         }
     }
 
     .sd-list-item-nested__childs {
         .sd-list-item {
-            margin-top: 0;
-            border-top: 1px solid var(--sd-colour-line--x-light);
+            margin-block-start: 0;
+            border-block-start: 1px solid var(--sd-colour-line--x-light);
         }
     }
 }
@@ -644,7 +644,7 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
 .sd-list-header {
     display: flex;
     height: 2.4rem;
-    margin-bottom: $sd-base-increment;
+    margin-block-end: $sd-base-increment;
     align-items: center;
 
     .sd-list-header__name {
@@ -662,7 +662,7 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
 
             &:hover {
                 color: var(--sd-colour-interactive--darken-20);
-                border-bottom: 1px dotted currentColor;
+                border-block-end: 1px dotted currentColor;
             }
         }
     }
@@ -680,6 +680,6 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
 }
 
 .sd-list-header--m-top {
-    margin-top: 2.4rem;
+    margin-block-start: 2.4rem;
 }
 

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

@@ -30,8 +30,8 @@ $circular-progress-stroke-xl: 6;
         -webkit-transform: translate(-50%, -50%);
         transform: translate(-50%, -50%);
         position: absolute;
-        top: 50%;
-        left: 50%;
+        inset-block-start: 50%;
+        inset-inline-start: 50%;
         font-size: 1.8rem;
         font-family: arial;
         color: #666;
@@ -72,10 +72,10 @@ $circular-progress-stroke-xl: 6;
 .progress-done {
     display: flex;
     position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+    inset-block-start: 0;
+    inset-inline-end: 0;
+    inset-block-end: 0;
+    inset-inline-start: 0;
     color: $green;
     border-radius: $border-radius__base--full;
     box-shadow: inset 0 0 0 0 currentColor;

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

@@ -3,7 +3,7 @@
     flex-direction: column;
     border-radius: $border-radius__base--small;
     position: relative;
-    margin-bottom: 1rem;
+    margin-block-end: 1rem;
     border: 1px solid var(--sd-colour--shadow-line--m);
 
     .sd-collapse-box__header {
@@ -16,8 +16,8 @@
 
     .sd-collapse-box__tools {
         position: absolute;
-        right: 1rem;
-        top: 0.8rem;
+        inset-inline-end: 1rem;
+        inset-block-start: 0.8rem;
         z-index: 2;
         color: var(--color-icon-default);
 
@@ -45,8 +45,8 @@
 
     .sd-collapse-box__tools--flex {
         position: relative;
-        right: 0;
-        top: 0;
+        inset-inline-end: 0;
+        inset-block-start: 0;
         display: flex;
         flex-direction: row;
         margin: -1.4rem -1rem;
@@ -66,11 +66,11 @@
     }
 
     .sd-collapse-box__content--border-locked {
-        border-left: 4px solid $red;
+        border-inline-start: 4px solid $red;
     }
 
     .sd-collapse-box__content--border-success {
-        border-left: 4px solid $green;
+        border-inline-start: 4px solid $green;
     }
 
     .sd-collapse-box__content-block { // place inside .sd-collapse-box__content
@@ -79,7 +79,7 @@
     }
 
     .sd-collapse-box__content-block--top {
-        margin-top: 2.2rem;
+        margin-block-start: 2.2rem;
     }
 }
 
@@ -100,20 +100,20 @@
 }
 
 .sd-collapse-box--margin-small {
-    margin-bottom: 0.5rem;
+    margin-block-end: 0.5rem;
 }
 
 .sd-collapse-box__content, .sd-collapse-box__content-block {
     .form__row:last-of-type {
-        padding-bottom: 0;
+        padding-block-end: 0;
     }
 }
 
 .sd-collapse-box__sliding-toolbar-wrapper {
     position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    inset-inline-end: 0;
     height: 4.6rem;
     overflow: hidden;
     border-radius: $border-radius__base--x-small $border-radius__base--x-small 0 0;
@@ -123,10 +123,10 @@
     position: absolute;
     display: flex;
     align-items: center;
-    top: 0;
+    inset-block-start: 0;
     height: 4.2rem;
-    left: 0;
-    right: 0;
+    inset-inline-start: 0;
+    inset-inline-end: 0;
     z-index: 3;
     padding: 0 16px;
     color: var(--color-text);

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

@@ -1,5 +1,5 @@
 .comment-box__reply-item {
-    border-bottom: 1px solid var(--sd-colour-line--light);
+    border-block-end: 1px solid var(--sd-colour-line--light);
 }
 
 .comment-box__input {
@@ -12,7 +12,7 @@
 
 .comment-box__reply-toolbar {
     display: none;
-    padding-top: 1rem;
+    padding-block-start: 1rem;
 }
 
 .comment-box__reply-toolbar--active {
@@ -23,7 +23,7 @@
 }
 
 .comment-box__button-toolbar {
-    margin-top: 1.2rem;
+    margin-block-start: 1.2rem;
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -36,5 +36,5 @@
 }
 
 .comment-box__button-toolbar--small {
-    margin-top: 0.6rem;
+    margin-block-start: 0.6rem;
 }

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

@@ -71,7 +71,7 @@ $iconSize-small: 2.4rem;
 
     [class^="big-icon--"],
     [class*=" big-icon--"] {
-        margin-top: -4px;
+        margin-block-start: -4px;
         width: $iconSize-large;
         height: $iconSize-large;
         font-size: $iconSize-large;

package/app/styles/components/_sd-editor-popup.scss

@@ -11,11 +11,11 @@ $editor-popup-padding: 1.6rem;
 }
 
 .editor-popup--annotation {
-    border-top: 3px solid $annotation-color;
+    border-block-start: 3px solid $annotation-color;
 }
 
 .editor-popup--comment {
-    border-top: 3px solid $comment-color;
+    border-block-start: 3px solid $comment-color;
 }
 
 .editor-popup__main {
@@ -39,7 +39,7 @@ $editor-popup-padding: 1.6rem;
     align-items: center;
     position: relative;
     padding: $editor-popup-padding;
-    padding-bottom: 1rem;
+    padding-block-end: 1rem;
 }
 
 .editor-popup__author-name {
@@ -81,7 +81,7 @@ $editor-popup-padding: 1.6rem;
     position: relative;
 
     p + p {
-        margin-top: 1rem;
+        margin-block-start: 1rem;
     }
 }
 
@@ -90,14 +90,14 @@ $editor-popup-padding: 1.6rem;
 }
 
 .editor-popup__info-bar {
-    margin-bottom: 0.4rem;
+    margin-block-end: 0.4rem;
 }
 
 .editor-popup__header + .editor-popup__content-block {
-    padding-top: 0;
+    padding-block-start: 0;
 }
 
 .editor-popup__secondary-content {
     background-color: hsla(214, 13%, 48%, 0.05);
-    border-top: 1px solid var(--sd-colour-line--light);
+    border-block-start: 1px solid var(--sd-colour-line--light);
 }

package/app/styles/components/_sd-grid-item.scss

@@ -25,10 +25,10 @@ $sd-grid-item-shadow-activated: 0 0 0 2px var(--sd-colour-interactive--alpha-50)
         &::before {
             content: '';
             position: absolute;
-            top: 0;
-            right: 0;
-            bottom: 0;
-            left: 0;
+            inset-block-start: 0;
+            inset-inline-end: 0;
+            inset-block-end: 0;
+            inset-inline-start: 0;
             z-index: 3;
             background-image: url(../img/three-dots.svg);
             background-repeat: no-repeat;
@@ -47,8 +47,8 @@ $sd-grid-item-shadow-activated: 0 0 0 2px var(--sd-colour-interactive--alpha-50)
 
     .sd-grid-item__actions--top {
         position: absolute;
-        top: 0.8rem;
-        right: 0.5rem;
+        inset-block-start: 0.8rem;
+        inset-inline-end: 0.5rem;
         z-index: 2;
     }
 
@@ -345,9 +345,9 @@ $sd-grid-item-shadow-activated: 0 0 0 2px var(--sd-colour-interactive--alpha-50)
     .sd-grid-item__progress {
         z-index: 2;
         position: absolute;
-        bottom: 0;
-        left: 0;
-        right: 0;
+        inset-block-end: 0;
+        inset-inline-start: 0;
+        inset-inline-end: 0;
         height: 0.4rem;
         background-color: rgba(0, 0, 0, 0.4);
     }
@@ -357,8 +357,8 @@ $sd-grid-item-shadow-activated: 0 0 0 2px var(--sd-colour-interactive--alpha-50)
         position: absolute;
         height: 5.6rem;
         width: 5.6rem;
-        top: 50%;
-        margin-top: -2.8rem;
+        inset-block-start: 50%;
+        margin-block-start: -2.8rem;
         border-radius: $border-radius__base--full;
         background-color: rgba(0, 0, 0, 0.3);
         padding: 0.2rem;
@@ -369,7 +369,7 @@ $sd-grid-item-shadow-activated: 0 0 0 2px var(--sd-colour-interactive--alpha-50)
         height: 0.4rem;
         width: 0%;
         background-color: $green;
-        top: 50
+        inset-block-start: 50
     }
 
     .sd-grid-item--element-grow {
@@ -425,7 +425,7 @@ $sd-grid-item-shadow-activated: 0 0 0 2px var(--sd-colour-interactive--alpha-50)
 
     .sd-grid-item__footer {
         padding: 0.4rem 0.2rem;
-        border-top: 1px solid var(--sd-colour-line--x-light);
+        border-block-start: 1px solid var(--sd-colour-line--x-light);
         display: flex;
         flex-direction: row;
         align-items: center;
@@ -503,10 +503,10 @@ $sd-grid-item-shadow-activated: 0 0 0 2px var(--sd-colour-interactive--alpha-50)
 
     .sd-grid-item__full-click {
         position: absolute;
-        top: 0;
-        bottom: 0;
-        right: 0;
-        left: 0;
+        inset-block-start: 0;
+        inset-block-end: 0;
+        inset-inline-end: 0;
+        inset-inline-start: 0;
         z-index: 2;
     }
 
@@ -580,7 +580,7 @@ $sd-grid-item-shadow-activated: 0 0 0 2px var(--sd-colour-interactive--alpha-50)
             font-family: 'sd_icons';
             content: "\e605";
             position: absolute;
-            top: 50%;
+            inset-block-start: 50%;
             margin: auto;
             margin-block-start: -2.4rem;
             font-size: 4.8rem;
@@ -684,7 +684,7 @@ $sd-grid-item-shadow-activated: 0 0 0 2px var(--sd-colour-interactive--alpha-50)
             background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMTYiIGhlaWdodD0iMTE2IiB2aWV3Qm94PSIwIDAgMTE2IDExNiI+PHBhdGggZmlsbD0iIzdCN0I3QiIgZD0iTTU4IDBDMjYgMCAwIDI2IDAgNThzMjYgNTggNTggNTggNTgtMjYgNTgtNThTOTAgMCA1OCAwem0zNy4xIDM4LjhMNDYuMyA4Ny42Yy0uNS41LTEuMi41LTEuNyAwTDE4LjkgNjEuOGMtLjUtLjUtLjUtMS4yIDAtMS43bDguMi04LjJjLjUtLjUgMS4yLS41IDEuNyAwTDQ1IDY4LjFjLjMuMy44LjMgMS4xIDBsMzkuMi0zOS4yYy41LS41IDEuMi0uNSAxLjcgMGw4LjIgOC4yYy40LjUuNCAxLjItLjEgMS43eiIvPjwvc3ZnPg==) no-repeat;
             background-size: 9.6rem;
             background-position: 0 0;
-            bottom: 0;
+            inset-block-end: 0;
             inset-inline-end: 0rem;
             opacity: 0.14;
         }
@@ -805,8 +805,8 @@ $sd-grid-item-shadow-activated: 0 0 0 2px var(--sd-colour-interactive--alpha-50)
 
 .sd-grid-item-header {
     padding: 4px 0;
-    margin-bottom: 6px;
-    border-bottom: 5px solid var(--sd-colour-neutral);
+    margin-block-end: 6px;
+    border-block-end: 5px solid var(--sd-colour-neutral);
     display: flex;
 }
 
@@ -826,7 +826,7 @@ $sd-grid-item-shadow-activated: 0 0 0 2px var(--sd-colour-interactive--alpha-50)
         color: inherit;
 
         span {
-            border-bottom: 1px dotted var(--sd-colour-interactive);
+            border-block-end: 1px dotted var(--sd-colour-interactive);
         }
 
         [class^="icon-"],

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

@@ -4,10 +4,10 @@
     content: '';
     display: block;
     position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+    inset-block-start: 0;
+    inset-inline-end: 0;
+    inset-block-end: 0;
+    inset-inline-start: 0;
     z-index: 99999;
     background-image: url(../img/three-dots.svg);
     background-repeat: no-repeat;

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

@@ -81,7 +81,7 @@
     height: 3.6rem;
     line-height: 3.6rem;
     position: absolute;
-    top: calc(50% - 6.5rem);
+    inset-block-start: calc(50% - 6.5rem);
     width: 3.6rem;
     box-shadow: 0 0 6px rgba(0,0,0,.25), 0 0 1px 1px rgba(0,0,0,.12);
     color: $sd-text;
@@ -103,7 +103,7 @@
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
         position: absolute;
-        top:0;
+        inset-block-start:0;
         text-align: center;
         z-index: 2;
         color: inherit;
@@ -119,7 +119,7 @@
 }
 
 .sd-media-carousel__nav-button--next {
-    right: -18px;
+    inset-inline-end: -18px;
     color: inherit;
 
     &::after {
@@ -128,7 +128,7 @@
 }
 
 .sd-media-carousel__nav-button--prev {
-    left: -18px;
+    inset-inline-start: -18px;
     color: inherit;
 
     &::after {
@@ -137,7 +137,7 @@
 }
 
 .sd-media-carousel__nav-button--next-inner {
-    right: 0;
+    inset-inline-end: 0;
     color: $sd-text;
     border-radius: $border-radius__base--full 0 0 $border-radius__base--full;
     box-shadow: none;
@@ -148,7 +148,7 @@
 }
 
 .sd-media-carousel__nav-button--prev-inner {
-    left: 0;
+    inset-inline-start: 0;
     color: $sd-text;
     border-radius: 0 $border-radius__base--full $border-radius__base--full 0;
     box-shadow: none;
@@ -202,7 +202,7 @@
 }
 
 .sd-media-carousel__page-indication-bar {
-    bottom: -3.6rem;
+    inset-block-end: -3.6rem;
     height: 2.6rem;
     position: absolute;
     text-align: center;

package/app/styles/components/_sd-notification-panel.scss

@@ -25,7 +25,7 @@
     grid-row: 1 / 2;
     grid-column: 1 / 2;
     height: $nav-height;
-    border-bottom: 1px solid var(--sd-colour-line--light);
+    border-block-end: 1px solid var(--sd-colour-line--light);
     padding-inline: $sd-base-increment * 2 $sd-base-increment;
     display: flex;
     flex-direction: row;