Added a Sales Sheet page along with other changes.

imports/ui/Sales.import.styl

@@ -1,69 +1,128 @@
 #salesMain
-	margin: 10px 20px
+	display: table
+	content-box: border-box
+	padding: 10px 20px
 	height: 100%
+	width: 100%
 	text-align: left
-
-	.comboList .deactivated
-		color: red
-		background: #ffdbd9
-
-	.editor
-		height: 100%
-		overflow-y: auto
-
-	.insertSale
-		width: 100%
-		position: relative
-		.paginationContainer
-			position: absolute
-			right: 0
-			bottom: -20px
-			.pagination
-				white-space: nowrap
+	.tableControls
+		text-align: right
+		margin-right: 20px
+	.salesListRow
+		display: table-row
+		.salesListCell
+			display: table-cell
+			position: relative
+			height: 100%
+			width: 100%
+			.tableContainer
+				position: absolute
+				top: 0
+				bottom: 0
+				left: 0
+				right: 0
+				width: auto
+				height: auto
+				//width: 100%
+				//margin-bottom: 20px
+				border: 0
+				font-size: 12.5px
+				overflow-y: auto
+				//height: 100%
+				label
+					font-size: 10px
+					font-weight: 800
+				table
+					table-layout: fixed
+					min-width: 100%
+					.saleRemove
+						color: red
+						margin-left: 8px
+					.saleEdit
+						color: darkblue
+						margin-right: 8px
+					.editorApply
+						color: green
+					.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
+				.editComment
+					color: grey
+				.hasComment
+					color: black
+				.actionEdit
+					margin-right: 6px
+					color: #44F
+	.saleEditor
+		.heading
+			font-size: 2em
+			font-family: verdana, arial, helvetica, sans-serif
+			text-transform: uppercase
+			font-weight: 800
+			margin: 6px 0 14px 0
+		.priceContainer
+			display: table
+			width: 100%
+			.price
+				display: table-cell
+				padding-right: 10px
+			.priceButtons
+				display: table-cell
+				width: 1.5em
+				.setDefaultPrice
+					font-size: 1.5em
+					padding: 6px 8px
+					margin-left: 8px
+					border-radius: 8px
+				.setDefaultPrice:hover
+					text-shadow: 0px 0px 6px #00b900
+				.setDefaultPrice:active
+					text-shadow: 0px 0px 6px grey
+	.insertSaleForm
 		.form-group, label
 			text-align: left
-
 		.formGroupHeading
 			font-size: 1.6em
 			font-family: "Arial Black", "Arial Bold", Gadget, sans-serif
 			font-style: normal
 			font-variant: normal
-			font-weight: 500
-	.grid
-		width: 100%
-		margin-bottom: 20px
-		border: 0
-		font-size: 12.5px
-		label
-			font-size: 10px
-			font-weight: 800
-		table
-			table-layout: fixed
-			min-width: 100%
-			.saleRemove
-				color: red
-				margin-left: 8px
-			.saleEdit
-				color: darkblue
-				margin-right: 8px
-			.editorApply
-				color: green
-			.editorCancel
-				color: red
-			thead
-				> tr
-					> th.amount
-						width: 90px
-					> th.product
-						width: auto
-						min-width: 140px
-					> th.price
-						width: 140px
-					> th.measure
-						width: 90px
-					> th.date
-						width: 140px
-					> th.venue
-						width: 160px
-					> th.actions
-						width: 90px
+			font-weight: 500