Merge pull request #9247 from RocketChat/fix-sidebar-item-rtl

Fix: Sidebar item on rtl and small devices
RocketChat · Dec 27, 2017 · 30da7fd · 30da7fd
1 parent 935688f
commit 30da7fd
Showing 1 changed file with 25 additions and 10 deletions.
diff --git a/packages/rocketchat-theme/client/imports/components/sidebar/sidebar-item.css b/packages/rocketchat-theme/client/imports/components/sidebar/sidebar-item.css
@@ -280,30 +280,45 @@
 	}
 }
 
-.rtl .sidebar-item__menu {
-	right: auto;
-	left: 0;
-}
+.rtl .sidebar-item {
+	&__menu {
+		right: auto;
+		left: 0;
+	}
 
-.rtl .sidebar-item__user-status {
-	right: 4px;
-	left: initial;
+	&__user-status,
+	&__room-type {
+		right: 4px;
+		left: initial;
+	}
 }
 
 @media (width <= 400px) {
 	.sidebar-item {
-		padding: 0 calc(var(--sidebar-small-default-padding) - 8px);
+		padding: 0 0 0 var(--sidebar-small-default-padding);
 
 		& .badge {
 			margin: 0 0 0 3px;
 		}
 
 		&__user-status {
+			left: 4px;
+		}
+
+		&__room-type {
 			left: 0;
 		}
 	}
 
-	.rtl .sidebar-item__user-status {
-		right: 0;
+	.rtl .sidebar-item {
+		padding: 0 var(--sidebar-small-default-padding) 0 0;
+
+		&__user-status {
+			right: 4px;
+		}
+
+		&__room-type {
+			right: 0;
+		}
 	}
 }