Fix: shorthand paddings and margins

Signed-off-by: Mostafa Ahangarha <ahangarha@riseup.net>

4 files changed, 24 insertions, 12 deletions

diff --git a/core/css/apps.scss b/core/css/apps.scss
index e0529ef17c4..365d94e3a31 100644
--- a/core/css/apps.scss
+++ b/core/css/apps.scss
@@ -340,9 +340,11 @@ kbd {
 				/* TODO: forbid using img as icon in menu? */
 
 				&.svg {
-					padding: 0 12px 0 var(--default-clickable-area);
+					padding-block: 0;
+					padding-inline: var(--default-clickable-area) 12px;
 					:focus-visible {
-						padding: 0 8px 0 calc(var(--default-clickable-area) - 2px);
+						padding-block: 0;
+						padding-inline: calc(var(--default-clickable-area) - 2px) 8px;
 					}
 				}
 				&:first-child img {
@@ -797,7 +799,8 @@ $min-content-width: variables.$breakpoint-mobile - variables.$navigation-width -
 	}
 
 	.info-text {
-		padding: 5px 0 7px 22px;
+		padding-block: 5px 7px;
+		padding-inline: 22px 0;
 		color: var(--color-text-lighter);
 	}
 	input {
diff --git a/core/css/guest.scss b/core/css/guest.scss
index bcd23fc8e69..f1c0ffcd14c 100644
--- a/core/css/guest.scss
+++ b/core/css/guest.scss
@@ -471,7 +471,8 @@ form .warning input[type='checkbox']+label {
 
 /* Additional login options */
 #remember_login {
-	margin: 18px 5px 0 16px !important;
+	margin-block: 18px 0 !important;
+	margin-inline: 16px 5px !important;
 }
 
 /* fixes for update page TODO should be fixed some time in a proper way */
diff --git a/core/css/inputs.scss b/core/css/inputs.scss
index b7b12682a42..f49dd46c6f7 100644
--- a/core/css/inputs.scss
+++ b/core/css/inputs.scss
@@ -77,7 +77,8 @@ button:not(
 	border-radius: var(--border-radius);
 	cursor: text;
 	&:not(.app-navigation-entry-button) {
-		margin: 3px 3px 3px 0;
+		margin: 3px;
+		margin-inline-start: 0;
 	}
 	&:not(
 		:disabled,
@@ -152,7 +153,8 @@ button:not(
 }
 
 div[contenteditable=false] {
-	margin: 3px 3px 3px 0;
+	margin: 3px;
+	margin-inline-start: 0;
 	padding: 7px 6px;
 	font-size: 13px;
 	background-color: var(--color-main-background);
@@ -245,7 +247,8 @@ input:not(
 select,
 div[contenteditable=true],
 textarea {
-	margin: 3px 3px 3px 0;
+	margin: 3px;
+	margin-inline-start: 0;
 	padding: 0 12px;
 	font-size: var(--default-font-size);
 	background-color: var(--color-main-background);
@@ -449,7 +452,8 @@ input {
 				width: $checkbox-radio-size;
 				vertical-align: middle;
 				border-radius: 50%;
-				margin: 0 6px 3px 3px;
+				margin: 0 3px;
+				margin-inline: 3px 6px;
 				border: 1px solid var(--color-text-maxcontrast);
 			}
 			&:not(:disabled):not(:checked) + label:hover:before,
@@ -662,7 +666,8 @@ div.select2-container-multi {
 	}
 }
 div.select2-container {
-	margin: 3px 3px 3px 0;
+	margin: 3px;
+	margin-inline-start: 0;
 	&.select2-container-multi .select2-choices {
 		display: flex;
 		flex-wrap: wrap;
@@ -722,7 +727,8 @@ div.select2-container {
 
 /* Vue v-select */
 .v-select {
-	margin: 3px 3px 3px 0;
+	margin: 3px;
+	margin-inline-start: 0;
 	display: inline-block;
 	.dropdown-toggle {
 		display: flex !important;
@@ -755,7 +761,8 @@ div.select2-container {
 				overflow: hidden;
 				text-overflow: ellipsis;
 				height: 25px;
-				padding: 3px 7px 4px 2px;
+				padding-block: 3px 4px;
+				padding-inline: 2px 7px;
 				margin: 0;
 				cursor: pointer;
 				min-height: 1em;
diff --git a/core/css/styles.scss b/core/css/styles.scss
index 2a6d92a5189..110b2c7f4c4 100644
--- a/core/css/styles.scss
+++ b/core/css/styles.scss
@@ -658,7 +658,8 @@ body[dir='ltr'] .ui-widget.ui-datepicker .ui-widget-header .ui-icon {
 
 span.ui-icon {
 	float: left;
-	margin: 3px 7px 30px 0;
+	margin-block: 3px 30px;
+	margin-inline: 0 7px;
 }
 
 /* ---- TOOLTIPS ---- */