superdesk-ui-framework 3.0.62 → 3.0.64

package/app/styles/form-elements/_forms-general.scss

@@ -1,6 +1,6 @@
 .form__row {
 	width: 100%;
-	padding-bottom: 2rem;
+	padding-block-end: 2rem;
 }
 
 .form__row--flex {
@@ -9,34 +9,34 @@
 }
 
 .form__row--no-padding {
-	padding-bottom: 0;
+	padding-block-end: 0;
 }
 
 .form__row--small-padding,
 .form__row--s-padding {
-	padding-bottom: 0.8rem;
+	padding-block-end: 0.8rem;
 }
 
 .form__row--l-padding {
-	padding-bottom: 3rem;
+	padding-block-end: 3rem;
 }
 
 .form__row--xl-padding {
-	padding-bottom: 4rem;
+	padding-block-end: 4rem;
 }
 
 .form__row--inner {
-	padding-bottom: 0;
-	padding-top: 1rem;
+	padding-block-end: 0;
+	padding-block-start: 1rem;
 }
 
 .form__row--bordered {
 	padding: 1rem 0;
-	border-bottom: 1px solid rgba(123, 123, 123, 0.3);
+	border-block-end: 1px solid rgba(123, 123, 123, 0.3);
 
 	&:first-child,
 	&:only-child {
-		border-top: 1px solid rgba(123, 123, 123, 0.3);
+		border-block-start: 1px solid rgba(123, 123, 123, 0.3);
 	}
 }
 
@@ -58,7 +58,7 @@
 	}
 
 	.sd-line-input+.sd-line-input {
-		margin-left: 1.2rem;
+		margin-inline-start: 1.2rem;
 	}
 
 	// For more complex inline form combinations an additional element that goes inside .form__row--flex container is provided.
@@ -68,11 +68,11 @@
 		margin: 0 0.6rem;
 
 		&:first-child {
-			margin-left: 0;
+			margin-inline-start: 0;
 		}
 
 		&:last-child {
-			margin-right: 0;
+			margin-inline-end: 0;
 		}
 
 		&:only-child {
@@ -91,14 +91,14 @@
 	label {
 		vertical-align: middle;
 		line-height: 1;
-		margin-right: 0.6rem;
+		margin-inline-end: 0.6rem;
 		@include transition(color, 0.15s, ease-in);
 
 		&.form__row-label.form-label {
 			display: block;
 			width: 100%;
-			margin-bottom: 1rem;
-			margin-right: 0;
+			margin-block-end: 1rem;
+			margin-inline-end: 0;
 		}
 	}
 }
@@ -109,7 +109,7 @@
 
 .form__block {
 	display: block;
-	margin-bottom: 1rem;
+	margin-block-end: 1rem;
 	padding: 2rem;
 	border-radius: $border-radius__base--x-small;
 	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 4px 0 rgba(0, 0, 0, 0.2);
@@ -117,7 +117,7 @@
 
 .form__heading {
 	font-size: 1.6rem;
-	padding-bottom: 1.2rem;
+	padding-block-end: 1.2rem;
 	line-height: 120%;
 }
 
@@ -133,7 +133,7 @@
 	gap: $sd-base-increment * 2;
 
 	.form__item {
-		margin-bottom: $sd-base-increment * 2;
+		margin-block-end: $sd-base-increment * 2;
 	}
 }
 
@@ -147,31 +147,31 @@
 
 .form__group--mb-0 {
 	.form__item {
-		margin-bottom: 0;
+		margin-block-end: 0;
 	}
 }
 
 .form__group--mb-1 {
 	.form__item {
-		margin-bottom: $sd-base-increment;
+		margin-block-end: $sd-base-increment;
 	}
 }
 
 .form__group--mb-2 {
 	.form__item {
-		margin-bottom: $sd-base-increment * 2;
+		margin-block-end: $sd-base-increment * 2;
 	}
 }
 
 .form__group--mb-3 {
 	.form__item {
-		margin-bottom: $sd-base-increment * 3;
+		margin-block-end: $sd-base-increment * 3;
 	}
 }
 
 .form__group--mb-4 {
 	.form__item {
-		margin-bottom: $sd-base-increment * 4;
+		margin-block-end: $sd-base-increment * 4;
 	}
 }
 
@@ -181,41 +181,41 @@
 	align-items: stretch;
 
 	.form__item {
-		margin-bottom: 0 !important;
+		margin-block-end: 0 !important;
 	}
 
 	&.form__group--mb-0 {
-		margin-bottom: 0;
+		margin-block-end: 0;
 
 	}
 
 	&.form__group--mb-1 {
-		margin-bottom: $sd-base-increment;
+		margin-block-end: $sd-base-increment;
 
 	}
 
 	&.form__group--mb-2 {
-		margin-bottom: $sd-base-increment * 2;
+		margin-block-end: $sd-base-increment * 2;
 
 	}
 
 	&.form__group--mb-3 {
-		margin-bottom: $sd-base-increment * 3;
+		margin-block-end: $sd-base-increment * 3;
 
 	}
 
 	&.form__group--mb-4 {
-		margin-bottom: $sd-base-increment * 4;
+		margin-block-end: $sd-base-increment * 4;
 	}
 }
 
 .form__header {
-	margin-bottom: 1rem;
+	margin-block-end: 1rem;
 	font-size: 1.6rem;
 }
 
 .form__label {
-	margin-bottom: 0.8rem;
+	margin-block-end: 0.8rem;
 }
 
 .form__item {
@@ -232,7 +232,7 @@
 
 .form__text-block {
 	min-height: $form-input-height;
-	margin-top: $form-label-height;
+	margin-block-start: $form-label-height;
 	color: inherit;
 	font-size: 1.3rem;
 	display: inline-flex;
@@ -243,7 +243,7 @@
 
 	.btn,
 	.icn-btn {
-		margin-top: $form-label-height;
+		margin-block-start: $form-label-height;
 	}
 }
 
@@ -281,14 +281,14 @@
 	}
 
 	.form__text-block {
-		margin-top: 0;
+		margin-block-start: 0;
 	}
 
 	.form__item.form__item--auto-width {
 
 		.btn,
 		.icn-btn {
-			margin-top: 0;
+			margin-block-start: 0;
 		}
 	}
 }
@@ -319,7 +319,7 @@
 	.btn,
 	.icn-btn {
 		flex: 0 0 auto;
-		margin-top: $form-label-height;
+		margin-block-start: $form-label-height;
 	}
 
 	.sd-text {
@@ -338,23 +338,23 @@
 }
 
 .form__group-new--mb-0 {
-	margin-bottom: 0;
+	margin-block-end: 0;
 }
 
 .form__group-new--mb-1 {
-	margin-bottom: $sd-base-increment;
+	margin-block-end: $sd-base-increment;
 }
 
 .form__group-new--mb-2 {
-	margin-bottom: $sd-base-increment * 2;
+	margin-block-end: $sd-base-increment * 2;
 }
 
 .form__group-new--mb-3 {
-	margin-bottom: $sd-base-increment * 3;
+	margin-block-end: $sd-base-increment * 3;
 }
 
 .form__group-new--mb-4 {
-	margin-bottom: $sd-base-increment * 4;
+	margin-block-end: $sd-base-increment * 4;
 }
 
 .form__group-new--inline-labels {
@@ -362,7 +362,7 @@
 	.btn,
 	.icn-btn,
 	.sd-text {
-		margin-top: 0;
+		margin-block-start: 0;
 	}
 }
 
@@ -371,7 +371,7 @@
 	.btn,
 	.icn-btn,
 	.sd-text {
-		margin-top: 0;
+		margin-block-start: 0;
 	}
 }
 
@@ -386,7 +386,7 @@
 		display: inline-block;
 		font-size: 1.6rem;
 		margin: 0;
-		margin-bottom: $sd-base-increment * 1.5;
+		margin-block-end: $sd-base-increment * 1.5;
 		line-height: 1;
 		color: var(--color-label-text);
 		//text-transform: uppercase;

package/app/styles/form-elements/_input-preview.scss

@@ -31,7 +31,7 @@
     }
 
     .tags-preview__tag-item--border {
-        border-left: solid;
+        border-inline-start: solid;
         border-left-width: 5px;
     }
 

package/app/styles/form-elements/_input-wrap.scss

@@ -1,6 +1,6 @@
 
 .input-wrap {
-    padding-top: 0;
+    padding-block-start: 0;
     margin: 0;
     display: grid;
     grid-template-columns: auto 1fr auto;
@@ -42,7 +42,7 @@
     .form-label {
         grid-row: 1/2;
         grid-column: 2/3;
-        margin-bottom: 0 !important;
+        margin-block-end: 0 !important;
         align-items: center;
         justify-content: flex-start;
     }
@@ -92,7 +92,7 @@
         content: "*";
         vertical-align: top;
         font-size: 1.2rem;
-        padding-left: 0.3rem;
+        padding-inline-start: 0.3rem;
     }
 
     .sd-input__label.sd-input__label--boxed::after {

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

@@ -5,7 +5,7 @@
     width: 100%;
     color: var(--color-text);
     border: 0;
-    border-bottom: 1px solid var(--color-input-border);
+    border-block-end: 1px solid var(--color-input-border);
     font-size: 1.4rem;
     background-color: var(--color-input-bg);
     transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
@@ -69,7 +69,7 @@
     transition: opacity ease 0.2s;
     justify-self: start;
     position: relative;
-    margin-bottom: $sd-base-increment;
+    margin-block-end: $sd-base-increment;
     transition: background-color ease 0.2s;
 }
 
@@ -86,7 +86,7 @@
 }
 
 .form-label--marg-b10 {
-    margin-bottom: 10px;
+    margin-block-end: 10px;
 }
 
 .form-label--block {
@@ -102,7 +102,7 @@
         vertical-align: top;
         font-size: 1.2rem;
         padding-inline-start: 0.3rem;
-        margin-top: -2px
+        margin-block-start: -2px
     }
 }
 
@@ -176,7 +176,7 @@
 
 .sd-line-input {
     margin: 0 0 1.8em 0;
-    padding-top: 1.8rem;
+    padding-block-start: 1.8rem;
     position: relative;
 
     input,
@@ -211,7 +211,7 @@
     input[type="file"] {
         &.sd-line-input__input {
             height: 3rem;
-            padding-top: 0.6rem;
+            padding-block-start: 0.6rem;
             font-size: 1.3rem;
 
             &:focus {
@@ -239,7 +239,7 @@
     }
 
     textarea.sd-line-input__input {
-        padding-top: 0.6rem;
+        padding-block-start: 0.6rem;
         display: block;
     }
 
@@ -279,7 +279,7 @@
     }
 
     .sd-line-input__icon-left {
-        left: 0.2rem;
+        inset-inline-start: 0.2rem;
     }
 
     &.sd-line-input--indent-l30 {
@@ -332,21 +332,21 @@
         inset-inline-start: 1px;
         inset-inline-end: auto;
         padding-inline-end: 5.5rem;
-        margin-top: 0.4rem;
+        margin-block-start: 0.4rem;
     }
 
     .sd-line-input__char-count {
         position: absolute;
         inset-inline-end: 1px;
         inset-inline-start: auto;
-        margin-top: 0.5rem;
+        margin-block-start: 0.5rem;
         font-size: 1.1rem;
         font-weight: 400;
         font-style: italic;
     }
 
     .sd-line-input__message {
-        padding-top: 0.4rem;
+        padding-block-start: 0.4rem;
     }
 
     &.sd-line-input--invalid {
@@ -401,7 +401,7 @@
             &.sd-input__input:focus {
                 opacity: 0.5;
                 background-color: var(--color-input-bg);
-                border-bottom: 1px dotted var(--color-input-border);
+                border-block-end: 1px dotted var(--color-input-border);
                 cursor: not-allowed !important;
                 box-shadow: none;
             }
@@ -413,7 +413,7 @@
             &.sd-line-input__select:focus {
                 opacity: 0.5;
                 background-color: var(--color-input-bg);
-                border-bottom: 1px dotted var(--color-input-border);
+                border-block-end: 1px dotted var(--color-input-border);
                 cursor: not-allowed !important;
                 box-shadow: none;
             }
@@ -429,9 +429,9 @@
             width: 0;
             height: 0;
             vertical-align: middle;
-            border-left: 0.4rem solid transparent;
-            border-right: 0.4rem solid transparent;
-            border-top: 0.4rem solid $sd-text;
+            border-inline-start: 0.4rem solid transparent;
+            border-inline-end: 0.4rem solid transparent;
+            border-block-start: 0.4rem solid $sd-text;
             opacity: 0.3;
             content: "";
             z-index: 0;
@@ -481,11 +481,11 @@
     }
 
     &.sd-line-input--no-label {
-        padding-top: 0;
+        padding-block-start: 0;
     }
 
     &.sd-line-input--no-margin {
-        margin-bottom: 0;
+        margin-block-end: 0;
     }
 
     .sd-line-input__plus-btn {
@@ -502,7 +502,7 @@
 
         &::before {
             @include icon-base;
-            margin-top: 0.2rem;
+            margin-block-start: 0.2rem;
             content: "\e629";
             color: $white;
             -webkit-font-smoothing: antialiased;
@@ -519,7 +519,7 @@
 .sd-line-input--flex-row {
     display: inline-flex;
     align-items: center;
-    border-bottom: 1px solid var(--color-input-border);
+    border-block-end: 1px solid var(--color-input-border);
     width: 100%;
 }
 
@@ -556,7 +556,7 @@
 
 .sd-line-input--label-left,
 .sd-line-input--label-left-auto {
-    padding-top: 0;
+    padding-block-start: 0;
     margin: 0;
     display: grid;
     grid-template-columns: auto 1rem 1fr auto;
@@ -564,7 +564,7 @@
     grid-gap: 0;
 
     .sd-line-input__label {
-        margin-top: 0.1rem;
+        margin-block-start: 0.1rem;
         grid-column: 1/2;
         grid-row: 1/2;
         position: static;
@@ -607,7 +607,7 @@
 }
 
 .sd-input__input--invalid {
-    border-bottom: 1px solid $red;
+    border-block-end: 1px solid $red;
     background-color: hsla(357, 79%, 50%, 0.075);
 
     &:hover {
@@ -625,7 +625,7 @@
 .sd-input__input--disabled {
     opacity: 0.5;
     background-color: var(--color-input-bg);
-    border-bottom: 1px dotted var(--color-input-border);
+    border-block-end: 1px dotted var(--color-input-border);
     cursor: not-allowed !important;
     box-shadow: none;
 
@@ -740,7 +740,7 @@
 }
 
 .sd-input {
-    padding-top: 0;
+    padding-block-start: 0;
     margin: 0;
     display: grid;
     grid-template-columns: auto 1fr auto;
@@ -774,7 +774,7 @@
     input[type="file"] {
         &.sd-input__input {
             height: 3rem;
-            padding-top: 0.6rem;
+            padding-block-start: 0.6rem;
             font-size: 1.3rem;
 
             &:focus {
@@ -814,9 +814,9 @@
             height: 0;
             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: "";
@@ -969,7 +969,7 @@
         &.sd-input__input:focus {
             opacity: 0.5;
             background-color: var(--color-input-bg);
-            border-bottom: 1px dotted var(--color-input-border);
+            border-block-end: 1px dotted var(--color-input-border);
             cursor: not-allowed !important;
             box-shadow: none;
         }
@@ -981,7 +981,7 @@
         &.sd-input__select:focus {
             opacity: 0.5;
             background-color: var(--color-input-bg);
-            border-bottom: 1px dotted var(--color-input-border);
+            border-block-end: 1px dotted var(--color-input-border);
             cursor: not-allowed !important;
             box-shadow: none;
         }
@@ -999,7 +999,7 @@
         &.sd-input__duration-input:focus {
             opacity: 0.5;
             //background-color: var(--color-input-bg);
-            //border-bottom: 1px dotted var(--color-input-border);
+            //border-block-end: 1px dotted var(--color-input-border);
             cursor: not-allowed !important;
             box-shadow: none;
         }
@@ -1010,7 +1010,7 @@
             &.duration-input:focus {
                 opacity: 0.5;
                 //background-color: var(--color-input-bg);
-                //border-bottom: 1px dotted var(--color-input-border);
+                //border-block-end: 1px dotted var(--color-input-border);
                 cursor: not-allowed !important;
                 box-shadow: none;
             }

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

@@ -12,7 +12,7 @@
     border: 2px solid rgba(0, 0, 0, 0.2);
     border-radius: $border-radius__base--full;
     vertical-align: middle;
-    margin-right: 0.8rem;
+    margin-inline-end: 0.8rem;
 
     &::after {
         @include opacity(0);
@@ -23,8 +23,8 @@
         content:' ';
         position: absolute;
         background-color: $sd-colour-interactive;
-        top: 0.2rem;
-        left: 0.2rem;
+        inset-block-start: 0.2rem;
+        inset-inline-start: 0.2rem;
         transform: scale(0.25, 0.25);
     }
 

package/app/styles/form-elements/_select-grid.scss

@@ -1,6 +1,6 @@
 .select-grid__overlay-panel {
     z-index: 1500 !important;
-    margin-top: 1px;
+    margin-block-start: 1px;
 }
 
 .select-grid__panel {
@@ -53,7 +53,7 @@
         grid-row: 2/3;
         grid-column: 2/4;
         background-color: var(--color-input-bg);
-        border-bottom: 1px solid var(--color-input-border);
+        border-block-end: 1px solid var(--color-input-border);
         width: 4rem;
     }
 
@@ -73,7 +73,7 @@
 .form__item--auto-width {
     .sd-input--grid-select {
         .btn {
-            margin-top: 0;
+            margin-block-start: 0;
         }
     }
 }

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

@@ -13,9 +13,9 @@
 
     .inner {
         position:absolute;
-        left:0.2rem;
+        inset-inline-start:0.2rem;
         width:1.4rem;
-        top:0.2rem;
+        inset-block-start:0.2rem;
         height:1.4rem;
         background: $white;
         border-radius: $border-radius__base--full;
@@ -27,7 +27,7 @@
         background: var(--sd-colour-interactive--active);
 
         .inner {
-            left:2.4rem;
+            inset-inline-start:2.4rem;
         }
     }
 

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

@@ -175,10 +175,10 @@ $flex-grid-media: (
 }
 
 .flex-grid.flex-grid--boxed + .flex-grid.flex-grid--boxed {
-    margin-top: $flex-grid-gap;
+    margin-block-start: $flex-grid-gap;
 }
 .flex-grid.flex-grid--boxed--small + .flex-grid.flex-grid--boxed--small {
-    margin-top: $flex-grid-gap-small;
+    margin-block-start: $flex-grid-gap-small;
 }
 
 // Media queries