superdesk-ui-framework 3.0.62 → 3.0.63

package/app/styles/_accessibility.scss

@@ -1,6 +1,6 @@
 .a11y-only {
 	position: absolute;
-	top: 0;
+	inset-block-start: 0;
 	z-index: -1;
 	pointer-events: none;
 	opacity: 0 !important;

package/app/styles/_alerts.scss

@@ -65,11 +65,11 @@ $sd-alert-transition-small: font-size ease-out 20ms, padding ease-out 200ms, max
     }
 
     &--marg-b12 {
-        margin-bottom: 1.2rem;
+        margin-block-end: 1.2rem;
     }
 
     &--no-margin {
-        margin-bottom: 0;
+        margin-block-end: 0;
     }
 
     &--margin-none {
@@ -254,8 +254,8 @@ $sd-alert-transition-small: font-size ease-out 20ms, padding ease-out 200ms, max
         width: 16px;
         height:16px;
         position: absolute;
-        top:0;
-        left: 0.3rem;
+        inset-block-start:0;
+        inset-inline-start: 0.3rem;
         line-height: inherit;
         color: inherit;
         font-style: normal;
@@ -311,7 +311,7 @@ $sd-alert-transition-small: font-size ease-out 20ms, padding ease-out 200ms, max
 
     & [class^="icon-"], & [class*=" icon-"] {
         color:inherit;
-        margin-top: 0.3rem;
+        margin-block-start: 0.3rem;
     }
 
     &:hover {
@@ -384,6 +384,6 @@ $sd-alert-transition-small: font-size ease-out 20ms, padding ease-out 200ms, max
     .sd-alert {
         box-shadow: none !important;
         border-radius: unset !important;
-        margin-bottom: 0;
+        margin-block-end: 0;
     }
 }

package/app/styles/_avatar.scss

@@ -189,7 +189,7 @@
         display: block;
         position: absolute;
         inset-block-start: 4px;
-        left: 4px;
+        inset-inline-start: 4px;
         background: var(--sd-colour-background__base--00);
         width: 8px;
         height: 8px;
@@ -205,7 +205,7 @@
 
     .sd-avatar--indicator-admin {
         inset-block-start: -4px;
-        left: -6px;
+        inset-inline-start: -6px;
     }
 }
 
@@ -216,7 +216,7 @@
 
     .sd-avatar--indicator-admin {
         inset-block-start: -4px;
-        left: -6px;
+        inset-inline-start: -6px;
     }
 }
 
@@ -270,7 +270,7 @@
             height: 14px;
             width: 14px;
             inset-block-start: 1px;
-            left: 5px;
+            inset-inline-start: 5px;
         }
     }
 }

package/app/styles/_badge.scss

@@ -82,17 +82,17 @@ $badge-lineheight: 1.1em !default;
 
     .badge {
       position: absolute;
-      top: -.5rem;
-      right: -.8rem;
+      inset-block-start: -.5rem;
+      inset-inline-end: -.8rem;
     }
     
     + .element-with-badge, + .btn {
-      margin-left: 1.2rem;
+      margin-inline-start: 1.2rem;
       vertical-align: top;
     }
 }
 .btn + .element-with-badge {
-    margin-left: 1.2rem;
+    margin-inline-start: 1.2rem;
     vertical-align: top;
 }
 

package/app/styles/_big-icon-font.scss

@@ -93,7 +93,7 @@ $sd-big-icon-font: (
     add-to-list: "\e61e",
     text: "\e61f",
     desk: "\e620",
-    chevron-left: "\e621",
+    chevron-inset-inline-start: "\e621",
     chevron-right: "\e622",
     dashboard-alt: "\e623",
     master: "\e624",

package/app/styles/_boxed-list.scss

@@ -5,7 +5,7 @@
     flex-direction: column;
     align-self: stretch;
     gap: $sd-base-increment * 1.5;
-    margin-bottom: $sd-base-increment * 2;
+    margin-block-end: $sd-base-increment * 2;
 }
 
 .boxed-list--comfortable {
@@ -32,8 +32,8 @@ $boxed-list-palette: $sd-basic-palette;
                 width: 4px;
                 height: 100%;
                 position: absolute;
-                top: 0px;
-                left: 0px;
+                inset-block-start: 0px;
+                inset-inline-start: 0px;
                 background-color: $color;
                 z-index: 1;
                 border-radius: 3px 0 0 3px;
@@ -51,7 +51,7 @@ $boxed-list-palette: $sd-basic-palette;
     &:hover {
         .boxed-list__slide-in-actions,
         .boxed-list__actions--slide-in {
-            padding-left: 0.6rem;
+            padding-inline-start: 0.6rem;
             width: auto;
             max-width: 32px;
             overflow: visible;
@@ -96,7 +96,7 @@ $boxed-list-palette: $sd-basic-palette;
 
 .boxed-list__item--comfortable {
     min-height: 3.2rem;
-    @include sd-padding('1-5');
+    padding: var(--space--1-5);
 }
 
 .boxed-list__item--compact {
@@ -106,7 +106,7 @@ $boxed-list-palette: $sd-basic-palette;
 
 .boxed-list__item--loose {
     min-height: 4.8rem;
-    @include sd-padding('2');
+    padding: var(--space--2);
 }
 
 .boxed-list__item-media {
@@ -170,7 +170,7 @@ $boxed-list-palette: $sd-basic-palette;
     flex-direction: row;
     align-items: center;
     padding: 0.8rem 0.8rem 0 0.8rem;
-    margin-top: 0.8rem;
+    margin-block-start: 0.8rem;
 }
 
 .boxed-list__item-footer--allign-baseline {
@@ -178,7 +178,7 @@ $boxed-list-palette: $sd-basic-palette;
 }
 
 .boxed-list__item-content-row + .boxed-list__item-content-row  {
-    margin-top: 0.8rem;
+    margin-block-start: 0.8rem;
 }
 
 .boxed-list__slide-in-actions,

package/app/styles/_buttons.scss

@@ -288,8 +288,8 @@ $new-button-active-shadow-hollow: inset 0 0 0 1px;
 
 .btn--expanded {
     width: 100%;
-    margin-right: 0;
-    margin-left: 0;
+    margin-inline-end: 0;
+    margin-inline-start: 0;
 }
 
 // Colours
@@ -635,47 +635,47 @@ $new-button-active-shadow-hollow: inset 0 0 0 1px;
 }
 
 .button-group__divider--small {
-    @include sd-margin('0-5', 'x');
+    margin-inline: var(--space--0-5);
 }
 
 .button-group__divider--medium {
-    @include sd-margin('1', 'x');
+    margin-inline: var(--space--1);
 }
 
 .button-group__divider--large {
-    @include sd-margin('1-5', 'x');
+    margin-inline: var(--space--1-5);
 }
 
 .button-group__divider--border {
-    border-left: 1px dotted var(--sd-colour-line--strong);
+    border-inline-start: 1px dotted var(--sd-colour-line--strong);
 }
 
 .button-group--vertical {
     .button-group__divider {
         height: 1px;
         width: auto;
-        @include sd-margin('0', 'x');
+        margin-inline: var(--space--0);
 
         &.button-group__divider--mini {
-            @include sd-padding('1-5', 'top');
+            padding-block-start: var(--space--1-5);
         }
 
         &.button-group__divider--small {
-            @include sd-margin('0-5', 'y');
+            margin-block: var(--space--0-5);
         }
 
         &.button-group__divider--medium {
-            @include sd-margin('1', 'y');
+            margin-block: var(--space--1);
         }
 
         &.button-group__divider--large {
-            @include sd-margin('1-5', 'y');
+            margin-block: var(--space--1-5);
         }
     }
 
     .button-group__divider--border {
-        border-left: none;
-        border-top: 1px dotted var(--sd-colour-line--strong);
+        border-inline-start: none;
+        border-block-start: 1px dotted var(--sd-colour-line--strong);
     }
 }
 
@@ -754,10 +754,10 @@ $new-button-active-shadow-hollow: inset 0 0 0 1px;
 
 .btn__state--loading {
     position: absolute;
-    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;
     align-items: center;
     justify-content: center;

package/app/styles/_carousel.scss

@@ -2,10 +2,10 @@
 
 .sd-carousel {
     position: fixed;
-    left: 40px;
-    right: 40px;
-    top: 40px;
-    bottom: 40px;
+    inset-inline-start: 40px;
+    inset-inline-end: 40px;
+    inset-block-start: 40px;
+    inset-block-end: 40px;
     align-items: center;
     flex-direction: row;
     z-index: 1050;
@@ -65,8 +65,8 @@
 
 .sd-carousel__page-header-illustration {
     position: absolute;
-    left: 0;
-    bottom: 0;
+    inset-inline-start: 0;
+    inset-block-end: 0;
     opacity: 0.65;
 }
 
@@ -81,7 +81,7 @@
     color: $white;
     font-size: 3.2rem;
     line-height: 1;
-    top: calc(50% - 1.6rem);
+    inset-block-start: calc(50% - 1.6rem);
 }
 
 .sd-carousel__page-text {
@@ -92,16 +92,16 @@
     font-weight: 300;
 
     p {
-        margin-bottom: 1em;
+        margin-block-end: 1em;
         &:last-child, &:only-child {
-            margin-bottom: 0;
+            margin-block-end: 0;
         }
     }
 
     h3 {
         font-family: 'Merriweather', Georgia, 'Times New Roman', Times, serif;
         font-size: 2rem;
-        margin-bottom: 0.8em;
+        margin-block-end: 0.8em;
         font-weight: 700;
     }
 }
@@ -122,7 +122,7 @@
     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: $sd-green;
@@ -143,7 +143,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: $sd-green;
@@ -157,7 +157,7 @@
 }
 
 .sd-carousel__nav-button--next {
-    right: -88px;
+    inset-inline-end: -88px;
     color: inherit;
 
     &::after {
@@ -166,7 +166,7 @@
 }
 
 .sd-carousel__nav-button--prev {
-    left: -88px;
+    inset-inline-start: -88px;
     color: inherit;
 
     &::after {
@@ -175,7 +175,7 @@
 }
 
 .sd-carousel__nav-button--end {
-    right: -88px;
+    inset-inline-end: -88px;
     background-color: var(--sd-colour-success);
 
     &::after {
@@ -193,7 +193,7 @@
 }
 
 .sd-carousel__page-indication-bar {
-    bottom: -3.6rem;
+    inset-block-end: -3.6rem;
     height: 2.6rem;
     position: absolute;
     text-align: center;
@@ -221,8 +221,8 @@
     z-index: 1045;
     background: rgba(0,0,0,.45);
     position: fixed;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
+    inset-block-start: 0;
+    inset-block-end: 0;
+    inset-inline-start: 0;
+    inset-inline-end: 0;
 }

package/app/styles/_content-divider.scss

@@ -4,10 +4,10 @@
     padding: 0;
     color: $sd-text;
     list-style: none;
-    border-bottom: 0;
-    border-left: 0;
-    border-right: 0;
-    border-top: 1px var(--sd-colour-line--medium);
+    border-block-end: 0;
+    border-inline-start: 0;
+    border-inline-end: 0;
+    border-block-start: 1px var(--sd-colour-line--medium);
     border-style: solid;
 
     &.sd-content-divider--with-text {
@@ -17,10 +17,10 @@
         font-size: 16px;
         white-space: nowrap;
         text-align: center;
-        border-top: 0;
-        border-bottom: 0;
-        border-left: 0;
-        border-right: 0;
+        border-block-start: 0;
+        border-block-end: 0;
+        border-inline-start: 0;
+        border-inline-end: 0;
         border-top-color: var(--sd-colour-line--medium);
         border-style: solid;
     }
@@ -58,14 +58,14 @@
         &::before, &::after {
             content: "";
             position: relative;
-            top: 50%;
+            inset-block-start: 50%;
             width: 50%;
-            border-top: 1px transparent;
+            border-block-start: 1px transparent;
             border-top-color: transparent;
             border-top-color: inherit;
-            border-bottom: 0;
-            border-left: 0;
-            border-right: 0;
+            border-block-end: 0;
+            border-inline-start: 0;
+            border-inline-end: 0;
             transform: translateY(50%);
             border-style: inherit;
         }
@@ -114,8 +114,8 @@
         display: inline-block;
         //margin: $sd-base-increment * 0.5 $sd-base-increment * 1.5;
         vertical-align: middle;
-        border-top: 0;
-        border-left: 1px var(--sd-colour-line--medium);
+        border-block-start: 0;
+        border-inline-start: 1px var(--sd-colour-line--medium);
         border-style: solid;
         flex-grow: 0;
         align-self: stretch;
@@ -127,7 +127,7 @@
             flex-direction: column;
             justify-content: center;
             align-items: center;
-            border-left: 0;
+            border-inline-start: 0;
 
             .sd-content-divider__inner-text {
                 padding: $sd-base-increment * 0.5 $sd-base-increment * 2;
@@ -138,10 +138,10 @@
                 background-color: transparent;
                 position: relative;
                 height: 50%;
-                border-left: 1px var(--sd-colour-line--medium);
-                border-right: 0;
-                border-bottom: 0;
-                border-top: 0;
+                border-inline-start: 1px var(--sd-colour-line--medium);
+                border-inline-end: 0;
+                border-block-end: 0;
+                border-block-start: 0;
                 width: 1px;
                 border-style: solid;
             }

package/app/styles/_empty-states.scss

@@ -16,14 +16,14 @@
 
 .content-state__empty-container--absolute {
     position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    inset-block-end: 0;
+    inset-inline-end: 0;
 }
 
 .content-state__empty-info {
-    @include sd-padding('2','x');
+    padding-inline: var(--space--2);
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -34,7 +34,7 @@
 }
 
 .content-state__heading {
-    @include sd-margin('1','bottom');
+    margin-block-end: var(--space--1);
     font-family: 'Merriweather', Georgia, 'Times New Roman', Times, serif;
     font-size: 1.8rem;
     line-height: 1.4;
@@ -58,8 +58,8 @@
 }
 
 .content-state__image {
-    @include sd-padding('1','x');
-    @include sd-margin('2','bottom');
+    padding-inline: var(--space--1);
+    margin-block-end: var(--space--2);
     display: block;
     height: auto;
     padding: 0;

package/app/styles/_hamburger.scss

@@ -43,8 +43,8 @@ $hamburger-active-hover-opacity: $hamburger-hover-opacity !default;
 
 .hamburger__inner {
 	display: block;
-	top: 50%;
-	margin-top: $hamburger-layer-height / -2;
+	inset-block-start: 50%;
+	margin-block-start: $hamburger-layer-height / -2;
 
 	&,
 	&::before,
@@ -66,11 +66,11 @@ $hamburger-active-hover-opacity: $hamburger-hover-opacity !default;
 	}
 
 	&::before {
-		top: ($hamburger-layer-spacing + $hamburger-layer-height) * -1;
+		inset-block-start: ($hamburger-layer-spacing + $hamburger-layer-height) * -1;
 	}
 
 	&::after {
-		bottom: ($hamburger-layer-spacing + $hamburger-layer-height) * -1;
+		inset-block-end: ($hamburger-layer-spacing + $hamburger-layer-height) * -1;
 	}
 }
 
@@ -101,14 +101,14 @@ $hamburger-active-hover-opacity: $hamburger-hover-opacity !default;
 			transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
 
 			&::before {
-				top: 0;
+				inset-block-start: 0;
 				opacity: 0;
 				transition: top 0.1s ease-out,
 					opacity 0.1s 0.12s ease-out;
 			}
 
 			&::after {
-				bottom: 0;
+				inset-block-end: 0;
 				transform: rotate(-90deg);
 				transition: bottom 0.1s ease-out,
 					transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
@@ -141,14 +141,14 @@ $hamburger-active-hover-opacity: $hamburger-hover-opacity !default;
 			transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
 
 			&::before {
-				top: 0;
+				inset-block-start: 0;
 				opacity: 0;
 				transition: top 0.075s ease,
 					opacity 0.075s 0.12s ease;
 			}
 
 			&::after {
-				bottom: 0;
+				inset-block-end: 0;
 				transform: rotate(-90deg);
 				transition: bottom 0.075s ease,
 					transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);