superdesk-ui-framework 3.0.62 → 3.0.64

package/app/styles/_tag-labels.scss

@@ -89,7 +89,7 @@ $tag-label-lineheight: 100% !default;
             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;
         }
@@ -142,7 +142,7 @@ $tag-label-lineheight: 100% !default;
     z-index: 2;
     display: flex;
     align-items: center;
-    @include sd-padding('1', 'x');
+    padding-inline: var(--space--1);
     box-shadow: 0 1px 1px 0 hsla(0, 0%, 0%, 0.12);
     background-color: var(--sd-colour-bg-translucent--10);
 }
@@ -155,8 +155,8 @@ $tag-label-lineheight: 100% !default;
     }
 
     .sd-search-tags__tag {
-        margin-left: 2px !important;
-        margin-right: 2px !important;
+        margin-inline-start: 2px !important;
+        margin-inline-end: 2px !important;
     }
 }
 

package/app/styles/_thumb-carousel.scss

@@ -39,7 +39,7 @@
     // min-height: 100px;
     // min-width: 300px;
     // max-width: 600px;
-    margin-bottom: 16px;
+    margin-block-end: 16px;
 }
 
 .sd-thumb-carousel__header {
@@ -54,7 +54,7 @@
         color: var(--sd-thumb-carousel__colour-txt);
         opacity: 0.75;
         @include text-overflow;
-        padding-left: 16px;
+        padding-inline-start: 16px;
     }
 }
 
@@ -62,16 +62,16 @@
     flex-grow: 0;
     font-size: 1.6rem;
     font-weight: 600;
-    margin-right: 8px;
+    margin-inline-end: 8px;
 }
 
 .sd-thumb-carousel__header-block--r {
-    margin-left:auto;
+    margin-inline-start:auto;
     display: flex;
     align-items: center;
 
     & > * + * {
-        margin-left: 8px;
+        margin-inline-start: 8px;
     }
 }
 
@@ -88,13 +88,13 @@
 }
 
 .sd-thumb-carousel__description {
-    @include sd-padding('2');
+    padding: var(--space--2);
     flex-grow: 0;
     font-size: 1.4rem;
     line-height: 150%;
     opacity: 0.75;
     font-weight: 400;
-    padding-top: 2px;
+    padding-block-start: 2px;
 }
 
 .sd-thumb-carousel__items-content {
@@ -223,13 +223,13 @@
 }
 
 .sd-thumb-carousel__btn--prev, .p-carousel-prev {
-    left: -16px;
-    margin-right: -26px;
+    inset-inline-start: -16px;
+    margin-inline-end: -26px;
 }
 
 .sd-thumb-carousel__btn--next, .p-carousel-next{
-    right: -16px;
-    margin-left: -26px;
+    inset-inline-end: -16px;
+    margin-inline-start: -26px;
 }
 
 .sd-thumb-carousel__cover-image-icon {
@@ -242,12 +242,12 @@
     border-radius: $border-radius__base--full;
     color: var(--sd-thumb-carousel__colour-indicator--highlight);
     position: absolute;
-    top: 12px;
-    left: 12px;
+    inset-block-start: 12px;
+    inset-inline-start: 12px;
     z-index: 1;
     
     i {
         color: var(--sd-thumb-carousel__colour-indicator--highlight) !important;
-        margin-top: -2px;
+        margin-block-start: -2px;
     }
 }

package/app/styles/_toggle-box.scss

@@ -25,7 +25,7 @@
         }
 
         .toggle-box__header {
-            margin-bottom: 0;
+            margin-block-end: 0;
         }
     }
 
@@ -41,23 +41,23 @@
     }
 
     &.toggle-box--marg-b10 {
-        margin-bottom: 1rem;
+        margin-block-end: 1rem;
     }
 
     &.toggle-box--margin-none {
-        margin-bottom: 0;
+        margin-block-end: 0;
     }
 
     &.toggle-box--margin-small {
-        margin-bottom: $sd-base-increment * 2;
+        margin-block-end: $sd-base-increment * 2;
     }
 
     &.toggle-box--margin-normal {
-        margin-bottom: $sd-base-increment * 3;
+        margin-block-end: $sd-base-increment * 3;
     }
 
     &.toggle-box--margin-large {
-        margin-bottom: $sd-base-increment * 4;
+        margin-block-end: $sd-base-increment * 4;
     }
 }
 
@@ -75,7 +75,7 @@
 a.toggle-box__header {
     display: flex;
     cursor: pointer;
-    margin-bottom: 1.8rem;
+    margin-block-end: 1.8rem;
     align-items: center;
     text-decoration: none !important;
 
@@ -141,7 +141,7 @@ a.toggle-box__header {
 
     i {
         color: $grayLight;
-        margin-right: 0.5rem;
+        margin-inline-end: 0.5rem;
         vertical-align: text-bottom;
     }
     

package/app/styles/_toggle-button.scss

@@ -1,5 +1,5 @@
 .sd-toggle-button {
-    @include sd-padding('1-5', 'x');
+    padding-inline: var(--space--1-5);
     @include text-overflow;
     line-height: 1;
     border: 1px solid $checkButtonBorderColor;

package/app/styles/_tooltips.scss

@@ -52,68 +52,68 @@
 	/* FLOW: UP */
 	&:not([flow])::before,
 	&[flow^="up"]::before {
-		bottom: 100%;
+		inset-block-end: 100%;
 		border-bottom-width: 0;
 		border-top-color: var(--sd-colour-background__tooltip);
 	}
 
 	&:not([flow])::after,
 	&[flow^="up"]::after {
-		bottom: calc(100% + 5px);
+		inset-block-end: calc(100% + 5px);
 	}
 
 	&:not([flow])::before,
 	&:not([flow])::after,
 	&[flow^="up"]::before,
 	&[flow^="up"]::after {
-		left: 50%;
+		inset-inline-start: 50%;
 		transform: translate(-50%, -.5em);
 	}
 
 	/* FLOW: DOWN */
 	&[flow^="down"]::before {
-		top: 100%;
+		inset-block-start: 100%;
 		border-top-width: 0;
 		border-bottom-color: var(--sd-colour-background__tooltip);
 	}
 
 	&[flow^="down"]::after {
-		top: calc(100% + 5px);
+		inset-block-start: calc(100% + 5px);
 	}
 
 	&[flow^="down"]::before,
 	&[flow^="down"]::after {
-		left: 50%;
+		inset-inline-start: 50%;
 		transform: translate(-50%, .5em);
 	}
 
 	/* FLOW: LEFT */
 	&[flow^="left"]::before {
-		top: 50%;
+		inset-block-start: 50%;
 		border-right-width: 0;
 		border-left-color: var(--sd-colour-background__tooltip);
-		left: calc(0em - 5px);
+		inset-inline-start: calc(0em - 5px);
 		transform: translate(-.5em, -50%);
 	}
 
 	&[flow^="left"]::after {
-		top: 50%;
-		right: calc(100% + 5px);
+		inset-block-start: 50%;
+		inset-inline-end: calc(100% + 5px);
 		transform: translate(-.5em, -50%);
 	}
 
 	/* FLOW: RIGHT */
 	&[flow^="right"]::before {
-		top: 50%;
+		inset-block-start: 50%;
 		border-left-width: 0;
 		border-right-color: var(--sd-colour-background__tooltip);
-		right: calc(0em - 5px);
+		inset-inline-end: calc(0em - 5px);
 		transform: translate(.5em, -50%);
 	}
 
 	&[flow^="right"]::after {
-		top: 50%;
-		left: calc(100% + 5px);
+		inset-block-start: 50%;
+		inset-inline-start: calc(100% + 5px);
 		transform: translate(.5em, -50%);
 	}
 
@@ -141,68 +141,68 @@
 	/* FLOW: UP */
 	&:not([data-flow])::before,
 	&[data-flow^="up"]::before {
-		bottom: 100%;
+		inset-block-end: 100%;
 		border-bottom-width: 0;
 		border-top-color: var(--sd-colour-background__tooltip);
 	}
 
 	&:not([data-flow])::after,
 	&[data-flow^="up"]::after {
-		bottom: calc(100% + 5px);
+		inset-block-end: calc(100% + 5px);
 	}
 
 	&:not([data-flow])::before,
 	&:not([data-flow])::after,
 	&[data-flow^="up"]::before,
 	&[data-flow^="up"]::after {
-		left: 50%;
+		inset-inline-start: 50%;
 		transform: translate(-50%, -.5em);
 	}
 
 	/* FLOW: DOWN */
 	&[data-flow^="down"]::before {
-		top: 100%;
+		inset-block-start: 100%;
 		border-top-width: 0;
 		border-bottom-color: var(--sd-colour-background__tooltip);
 	}
 
 	&[data-flow^="down"]::after {
-		top: calc(100% + 5px);
+		inset-block-start: calc(100% + 5px);
 	}
 
 	&[data-flow^="down"]::before,
 	&[data-flow^="down"]::after {
-		left: 50%;
+		inset-inline-start: 50%;
 		transform: translate(-50%, .5em);
 	}
 
 	/* FLOW: LEFT */
 	&[data-flow^="left"]::before {
-		top: 50%;
+		inset-block-start: 50%;
 		border-right-width: 0;
 		border-left-color: var(--sd-colour-background__tooltip);
-		left: calc(0em - 5px);
+		inset-inline-start: calc(0em - 5px);
 		transform: translate(-.5em, -50%);
 	}
 
 	&[data-flow^="left"]::after {
-		top: 50%;
-		right: calc(100% + 5px);
+		inset-block-start: 50%;
+		inset-inline-end: calc(100% + 5px);
 		transform: translate(-.5em, -50%);
 	}
 
 	/* FLOW: RIGHT */
 	&[data-flow^="right"]::before {
-		top: 50%;
+		inset-block-start: 50%;
 		border-left-width: 0;
 		border-right-color: var(--sd-colour-background__tooltip);
-		right: calc(0em - 5px);
+		inset-inline-end: calc(0em - 5px);
 		transform: translate(.5em, -50%);
 	}
 
 	&[data-flow^="right"]::after {
-		top: 50%;
-		left: calc(100% + 5px);
+		inset-block-start: 50%;
+		inset-inline-start: calc(100% + 5px);
 		transform: translate(.5em, -50%);
 	}
 
@@ -317,36 +317,36 @@
 
 .p-tooltip-top .p-tooltip-arrow {
 	border-width: var(--tooltip-arrow_border);
-	bottom: 0;
-	left: calc(50% - 3px);
+	inset-block-end: 0;
+	inset-inline-start: calc(50% - 3px);
 	border-bottom-width: 0;
 	border-top-color: var(--sd-colour-background__tooltip);
 }
 
 .p-tooltip-bottom .p-tooltip-arrow {
 	border-width: var(--tooltip-arrow_border);
-	top: 0;
-	left: calc(50% - 3px);
+	inset-block-start: 0;
+	inset-inline-start: calc(50% - 3px);
 	border-top-width: 0;
 	border-bottom-color: var(--sd-colour-background__tooltip);
 }
 
 .p-tooltip-right .p-tooltip-arrow {
 	border-width: var(--tooltip-arrow_border);
-	top: calc(50% - 3px);
-	left: 0;
+	inset-block-start: calc(50% - 3px);
+	inset-inline-start: 0;
 	border-left-width: 0;
 	border-right-color: var(--sd-colour-background__tooltip);
 }
 
 .p-tooltip-left .p-tooltip-arrow {
 	border-width: var(--tooltip-arrow_border);
-	top: calc(50% - 3px);
-	right: 0;
+	inset-block-start: calc(50% - 3px);
+	inset-inline-end: 0;
 	border-right-width: 0;
 	border-left-color: var(--sd-colour-background__tooltip);
 }
 
 .p-tooltip-right {
-	margin-left: 8px;
+	margin-inline-start: 8px;
 }

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

@@ -60,9 +60,9 @@ $card-item-shadow-hover-light: 0 1px 6px rgba(0,0,0,.1), 0 2px 12px rgba(31, 17,
         &::before {
             content: "";
             position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
+            inset-block-start: 0;
+            inset-inline-start: 0;
+            inset-inline-end: 0;
             height: $card-item-top-border-height;
             background-color: rgba(0,0,0,.2);
             border-radius: $card-item-default-radius $card-item-default-radius 0 0;
@@ -119,8 +119,8 @@ $card-item-shadow-hover-light: 0 1px 6px rgba(0,0,0,.1), 0 2px 12px rgba(31, 17,
 
         .sd-card__actions {
             position: absolute;
-            top: 0.4rem;
-            right:0;
+            inset-block-start: 0.4rem;
+            inset-inline-end:0;
             z-index: 2;
         }
     }
@@ -135,7 +135,7 @@ $card-item-shadow-hover-light: 0 1px 6px rgba(0,0,0,.1), 0 2px 12px rgba(31, 17,
     
     // sd-card__heading should go inside sd-card__header
     .sd-card__heading {
-        @include sd-padding('1-5', 'x');
+        padding-inline: var(--space--1-5);
         padding-block-start: $card-item-top-border-height;
         flex-grow: 1;
         font-size: 1.2rem;
@@ -172,7 +172,7 @@ $card-item-shadow-hover-light: 0 1px 6px rgba(0,0,0,.1), 0 2px 12px rgba(31, 17,
     }
 
     .sd-card__sub-header {
-        @include sd-padding('1-5', 'x');
+        padding-inline: var(--space--1-5);
         background-color: hsl(201, 15%, 67%);
         display: flex;
         align-items: center;
@@ -211,7 +211,7 @@ $card-item-shadow-hover-light: 0 1px 6px rgba(0,0,0,.1), 0 2px 12px rgba(31, 17,
     }
     
     .sd-card__btn-group--right {
-        float: right;
+        float: inline-end;
     }
 
     .sd-card__thumbnail {
@@ -230,7 +230,7 @@ $card-item-shadow-hover-light: 0 1px 6px rgba(0,0,0,.1), 0 2px 12px rgba(31, 17,
         }
     }
     .sd-card__content {
-        @include sd-padding('2');
+        padding: var(--space--2);
         flex-grow: 1;
 
         h4 {
@@ -244,7 +244,7 @@ $card-item-shadow-hover-light: 0 1px 6px rgba(0,0,0,.1), 0 2px 12px rgba(31, 17,
             }
 
             .label {
-                float: right;
+                float: inline-end;
                 height: 15px;
                 margin: auto 0;
                 padding: 3px 5px 0;
@@ -258,7 +258,7 @@ $card-item-shadow-hover-light: 0 1px 6px rgba(0,0,0,.1), 0 2px 12px rgba(31, 17,
             }
 
             .value-label {
-                float: right;
+                float: inline-end;
                 font-size: 13px;
                 color: var(--color-text);
                 font-weight: 400;
@@ -315,7 +315,7 @@ $card-item-shadow-hover-light: 0 1px 6px rgba(0,0,0,.1), 0 2px 12px rgba(31, 17,
         li,
         .sd-card__content-list-item {
             padding: var(--gap--medium);
-            border-bottom: 1px solid var(--sd-colour-line--light);
+            border-block-end: 1px solid var(--sd-colour-line--light);
 
             .sd-card__content-list-inline-span {
                 display: inline-block;
@@ -341,7 +341,7 @@ $card-item-shadow-hover-light: 0 1px 6px rgba(0,0,0,.1), 0 2px 12px rgba(31, 17,
 
         .sd-card__content-list-item--border-bottom {
             &:last-child {
-                border-bottom: 1px solid var(--sd-colour-line--light);
+                border-block-end: 1px solid var(--sd-colour-line--light);
             }
         }
 
@@ -370,7 +370,7 @@ $card-item-shadow-hover-light: 0 1px 6px rgba(0,0,0,.1), 0 2px 12px rgba(31, 17,
         }
 
         .button__view-all {
-            border-bottom: 1px dotted var(--sd-colour-interactive);
+            border-block-end: 1px dotted var(--sd-colour-interactive);
             color: var(--sd-colour-interactive);
             cursor: pointer;
         }
@@ -419,7 +419,7 @@ $card-item-shadow-hover-light: 0 1px 6px rgba(0,0,0,.1), 0 2px 12px rgba(31, 17,
     }
 
     .sd-card__footer {
-        @include sd-padding('1-5', 'x');
+        padding-inline: var(--space--1-5);
         display: flex;
         flex-direction: row;
         align-items: center;
@@ -440,10 +440,10 @@ $card-item-shadow-hover-light: 0 1px 6px rgba(0,0,0,.1), 0 2px 12px rgba(31, 17,
 
     .sd-card__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;
     }
 
@@ -498,8 +498,8 @@ $card-item-shadow-hover-light: 0 1px 6px rgba(0,0,0,.1), 0 2px 12px rgba(31, 17,
         height: 5.2rem;
         width: 5.2rem;
         position: absolute;
-        top: 50%;
-        left: 50%;
+        inset-block-start: 50%;
+        inset-inline-start: 50%;
         margin: -2.6rem 0 0 -2.6rem;
         line-height: 5.2rem;
         opacity: 0.5;
@@ -513,11 +513,11 @@ $card-item-shadow-hover-light: 0 1px 6px rgba(0,0,0,.1), 0 2px 12px rgba(31, 17,
         text-align: center;
         color: $white;
         position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
+        inset-block-start: 0;
+        inset-inline-start: 0;
+        inset-inline-end: 0;
         margin: 0;
-        bottom: 0;
+        inset-block-end: 0;
         display: flex;
         align-items: center;
         justify-content: center;