Misc SCSS fixes

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

frontend/delta/fonts/IcoMoon/Clipperz Icon font.json

@@ -1,6 +1,60 @@
 {
 	"IcoMoonType": "selection",
 	"icons": [
+		{
+			"icon": {
+				"paths": [
+					"M640.9 63.9c-141.4 0-256 114.6-256 256 0 19.6 2.2 38.6 6.4 56.9l-391.3 391.2v64l64 64h128l64-64v-64h64v-64h64v-64h128l70.8-70.8c18.7 4.3 38.1 6.6 58.1 6.6 141.4 0 256-114.6 256-256s-114.7-255.9-256-255.9zM384 512l-320 320v-64l320-320v64zM704 320c-35.3 0-64-28.7-64-64s28.7-64 64-64 64 28.7 64 64c0 35.3-28.7 64-64 64z"
+				],
+				"width": 896,
+				"attrs": [],
+				"isMulticolor": false,
+				"tags": [
+					"key"
+				],
+				"defaultCode": 61513,
+				"grid": 16
+			},
+			"attrs": [],
+			"properties": {
+				"id": 91,
+				"order": 23,
+				"prevSize": 32,
+				"code": 61513,
+				"name": "key",
+				"ligatures": "generate password"
+			},
+			"setIdx": 0,
+			"iconIdx": 91
+		},
+		{
+			"icon": {
+				"paths": [
+					"M512 192c-223.318 0-416.882 130.042-512 320 95.118 189.958 288.682 320 512 320 223.312 0 416.876-130.042 512-320-95.116-189.958-288.688-320-512-320zM764.45 361.704c60.162 38.374 111.142 89.774 149.434 150.296-38.292 60.522-89.274 111.922-149.436 150.296-75.594 48.218-162.89 73.704-252.448 73.704-89.56 0-176.858-25.486-252.452-73.704-60.158-38.372-111.138-89.772-149.432-150.296 38.292-60.524 89.274-111.924 149.434-150.296 3.918-2.5 7.876-4.922 11.86-7.3-9.96 27.328-15.41 56.822-15.41 87.596 0 141.382 114.616 256 256 256 141.382 0 256-114.618 256-256 0-30.774-5.452-60.268-15.408-87.598 3.978 2.378 7.938 4.802 11.858 7.302v0zM512 416c0 53.020-42.98 96-96 96s-96-42.98-96-96 42.98-96 96-96 96 42.982 96 96z"
+				],
+				"attrs": [],
+				"isMulticolor": false,
+				"tags": [
+					"eye",
+					"views",
+					"vision",
+					"visit"
+				],
+				"defaultCode": 58073,
+				"grid": 16
+			},
+			"attrs": [],
+			"properties": {
+				"id": 823,
+				"order": 21,
+				"prevSize": 32,
+				"code": 59854,
+				"ligatures": "view password",
+				"name": "eye"
+			},
+			"setIdx": 1,
+			"iconIdx": 206
+		},
 		{
 			"icon": {
 				"paths": [
@@ -133,33 +187,6 @@
 			"setIdx": 2,
 			"iconIdx": 4
 		},
-		{
-			"icon": {
-				"paths": [
-					"M832 448h-64v-192c0-141.384-114.616-256-256-256s-256 114.616-256 256v192h-64c-35.2 0-64 28.8-64 64v448c0 35.2 28.8 64 64 64h640c35.2 0 64-28.8 64-64v-448c0-35.2-28.8-64-64-64zM512 832c-35.346 0-64-28.654-64-64s28.654-64 64-64 64 28.654 64 64-28.654 64-64 64zM640 448h-256v-192c0-70.58 57.42-128 128-128s128 57.42 128 128v192z"
-				],
-				"attrs": [],
-				"isMulticolor": false,
-				"tags": [
-					"lock",
-					"secure",
-					"private",
-					"encrypted"
-				],
-				"grid": 16
-			},
-			"attrs": [],
-			"properties": {
-				"id": 136,
-				"order": 8,
-				"prevSize": 32,
-				"code": 58889,
-				"name": "lock",
-				"ligatures": "password"
-			},
-			"setIdx": 2,
-			"iconIdx": 5
-		},
 		{
 			"icon": {
 				"paths": [
@@ -181,7 +208,7 @@
 				"order": 15,
 				"prevSize": 32,
 				"code": 58896,
-				"name": "lock2",
+				"name": "locked",
 				"ligatures": "locked"
 			},
 			"setIdx": 2,
@@ -234,7 +261,7 @@
 				"order": 13,
 				"prevSize": 32,
 				"code": 58881,
-				"name": "menu2",
+				"name": "menu",
 				"ligatures": "menu"
 			},
 			"setIdx": 2,

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

@@ -165,3 +165,26 @@
 	&::-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,8 +368,10 @@ $cardViewBasePadding: 10px;
 				
 				display: block;
 				margin: $iconMargin;
+				margin-top: 12px;
 				cursor: pointer;
 				color: #ccc;
+				width: 40px;
 				font-size: 20pt;
 
 				&:hover {
@@ -369,21 +379,35 @@ $cardViewBasePadding: 10px;
 				};
 			}
 
-			.toggleLock {
+			.dragHandler {
-				@include align-self(flex-end);
+//				@include dotted-background();
-				@include icon-font();
+				@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;
+				@include icon-font();
-				cursor: pointer;
+				color: #aaa;
-				color: #ccc;
-				font-size: 20pt;
 
-				&:hover {
+				font-size: 15pt;
-					color: #888;
+				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;