superdesk-ui-framework 3.0.62 → 3.0.64

package/app/styles/components/_sd-photo-preview.scss

@@ -24,15 +24,15 @@ $photo-nav-transition: all 0.2s ease-out;
     }
 
     .sd-photo-preview__thumb-strip--with-controls {
-        padding-top: 4.8rem;
+        padding-block-start: 4.8rem;
     }
 }
 
 .sd-photo-preview__thumb-controls {
     position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    inset-inline-end: 0;
     min-height: 4.8rem;
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
     z-index: 2;
@@ -55,10 +55,10 @@ $photo-nav-transition: all 0.2s ease-out;
         &::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: 999;
             background-image: url(../img/three-dots.svg);
             background-repeat: no-repeat;
@@ -105,7 +105,7 @@ $photo-nav-transition: all 0.2s ease-out;
             width: auto;
             height: auto;
             max-height: 100vh;
-            margin-top: 2rem;
+            margin-block-start: 2rem;
         }
     } 
 
@@ -191,9 +191,9 @@ $photo-nav-transition: all 0.2s ease-out;
 
     .sd-photo-preview__thumbnail-edit-label {
         position: absolute;
-        top: -2.2rem;
-        left: 0;
-        right: 0;
+        inset-block-start: -2.2rem;
+        inset-inline-start: 0;
+        inset-inline-end: 0;
         height: 2rem;
         text-align: center;
         opacity: 0.5;
@@ -202,10 +202,10 @@ $photo-nav-transition: all 0.2s ease-out;
 
 .image-overlay {
     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;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
@@ -273,7 +273,7 @@ $photo-nav-transition: all 0.2s ease-out;
 }
 
 .image-overlay__button + .image-overlay__button {
-    margin-left: 0.8rem;
+    margin-inline-start: 0.8rem;
 }
 
 .sd-photo-preview__video-frames {
@@ -332,7 +332,7 @@ $photo-nav-transition: all 0.2s ease-out;
     height: 5.6rem;
     line-height: 5.6rem;
     position: absolute;
-    top: calc(50% - 2.8rem);
+    inset-block-start: calc(50% - 2.8rem);
     width: 5.6rem;
     box-shadow: 0 4px 24px rgba(0,0,0,.20), 0 10px 28px rgba(0,0,0,.35);
     color: $white;
@@ -356,8 +356,8 @@ $photo-nav-transition: all 0.2s ease-out;
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
         position: absolute;
-        top:0;
-        left:0;
+        inset-block-start:0;
+        inset-inline-start:0;
         text-align: center;
         z-index: 2;
         color: $white;
@@ -368,8 +368,8 @@ $photo-nav-transition: all 0.2s ease-out;
 
 .sd-photo-preview__slide-in-button {
     position: absolute !important;
-    top: 2.4rem;
-    right: 0;
+    inset-block-start: 2.4rem;
+    inset-inline-end: 0;
     z-index: 2;
     background-color: hsla(0, 0%, 100%, 0.1);
     height:4.8rem;
@@ -406,7 +406,7 @@ $photo-nav-transition: all 0.2s ease-out;
 }
 
 .sd-photo-preview__nav-button--next {
-    right: 0.8rem;
+    inset-inline-end: 0.8rem;
     color: inherit;
 
     &::after {
@@ -414,7 +414,7 @@ $photo-nav-transition: all 0.2s ease-out;
     }
 }
 .sd-photo-preview__nav-button--prev {
-    left: 0.8rem;
+    inset-inline-start: 0.8rem;
     color: inherit;
 
     &::after {
@@ -424,10 +424,10 @@ $photo-nav-transition: all 0.2s ease-out;
 
 .upload__target {
     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: 0;
     border: 2px dashed $sd-colour-interactive;
     background-color: var(--sd-colour-interactive--alpha-10);
@@ -437,8 +437,8 @@ $photo-nav-transition: all 0.2s ease-out;
     margin: 0 auto;
     max-width: 40rem;
     position: relative;
-    top: 50%;
-    margin-top: -10.6rem;
+    inset-block-start: 50%;
+    margin-block-start: -10.6rem;
     z-index: 1;
 }
 
@@ -455,7 +455,7 @@ $photo-nav-transition: all 0.2s ease-out;
     margin: 0 auto;
     opacity: 0.5;
     text-align: center;
-    padding-top: 3rem;
+    padding-block-start: 3rem;
     text-align: center;
     color: var(--color-text-light);
     font-size: 2.4rem;
@@ -473,17 +473,17 @@ $photo-nav-transition: all 0.2s ease-out;
     &::after, &::before {
         content: "___________";
         position: absolute;
-        top: -0.5rem;
+        inset-block-start: -0.5rem;
         color: inherit;
         opacity: 0.25;
     }
     
     &::after { 
-        margin-left: 1.5rem;
+        margin-inline-start: 1.5rem;
     }
     
     &::before {
-        margin-left: -7.8rem;
+        margin-inline-start: -7.8rem;
     }
 }
 .upload__info-button {

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

@@ -19,20 +19,20 @@
 }
 
 .sd-searchbar--border-r {
-    border-right: 1px solid var(--sd-colour-line--x-light);
+    border-inline-end: 1px solid var(--sd-colour-line--x-light);
 }
 
 .sd-searchbar--border-l {
-    border-left: 1px solid var(--sd-colour-line--x-light);
+    border-inline-start: 1px solid var(--sd-colour-line--x-light);
 }
 
 .sd-searchbar--border-l-r {
-    border-right: 1px solid var(--sd-colour-line--x-light);
-    border-left: 1px solid var(--sd-colour-line--x-light);
+    border-inline-end: 1px solid var(--sd-colour-line--x-light);
+    border-inline-start: 1px solid var(--sd-colour-line--x-light);
 }
 
 .sd-searchbar--border-bottom {
-    border-bottom: 1px solid var(--sd-colour-line--light);
+    border-block-end: 1px solid var(--sd-colour-line--light);
 }
 
 .sd-searchbar--small {
@@ -89,7 +89,7 @@
     background-color: transparent;
     border: 0;
     box-shadow: none !important;
-    padding-right: 1rem;
+    padding-inline-end: 1rem;
     height: auto;
 
     &::placeholder {
@@ -132,7 +132,7 @@
 .sd-searchbar--boxed {
     .sd-searchbar__icon {
         width: 4rem;
-        margin-right: 0;
+        margin-inline-end: 0;
     }
 }
 
@@ -225,7 +225,7 @@
     margin: 0.5rem 0;
     letter-spacing: 0.03em;
     display: block;
-    margin-top: 8px;
+    margin-block-start: 8px;
 
     .sd-searchbar__message {
         color: $red;

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

@@ -26,53 +26,53 @@ $toast-sizes: (
     flex-direction: column;
     align-items: center;
     position: fixed;
-    right: 0;
-    left: 0;
+    inset-inline-end: 0;
+    inset-inline-start: 0;
     z-index: $sd-toast-z-index;
     overflow: hidden;
     padding: 0 20px 20px;
     pointer-events: none;
 
     &.sd-toast__container--top {
-        top: $sd-toast-position-top;
-        bottom: auto;
+        inset-block-start: $sd-toast-position-top;
+        inset-block-end: auto;
     }
 
     &.sd-toast__container--top-left {
-        top: $sd-toast-position-top;
-        bottom: auto;
+        inset-block-start: $sd-toast-position-top;
+        inset-block-end: auto;
         align-items: flex-start;
     }
 
     &.sd-toast__container--top-right {
-        top: $sd-toast-position-top;
-        bottom: auto;
+        inset-block-start: $sd-toast-position-top;
+        inset-block-end: auto;
         align-items: flex-end;
     }
 
     &.sd-toast__container--bottom {
         flex-direction: column-reverse;
-        top: auto;
-        bottom: 0;
+        inset-block-start: auto;
+        inset-block-end: 0;
     }
 
     &.sd-toast__container--bottom-left {
         flex-direction: column-reverse;
-        top: auto;
-        bottom: 0;
+        inset-block-start: auto;
+        inset-block-end: 0;
         align-items: flex-start;
     }
 
     &.sd-toast__container--bottom-right {
         flex-direction: column-reverse;
-        top: auto;
-        bottom: 0;
+        inset-block-start: auto;
+        inset-block-end: 0;
         align-items: flex-end;
     }
 }
 
 .sd-toast {
-    @include sd-padding('1-5');
+    padding: var(--space--1-5);
 	display: flex;
 	align-items: flex-start;
 	position: relative!important;
@@ -117,8 +117,8 @@ $toast-sizes: (
                 width: 4px;
                 height: 100%;
                 position: absolute;
-                top: 0px;
-                left: 0px;
+                inset-block-start: 0px;
+                inset-inline-start: 0px;
                 background-color: $color;
             }
 
@@ -173,20 +173,20 @@ $toast-sizes: (
     color: $sd-toast-colour-text;
 
     p + p {
-        margin-top: 0.8rem;
+        margin-block-start: 0.8rem;
     }
 }
 
 .sd-toast__message-header {
     display: flex;
     flex-direction: row;
-    margin-bottom: 0.2rem;
+    margin-block-end: 0.2rem;
     color: $sd-text;
 
     time {
         font-size: 1.2rem;
         color: $sd-toast-colour-text;
-        margin-right: 0.2rem;
+        margin-inline-end: 0.2rem;
     }
 
     .sd-toast__heading {

package/app/styles/components/_subnav.scss

@@ -6,7 +6,7 @@
     display: flex;
     height: $subnav-height;
     background: $subnav-background;
-    border-bottom: 0px;
+    border-block-end: 0px;
     box-shadow: var(--sd-shadow__subnav);
     z-index: 3;
     align-items: center;
@@ -45,9 +45,9 @@
 
 .subnav--absolute {
     position: absolute;
-    top:48px;
-    left:0;
-    right:0;
+    inset-block-start:48px;
+    inset-inline-start:0;
+    inset-inline-end:0;
 }
 
 .subnav + .subnav,
@@ -101,8 +101,8 @@
 .subnav {
     &.subnav--level2 {
         position: absolute;
-        top:0;
-        left: 0;
+        inset-block-start:0;
+        inset-inline-start: 0;
         z-index: 2;
         box-shadow: none;
     }
@@ -240,8 +240,8 @@ $navbutton-focus-box-shadow: inset 0 0 0 1px var(--sd-colour-interactive--alpha-
 
     .badge {
         position: absolute;
-        top: $sd-base-increment / 2;
-        right: $sd-base-increment / 2;
+        inset-block-start: $sd-base-increment / 2;
+        inset-inline-end: $sd-base-increment / 2;
         z-index: 1;
     }
 }
@@ -251,20 +251,20 @@ $navbutton-focus-box-shadow: inset 0 0 0 1px var(--sd-colour-interactive--alpha-
 }
 
 .sd-navbtn--textual {
-    @include sd-padding('1', 'x');
+    padding-inline: var(--space--1);
     width: auto;
 
     .sd-navbtn__text {
-        @include sd-margin('0-5', 'x');
+        margin-inline: var(--space--0-5);
         display: inline-flex;
         font-size: 1.4rem;
         position: relative;
-        margin-right: $sd-base-increment / 2;
-        margin-left: $sd-base-increment;
+        margin-inline-end: $sd-base-increment / 2;
+        margin-inline-start: $sd-base-increment;
     }
 
     i {
-        margin-left: $sd-base-increment / 2;
+        margin-inline-start: $sd-base-increment / 2;
     }
 }
 
@@ -273,7 +273,7 @@ $navbutton-focus-box-shadow: inset 0 0 0 1px var(--sd-colour-interactive--alpha-
         &.sd-navbtn--textual {
             .sd-navbtn__text {
                 color: currentColor;
-                padding-right: 16px;
+                padding-inline-end: 16px;
 
                 &::after {
                     content: '';
@@ -281,14 +281,14 @@ $navbutton-focus-box-shadow: inset 0 0 0 1px var(--sd-colour-interactive--alpha-
                     width: 0;
                     height: 0;
                     position: absolute;
-                    top: calc(50% - 2px);
-                    right: 0;
+                    inset-block-start: calc(50% - 2px);
+                    inset-inline-end: 0;
                     vertical-align: middle;
-                    //margin-top: -2px;
-                    margin-left: 8px;
-                    border-left:  4px solid transparent;
-                    border-right: 4px solid transparent;
-                    border-top:   4px solid currentColor;
+                    //margin-block-start: -2px;
+                    margin-inline-start: 8px;
+                    border-inline-start:  4px solid transparent;
+                    border-inline-end: 4px solid transparent;
+                    border-block-start:   4px solid currentColor;
                     opacity: .75;
                     @include transition(all, 0.1s, ease-in);
                 }
@@ -364,7 +364,7 @@ $navbutton-focus-box-shadow: inset 0 0 0 1px var(--sd-colour-interactive--alpha-
     }
 
     .big-icon--send-to {
-        margin-left: 0.3rem;
+        margin-inline-start: 0.3rem;
     }
 
     [class^="icon-"],
@@ -456,7 +456,7 @@ $navbutton-focus-box-shadow: inset 0 0 0 1px var(--sd-colour-interactive--alpha-
 }
   
 .subnav__stretch-bar {
-    @include sd-margin('1-5', 'x');
+    margin-inline: var(--space--1-5);
     display: flex;
     flex-grow: 1;
     flex-shrink: 1;
@@ -469,7 +469,7 @@ $navbutton-focus-box-shadow: inset 0 0 0 1px var(--sd-colour-interactive--alpha-
 }
 
 .subnav__content-bar {
-    @include sd-margin('1-5', 'x');
+    margin-inline: var(--space--1-5);
     display: flex;
     flex-direction: row;
     flex-grow: 0;
@@ -486,26 +486,26 @@ $navbutton-focus-box-shadow: inset 0 0 0 1px var(--sd-colour-interactive--alpha-
     width: 1px;
     height: $subnav-height;
     flex-grow: 0;
-    border-left: 1px solid rgba(0,0,0,.1);
+    border-inline-start: 1px solid rgba(0,0,0,.1);
     margin: auto 2rem;
 }
 
 .subnav__spacer--dotted {
-    border-left: 1px dotted rgba(0,0,0,.3);
+    border-inline-start: 1px dotted rgba(0,0,0,.3);
     height: $subnav-height / 2;
 }
 
 .subnav__spacer--no-r-margin {
-    margin-right: -0.1rem;
+    margin-inline-end: -0.1rem;
 }
 
 .subnav__spacer--no-l-margin {
-    margin-left: 0;
+    margin-inline-start: 0;
 }
 
 .subnav__spacer--no-margin {
-    margin-left: 0;
-    margin-right: 0; 
+    margin-inline-start: 0;
+    margin-inline-end: 0; 
 }
 
 .subnav__button-stack {
@@ -550,7 +550,7 @@ $navbutton-focus-box-shadow: inset 0 0 0 1px var(--sd-colour-interactive--alpha-
 
 .subnav__button-stack--right {
     text-align: end;
-    padding-right: 2rem;
+    padding-inline-end: 2rem;
 }
 
 .subnav__button-stack--padded {
@@ -628,16 +628,16 @@ $navbutton-focus-box-shadow: inset 0 0 0 1px var(--sd-colour-interactive--alpha-
     }
 
     .subnav__stretch-bar {
-        margin-right: 0;
+        margin-inline-end: 0;
     }
 
     .subnav__spacer {
-        margin-left: 1.2rem;
+        margin-inline-start: 1.2rem;
     }
 
     #planning-dropdown {
         display: none;
-        margin-left: -1.2rem;
+        margin-inline-start: -1.2rem;
     }
 
     .dropdown__toggle {
@@ -645,11 +645,11 @@ $navbutton-focus-box-shadow: inset 0 0 0 1px var(--sd-colour-interactive--alpha-
         position: relative;
         overflow: hidden;
         text-overflow: ellipsis;
-        padding-right: 2.6rem !important;
+        padding-inline-end: 2.6rem !important;
 
         .dropdown__caret {
             position: absolute;
-            top: 50%;
+            inset-block-start: 50%;
             inset-inline-end: 1rem;
         }
     }
@@ -667,12 +667,12 @@ $navbutton-focus-box-shadow: inset 0 0 0 1px var(--sd-colour-interactive--alpha-
 .sd-page-content--slide-in--open {
     .subnav--responsive {
         .sd-check__wrapper + .sd-check__wrapper {
-            margin-left: 0.4rem;
+            margin-inline-start: 0.4rem;
         }
 
         .subnav__stretch-bar {
             margin: 0 1.2rem;
-            margin-right: 0;
+            margin-inline-end: 0;
         }
 
         .subnav__button-stack--padded {

package/app/styles/components/sd-slider.scss

@@ -4,8 +4,8 @@ $sd-slider-transition: transform .4s cubic-bezier(.25,.8,.25,1), background-colo
     width: 100%;
     position: relative;
     height: 0.2rem;
-    margin-top: 1.25rem;
-    margin-bottom: 1.25rem;
+    margin-block-start: 1.25rem;
+    margin-block-end: 1.25rem;
     background-color: rgba(123, 123, 123, 0.5);
     cursor: pointer;
     user-select: none;
@@ -51,8 +51,8 @@ $sd-slider-transition: transform .4s cubic-bezier(.25,.8,.25,1), background-colo
 .sd-slider {
     position: relative;
     height: 0.2rem;
-    margin-top: 1.25rem;
-    margin-bottom: 2.25rem;
+    margin-block-start: 1.25rem;
+    margin-block-end: 2.25rem;
     background-color: rgba(123, 123, 123, 0.5);
     cursor: pointer;
     user-select: none;
@@ -62,8 +62,8 @@ $sd-slider-transition: transform .4s cubic-bezier(.25,.8,.25,1), background-colo
 
 .sd-slider__handle {
     position: absolute;
-    top: -0.7rem;
-    left: 0;
+    inset-block-start: -0.7rem;
+    inset-inline-start: 0;
     z-index: 1;
     display: inline-block;
     width: 1.6rem;
@@ -90,10 +90,10 @@ $sd-slider-transition: transform .4s cubic-bezier(.25,.8,.25,1), background-colo
 
 .sd-slider__focus-ring {
     position: absolute;
-    top: -1.4rem;
-    left: 0;
+    inset-block-start: -1.4rem;
+    inset-inline-start: 0;
     z-index: 0;
-    margin-left: -0.7rem;
+    margin-inline-start: -0.7rem;
     display: inline-block;
     width: 3rem;
     height: 3rem;
@@ -112,8 +112,8 @@ $sd-slider-transition: transform .4s cubic-bezier(.25,.8,.25,1), background-colo
 
 .sd-slider__fill {
     position: absolute;
-    top: 0;
-    left: 0;
+    inset-block-start: 0;
+    inset-inline-start: 0;
     display: inline-block;
     max-width: 100%;
     height: 0.2rem;

package/app/styles/design-tokens/_design-tokens-general.scss

@@ -2,8 +2,20 @@
 
 :root {
     // GENERAL
+    --base-increment: 0.8rem; // 8px
+    --space--0: 0; // 0px
+    --space--0-5: calc(0.5 * var(--base-increment)); // 4px
+    --space--1: calc(1 * var(--base-increment)); // 8px
+    --space--1-5: calc(1.5 * var(--base-increment)); // 12px
+    --space--2: calc(2 * var(--base-increment)); // 16px
+    --space--3: calc(3 * var(--base-increment)); // 24px;
+    --space--4: calc(4 * var(--base-increment)); // 32px;
+    --space--5: calc(5 * var(--base-increment)); // 40px;
+
+    --gap--none: 0; // 0px
     --gap--x-small: 0.4rem; // 4px
     --gap--small: 0.8rem; // 8px
+    --gap--medium-small: 1.2rem; // 12px
     --gap--medium: 1.6rem; // 16px
     --gap--large: 2.4rem; // 24px;
     --gap--x-large: 3.2rem; // 32px;