Revisited styles for touch devices

Revisited styles to support/improve the following issues:
- iPhone login rendering
- selection of card fields on touch devices
- scrolling on touch devices (mostly iPad)

frontend/delta/scss/core/behavior.scss

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

frontend/delta/scss/core/layout.scss

@@ -31,7 +31,11 @@ html {
 
 .page {
 	@include pageElement();
-	@include user-select(none);
+//	@include user-select(none);
+}
+
+input {
+	-webkit-appearance: none;	
 }
 
 .mainPage {
@@ -40,7 +44,8 @@ html {
 
 .mainPage > #selectionPanel {
 	@include sliding-panel(left, $selectionPanelWidth);
-	overflow: auto;
+	@include overflow-auto;
+//	overflow: auto;
 
 	&.open {
 		@include sliding-panel-open(left, $selectionPanelWidth);
@@ -65,7 +70,8 @@ html {
 		@include flex(auto);
 		margin-left: 0px;
 //		overflow-y: scroll;
-		overflow:auto;
+//		overflow:auto;
+		@include overflow-auto;
 
 		li {
 //			@include flexbox();
@@ -103,7 +109,7 @@ html {
 			&.selection {
 				@include flex($selectionPanelFlexWidth, 0);
 //				height: 100%;
-//				@include overflow-scroll;
+//				@include overflow-auto;
 			}
 			
 			&.cardContent {
@@ -210,7 +216,8 @@ html {
 		& > div {
 			@include flex(auto);
 		
-			overflow: auto;
+			@include overflow-auto;
+//			overflow: auto;
 		
 		}
 
@@ -334,8 +341,12 @@ div.cardContent {
 
 	div.cardListColumn.column {
 		@include flex($cardListWidth, 0);
+		@include flexbox;
 //		overflow-y: scroll;
-		overflow:auto;
+//		overflow:auto;
+//		@include overflow-auto;
+		overflow: hidden;
+		
 
 		z-index: 5;
 		box-shadow: 2px 0 6px 0 rgba(0,0,0, 0.1);
@@ -349,6 +360,10 @@ div.cardContent {
 			}
 		}
 		
+		div.cardList {
+			@include overflow-auto;
+		}
+
 		$addButtonSize: 60px;
 		div.addCardButton {
 			@include icon-font();
@@ -426,7 +441,8 @@ div.cardContent {
 		.content {
 			@include flex(auto);
 //			overflow-y: scroll;
-			overflow:auto;
+//			overflow:auto;
+			@include overflow-auto;
 		}
 	}
 }

frontend/delta/scss/core/mixin.scss

@@ -177,8 +177,8 @@ refer to http://www.clipperz.com.
 	user-select: $value;
 }
 
-@mixin overflow-scroll () {
-	overflow: scroll;
+@mixin overflow-auto () {
+	overflow: auto;
 	-webkit-overflow-scrolling: touch;
 }
 

frontend/delta/scss/style/card.scss

@@ -108,7 +108,7 @@ div.cardList {
 }
 
 div.cardList.narrow {
-	@include overflow-scroll;
+	@include overflow-auto;
 	
 	&.loadingCard {
 		li.selected {
@@ -328,6 +328,8 @@ $cardViewBasePadding: 10px;
 }
 
 .content {
+//	@include user-select(none);
+	
 	.cardLabel {
 		@include user-select(text);
 		
@@ -386,6 +388,7 @@ $cardViewBasePadding: 10px;
 	.cardField {
 		@include flexbox;
 		@include flex-direction(row);
+//		@include user-select(none);
 //		background-color: rgba(255, 255, 255, 0.75);
 //		border-bottom: 1px solid #eee;
 		
@@ -397,6 +400,7 @@ $cardViewBasePadding: 10px;
 		}
 		
 		.fieldEditAction {
+			@include user-select(text);
 			@include flex(none);
 			width: 32px;
 //			background-color: pink;
@@ -457,6 +461,7 @@ $cardViewBasePadding: 10px;
 			padding: $cardViewBasePadding;
 
 			.fieldLabel {
+				@include user-select(text);
 				color: $labelColor;
 //				border-bottom: 1px dotted #ddd;
 				padding-bottom: 4px;
@@ -501,6 +506,7 @@ $cardViewBasePadding: 10px;
 			@include flex(none);
 //			@include align-self(center);
 			@include align-self(flex-start);
+			@include user-select(text);
 
 			span {
 				display: block;

frontend/delta/scss/style/loginPage.scss

@@ -22,7 +22,7 @@ refer to http://www.clipperz.com.
 */
 
 #loginPage {
-	@include overflow-scroll;
+	@include overflow-auto;
 
 	div.loginForm {
 		@include flexbox;
@@ -87,6 +87,8 @@ refer to http://www.clipperz.com.
 //					box-shadow:inset 0 0 0;
 					font-size: 24pt;
 					width: 100%;
+					border: 1px solid #ccc;
+					border-radius: 0px;
 				}
 
 				button {
@@ -165,6 +167,17 @@ refer to http://www.clipperz.com.
 		}
 	}
 
+	div.loginForm.narrow {
+		header {
+			font-size: 30pt;
+			line-height: 70px;
+		}
+
+		footer {
+			max-height: 25px;
+			line-height: 20pt;
+		}
+	}
 
 	div.loginForm.extra-short {
 		header {