[mobile ui] better sidebar with padding

frappe/public/css/sidebar.css

@@ -219,7 +219,6 @@ body[data-route^="Module"] .main-menu .form-sidebar {
     box-shadow: 5px 0 25px 0px rgba(0, 0, 0, 0.3);
     height: 100%;
     width: 40%;
-    padding: 25px;
     display: block !important;
     transition: transform 200ms ease-in-out;
   }
@@ -227,11 +226,31 @@ body[data-route^="Module"] .main-menu .form-sidebar {
     transform: translateX(0);
     overflow-y: auto;
   }
+  .layout-side-section .overlay-sidebar .divider {
+    height: 1px;
+    background-color: #d8dfe5;
+    opacity: 0.7;
+  }
+  .layout-side-section .overlay-sidebar li:not(.divider):not(.tagit-new):not(.module-sidebar-item) {
+    padding: 10px 15px;
+  }
+  .layout-side-section .overlay-sidebar .modified-by,
+  .layout-side-section .overlay-sidebar .created-by {
+    margin: 0;
+  }
+  .layout-side-section .overlay-sidebar .badge {
+    top: 9px;
+    right: 15px;
+  }
   .layout-side-section .overlay-sidebar .reports-dropdown {
-    margin: 10px 0;
+    margin-top: 10px;
+    margin-bottom: -10px;
   }
   .layout-side-section .overlay-sidebar .reports-dropdown li:not(.divider) {
-    padding: 10px 0;
+    padding: 12.5px 0 !important;
+  }
+  .layout-side-section .overlay-sidebar .reports-dropdown li.divider {
+    height: 0;
   }
 }
 @media (max-width: 767px) {
@@ -260,7 +279,7 @@ body[data-route^="Module"] .main-menu .form-sidebar {
     padding-right: 0;
   }
   .layout-side-section .module-sidebar-nav .module-link {
-    padding-left: 25px;
+    padding: 15px 15px 15px 25px;
   }
 }
 .sidebar-left .list-sidebar .stat-label,

frappe/public/js/frappe/form/templates/form_sidebar.html

@@ -36,7 +36,6 @@
 <ul class="list-unstyled sidebar-menu form-attachments">
 	<li class="divider"></li>
 	<li class="h6 attachments-label">{%= __("Attachments") %}</li>
-	<li class="divider"></li>
 	<li><a class="strong add-attachment">{%= __("Attach File") %}
 		<i class="octicon octicon-plus" style="margin-left: 2px;"></i></li></a>
 </ul>

frappe/public/js/frappe/list/list_sidebar.html

@@ -13,6 +13,7 @@
 		  </ul>
 		</div>
 	</li>
+	<li class="divider"></li>
 	<li class="hide tree-link"><a href="#Tree/{%= doctype %}">{%= __("Tree") %}</a></li>
     <li class="hide calendar-link"><a href="#Calendar/{%= doctype %}">{%= __("Calendar") %}</a></li>
     <li class="hide gantt-link"><a href="#Gantt/{%= doctype %}">{%= __("Gantt") %}</a></li>

frappe/public/less/sidebar.less

@@ -288,7 +288,6 @@ body[data-route^="Module"] .main-menu {
 			box-shadow: 5px 0 25px 0px rgba(0,0,0,0.3);
 			height: 100%;
 			width: 40%;
-			padding: 25px;
 			display: block !important;
 			transition: transform 200ms ease-in-out;
 
@@ -297,11 +296,35 @@ body[data-route^="Module"] .main-menu {
 				overflow-y: auto;
 			}
 
+			.divider {
+				height: 1px;
+				background-color: #d8dfe5;
+				opacity: 0.7;
+			}
+
+			li:not(.divider):not(.tagit-new):not(.module-sidebar-item) {
+				padding: 10px 15px;
+			}
+
+			.modified-by, .created-by {
+				margin: 0;
+			}
+
+			.badge {
+				top: 9px;
+				right: 15px;
+			}
+
 			.reports-dropdown {
-				margin: 10px 0;
+				margin-top: 10px;
+				margin-bottom: -10px;
 
 				li:not(.divider) {
-					padding: 10px 0;
+					padding: 12.5px 0 !important;
+				}
+
+				li.divider {
+					height: 0;
 				}
 			}
 		}
@@ -334,7 +357,7 @@ body[data-route^="Module"] .main-menu {
 			padding-right: 0;
 
 			.module-link {
-				padding-left: 25px;
+				padding: 15px 15px 15px 25px;
 			}
 		}
 	}