Added custom scroll bars and separated the table header from the tables for Sales and the Graphs tables.

imports/ui/Sales.import.styl

@@ -19,6 +19,54 @@
 			padding: 4px 8px
 			margin: 4px 12px 4px 8px
 			display: table-cell
+	.table
+		table-layout: fixed
+		min-width: 100%
+		thead
+			> tr
+				> th.amount
+					width: 90px
+				> th.product
+					width: auto
+					min-width: 140px
+				> th.price
+					width: 140px
+				> th.measure
+					width: 100px
+				> th.saleDate
+					width: 140px
+				> th.createdDate
+					width: 100px
+				> th.venue
+					width: 160px
+				> th.actions
+					width: 90px
+	.separatedTableHeader
+		table
+			thead
+				> tr
+					> th.actions
+						.newSaleButton
+							padding: 0px 12px
+							.fa-plus-circle
+								display: inline-block
+							.fa-times-circle
+								display: none
+						.newSaleButton:active
+							background-color: #fb557b
+							color: black
+							.fa-times-circle
+								display: inline-block
+							.fa-plus-circle
+								display: none
+						.showOnlyComments
+							color: #bcb95f
+							padding: 4px 8px
+						.showOnlyComments:hover
+							color: white
+							text-shadow: 0px 0px 10px #ff6d1f
+						.showOnlyComments.on
+							color: white
 	.listRow
 		display: table-row
 		.listCell
@@ -38,14 +86,12 @@
 				//margin-bottom: 20px
 				border: 0
 				font-size: 12.5px
-				overflow-y: auto
+				overflow-y: scroll
 				//height: 100%
 				label
 					font-size: 10px
 					font-weight: 800
 				table
-					table-layout: fixed
-					min-width: 100%
 					.saleRemove
 						color: red
 						margin-left: 8px
@@ -57,45 +103,8 @@
 					.editorCancel
 						color: red
 					thead
-						> tr
-							> th.amount
-								width: 90px
-							> th.product
-								width: auto
-								min-width: 140px
-							> th.price
-								width: 140px
-							> th.measure
-								width: 100px
-							> th.saleDate
-								width: 140px
-							> th.createdDate
-								width: 100px
-							> th.venue
-								width: 160px
-							> th.actions
-								width: 90px
-								.newSaleButton
-									padding: 0px 12px
-									.fa-plus-circle
-										display: inline-block
-									.fa-times-circle
-										display: none
-								.newSaleButton:active
-									background-color: #fb557b
-									color: black
-									.fa-times-circle
-										display: inline-block
-									.fa-plus-circle
-										display: none
-								.showOnlyComments
-									color: #bcb95f
-									padding: 4px 8px
-								.showOnlyComments:hover
-									color: white
-									text-shadow: 0px 0px 10px #ff6d1f
-								.showOnlyComments.on
-									color: white
+						visibility: hidden
+						display: none
 				.editComment
 					color: grey
 				.hasComment