Merge pull request #7880 from RocketChat/fix-sidebar-alignments

[FIX] sidebar paddings
RocketChat · Aug 25, 2017 · a286fec · a286fec
1 parent 3309949
commit a286fec
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 9 deletions.
diff --git a/packages/rocketchat-theme/client/imports/components/sidebar/rooms-list.css b/packages/rocketchat-theme/client/imports/components/sidebar/rooms-list.css
@@ -11,13 +11,15 @@
 
 	&__type {
 		margin-bottom: 0.5rem;
+		margin-left: calc(var(--sidebar-default-padding) - calc(var(--sidebar-default-padding) / 3));
 
 		color: var(--rooms-list-title-color);
 
 		font-size: var(--rooms-list-title-text-size);
 	}
 
 	&__empty-room {
+		margin-left: calc(var(--sidebar-default-padding) - calc(var(--sidebar-default-padding) / 3));
 
 		color: var(--rooms-list-empty-text-color);
 
@@ -43,3 +45,12 @@
 		background-color: var(--sidebar-background);
 	}
 }
+
+@media (width <= 400px) {
+	.rooms-list {
+		&__type,
+		&__empty-room {
+			margin-left: 0;
+		}
+	}
+}
diff --git a/packages/rocketchat-theme/client/imports/components/sidebar/sidebar-account.css b/packages/rocketchat-theme/client/imports/components/sidebar/sidebar-account.css
@@ -39,6 +39,7 @@
 		flex: 1;
 
 		max-width: 160px;
+		max-width: fit-content;
 		height: calc(var(--sidebar-account-username-size) + 0.1rem);
 		margin-bottom: 0.5rem;
 
@@ -147,7 +148,6 @@
 
 		&-username {
 			width: auto;
-			max-width: 160px;
 			margin: 0  0.65rem;
 
 			font-weight: var(--sidebar-small-account-username-weight);

diff --git a/packages/rocketchat-theme/client/imports/components/sidebar/sidebar-item.css b/packages/rocketchat-theme/client/imports/components/sidebar/sidebar-item.css
@@ -1,11 +1,12 @@
 .sidebar-item {
-
 	position: relative;
 
 	display: flex;
 
 	height: var(--sidebar-item-height);
 
+	padding-left: calc(var(--sidebar-default-padding) - calc(var(--sidebar-default-padding) / 3));
+
 	cursor: pointer;
 
 	border-radius: var(--sidebar-item-radius);
@@ -55,6 +56,7 @@
 
 	&__icon {
 		margin: 0 auto;
+
 		font-size: 1.25rem;
 		fill: currentColor;
 	}
@@ -66,7 +68,7 @@
 
 	&__user-status {
 		position: absolute;
-		right: calc(100% + var(--sidebar-item-user-status-size));
+		left: 4px;
 
 		width: var(--sidebar-item-user-status-size);
 		height: var(--sidebar-item-user-status-size);
@@ -110,8 +112,11 @@
 
 @media (width <= 400px) {
 	.sidebar-item {
+		padding-left: 0;
+
 		&__user-status {
 			right: calc(100% + var(--sidebar-small-item-user-status-size));
+			left: auto;
 		}
 	}
 }
diff --git a/packages/rocketchat-theme/client/imports/components/sidebar/sidebar.css b/packages/rocketchat-theme/client/imports/components/sidebar/sidebar.css
@@ -65,9 +65,8 @@
 		display: none;
 	}
 
-	& .rooms-list,
-	& .unread-rooms {
-		padding: 0 var(--sidebar-default-padding) var(--sidebar-default-padding) var(--sidebar-default-padding);
+	& .rooms-list {
+		padding: 0 calc(var(--sidebar-default-padding) / 3);
 	}
 }
 
@@ -98,6 +97,10 @@
 			padding: 0 var(--sidebar-small-default-padding)  var(--sidebar-small-default-padding)  var(--sidebar-small-default-padding);
 		}
 
+		&__footer {
+			display: none;
+		}
+
 		&:not(&--light) {
 			transform: translate3d(-100%, 0, 0);
 		}

diff --git a/packages/rocketchat-theme/client/imports/components/sidebar/toolbar.css b/packages/rocketchat-theme/client/imports/components/sidebar/toolbar.css
@@ -29,8 +29,8 @@
 
 	&__icon {
 		&--plus {
-				font-size: 1.25rem;
-			}
+			font-size: 1.25rem;
+		}
 	}
 
 	& .rc-input {
@@ -69,8 +69,9 @@
 			}
 
 			&-svg--plus {
-				font-size: 1rem;
 				transform: rotate(45deg);
+
+				font-size: 1rem;
 			}
 		}
 	}