Misc SCSS fixes

- added edit mask shadow
- updated icon font
- updated card edit field action buttons layout
- selection panel scroll

frontend/delta/scss/core/layout.scss

@@ -71,7 +71,7 @@
 			&.selection {
 				@include flex($selectionPanelFlexWidth, 0);
 //				height: 100%;
-//				overflow-y: scroll;
+				@include overflow-scroll;
 			}
 			
 			&.cardContent {
@@ -319,6 +319,8 @@ div.cardContent {
 				@include flexbox;
 				@include flex-direction(column);
 
+				box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.75);
+
 				position: relative;
 				z-index: 10+1;
 				
@@ -340,14 +342,6 @@ div.cardContent {
 
 			@include flexbox;
 			@include flex-direction(column);
-
-
-//			.cardDetailToolbar {
-//				@include flex(none);
-//				height: $mainCardToolbarHeight;
-//				line-height: $mainCardToolbarHeight;
-//			}
-
 		}
 
 		.content {
@@ -364,41 +358,7 @@ div.cardContent {
 		@include flexbox();
 		@include flex-direction(column);
 		height: 100%;
-/*		
-		.cardDetailToolbar {
-			@include flex(none);
-			height: $mainCardToolbarHeight;
-			line-height: $mainCardToolbarHeight;
-			
-			&.commands > div {
-				@include flexbox();
-				@include flex-direction(row);
-//				font-size: 24pt;
 
-				.back {
-					@include flex(auto);
-					cursor: pointer;
-				}
-			
-				.cardMenuOptions {
-					@include flex(auto);
-					cursor: pointer;
-				}
-			}
-			
-			&.edit {
-				ul {
-					@include flexbox();
-					@include flex-direction(row);
-					
-					li {
-						@include flex(auto);
-						cursor: pointer;
-					}
-				}
-			}
-		}
-*/		
 		.content {
 			@include flex(auto);
 			overflow-y: scroll;

frontend/delta/scss/core/mixin.scss

@@ -164,4 +164,27 @@
 	&:-moz-placeholder           {@content}
 	&::-moz-placeholder          {@content}
 	&:-ms-input-placeholder      {@content}  
-}
+}
+
+@mixin cursor-grab () {
+	cursor: grab;
+	cursor: -moz-grab;
+	cursor: -webkit-grab;
+}
+
+@mixin cursor-grabbing () {
+	cursor: grabbing;
+	cursor: -moz-grabbing;
+	cursor: -webkit-grabbing;
+}
+
+@mixin dotted-background () {
+	//	http://codepen.io/aleprieto/pen/nAmIy
+	background-image: -webkit-repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
+	background-image: -moz-repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
+	background-image: -ms-repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
+	background-image: repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
+	-webkit-background-size: 3px 3px;
+	-moz-background-size: 3px 3px;
+	background-size: 3px 3px;
+}

frontend/delta/scss/style/accountStatus.scss

@@ -1,5 +1,8 @@
 .accountStatus {
 	background-color: green;
+	padding: 3px;
+	font-size: 10pt;
+	border-bottom: 1px solid white;
 	
 	&.FULL {
 		display: none;
@@ -24,4 +27,18 @@
 	&.EXPIRED {
 		background-color: red;
 	}
-}
+	
+	&.OFFLINE_COPY {
+		background-color: $clipperz-blue;
+		color: white;
+		
+		.expirationDate {
+			display: none;
+			visibility: hidden;
+		}
+		
+		.referenceDate {
+			padding-left: 10px;
+		}
+	}
+}

frontend/delta/scss/style/card.scss

@@ -204,6 +204,9 @@ $cardViewBasePadding: 10px;
 									padding: 5px 10px;
 									border-bottom: 1px solid black;
 							
+									&.disabled {
+										color: #ddd;
+									}
 								}
 							}
 						}
@@ -278,6 +281,11 @@ $cardViewBasePadding: 10px;
 	ul {
 		li {
 			text-align: center;
+			
+			&.disabled {
+				color: #333;
+				cursor: default;
+			}
 		}
 	}
 	
@@ -360,30 +368,46 @@ $cardViewBasePadding: 10px;
 				
 				display: block;
 				margin: $iconMargin;
+				margin-top: 12px;
 				cursor: pointer;
 				color: #ccc;
+				width: 40px;
 				font-size: 20pt;
 
 				&:hover {
 					color: rgb(155, 0, 0);
 				};
 			}
-			
-			.toggleLock {
-				@include align-self(flex-end);
-				@include icon-font();
 
+			.dragHandler {
+//				@include dotted-background();
+				@include cursor-grab();
+				
+				background: repeating-linear-gradient(
+					0deg,
+					white,
+					white 2px,
+					#ddd 2px,
+					#ddd 3px
+				);
+
+				width: 28px;
+				height: 20px;
+				margin-left: 6px;
 				display: block;
-				margin: $iconMargin;
-				margin-left: $iconMargin * 2;
-				cursor: pointer;
-				color: #ccc;
-				font-size: 20pt;
+/*
+				@include icon-font();
+				color: #aaa;
 
-				&:hover {
-					color: #888;
+				font-size: 15pt;
+				margin: $iconMargin;
+				margin-left: 10px;
+*/				
+				&:active {
+					@include cursor-grabbing();
 				};
 			}
+			
 		}
 		
 		.fieldValues {
@@ -427,20 +451,40 @@ $cardViewBasePadding: 10px;
 			@include flex(none);
 //			@include align-self(center);
 			@include align-self(flex-start);
+
+			span {
+				display: block;
+
+				&.action {
+					@include icon-font();
+					color: #aaa;
+
+					width: 20px;
+					height: 20px;
+					font-size: 15pt;
+					margin: $iconMargin;
+				}
+
+				&.toggleLock {
+					@include align-self(flex-end);
+					@include icon-font();
+
+					display: block;
+					margin: $iconMargin;
+					margin-left: 9px;
+					padding-top: 10px;
+					cursor: pointer;
+					color: #ccc;
+					font-size: 18pt;
+
+					&:hover {
+						color: #888;
+					};
+				}
+				
+			}
 		}
 	
-		.action {
-			@include icon-font();
-			color: #aaa;
-
-//			width: 32px;
-			width: 20px;
-//			height: 32px;
-			height: 20px;
-//			font-size: 20pt;
-			font-size: 15pt;
-			margin: $iconMargin;
-		}
 
 	}
 

frontend/delta/scss/style/selectionPanel.scss

@@ -2,7 +2,7 @@
 	background-color: $main-alternate-color;
 	color: $main-alternate-text-color;
 	font-size: 18pt;
-	@include overflow-scroll;
+
 //	height: 100%;
 
 	$iconColumnWidth: 40px;