Added base code for RTL support #1056

dev/Common/Translator.js

@@ -13,6 +13,7 @@ const
 		if (rl.I18N) {
 			I18N_DATA = rl.I18N;
 			rl.I18N = null;
+			doc.documentElement.dir = I18N_DATA.LANG_DIR;
 			return 1;
 		}
 	},

dev/Styles/@Main.less

@@ -53,6 +53,8 @@
 
 @import "User/Animations.less";
 
+@import "rtl.less";
+
 @import "_End.less";
 
 @media print {

dev/Styles/Components.less

@@ -42,7 +42,7 @@
 	}
 
 	span {
-		margin-left: 0.5em;
+		margin: 0 0.5em;
 		white-space: normal;
 	}
 
@@ -57,13 +57,6 @@
 	margin-bottom: 6px;
 	padding: 2px 0;
 
-	input {
-		opacity:0;
-		position:absolute;
-		top:0;
-		left:0;
-	}
-
 	&:focus-within {
 		outline: 1px dotted;
 	}
@@ -77,17 +70,23 @@
 .e-checkbox.material-design {
 
 	line-height: 20px;
-	padding-left: 18px;
-	position: relative;
 	width: auto !important;
 
 	> div {
+		position: relative;
+		width: 18px;
+	}
+
+	> div > div {
 		position: absolute;
-		margin-top: 1px;
 		.checkbox-box-sizes();
 		animation: checkmark-to-box 200ms ease-out forwards;
 	}
 
+	input {
+		opacity:0;
+	}
+
 	input:checked + div {
 		.checkbox-mark-sizes();
 		animation: box-to-checkmark 200ms ease-out forwards;

dev/Styles/User/MessageList.less

@@ -198,6 +198,7 @@
 	&.focused {
 		background-color: rgba(128, 128, 128, 0.1);
 		border-left-color: #ccc;
+		border-right-color: #ccc !important;
 	}
 
 	&.priorityHigh .subjectParent::before {
@@ -213,6 +214,7 @@
 	.messageCheckbox {
 		font-size: 16px;
 		padding: 5px .5em 0;
+		white-space: nowrap;
 	}
 	.checkboxMessage {
 		display: inline;
@@ -293,28 +295,34 @@
 	&.hasUnseenSubMessage {
 		background-color: rgba(255, 255, 64, 0.15);
 		border-left-color: lighten(orange, 30%);
+		border-right-color: lighten(orange, 30%) !important;
 		&.focused {
 			border-left-color: darken(orange, 10%);
+			border-right-color: darken(orange, 10%) !important;
 		}
 	}
 
 	&.unseen {
 		background-color: rgba(255, 255, 64, 0.15);
 		border-left-color: orange;
+		border-right-color: orange !important;
 		.senderParent, .subjectParent {
 			font-weight: bold;
 		}
 
 		&.focused {
 			border-left-color: darken(orange, 10%);
+			border-right-color: darken(orange, 10%) !important;
 		}
 	}
 
 	&.checked {
 		border-left-color: lighten(#398CF2, 10%);
+		border-right-color: lighten(#398CF2, 10%) !important;
 
 		&.focused {
 			border-left-color: darken(#398CF2, 5%);
+			border-right-color: darken(#398CF2, 5%) !important;
 		}
 	}
 
@@ -322,6 +330,7 @@
 		background-color: rgba(140, 200, 255, 0.3);
 		border-bottom-color: rgba(57, 140, 242, 0.2);
 		border-left-color: #398CF2;
+		border-right-color: #398CF2 !important;
 		z-index: 101;
 	}
 

dev/Styles/User/SystemDropDown.less

@@ -19,7 +19,6 @@
 	.email-title {
 		text-overflow: ellipsis;
 		overflow: hidden;
-		padding-right: 32px;
 	}
 
 	.audioPlace {