superdesk-ui-framework 3.0.62 → 3.0.64

package/app/styles/layout/_editor.scss

@@ -76,9 +76,9 @@
         opacity: 0;
         position: absolute;
         overflow: hidden;
-        top: 0;
+        inset-block-start: 0;
         width: 0;
-        bottom: 0;
+        inset-block-end: 0;
         inset-inline-end: -320px;
         transition: width 0.2s ease-in-out, opacity 0.2s ease;
         box-shadow: -2px 0 12px hsla(0, 0%, 0%, 0), -3px 0 0 0px hsla(214, 13%, 60%, 0);
@@ -203,7 +203,7 @@
     p {
         font-size: 16px;
         line-height: 1.5;
-        margin-bottom: 24px;
+        margin-block-end: 24px;
     }
 }
 
@@ -276,9 +276,9 @@
     border: 0;
     padding: 0 0 4px;
     inset-inline-start: 50%;
-    margin-left: -18.5px;
+    margin-inline-start: -18.5px;
     margin-block-start: -18.5px;
-    bottom: -25px;
+    inset-block-end: -25px;
     background-color: var(--sd-colour-panel-bg--100);
     z-index: 3;
     line-height: 0;
@@ -291,8 +291,8 @@
 
     &:hover {
         height: 32px;
-        bottom: -32px;
-        padding-top: 2px;
+        inset-block-end: -32px;
+        padding-block-start: 2px;
 
         i {
             opacity: 1;

package/app/styles/layout/_general.scss

@@ -4,27 +4,27 @@
 	height: $subnav-height !important;
 	position: relative;
 	margin: 0 20px 0 0;
-	float: left;
+	float: inline-start;
 
 	>.btn {
-		margin-left: 20px;
-		margin-top: 10px;
+		margin-inline-start: 20px;
+		margin-block-start: 10px;
 	}
 }
 
 .button-stack.right-stack,
 .button-stack--right {
-	float: right;
+	float: inline-end;
 	margin: 0 0 0 5px;
 
 	.navbtn {
-		border-left: 1px solid var(--sd-colour-line--x-light) !important;
-		border-right: 0 !important;
+		border-inline-start: 1px solid var(--sd-colour-line--x-light) !important;
+		border-inline-end: 0 !important;
 	}
 
 	>.btn {
-		margin-right: 12px;
-		margin-left: 0;
+		margin-inline-end: 12px;
+		margin-inline-start: 0;
 	}
 }
 
@@ -43,9 +43,9 @@ a.text-link {
 	[class*=" icon-"] {
 		color: currentColor;
 		vertical-align: middle;
-		margin-right: 0.3rem;
+		margin-inline-end: 0.3rem;
 		position: relative;
-		top: -0.2rem;
+		inset-block-start: -0.2rem;
 	}
 
 	&.text-link--white {
@@ -67,11 +67,11 @@ a.text-link {
 		margin: 0.4rem 0.4rem 0.4rem 0;
 		font-size: 1.4rem;
 		padding: 0 .6rem 0 0;
-		border-right: 1px dotted var(--sd-colour-line--medium);
+		border-inline-end: 1px dotted var(--sd-colour-line--medium);
 
 		&:last-child {
-			padding-right: 0;
-			border-right: none;
+			padding-inline-end: 0;
+			border-inline-end: none;
 		}
 	}
 
@@ -80,11 +80,11 @@ a.text-link {
 		padding: 0 .8rem 0 0;
 		margin: 0.6rem 0.8rem 0.6rem 0;
 		font-size: 1.4rem;
-		border-right: 1px dotted var(--sd-colour-line--medium);
+		border-inline-end: 1px dotted var(--sd-colour-line--medium);
 
 		&:last-child {
-			padding-right: 0;
-			border-right: none;
+			padding-inline-end: 0;
+			border-inline-end: none;
 		}
 	}
 }

package/app/styles/menus/_sd-bottom-tabs.scss

@@ -48,7 +48,7 @@
             }
 
             span {
-                padding-top: 2px;
+                padding-block-start: 2px;
                 overflow: hidden;
                 text-overflow: ellipsis;
                 white-space: nowrap;

package/app/styles/menus/_sd-left-navigation.scss

@@ -15,7 +15,7 @@ $sd-leftNavBtn-borderActive: 4px solid var(--sd-colour-interactive--active);
 
 .sd-left-nav {
     background: $sd-leftNav-bgColor;
-    border-right: 1px solid $sd-leftNav-borderColor;
+    border-inline-end: 1px solid $sd-leftNav-borderColor;
     display: block;
     width: $sd-leftNav-width;
     overflow: auto;
@@ -24,14 +24,14 @@ $sd-leftNavBtn-borderActive: 4px solid var(--sd-colour-interactive--active);
 
 .sd-left-nav--absolute {
     position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
+    inset-block-start: 0;
+    inset-block-end: 0;
+    inset-inline-start: 0;
 }
 
 .sd-left-nav--default {
     background: $sd-leftNav-bgColor;
-    border-right: 1px solid $sd-leftNav-borderColor;
+    border-inline-end: 1px solid $sd-leftNav-borderColor;
 }
 
 .sd-left-nav--blanc {
@@ -113,12 +113,12 @@ $sd-leftNavBtn-borderActive: 4px solid var(--sd-colour-interactive--active);
     padding-block-start: 2.6rem;
     padding-block-end: 0.9rem;
     padding-inline: 1.6rem 0;
-    border-top: 1px solid $sd-leftNav-borderColor;
-    margin-top: 1rem;
+    border-block-start: 1px solid $sd-leftNav-borderColor;
+    margin-block-start: 1rem;
 }
 
 .sd-left-nav__group-header--first,
 .sd-left-nav__group-header:first-child {
     border: none;
-    margin-top: 0;
+    margin-block-start: 0;
 }

package/app/styles/menus/_sd-sidebar-menu.scss

@@ -4,21 +4,21 @@ $sd-sideTabMenu-background: var(--sd-colour-sidebar-menu--20);
 
 .sd-sidebar-menu {
 	position: absolute;
-	bottom: 0;
+	inset-block-end: 0;
 	width: $sd-sidebarMenu-width;
-	top: $nav-height;
+	inset-block-start: $nav-height;
 	background-color: $sd-sidebarMenu-background;
 	z-index: $zindexFixedNavbar - 1;
 	transition: all .3s ease;
 }
 
 .sd-sidebar-menu--left {
-	left: 0;
+	inset-inline-start: 0;
 	box-shadow: 2px 0 5px 0 rgba(0, 0, 0, .25);
 
 	&.main-menu__open {
-		left: $sd-main-menu-width;
-		//right: 0; This doesn't seam to have any function; To be tested; 
+		inset-inline-start: $sd-main-menu-width;
+		//inset-inline-end: 0; This doesn't seam to have any function; To be tested; 
 	}
 }
 
@@ -30,8 +30,8 @@ $sd-sideTabMenu-background: var(--sd-colour-sidebar-menu--20);
 .sd-sidebar-menu__spacer {
 	width: $sd-sidebarMenu-width / 2;
 	margin: 1.8rem auto;
-	border-top: 1px dotted var(--sd-colour-line--medium);
-	border-bottom: 0;
+	border-block-start: 1px dotted var(--sd-colour-line--medium);
+	border-block-end: 0;
 }
 
 .sd-sidebar-menu__btn {
@@ -76,15 +76,15 @@ $sd-sideTabMenu-background: var(--sd-colour-sidebar-menu--20);
 
 .sd-sidebar-menu__main-icon {
 	position: absolute;
-	top: 0.5rem;
-	left: 0.5rem;
+	inset-block-start: 0.5rem;
+	inset-inline-start: 0.5rem;
 	transition: left 0.2s ease-out;
 }
 
 .sd-sidebar-menu__helper-icon {
 	position: absolute;
-	top: 0.5rem;
-	left: 3rem;
+	inset-block-start: 0.5rem;
+	inset-inline-start: 3rem;
 	transition: left 0.2s ease-out, transform 0.2s;
 }
 
@@ -98,11 +98,11 @@ $sd-sideTabMenu-background: var(--sd-colour-sidebar-menu--20);
 
 		&:hover {
 			.sd-sidebar-menu__main-icon {
-				left: -3rem;
+				inset-inline-start: -3rem;
 			}
 
 			.sd-sidebar-menu__helper-icon {
-				left: 0.5rem;
+				inset-inline-start: 0.5rem;
 			}
 		}
 	}
@@ -111,16 +111,16 @@ $sd-sideTabMenu-background: var(--sd-colour-sidebar-menu--20);
 		.sd-sidebar-menu__btn--active {
 			.sd-sidebar-menu__helper-icon {
 				transform: rotate(180deg);
-				left: -3rem;
+				inset-inline-start: -3rem;
 			}
 
 			&:hover {
 				.sd-sidebar-menu__main-icon {
-					left: 4rem;
+					inset-inline-start: 4rem;
 				}
 
 				.sd-sidebar-menu__helper-icon {
-					left: 0.5rem;
+					inset-inline-start: 0.5rem;
 				}
 			}
 		}
@@ -129,8 +129,8 @@ $sd-sideTabMenu-background: var(--sd-colour-sidebar-menu--20);
 
 .sd-sidetab-menu {
 	position: absolute;
-	bottom: 0;
-	top: 0;
+	inset-block-end: 0;
+	inset-block-start: 0;
 	width: $sd-sidebarMenu-width;
 	background-color: $sd-sideTabMenu-background;
 	z-index: 16;
@@ -146,7 +146,7 @@ $sd-sideTabMenu-background: var(--sd-colour-sidebar-menu--20);
 }
 
 .sd-sidetab-menu--right {
-	right: 0;
+	inset-inline-end: 0;
 	box-shadow: inset 4px 0 5px -3px rgba(0, 0, 0, 0.25);
 
 }
@@ -212,8 +212,8 @@ i.sd-sidetab-menu__helper-icon {
 
 .sd-sidetab-menu__info-label {
 	position: absolute;
-	top: 0.3rem;
-	right: 0.3rem;
+	inset-block-start: 0.3rem;
+	inset-inline-end: 0.3rem;
 	text-shadow: none;
 	z-index: 3;
 	margin: 0;
@@ -235,14 +235,14 @@ i.sd-sidetab-menu__helper-icon {
 			opacity: 0;
 			height: 0.8rem;
 			width: 0.8rem;
-			left: 2.0rem;
+			inset-inline-start: 2.0rem;
 			font-size: 8px;
 
 			i {
 				opacity: 0;
 				height: 0.8rem;
 				width: 0.8rem;
-				left: 2.0rem;
+				inset-inline-start: 2.0rem;
 				font-size: 8px;
 			}
 		}
@@ -270,7 +270,7 @@ i.sd-sidetab-menu__helper-icon {
 			opacity: 0;
 			//height:0.8rem;
 			//width:0.8rem;
-			//left: 2.0rem;
+			//inset-inline-start: 2.0rem;
 			font-size: 8px;
 
 			i {
@@ -278,7 +278,7 @@ i.sd-sidetab-menu__helper-icon {
 				height: 0.8rem !important;
 				width: 0.8rem !important;
 				font-size: 8px !important;
-				//left: 2.0rem
+				//inset-inline-start: 2.0rem
 			}
 		}
 	}
@@ -318,14 +318,14 @@ i.sd-sidetab-menu__helper-icon {
 .sd-side-menu__helper-icon,
 .sd-side-menu__main-icon {
 	position: absolute;
-	top: 0.5rem;
-	left: 0.5rem;
+	inset-block-start: 0.5rem;
+	inset-inline-start: 0.5rem;
 }
 
 .sd-side-menu__helper-icon {
 	opacity: 0;
 	margin: 0;
-	left: 0.6rem;
+	inset-inline-start: 0.6rem;
 	width: 2.4rem;
 	height: 2.4rem;
 	font-size: 2.4rem;
@@ -341,8 +341,8 @@ i.sd-sidetab-menu__helper-icon {
 
 .sd-side-menu__info-label {
 	position: absolute;
-	top: 0.3rem;
-	right: 0.3rem;
+	inset-block-start: 0.3rem;
+	inset-inline-end: 0.3rem;
 	text-shadow: none;
 	z-index: 3;
 	margin: 0;
@@ -363,7 +363,7 @@ i.sd-sidetab-menu__helper-icon {
 //       opacity: 0;
 //       height:0.8rem;
 //       width:0.8rem;
-//       left: 2.0rem;
+//       inset-inline-start: 2.0rem;
 //       font-size: 8px;
 //     }
 //   }
@@ -386,7 +386,7 @@ i.sd-sidetab-menu__helper-icon {
 			opacity: 0;
 			height: 0.8rem;
 			width: 0.8rem;
-			left: 2.0rem;
+			inset-inline-start: 2.0rem;
 			font-size: 8px;
 		}
 	}
@@ -400,7 +400,7 @@ i.sd-sidetab-menu__helper-icon {
 	position: relative;
 
 	ul {
-		margin-top: 24px;
+		margin-block-start: 24px;
 	}
 }
 

package/app/styles/menus/_sd-top-menu.scss

@@ -4,11 +4,11 @@ $sd-topMenu-background: var(--sd-colour-top-menu);
     background: $sd-topMenu-background;
     height: $nav-height;
     position: absolute;
-    right: 0;
-    left: 0;
-    top: 0;
+    inset-inline-end: 0;
+    inset-inline-start: 0;
+    inset-block-start: 0;
     z-index: $zindexFixedNavbar;
-    margin-bottom: 0;
+    margin-block-end: 0;
     transition: all 0.3s ease;
     display: flex;
     flex-direction: row;
@@ -73,14 +73,14 @@ $sd-topMenu-background: var(--sd-colour-top-menu);
 
     .label {
         position: absolute;
-        top: 3px;
-        left: 3px;
+        inset-block-start: 3px;
+        inset-inline-start: 3px;
         text-shadow: none;
     }
 }
 
 .current-user-details--compact {
-    @include sd-padding('1');
+    padding: var(--space--1);
     display: flex;
     flex-direction: column;
     justify-content: center;

package/app/styles/primereact/_pr-autocomplete.scss

@@ -8,7 +8,7 @@
 
 .p-autocomplete-panel {
     @include pr-dropdown-panel-base;
-    margin-top: 16px;
+    margin-block-start: 16px;
     padding: 1rem 0;
 
     .p-autocomplete-items {

package/app/styles/primereact/_pr-datepicker.scss

@@ -1,7 +1,7 @@
 .p-datepicker {
     @include pr-dropdown-panel-base;
     padding: 12px;
-    margin-top: 1px;
+    margin-block-start: 1px;
 
     .p-datepicker-title {
         text-transform: uppercase;
@@ -17,7 +17,7 @@
         flex-wrap: wrap;
         padding: .8em 4px;
         min-height: 32px;
-        margin-bottom: 8px;
+        margin-block-end: 8px;
 
         .p-datepicker-prev,
         .p-datepicker-next {
@@ -56,7 +56,7 @@
             display: flex;
             justify-content: center;
             align-items: center;
-            margin-bottom: 16px;
+            margin-block-end: 16px;
             gap: $sd-base-increment;
 
             button {
@@ -79,7 +79,7 @@
 
 .p-datepicker-year {
     font-weight: 400;
-    margin-top: 4px;
+    margin-block-start: 4px;
     color: var(--color-text-light);
 }
 
@@ -120,8 +120,8 @@
     height: 32px;
     border-radius: $border-radius__base--x-small;
     font-weight: normal;
-    margin-left: 4px;
-    margin-right: 4px;
+    margin-inline-start: 4px;
+    margin-inline-end: 4px;
     transition: $sd-transition__menu-item;
 }
 
@@ -133,8 +133,8 @@
     height: 24px;
     text-align: center;
     font-weight: normal;
-    margin-left: 4px;
-    margin-right: 4px;
+    margin-inline-start: 4px;
+    margin-inline-end: 4px;
 }
 
 // selected date style
@@ -177,7 +177,7 @@
             .p-calendar-icon {
                 pointer-events: none;
             }
-            border-bottom: 1px dotted var(--color-input-border);
+            border-block-end: 1px dotted var(--color-input-border);
             background-color: var(--color-input-bg);
         }
     }
@@ -199,7 +199,7 @@
         [class^="icon-"],
         [class*=" icon-"] {
             color: var(--color-text);
-            margin-top: -2px;
+            margin-block-start: -2px;
             opacity: 0.75;
         }
 
@@ -214,7 +214,7 @@
 }
 
 .p-datepicker-calendar {
-    margin-bottom: 8px;
+    margin-block-end: 8px;
 }
 
 .p-datepicker-today > span {

package/app/styles/primereact/_pr-dialog.scss

@@ -7,8 +7,8 @@
 
 .p-dialog-mask {
     position: fixed;
-    top: 0;
-    left: 0;
+    inset-block-start: 0;
+    inset-inline-start: 0;
     width: 100%;
     height: 100%;
     display: none;
@@ -216,7 +216,7 @@
 }
 
 .p-dialog .p-dialog-header {
-    border-bottom: 0 none;
+    border-block-end: 0 none;
     background: transparent;
     position: relative;
     z-index: 1012;
@@ -227,7 +227,7 @@
 }
 
 .p-dialog .p-dialog-header .p-dialog-title {
-    @include sd-padding('2', 'right');
+    padding-inline-end: var(--space--2);
     font-size: 1.8rem;
     font-weight: 300;
     line-height: 27px;
@@ -241,7 +241,7 @@
     background: transparent;
     border-radius: $border-radius__base--full;
     transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-    margin-right: 0;
+    margin-inline-end: 0;
 }
 
 .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover {
@@ -256,7 +256,7 @@
 }
 
 .p-dialog .p-dialog-header .p-dialog-header-icon:last-child {
-    margin-right: 0;
+    margin-inline-end: 0;
 }
 
 .p-dialog .p-dialog-content {
@@ -269,7 +269,7 @@
 }
 
 .p-dialog .p-dialog-footer {
-    border-top: 0 none;
+    border-block-start: 0 none;
     background-color: transparent;
     padding: 0.8rem 1.6rem;
     text-align: end;

package/app/styles/primereact/_pr-dropdown.scss

@@ -127,7 +127,7 @@
             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;
 

package/app/styles/primereact/_pr-general.scss

@@ -37,7 +37,7 @@
     display: inline-flex;
     align-items: center;
     min-height: $height-input--default;
-    border-bottom: 1px solid var(--color-input-border);
+    border-block-end: 1px solid var(--color-input-border);
     background-color: var(--color-input-bg);
     font-size: 1.4rem;
     transition: border linear 0.2s, box-shadow linear 0.2s;

package/app/styles/primereact/_pr-menu.scss

@@ -1,7 +1,7 @@
 .p-tieredmenu {
     &, .p-submenu-list {
-        padding-top: $sd-base-increment;
-        padding-bottom: $sd-base-increment;
+        padding-block-start: $sd-base-increment;
+        padding-block-end: $sd-base-increment;
         background-color: var(--color-dropdown-menu-Bg);
         box-shadow: $shadow__dropdown--default;
         border-radius: $border-radius__base--small;
@@ -31,7 +31,7 @@
     }
     
     .p-menuitem-icon {
-        margin-right: 0.8rem;
+        margin-inline-end: 0.8rem;
         color: var(--color-icon-default);
     }
 }

package/app/styles/primereact/_pr-skeleton.scss

@@ -8,10 +8,10 @@
     content: "";
     animation: p-skeleton-animation 1.2s infinite;
     height: 100%;
-    left: 0;
+    inset-inline-start: 0;
     position: absolute;
-    right: 0;
-    top: 0;
+    inset-inline-end: 0;
+    inset-block-start: 0;
     transform: translateX(-100%);
     z-index: 1;
     background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));

package/app/styles/primereact/_pr-tag-input.scss

@@ -10,7 +10,7 @@
     background: $tag-label-BG-default;
     color: currentColor;
     padding: 5px;
-    border-left: 20px;
+    border-inline-start: 20px;
     border-radius: 30px;
 
     &.selected {
@@ -51,7 +51,7 @@
 
 .tags-input__padding-disabled {
     span {
-        padding-left: 0;
+        padding-inline-start: 0;
         padding-inline: 4px;
     }
 }

package/app/styles/variables/_dimensions.scss

@@ -1,4 +1,4 @@
-$zindexDropdown: 1000;
+$zindexDropdown: 2000;
 $zindexFixedNavbar: 1030;
 $sd-main-menu-width: 30rem;