superdesk-ui-framework 3.0.62 → 3.0.64

package/app/styles/grids/_grid-layout.scss

@@ -24,7 +24,7 @@
         }
 
         .sd-left-nav__group-header {
-            border-top: 1px solid hsla(0, 0%, 100%, 0.14);
+            border-block-start: 1px solid hsla(0, 0%, 100%, 0.14);
         }
     }
 
@@ -97,22 +97,22 @@
 
     &::after {
         display: block;
-        bottom: 0;
+        inset-block-end: 0;
         content: '';
         width: 4px;
         position: absolute;
         z-index: 80;
-        top: 0;
+        inset-block-start: 0;
     }
 }
 
 .sd-page-content__left-tabs::after {
-    right: -4px;
+    inset-inline-end: -4px;
     background-image: linear-gradient(to right, rgba(0, 0, 0, .25) 0, transparent 100%);
 }
 
 .sd-page-content__right-tabs::after {
-    left: -4px;
+    inset-inline-start: -4px;
     background-image: linear-gradient(to left, rgba(0, 0, 0, .25) 0, transparent 100%);
 }
 
@@ -179,11 +179,11 @@
 }
 
 .sd-column-box__main-column--left {
-    border-right: 1px solid var(--sd-colour-line--light);
+    border-inline-end: 1px solid var(--sd-colour-line--light);
 }
 
 .sd-column-box__main-column--border-right {
-    border-right: 2px solid var(--sd-colour-line--medium);
+    border-inline-end: 2px solid var(--sd-colour-line--medium);
 }
 
 .sd-column-box__main-column--flex {
@@ -193,7 +193,7 @@
 
 .sd-column-box__main-column-top-bar {
     padding: 0.8rem 2.4rem;
-    border-bottom: 1px solid var(--sd-colour-line--x-light);
+    border-block-end: 1px solid var(--sd-colour-line--x-light);
     display: flex;
     flex-direction: row;
     gap: $sd-base-increment;
@@ -210,7 +210,7 @@
     transition: all .2s ease-out;
     display: flex;
     flex-direction: column;
-    border-left: 1px solid var(--sd-colour-line--light);
+    border-inline-start: 1px solid var(--sd-colour-line--light);
     overflow-x: hidden;
     position: relative;
     flex-shrink: 0;
@@ -218,12 +218,12 @@
 
     &::before {
         display: block;
-        top: 0;
-        bottom: 0;
+        inset-block-start: 0;
+        inset-block-end: 0;
         content: '';
         width: 4px;
         position: absolute;
-        left: 0;
+        inset-inline-start: 0;
         z-index: 80;
         background-image: linear-gradient(to right, hsla(0, 0%, 0%, 0.12) 0%, transparent 100%);
     }
@@ -250,7 +250,7 @@
 
 .sd-column-box__slide-in-column--closed {
     width: 0;
-    border-left: 1px solid transparent;
+    border-inline-start: 1px solid transparent;
     overflow: hidden;
 
     .sd-column-box__slide-in-column-inner {
@@ -285,25 +285,25 @@
     color: var(--color-text-light);
     font-weight: 300;
     letter-spacing: 0.02em;
-    margin-right: auto;
+    margin-inline-end: auto;
 }
 
 .sd-slide-in-panel__heading--marg-b10 {
-    margin-bottom: 1rem;
+    margin-block-end: 1rem;
 }
 
 .sd-slide-in-panel__heading--marg-b16 {
-    margin-bottom: 1.6rem;
+    margin-block-end: 1.6rem;
 }
 
 .sd-slide-in-panel__heading--marg-b20 {
-    margin-bottom: 2rem;
+    margin-block-end: 2rem;
 }
 
 .sd-slide-in-panel__close {
     z-index: 2;
     color: var(--color-text-lighter);
-    margin-right: $sd-base-increment * 1.5;
+    margin-inline-end: $sd-base-increment * 1.5;
 }
 
 .sd-slide-in-panel__content {
@@ -320,7 +320,7 @@
 }
 
 .sd-slide-in-panel__content-block--first {
-    padding-top: 3.2rem
+    padding-block-start: 3.2rem
 }
 
 .sd-slide-in-panel__footer {
@@ -338,11 +338,11 @@
     &::before {
         position: absolute;
         content: '';
-        top: -0.4rem;
-        left: 0;
-        right: 0;
+        inset-block-start: -0.4rem;
+        inset-inline-start: 0;
+        inset-inline-end: 0;
         height: 0.4rem;
-        border-bottom: 1px solid var(--sd-colour--shadow-line);
+        border-block-end: 1px solid var(--sd-colour--shadow-line);
         background-image: linear-gradient(to top, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0) 100%);
     }
 }
@@ -385,15 +385,15 @@
 }
 
 .sd-page-content__content-block--right::before {
-    border-left: 3px solid var(--sd-colour__splitter);
+    border-inline-start: 3px solid var(--sd-colour__splitter);
     background-image: linear-gradient(to right, rgba(0, 0, 0, .2) 0, transparent 100%);
     display: block;
-    bottom: 0;
+    inset-block-end: 0;
     content: '';
     width: 6px;
     position: absolute;
     z-index: 8000;
-    top: 0;
+    inset-block-start: 0;
 }
 
 .sd-edit-panel {
@@ -414,8 +414,8 @@
     // override basic behaviour of the sd-sidebar-menu
     .sd-sidebar-menu {
         position: relative;
-        top: 0;
-        bottom: auto;
+        inset-block-start: 0;
+        inset-block-end: auto;
     }
 
     // Content block width modifiers
@@ -445,8 +445,8 @@ $planningEditor-width: 53rem;
     // override basic behaviour of the sd-sidebar-menu
     .sd-sidebar-menu {
         position: relative;
-        top: 0;
-        bottom: auto;
+        inset-block-start: 0;
+        inset-block-end: auto;
     }
 
     .sd-page-content__content-block--main {
@@ -589,7 +589,7 @@ $planningEditor-width: 53rem;
 .open-preview {
     .sd-preview-panel {
         width: 36rem;
-        border-left: 1px solid rgba(0, 0, 0, 0.25);
+        border-inline-start: 1px solid rgba(0, 0, 0, 0.25);
         flex-shrink: 0;
 
         .side-panel {
@@ -942,14 +942,14 @@ $planningEditor-width: 53rem;
             display: flex;
             align-items: center;
             box-shadow: 0 2px 3px hsla(0, 0%, 0%, 0.4);
-            border-bottom: 1px solid hsla(214, 13%, 60%, 0.08);
+            border-block-end: 1px solid hsla(214, 13%, 60%, 0.08);
         }
 
         .sd-main-menu__title {
             font-size: 1.6rem;
             font-weight: 300;
             opacity: 0.65;
-            padding-left: 2.4rem;
+            padding-inline-start: 2.4rem;
         }
 
         .sd-main-menu__content {
@@ -962,12 +962,12 @@ $planningEditor-width: 53rem;
             align-items: stretch;
             justify-content: center;
             box-shadow: 0 -2px 3px hsla(0, 0%, 0%, 0.24);
-            border-top: 1px solid hsla(214, 13%, 60%, 0.08);
+            border-block-start: 1px solid hsla(214, 13%, 60%, 0.08);
 
             .sd-main-menu__footer-logo {
                 display: flex;
                 align-items: center;
-                border-top: 1px solid hsla(214, 13%, 60%, 0.08);
+                border-block-start: 1px solid hsla(214, 13%, 60%, 0.08);
                 background: url(../img/SD-logo.svg) no-repeat center;
                 height: 7.6rem;
             }
@@ -993,7 +993,7 @@ $planningEditor-width: 53rem;
                 padding: 8px 0 8px;
                 opacity: 0.85;
                 height: 3.2rem;
-                border-top: 1px solid hsla(214, 13%, 60%, 0.08);
+                border-block-start: 1px solid hsla(214, 13%, 60%, 0.08);
                 background-color: hsla(214, 13%, 6%, 0.24);
             }
         }
@@ -1086,8 +1086,8 @@ $planningEditor-width: 53rem;
 .sd-overlay-panel-2 {
     z-index: 2;
     position: absolute;
-    top: 0;
-    bottom: 0;
+    inset-block-start: 0;
+    inset-block-end: 0;
     width: 0;
     background: var(--sd-colour-panel-bg--100);
     color: var(--color-text);
@@ -1103,12 +1103,12 @@ $planningEditor-width: 53rem;
 
 .sd-overlay-panel-2--left {
     box-shadow: 2px 0px 0px 0px hsl(0, 0%, 40%), 2px 0px 12px 0px hsla(0, 0%, 0%, 0.3);
-    left: 0;
+    inset-inline-start: 0;
 }
 
 .sd-overlay-panel-2--right {
     box-shadow: -2px 0px 0px 0px hsl(0, 0%, 40%), -2px 0px 12px 0px hsla(0, 0%, 0%, 0.3);
-    right: 0;
+    inset-inline-end: 0;
 }
 
 .sd-overlay-panel-2--open {
@@ -1133,8 +1133,8 @@ $planningEditor-width: 53rem;
 .sd-authoring-page__publish-container,
 .sd-main-content-grid__overlay {
     .sd-overlay-panel {
-        top: 0;
-        bottom: 0;
+        inset-block-start: 0;
+        inset-block-end: 0;
         z-index: 100;
     }
 }

package/app/styles/grids/_layout-grid.scss

@@ -80,26 +80,26 @@ $layout-grid-media: (
         }
 
         &>.grid {
-            margin-left: -$layout-grid-gutter;
-            margin-right: -$layout-grid-gutter;
+            margin-inline-start: -$layout-grid-gutter;
+            margin-inline-end: -$layout-grid-gutter;
             padding: 0;
         }
     }
 
     &+.grid {
-        margin-top: 1rem;
+        margin-block-start: 1rem;
     }
 }
 
 .grid--padding-fix {
-    margin-left: -$layout-grid-gutter;
-    margin-right: -$layout-grid-gutter;
+    margin-inline-start: -$layout-grid-gutter;
+    margin-inline-end: -$layout-grid-gutter;
     padding: 0;
 }
 
 .grid--margin {
-    margin-top: $layout-grid-gutter;
-    margin-bottom: $layout-grid-gutter;
+    margin-block-start: $layout-grid-gutter;
+    margin-block-end: $layout-grid-gutter;
 }
 
 .grid--wrap {
@@ -107,8 +107,8 @@ $layout-grid-media: (
 }
 
 .grid--boxed {
-    margin-left: -$layout-grid-gap;
-    margin-right: -$layout-grid-gap;
+    margin-inline-start: -$layout-grid-gap;
+    margin-inline-end: -$layout-grid-gap;
 
     .grid__item {
         margin: $layout-grid-gap;
@@ -125,8 +125,8 @@ $layout-grid-media: (
 }
 
 .grid--boxed-small {
-    margin-left: -$layout-grid-gap-small;
-    margin-right: -$layout-grid-gap-small;
+    margin-inline-start: -$layout-grid-gap-small;
+    margin-inline-end: -$layout-grid-gap-small;
 
     .grid__item {
         margin: $layout-grid-gap-small;

package/app/styles/grids/_sd-kanban-list.scss

@@ -5,19 +5,19 @@ $background-main: $sd-background;
     flex-direction: row;
     flex-wrap: nowrap;
     padding: 1rem;
-    padding-bottom: 0;
+    padding-block-end: 0;
     height: 100%;
 
     ::-webkit-scrollbar {
-        border-left: 4px solid transparent !important;
-        border-right: 1px solid transparent !important;
+        border-inline-start: 4px solid transparent !important;
+        border-inline-end: 1px solid transparent !important;
         width: 6px !important;
         background: transparent !important;
     }
 
     ::-webkit-scrollbar-track {
         background: transparent !important;
-        border-left: 3px solid transparent !important;
+        border-inline-start: 3px solid transparent !important;
 
         &:hover {
             background: rgba(0,0,0,.05) !important;
@@ -25,7 +25,7 @@ $background-main: $sd-background;
     }
 
     ::-webkit-scrollbar-thumb {
-        border-left: 3px solid transparent !important;
+        border-inline-start: 3px solid transparent !important;
     }
 }
 .sd-kanban-list__board {
@@ -55,7 +55,7 @@ $background-main: $sd-background;
     display: flex;
     flex-direction: row;
     align-items: center;
-    border-bottom: 4px solid var(--sd-colour-bg--09);
+    border-block-end: 4px solid var(--sd-colour-bg--09);
     padding: 0 0 0.4rem 0;
     margin: 0 0.1rem;
 
@@ -85,6 +85,6 @@ $background-main: $sd-background;
 [class*="--dark-ui"],
 .dark-ui {
     .sd-kanban-list__board-header {
-        border-bottom: 4px solid rgba(86, 110, 119, 1) !important;
+        border-block-end: 4px solid rgba(86, 110, 119, 1) !important;
     }
 }

package/app/styles/interface-elements/_side-panel.scss

@@ -64,7 +64,7 @@ $side-panel-Bg-200: var(--sd-colour-panel-bg--200);
             justify-content: flex-end;
 
             &>.btn {
-                margin-left: $sd-base-increment;
+                margin-inline-start: $sd-base-increment;
             }
         }
     }
@@ -102,7 +102,7 @@ $side-panel-Bg-200: var(--sd-colour-panel-bg--200);
         color: inherit;
 
         .icn-btn {
-            margin-left: 0.2rem;
+            margin-inline-start: 0.2rem;
         }
     }
 
@@ -151,13 +151,13 @@ $side-panel-Bg-200: var(--sd-colour-panel-bg--200);
 
     .side-panel__image-actions {
         position: absolute;
-        top: 1.8rem;
-        right: 0.5rem;
+        inset-block-start: 1.8rem;
+        inset-inline-end: 0.5rem;
         z-index: 2;
     }
 
     .side-panel__content-block {
-        @include sd-padding('2');
+        padding: var(--space--2);
 
         .side-panel__heading {
             padding: 0;
@@ -165,13 +165,13 @@ $side-panel-Bg-200: var(--sd-colour-panel-bg--200);
     }
 
     .side-panel__content-block--pad-top-0 {
-        padding-top: 0;
+        padding-block-start: 0;
     }
 
     .side-panel__content-block--boxed {
         padding: 1.6rem;
         border-radius: $border-radius__base--medium;
-        margin-bottom: 1rem;
+        margin-block-end: 1rem;
     }
 
     .side-panel__content-block--pad-small {
@@ -210,11 +210,11 @@ $side-panel-Bg-200: var(--sd-colour-panel-bg--200);
     }
 
     .side-panel__content-block--padding-1-5 {
-        @include sd-padding('1-5');
+        padding: var(--space--1-5);
     }
 
     .side-panel__content-block--padding-3 {
-        @include sd-padding('3');
+        padding: var(--space--3);
     }
 
     .side-panel__content-block--space-between {
@@ -250,7 +250,7 @@ $side-panel-Bg-200: var(--sd-colour-panel-bg--200);
         position: relative;
         padding: .8rem 2rem;
         box-shadow: 0px 1px 3px -1px rgba(0, 0, 0, 0.2);
-        margin-bottom: 1rem;
+        margin-block-end: 1rem;
         min-height: 40px;
         //transition: min-height 0.3s 0.3s ease-in;
 
@@ -287,9 +287,9 @@ $side-panel-Bg-200: var(--sd-colour-panel-bg--200);
         height: 21px;
         border: 0;
         padding: 0;
-        left: 50%;
-        margin-left: -10.5px;
-        bottom: -11px;
+        inset-inline-start: 50%;
+        margin-inline-start: -10.5px;
+        inset-block-end: -11px;
         background-color: #fff;
         z-index: 3;
         line-height: 0;
@@ -319,7 +319,7 @@ $side-panel-Bg-200: var(--sd-colour-panel-bg--200);
         line-height: 140%;
         font-weight: 300;
         word-wrap: break-word;
-        padding-bottom: 1rem;
+        padding-block-end: 1rem;
     }
 
     // Use only inside cside-panel__content-block--flex for grouping and positioning content
@@ -342,10 +342,10 @@ $side-panel-Bg-200: var(--sd-colour-panel-bg--200);
     // Social media overlay - Superdesk targeted publishing
     .side-panel__content-block-overlay {
         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;
         width: 0;
         padding: 0 !important;
 
@@ -354,10 +354,10 @@ $side-panel-Bg-200: var(--sd-colour-panel-bg--200);
             transition: all 0.2s ease-in-out;
             position: absolute;
             width: 34rem;
-            top: 0;
-            bottom: 0;
-            right: 0;
-            left: 34rem;
+            inset-block-start: 0;
+            inset-block-end: 0;
+            inset-inline-end: 0;
+            inset-inline-start: 34rem;
             background-color: #222;
             z-index: 2;
         }
@@ -365,7 +365,7 @@ $side-panel-Bg-200: var(--sd-colour-panel-bg--200);
 
     .side-panel__content-block-overlay--open {
         .side-panel {
-            left: 0;
+            inset-inline-start: 0;
             opacity: 1;
         }
     }
@@ -383,10 +383,10 @@ $side-panel-Bg-200: var(--sd-colour-panel-bg--200);
             transition: all .2s ease-in-out;
             position: absolute;
             width: 40rem;
-            top: 0;
-            bottom: 0;
-            right: 0;
-            left: 40rem;
+            inset-block-start: 0;
+            inset-block-end: 0;
+            inset-inline-end: 0;
+            inset-inline-start: 40rem;
             background-color: #222;
             z-index: 2;
         }
@@ -394,7 +394,7 @@ $side-panel-Bg-200: var(--sd-colour-panel-bg--200);
 
     .side-panel__content-block-overlay-grid--open {
         .side-panel {
-            left: 0;
+            inset-inline-start: 0;
             opacity: 1;
         }
     }
@@ -448,11 +448,11 @@ $side-panel-Bg-200: var(--sd-colour-panel-bg--200);
         &::before {
             position: absolute;
             content: '';
-            top: -0.4rem;
-            left: 0;
-            right: 0;
+            inset-block-start: -0.4rem;
+            inset-inline-start: 0;
+            inset-inline-end: 0;
             height: 0.4rem;
-            border-bottom: 1px solid var(--sd-colour--shadow-line);
+            border-block-end: 1px solid var(--sd-colour--shadow-line);
             background-image: linear-gradient(to top, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 100%);
         }
 
@@ -473,12 +473,12 @@ $side-panel-Bg-200: var(--sd-colour-panel-bg--200);
     &.side-panel--shadow-left::after,
     &.side-panel--left::after {
         display: block;
-        top: 0;
-        bottom: 0;
+        inset-block-start: 0;
+        inset-block-end: 0;
         content: '';
         width: 4px;
         position: absolute;
-        right: 0;
+        inset-inline-end: 0;
         z-index: 80;
         background-image: linear-gradient(to left, rgba(0, 0, 0, .12) 0%, rgba(0, 0, 0, 0) 100%);
     }
@@ -486,12 +486,12 @@ $side-panel-Bg-200: var(--sd-colour-panel-bg--200);
     &.side-panel--shadow-right::after,
     &.side-panel--right::after {
         display: block;
-        top: 0;
-        bottom: 0;
+        inset-block-start: 0;
+        inset-block-end: 0;
         content: '';
         width: 4px;
         position: absolute;
-        left: 0;
+        inset-inline-start: 0;
         z-index: 80;
         background-image: linear-gradient(to right, rgba(0, 0, 0, .12) 0%, rgba(0, 0, 0, 0) 100%);
     }

package/app/styles/layout/_basic-layout.scss

@@ -2,45 +2,45 @@
 
 .sd-page {
     position: absolute;
-    top: 48px;
-    bottom: 0;
-    left: 0;
-    right: 0;
+    inset-block-start: 48px;
+    inset-block-end: 0;
+    inset-inline-start: 0;
+    inset-inline-end: 0;
     background: #fff;
     overflow: hidden;
 }
 
 .sd-page__sidebar {
     position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
+    inset-block-start: 0;
+    inset-block-end: 0;
+    inset-inline-start: 0;
 }
 
 .sd-page__main-content {
     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;
     background-color: var(--sd-colour-panel-bg--100);
     display: flex;
     flex-direction: column;
 }
 
 .sd-page__main-content--double-left-nav {
-    left: 400px;
+    inset-inline-start: 400px;
 } 
 
 .sd-page__sidebar {
     & + .sd-page__main-content {
-        left: 240px;
+        inset-inline-start: 240px;
     }
 
     & + .sd-content-navigation-panel {
-        left: 240px;
-        top: 0;
-        bottom: 0;
+        inset-inline-start: 240px;
+        inset-block-start: 0;
+        inset-block-end: 0;
         position: absolute;
     }
 }
@@ -48,7 +48,7 @@
 .sd-page__header {
     height:48px;
     flex-shrink: 0;
-    border-bottom: 1px solid var(--sd-colour-line--light);
+    border-block-end: 1px solid var(--sd-colour-line--light);
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -105,9 +105,9 @@
 .sd-overlay-panel {
     z-index: 2;
     position: absolute;
-    top: $subnav-height;
-    right: 0;
-    bottom: 3rem;
+    inset-block-start: $subnav-height;
+    inset-inline-end: 0;
+    inset-block-end: 3rem;
     width: 0;
     background-color: $white;
     color: $sd-text;