superdesk-ui-framework 3.0.62 → 3.0.64

package/app/styles/dropdowns/_basic-dropdown.scss

@@ -76,9 +76,9 @@ $focus-box-shadow:              0 0 0 3px $sd-colour--focus-shadow;
     vertical-align: middle;
     margin-block-start: -2px;
     margin-inline-start: 6px;
-    border-left:  4px solid transparent;
-    border-right: 4px solid transparent;
-    border-top:   4px solid $sd-text;
+    border-inline-start:  4px solid transparent;
+    border-inline-end: 4px solid transparent;
+    border-block-start:   4px solid $sd-text;
     opacity: .3;
     content: "";
     transition: all 0.1s ease-in;
@@ -102,7 +102,7 @@ $focus-box-shadow:              0 0 0 3px $sd-colour--focus-shadow;
 
 .dropdown__menu {
     position: absolute;
-    top: 100%;
+    inset-block-start: 100%;
     inset-inline-start: 0;
     z-index: $zindexDropdown;
     display: none; // none by default, but block on "open" of the menu
@@ -203,8 +203,8 @@ $focus-box-shadow:              0 0 0 3px $sd-colour--focus-shadow;
         height: $sd-base-increment * 4;
         border: 1px solid var(--sd-colour-line--light);
         border-radius: var(--b-radius--small);
-        padding-right: 5px;
-        padding-left: 5px;
+        padding-inline-end: 5px;
+        padding-inline-start: 5px;
         transition: all 0.2s ease;
         color: var(--color-text);
         background-color: var(--sd-colour-bg__searchbar);
@@ -305,7 +305,7 @@ $focus-box-shadow:              0 0 0 3px $sd-colour--focus-shadow;
         position: relative;
         color: #747474;
         padding: .6rem 1.6rem;
-        margin-bottom: .2rem;
+        margin-block-end: .2rem;
         font-size: 1.3rem;
         text-align: start;
     }
@@ -315,7 +315,7 @@ $focus-box-shadow:              0 0 0 3px $sd-colour--focus-shadow;
         margin: 0;
 
         + .dropdown__menu-info {
-            margin-left: 4px;
+            margin-inline-start: 4px;
         }
     }
 }
@@ -341,7 +341,7 @@ $focus-box-shadow:              0 0 0 3px $sd-colour--focus-shadow;
         cursor: pointer;
 
         i {
-            margin-right: 0 !important;
+            margin-inline-end: 0 !important;
         }
 
         &:hover, &:focus {
@@ -351,14 +351,14 @@ $focus-box-shadow:              0 0 0 3px $sd-colour--focus-shadow;
     }
 }
 .dropdown__menu-header {
-    border-bottom: 1px solid var(--color-border-line--light);
+    border-block-end: 1px solid var(--color-border-line--light);
     margin-block-end: 0.6rem;
 }
 
 .dropdown__menu-footer {
     padding: 1rem;
     margin-block-start: 0.6rem;
-    border-top: 1px solid var(--color-border-line--light);
+    border-block-start: 1px solid var(--color-border-line--light);
 }
 
 .dropdown__menu-footer--align-right {
@@ -454,16 +454,16 @@ $focus-box-shadow:              0 0 0 3px $sd-colour--focus-shadow;
     // Reverse the caret
     .dropdown__caret {
         @include transition(all, 0.2s, eas-in);
-        border-top: 0;
-        border-bottom: 4px solid $black;
+        border-block-start: 0;
+        border-block-end: 4px solid $black;
         content: "\2191";
     }
 
     // Different positioning for bottom up menu
     .dropdown__menu {
-        top: auto;
-        bottom: 100%;
-        margin-bottom: 4px;
+        inset-block-start: auto;
+        inset-block-end: 100%;
+        margin-block-end: 4px;
     }
 
     &.open {
@@ -478,7 +478,7 @@ $focus-box-shadow:              0 0 0 3px $sd-colour--focus-shadow;
     vertical-align: middle;
 
     .dropdown__menu {
-        top: -2.3rem;
+        inset-block-start: -2.3rem;
         inset-inline-start: auto;
         inset-inline-end: calc(100% + 0.3rem);
     }
@@ -489,7 +489,7 @@ $focus-box-shadow:              0 0 0 3px $sd-colour--focus-shadow;
     vertical-align: middle;
 
     .dropdown__menu {
-        top: -2.3rem;
+        inset-block-start: -2.3rem;
         inset-inline-start: 100%;
     }
 }
@@ -511,8 +511,8 @@ $focus-box-shadow:              0 0 0 3px $sd-colour--focus-shadow;
 .dropdown--dropright, .dropdown--dropleft {
     &.dropdown--dropup {
         .dropdown__menu {
-            bottom: -2.3rem;
-            top: auto;
+            inset-block-end: -2.3rem;
+            inset-block-start: auto;
         }
     }
 }
@@ -594,7 +594,7 @@ $focus-box-shadow:              0 0 0 3px $sd-colour--focus-shadow;
         border-radius: $dropdownMenuBorderRadius;
         border:0;
         z-index: 1;
-        margin-top: -1px;
+        margin-block-start: -1px;
 
         &:before {
             display: none;
@@ -608,7 +608,7 @@ $focus-box-shadow:              0 0 0 3px $sd-colour--focus-shadow;
                 padding: 0;
 
                 i {
-                    margin-right: 0;
+                    margin-inline-end: 0;
                 }
 
                 span {
@@ -624,7 +624,7 @@ $focus-box-shadow:              0 0 0 3px $sd-colour--focus-shadow;
     color: inherit;
     font-weight: 300;
     opacity: 0.65;
-    padding-right: 0.5rem; 
+    padding-inline-end: 0.5rem; 
     letter-spacing: 0.02rem;
 }
 
@@ -662,7 +662,7 @@ $focus-box-shadow:              0 0 0 3px $sd-colour--focus-shadow;
     .dropdown__toggle--line {
         border-radius: $border-radius__base--x-small $border-radius__base--x-small 0 0;
         background-color: var(--color-input-bg);
-        border-bottom: 1px solid var(--color-input-border);
+        border-block-end: 1px solid var(--color-input-border);
 
         &:hover {
             border-color: var(--color-input-border-hover);
@@ -697,8 +697,8 @@ $focus-box-shadow:              0 0 0 3px $sd-colour--focus-shadow;
 
     .dropdown__toggle {
         .dropdown__caret {
-            float: right;
-            margin-top: 6px;
+            float: inline-end;
+            margin-block-start: 6px;
         }
     }
 }
@@ -711,12 +711,12 @@ $focus-box-shadow:              0 0 0 3px $sd-colour--focus-shadow;
     overflow-x: hidden;
 
     li {
-        margin-bottom: 4px;
+        margin-block-end: 4px;
     }
 
     li button {
         width: 300px !important;
-        padding-right: 30px;
+        padding-inline-end: 30px;
         overflow: hidden;
         text-overflow: ellipsis;
         position: relative;
@@ -724,8 +724,8 @@ $focus-box-shadow:              0 0 0 3px $sd-colour--focus-shadow;
 
         i {
             position: absolute;
-            right: -5px;
-            top: 9px;
+            inset-inline-end: -5px;
+            inset-block-start: 9px;
         }
 
         &.disabled, &.disabled:hover {

package/app/styles/dropdowns/_input-dropdown.scss

@@ -2,21 +2,21 @@
 
 .dropdown.dropdown--input-addon {
     position: absolute;
-    right: 12px;
-    margin-top: -1px;
+    inset-inline-end: 12px;
+    margin-block-start: -1px;
 
     > .dropdown__toggle {
         height: 22px;
         line-height: 0;
         padding: 2px 6px;
         box-shadow: none;
-        margin-bottom: 2px;
+        margin-block-end: 2px;
         background-color: transparent;
         box-shadow: none;
 
         .dropdown__caret {
             padding: 0px;
-            margin-left: 0;
+            margin-inline-start: 0;
         }
     }
     

package/app/styles/dropdowns/_navigation_dropdown.scss

@@ -32,22 +32,22 @@
                 .circle {
                     width: 32px;
                     height: 32px;
-                    margin-top: 8px;
-                    margin-left: 0;
+                    margin-block-start: 8px;
+                    margin-inline-start: 0;
                 }
             }
         }
     }
 
     .caret {
-        margin-left: 15px;
+        margin-inline-start: 15px;
     }
 
     .dropdown__menu {
         border-radius: 0px;
         border:0;
         z-index: 2;
-        margin-top: -1px;
+        margin-block-start: -1px;
         min-width: 200px;
         box-shadow: $shadow__dropdown--default;
         padding: 10px 0;
@@ -82,11 +82,11 @@
                     margin: 0;
                     height: 41px;
                     padding: 10px 10px;
-                    border-top: 1px solid #e0e0e0;
+                    border-block-start: 1px solid #e0e0e0;
                     border-radius: 0px;
 
                     i {
-                        margin-right: 10px;
+                        margin-inline-end: 10px;
                     }
 
                     &:hover {
@@ -111,8 +111,8 @@
                 width: auto;
                 min-width: 50px;
                 clear: none;
-                margin-right: 10px;
-                float: right;
+                margin-inline-end: 10px;
+                float: inline-end;
             }
         }
     }

package/app/styles/dropdowns/_other_dropdown.scss

@@ -1,7 +1,7 @@
 
 .sd-widget.metadata {
     .dropdown {
-        margin-right: -5px;
+        margin-inline-end: -5px;
 
         .dropdown__toggle {
             display: inline-block;
@@ -9,7 +9,7 @@
             min-width: 40px;
             box-sizing: border-box;
             height: 28px;
-            margin-top: -5px;
+            margin-block-start: -5px;
             border-radius: $border-radius__base--x-small;
             border: 1px solid #f8f8f8;
             padding: 4px 10px;
@@ -23,7 +23,7 @@
 
         .dropdown__menu {
             margin: 0;
-            margin-top: -5px;
+            margin-block-start: -5px;
             box-sizing: border-box;
             border-radius:0;
             max-width: $tabpane-width - 40px;
@@ -53,7 +53,7 @@
 
     .dropdown-nested {
         position: absolute;
-        right: 0px;
-        margin-top: 0px;
+        inset-inline-end: 0px;
+        margin-block-start: 0px;
     }
 }

package/app/styles/editor/_editor-buttons.scss

@@ -53,6 +53,6 @@ $editor-styleButton-size: 			3rem;
 }
 
 .Editor3-styleButton--short {
-	padding-right: 0.2rem;
-	margin-right: -1rem;
+	padding-inline-end: 0.2rem;
+	margin-inline-end: -1rem;
 }

package/app/styles/editor/_editor-themes.scss

@@ -316,10 +316,10 @@ $body-font-size: (
 }
 
 .theme-preview__block {
-	margin-bottom: 1.2rem;
+	margin-block-end: 1.2rem;
 
 	&:last-child {
-		margin-bottom: 0;
+		margin-block-end: 0;
 	}
 
 	.sd-checkbox--button-style,
@@ -352,8 +352,8 @@ $body-font-size: (
 	line-height: 140%;
 	color: inherit;
 	font-family: inherit;
-	border-bottom: 1px dotted var(--sd-editor-colour__main-border);
-	margin-bottom: 0.8rem;
+	border-block-end: 1px dotted var(--sd-editor-colour__main-border);
+	margin-block-end: 0.8rem;
 	padding: 1rem 0 0.5rem;
 	flex-direction: column;
 	justify-content: flex-end;
@@ -363,7 +363,7 @@ $body-font-size: (
 	display: flex;
 	color: inherit;
 	font-family: inherit;
-	margin-bottom: 0.8rem;
+	margin-block-end: 0.8rem;
 	padding: 1rem 0 0.5rem;
 	flex-direction: column;
 }
@@ -372,7 +372,7 @@ $body-font-size: (
 	text-align: end;
 
 	.sd-check__wrapper+.sd-check__wrapper {
-		margin-left: 0.2rem;
+		margin-inline-start: 0.2rem;
 	}
 }
 

package/app/styles/form-elements/_autocomplete.scss

@@ -2,7 +2,7 @@
 
 .sd-searchbar, .sd-input--inline-label {
     .p-autocomplete-panel {
-        margin-top: 0;
+        margin-block-start: 0;
     }
 }
 
@@ -19,7 +19,7 @@
         color: inherit !important;
         z-index: 1;
         border-radius: $border-radius__base--full;
-        right:8px;
+        inset-inline-end:8px;
 
     }
 }
@@ -35,7 +35,7 @@
 
 .sd-input {
     .p-autocomplete-loader {
-        margin-top: -1.4rem;
+        margin-block-start: -1.4rem;
         
         &.pi {
             font-size: 2rem !important;
@@ -46,6 +46,6 @@
 
 .sd-input.sd-input--inline-label {
     .p-autocomplete-loader {
-        margin-top: -1rem;
+        margin-block-start: -1rem;
     }
 }

package/app/styles/form-elements/_checkbox.scss

@@ -37,8 +37,8 @@ $checkButtonBorderRadius: $border-radius__base--small;
         -moz-osx-font-smoothing: grayscale;
         color: #fff;
         position: absolute;
-        top: 0;
-        left: 0;
+        inset-block-start: 0;
+        inset-inline-start: 0;
         transform: scale(0.25, 0.25);
     }
 
@@ -75,7 +75,7 @@ $checkButtonBorderRadius: $border-radius__base--small;
         content:' ';
         position: absolute;
         background-color: $sd-colour-interactive;
-        top: 0.2rem;
+        inset-block-start: 0.2rem;
         inset-inline-start: 0.2rem;
         opacity: 0;
         transition: all 0.1s ease-in;
@@ -354,7 +354,7 @@ $checkButtonBorderRadius: $border-radius__base--small;
 }
 
 .sd-check-button {
-    @include sd-padding('1-5', 'x');
+    padding-inline: var(--space--1-5);
     line-height: 1;
     border: 1px solid $checkButtonBorderColor;
     border-radius: $checkButtonBorderRadius;
@@ -696,7 +696,7 @@ $checkButtonBorderRadius: $border-radius__base--small;
 // Superdeks untill they are refactored
 
 .toggle-button {
-    @include sd-padding('1-5', 'x');
+    padding-inline: var(--space--1-5);
     @include text-overflow;
     line-height: 1;
     border: 1px solid $checkButtonBorderColor;