Highlighted selected items in the selection panel.

Also added some improvements suggested here: http://www.luster.io/blog/9-29-14-mobile-web-checklist.html

frontend/delta/scss/core/behavior.scss

@@ -56,7 +56,7 @@ $transition-duration: 0.5s;
 @mixin sliding-panel ($side, $size) {
 	position: fixed;
 	z-index: 20;
-	overflow: scroll;
+	@include overflow-scroll;
 
 	@if $side == left {
 		@include sliding-panel-left($size);

frontend/delta/scss/core/layout.scss

@@ -2,6 +2,7 @@
 
 .page {
 	@include pageElement();
+	@include user-select(none);
 }
 
 .mainPage {

frontend/delta/scss/core/mixin.scss

@@ -141,3 +141,20 @@
 	0% { @include transform(0deg, 0, 0); }
 	100% { @include transform(359deg, 0, 0); }
 }
+
+@mixin user-select($value) {
+	//	http://css-tricks.com/almanac/properties/u/user-select/
+	//	none | text | all | element
+	-webkit-user-select: $value;	/* Chrome all / Safari all */
+	-moz-user-select: $value;		/* Firefox all */
+	-ms-user-select: $value;		/* IE 10+ */
+
+	/* No support for these yet, use at own risk */
+	-o-user-select: $value;
+	user-select: $value;
+}
+
+@mixin overflow-scroll () {
+	overflow: scroll;
+	-webkit-overflow-scrolling: touch;
+}

frontend/delta/scss/style/card.scss

@@ -220,6 +220,8 @@ $cardViewBasePadding: 10px;
 
 .content {
 	.cardLabel {
+		@include user-select(text);
+		
 		font-size: 24pt;
 		padding: $cardViewBasePadding;
 	}
@@ -258,6 +260,7 @@ $cardViewBasePadding: 10px;
 
 			.fieldValue {
 				font-size: 18pt;
+				@include user-select(text);
 
 				&.hidden {
 					font-family: clipperz-password;

frontend/delta/scss/style/loginPage.scss

@@ -1,6 +1,6 @@
 #loginPage {
-	overflow: scroll;
-	
+	@include overflow-scroll;
+
 	div.loginForm {
 		@include flexbox;
 		@include flex-direction(column);

frontend/delta/scss/style/selectionPanel.scss

@@ -2,7 +2,7 @@
 	background-color: $main-alternate-color;
 	color: $main-alternate-text-color;
 	font-size: 18pt;
-	overflow: scroll;
+	@include overflow-scroll;
 //	height: 100%;
 
 	$iconColumnWidth: 40px;
@@ -89,4 +89,40 @@
 			@include border-radius(4px);
 		}
 	}
-}
+}
+
+$selectionColor: yellow;
+
+#selections.ALL {
+	li.allCards {
+		color: $selectionColor;
+	}
+}
+
+#selections.RECENT {
+	li.recentCards {
+		color: $selectionColor;
+	}
+}
+
+#selections.UNTAGGED {
+	li.untaggedCards {
+		color: $selectionColor;
+	}
+}
+
+#selections.SEARCH {
+	div.search {
+		color: $selectionColor;
+	}
+}
+
+#selections.TAG {
+	ul.tagList {
+		li.selected {
+			color: $selectionColor;
+		}
+	}
+}
+
+