superdesk-ui-framework 3.0.62 → 3.0.63

package/app/styles/_loaders.scss

@@ -1,9 +1,9 @@
 .sd-loading-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;
     z-index: 3;
     background-image: url(../img/three-dots.svg);
     background-repeat: no-repeat;
@@ -16,10 +16,10 @@
 
 .sd-loading-overlay--plain {
     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: 10;
     display: flex;
     align-items: center;

package/app/styles/_master-desk.scss

@@ -6,14 +6,14 @@ $board-header-border-color: var(--color-kanban-border);
 }
 
 .sd-board__header {
-    @include sd-padding('0-5', 'bottom');
+    padding-block-end: var(--space--0-5);
     grid-row: 1/2;
     position: relative;
     min-height: 2rem;
     display: flex;
     flex-direction: row;
     align-items: center;
-    border-bottom: 4px solid $board-header-border-color;
+    border-block-end: 4px solid $board-header-border-color;
 }
 
 .sd-board__header--clickable {
@@ -62,15 +62,15 @@ $board-header-border-color: var(--color-kanban-border);
 }
 
 .sd-board__list-item {
-    @include sd-padding('1-5', 'x');
-    @include sd-padding('1', 'y');
-    border-bottom: 1px solid var(--sd-colour-line--light);
+    padding-inline: var(--space--1-5);
+    padding-block: var(--space--1);
+    border-block-end: 1px solid var(--sd-colour-line--light);
     display: flex;
     flex-direction: row;
     align-items: center;
 
     &:last-child {
-        border-bottom: none;
+        border-block-end: none;
     }
 }
 
@@ -100,11 +100,11 @@ $board-header-border-color: var(--color-kanban-border);
 }
 
 .sd-board__list-item-badge {
-    @include sd-margin('0-5', 'right');
+    margin-inline-end: var(--space--0-5);
 }
 
 .sd-board__item-count--large {
-    @include sd-margin('1', 'right');
+    margin-inline-end: var(--space--1);
     color: var(--color-text-light);
     font-size: 3.6rem;
     font-weight: 300;
@@ -139,8 +139,8 @@ $board-header-border-color: var(--color-kanban-border);
     justify-content: center;
     flex-shrink: 0;
     flex-grow: 0;
-    margin-left: auto;
-    margin-right: - $sd-base-increment/2;
+    margin-inline-start: auto;
+    margin-inline-end: - $sd-base-increment/2;
 }
 
 .sd-board__doughnut-chart-number {
@@ -184,8 +184,8 @@ $board-header-border-color: var(--color-kanban-border);
         z-index: 1;
         pointer-events: none;
         position: absolute;
-        top: 1.2rem;
-        left: 0.8rem;
+        inset-block-start: 1.2rem;
+        inset-inline-start: 0.8rem;
         width: 16px;
         height: 16px;
         line-height: 16px;
@@ -250,7 +250,7 @@ input.sd-inset-search__input {
 }
 
 .sd-board__subheader {
-    @include sd-padding('0-5', 'bottom');
+    padding-block-end: var(--space--0-5);
     position: relative;
     min-height: 2rem;
     display: flex;
@@ -278,7 +278,7 @@ input.sd-inset-search__input {
 }
 
 .sd-list-item-group + .sd-board__subheader {
-    @include sd-margin('2', 'top');
+    margin-block-start: var(--space--2);
 }
 
 .sd-kanban-list {

package/app/styles/_mixins.scss

@@ -98,10 +98,10 @@
     position: absolute;
     display: flex;
     align-items: center;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
+    inset-block-start: 0;
+    inset-block-end: 0;
+    inset-inline-start: 0;
+    inset-inline-end: 0;
     z-index: 3;
     padding: 0 $sd-base-increment * 2;
     color: $sd-colour-text__base;

package/app/styles/_modals.scss

@@ -48,10 +48,10 @@ $modal-sizes: (
     $space-around: 40px
 ) {
     position: fixed;
-    left: $space-around;
-    right: $space-around;
-    top: $space-around;
-    bottom: $space-around;
+    inset-inline-start: $space-around;
+    inset-inline-end: $space-around;
+    inset-block-start: $space-around;
+    inset-block-end: $space-around;
     align-items: $align-items;
     flex-direction: column;
     overflow: hidden;
@@ -77,7 +77,7 @@ $modal-sizes: (
 
 @mixin modal-header() {
     padding: $modal-padding - $sd-base-increment $modal-padding;
-    border-bottom: 1px solid $modal-line-color;
+    border-block-end: 1px solid $modal-line-color;
     min-height: $modal-header-height;
     background-color: $modal-bg-color;
     border-radius: $border-radius__base--large $border-radius__base--large 0 0;
@@ -94,7 +94,7 @@ $modal-sizes: (
     @include clearfix(); // clear it in case folks use .pull-* classes on buttons
     padding: $modal-padding - $sd-base-increment $modal-padding;
     text-align: end; // right align buttons
-    border-top: 1px solid $modal-line-color;
+    border-block-start: 1px solid $modal-line-color;
     min-height: $modal-footer-height;
     display: flex;
     align-items: center;
@@ -210,7 +210,7 @@ $modal-sizes: (
         .modal__body-header {
             height: 48px;
             width: 100%;
-            border-bottom: 1px solid $modal-line-color;
+            border-block-end: 1px solid $modal-line-color;
             padding: 0;
         }
 
@@ -236,7 +236,7 @@ $modal-sizes: (
         .modal__body-footer {
             flex: 0 0 auto;
             padding: $modal-padding - .8rem $modal-padding;
-            border-top: 1px solid $modal-line-color;
+            border-block-start: 1px solid $modal-line-color;
             text-align: end;
             min-height: $modal-footer-height;
             display: flex;
@@ -259,7 +259,7 @@ $modal-sizes: (
 
     .modal__footer {
         &> .btn + .btn {
-            margin-left: $sd-base-increment;
+            margin-inline-start: $sd-base-increment;
         }
     }
 
@@ -301,7 +301,7 @@ $modal-sizes: (
     }
 
     .modal__header-buttons--right {
-        justify-content: right;
+        justify-content: flex-end;
 
         .btn, .dropdown {
             margin: 0 0 0 1rem;
@@ -345,12 +345,12 @@ $modal-sizes: (
         font-size: 1.8rem;
         color: $sd-text;
         font-weight: 400;
-        margin-bottom: 2rem;
+        margin-block-end: 2rem;
         line-height: 100%;
 
         .badge {
             vertical-align: bottom;
-            margin-right: 0.6rem;
+            margin-inline-end: 0.6rem;
         }
     }
 
@@ -380,7 +380,7 @@ $modal-sizes: (
 
 .modal__header--flex {
     .icn-btn {
-        margin-right: - $sd-base-increment;
+        margin-inline-end: - $sd-base-increment;
     }
 }
 
@@ -411,10 +411,10 @@ $modal-sizes: (
 // Background
 .modal__backdrop {
     position: fixed;
-    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: $zindexModalBackdrop;
     background-color: var(--sd-colour-bg--03);
 
@@ -429,7 +429,7 @@ $modal-sizes: (
 
 .modal--fullscreen {
     .modal__header, .modal__body {
-        @include sd-padding('3', 'left');
+        padding-inline-start: var(--space--3);
     }
     
     .modal__heading {

package/app/styles/_normalize.scss

@@ -124,7 +124,7 @@ a:hover {
  */
 
 abbr[title] {
-  border-bottom: none; /* 1 */
+  border-block-end: none; /* 1 */
   text-decoration: underline; /* 2 */
   text-decoration: underline dotted; /* 2 */
 }
@@ -198,11 +198,11 @@ sup {
 }
 
 sub {
-  bottom: -0.25em;
+  inset-block-end: -0.25em;
 }
 
 sup {
-  top: -0.5em;
+  inset-block-start: -0.5em;
 }
 
 /* Embedded content

package/app/styles/_popover.scss

@@ -11,7 +11,7 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 4px;
+    margin-block-end: 4px;
     min-height: 20px;
 }
 
@@ -25,5 +25,5 @@
 }
 
 .sd-popover__close {
-    margin-right: -4px;
+    margin-inline-end: -4px;
 }

package/app/styles/_publisher-styles.scss

@@ -56,17 +56,17 @@
     padding: .3rem 0;
 
     i {
-        margin-right: .5rem;
+        margin-inline-end: .5rem;
     }
 }
 
 .dashboard-thumbnail-block__link {
     color: $sd-colour-interactive;
     text-decoration: none;
-    border-bottom: 1px dotted $sd-colour-interactive;
+    border-block-end: 1px dotted $sd-colour-interactive;
 
     &:hover {
-        border-bottom: 1px solid $sd-colour-interactive;
+        border-block-end: 1px solid $sd-colour-interactive;
         text-decoration: none;
         color: $sd-colour-interactive;
     }
@@ -74,13 +74,13 @@
 
 // Panel border
 .panel-border-left {
-    border-right: 0;
-    border-left: 2px solid rgba(0, 0, 0, 0.4);
+    border-inline-end: 0;
+    border-inline-start: 2px solid rgba(0, 0, 0, 0.4);
 }
 
 .panel-border-right {
-    border-left: 0;
-    border-right: 2px solid rgba(0, 0, 0, 0.4);
+    border-inline-start: 0;
+    border-inline-end: 2px solid rgba(0, 0, 0, 0.4);
 }
 
 // Overlay block
@@ -89,7 +89,7 @@
 
     .sd-overlay-block__overlay-message {
         display: none;
-        margin-top: 1rem;
+        margin-block-start: 1rem;
         color: $grayText;
     }
     
@@ -106,10 +106,10 @@
 
 .sd-overlay-block__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;
     align-items: center;
@@ -166,7 +166,7 @@
     }
 
     + .sd-overlay-block__overlay-action {
-        margin-left: 2rem;
+        margin-inline-start: 2rem;
     }
 }
 

package/app/styles/_sd-tag-input.scss

@@ -1,21 +1,21 @@
 sd-tag-input {
     display: block;
-    padding-bottom: 3rem;
+    padding-block-end: 3rem;
 
     &[data-label] {
         position: relative;
-        padding-top: 1rem;
+        padding-block-start: 1rem;
     }
 }
 
 // Testing
 .sd-tag-input {
     display: block;
-    padding-bottom: 3rem;
+    padding-block-end: 3rem;
 
     &[data-label] {
         position: relative;
-        padding-top: 1rem;
+        padding-block-start: 1rem;
     }
 }
 // Testing
@@ -25,7 +25,7 @@ sd-tag-input {
     display: inline-block;
     font-size: 1.1rem;
     margin: 0;
-    top:0;
+    inset-block-start:0;
     line-height: 100%;
     color: var(--color-text-light);
     text-transform: uppercase;
@@ -40,8 +40,8 @@ tags-input,
 
     .tags-input__host {
         position: relative;
-        margin-top: 0.5rem;
-        margin-bottom: 0;
+        margin-block-start: 0.5rem;
+        margin-block-end: 0;
         height: 100%;
 
         &:active {
@@ -102,15 +102,15 @@ tags-input,
                 color: var(--color-text);
                 cursor: pointer;
                 transition: background-color .2s ease-out, color .1s ease-out, opacity .1s ease-out;
-                margin-right: -1rem;
-                margin-left:  0.8rem;
+                margin-inline-end: -1rem;
+                margin-inline-start:  0.8rem;
 
                 [class^="icon-"], [class*=" icon-"] {
                     color: var(--color-text-light);
                     font-size: 1.6rem;
                     flex-grow: 0;
                     flex-shrink: 0;
-                    margin-left: 1px;
+                    margin-inline-start: 1px;
                     opacity: 0.4;
                     transition: color .1s ease-out, opacity .1s ease-out;
                 }
@@ -160,7 +160,7 @@ tags-input,
             outline: none;
             margin: 0.2rem;
             padding: 0;
-            float: left;
+            float: inline-start;
             height: 26px;
             color: currentColor;
             background-color: transparent;
@@ -190,7 +190,7 @@ tags-input,
 
     .tags-input__tags--boxed {
         background-color: rgba(0, 0, 0, 0.05);
-        padding-left: 0.4rem;
+        padding-inline-start: 0.4rem;
         border-radius: $border-radius__base--x-small;
 
         &:hover {
@@ -200,7 +200,7 @@ tags-input,
 
     &.ng-invalid {
         .tags-input__tags {
-            border-bottom: 1px solid $red !important;
+            border-block-end: 1px solid $red !important;
             box-shadow: 0 1px 0 $red !important;
         }
     }
@@ -486,7 +486,7 @@ tags-input,
         align-items: center;
         justify-content: center;
         gap: 4px;
-        border-bottom: 1px solid var(--sd-colour-line--light);
+        border-block-end: 1px solid var(--sd-colour-line--light);
         padding: 4px;
     }
 
@@ -495,7 +495,7 @@ tags-input,
         align-items: center;
         justify-content: center;
         gap: 4px;
-        border-bottom: 1px solid var(--sd-colour-line--x-light);
+        border-block-end: 1px solid var(--sd-colour-line--x-light);
         padding: 4px;
     }
 
@@ -625,9 +625,9 @@ tags-input,
         display: inline-block;
         margin-inline-end: 1rem;
         vertical-align: middle;
-        border-left: 0.4rem solid transparent;
-        border-right: 0.4rem solid transparent;
-        border-top: 0.4rem solid var(--color-text);
+        border-inline-start: 0.4rem solid transparent;
+        border-inline-end: 0.4rem solid transparent;
+        border-block-start: 0.4rem solid var(--color-text);
         pointer-events: none;
         opacity: 0.4;
         content: "";

package/app/styles/_simple-list.scss

@@ -56,7 +56,7 @@ $simple-list-border-color: $neutral-border-color;
         font-size: 1.1rem;
         line-height: 100%;
         text-transform: uppercase;
-        padding-right: 1rem;
+        padding-inline-end: 1rem;
         margin: 0;
         color: inherit;
         opacity: 0.65;
@@ -76,17 +76,17 @@ $simple-list-border-color: $neutral-border-color;
 .simple-list--dotted {
     .simple-list__item {
         padding: 0.8rem 0;
-        border-bottom: 1px dotted $simple-list-border-color;
+        border-block-end: 1px dotted $simple-list-border-color;
 
         &:first-child {
-            border-top: 1px dotted $simple-list-border-color;
+            border-block-start: 1px dotted $simple-list-border-color;
         }
     }
 
     &.simple-list--no-border-b {
         .simple-list__item {
             &:last-child {
-                border-bottom: none;
+                border-block-end: none;
             }
         }
     }
@@ -94,7 +94,7 @@ $simple-list-border-color: $neutral-border-color;
     &.simple-list--no-border-t {
         .simple-list__item {
             &:first-child {
-                border-top: none;
+                border-block-start: none;
             }
         }
     }
@@ -117,7 +117,7 @@ $simple-list-border-color: $neutral-border-color;
 }
 
 .simple-list--no-padding-b {
-    padding-bottom: 0;
+    padding-block-end: 0;
 }
 
 .simple-list--fixedW-x-small {

package/app/styles/_table-list.scss

@@ -48,7 +48,7 @@ $table-list-palette: $sd-basic-palette;
     &:hover {
         .table-list__slide-in-actions,
         .table-list__actions--slide-in {
-            padding-left: 0.6rem;
+            padding-inline-start: 0.6rem;
             width: auto;
             max-width: 56px;
             overflow: visible;
@@ -67,7 +67,7 @@ $table-list-palette: $sd-basic-palette;
 }
 
 .table-list__item--margin {
-    margin-bottom: $sd-base-increment;
+    margin-block-end: $sd-base-increment;
 }
 
 .table-list__item--selected {

package/app/styles/_tables.scss

@@ -7,26 +7,26 @@ $sd-tableBorderColor: var(--sd-colour-line--medium);
     width: 100%;
     border-collapse: separate;
     border-spacing: 0px;
-    border-top: 1px solid $sd-tableBorderColor;
-    border-bottom: 1px solid $sd-tableBorderColor;
+    border-block-start: 1px solid $sd-tableBorderColor;
+    border-block-end: 1px solid $sd-tableBorderColor;
 
     th, td {
         padding: 1.2rem 0.8rem;
         text-align: start;
         vertical-align: top;
-        border-bottom: 1px solid $sd-tableBorderColor;
+        border-block-end: 1px solid $sd-tableBorderColor;
         font-weight: 500;
     }
 
     tr:last-child {
         td {
-            border-bottom: none;
+            border-block-end: none;
         }
     }
 
     th {
         font-weight: 600;
-        border-bottom: 2px solid $sd-tableBorderColor;
+        border-block-end: 2px solid $sd-tableBorderColor;
     }
 
     // Bottom align for column headings
@@ -82,7 +82,7 @@ $sd-tableBorderColor: var(--sd-colour-line--medium);
     flex-direction: column;
 
     span + span {
-        margin-left: .4rem;
+        margin-inline-start: .4rem;
     }
 }
 
@@ -97,7 +97,7 @@ $sd-tableBorderColor: var(--sd-colour-line--medium);
 
     .sd-display-table__cell {
         font-weight: 600;
-        border-bottom: 2px solid var(--sd-colour-line--light);
+        border-block-end: 2px solid var(--sd-colour-line--light);
     }
 }
 
@@ -112,7 +112,7 @@ $sd-tableBorderColor: var(--sd-colour-line--medium);
 .sd-display-table__cell {
     display: table-cell;
     padding: 1.2rem 0.8rem;
-    border-bottom: 1px solid var(--sd-colour-line--light);
+    border-block-end: 1px solid var(--sd-colour-line--light);
     font-weight: 500;
     text-align: start;
 
@@ -138,7 +138,7 @@ $sd-tableBorderColor: var(--sd-colour-line--medium);
     flex-wrap: nowrap;
     justify-content: center;
     padding: 1.2rem 0.8rem;
-    border-bottom: 1px solid var(--sd-colour-line--light);
+    border-block-end: 1px solid var(--sd-colour-line--light);
     font-weight: 500;
     text-align: start;
     min-width: 120px;
@@ -146,5 +146,5 @@ $sd-tableBorderColor: var(--sd-colour-line--medium);
 
 .sd-flex-table--head .sd-flex-table__cell {
     font-weight: 600;
-    border-bottom: 2px solid var(--sd-colour-line--light);
+    border-block-end: 2px solid var(--sd-colour-line--light);
 }

package/app/styles/_tabs-vertical.scss

@@ -2,7 +2,7 @@
 
 .nav-tabs-vertical {
     width: 3rem;
-    border-right: 1px solid var(--sd-colour-line--medium);
+    border-inline-end: 1px solid var(--sd-colour-line--medium);
     transition: all .2s ease-out .3s; 
     opacity: 1;
 }
@@ -45,8 +45,8 @@
 
     &:after {
         content: "";
-        float: left;
-        margin-top: 100%;
+        float: inline-start;
+        margin-block-start: 100%;
     }
 }
 

package/app/styles/_tabs.scss

@@ -35,7 +35,7 @@ $nav-tab-active-link-border-color: $sd-colour-interactive;  // active state bord
     color: $link-color;
     background: none;
     border:0;
-    border-bottom: 3px solid transparent;
+    border-block-end: 3px solid transparent;
     text-decoration: none;
 
     &:hover {
@@ -70,14 +70,14 @@ $nav-tab-active-link-border-color: $sd-colour-interactive;  // active state bord
     color: $sd-text-light;
     background: none;
     border:0;
-    border-bottom: 3px solid transparent;
+    border-block-end: 3px solid transparent;
     text-decoration: none;
     transition: all 0.2s ease-in-out;
 
     span {
         line-height: 1;
         display: inline-block;
-        margin-top: 3px;
+        margin-block-start: 3px;
     }
 
     &:hover {
@@ -124,7 +124,7 @@ $nav-tab-active-link-border-color: $sd-colour-interactive;  // active state bord
 
 .nav-tabs__pane {
     .subnav {
-        margin-top: 1px;
+        margin-block-start: 1px;
     }
 }