Merge branch 'master' of github.com:clipperz/password-manager

Conflicts:
	frontend/delta/scss/style/selectionPanel.scss

Reverted some settings to fix issues in the narrow view

frontend/delta/scss/core/layout.scss

@@ -21,7 +21,6 @@
 	@include flexbox();
 	@include flex-direction(column);
 	min-height: 100%;
-	@include overflow-scroll;
 
 	ul.defaultSet {
 		@include flex(none);
@@ -34,9 +33,8 @@
 	ul.tagList {
 		@include flex(auto);
 		margin-left: 0px;
-
-//		min-height: 100%;
-//		@include overflow-scroll;
+//		overflow-y: scroll;
+		overflow:auto;
 
 		li {
 //			@include flexbox();
@@ -72,9 +70,8 @@
 			
 			&.selection {
 				@include flex($selectionPanelWidth, 0);
-				height: 100%;
+//				height: 100%;
 //				overflow-y: scroll;
-//				@include overflow-scroll;
 			}
 			
 			&.cardContent {
@@ -231,7 +228,7 @@ div.cardContent {
 	div.cardListColumn.column {
 		@include flex($cardListWidth, 0);
 //		overflow-y: scroll;
-		overflow-y: auto;
+		overflow:auto;
 
 		z-index: 5;
 		box-shadow: 2px 0 6px 0 rgba(0,0,0, 0.1);
@@ -240,6 +237,7 @@ div.cardContent {
 		}
 		
 		div.cardList {
+//			overflow-y: scroll;
 			padding-bottom: 120px;
 
 			ul {
@@ -249,15 +247,13 @@ div.cardContent {
 		div.addCardButton {
 			@include icon-font();
 			@include border-radius(50px);
-//			@include radial-gradient (white, rgba(0, 0, 0, 0));
-			box-shadow: 0 0 50px 20px rgba(255, 255, 255, 0.9);
+			@include radial-gradient (white, rgba(0, 0, 0, 0));
 			
 			position: relative;
 			bottom: 0px;
 			font-size: 75pt;
 //			color: blue;
 			color: #aaa;
-			background-color: white;
 
 			width: 100px;
 			height: 100px;
@@ -271,8 +267,7 @@ div.cardContent {
 			
 			&:hover {
 //				color: $clipperz-orange;
-				color: $clipperz-blue;
-//				color: green;
+				color: green;
 //				color: brown;
 			};
 		}
@@ -325,7 +320,7 @@ div.cardContent {
 		.content {
 			@include flex(auto);
 //			overflow-y: scroll;
-			overflow-y: auto;
+			overflow:auto;
 		}
 	}
 }
@@ -374,7 +369,6 @@ div.cardContent {
 		.content {
 			@include flex(auto);
 //			overflow-y: scroll;
-			overflow-y: auto;
 		}
 	}
 }

frontend/delta/scss/core/mixin.scss

@@ -155,8 +155,7 @@
 }
 
 @mixin overflow-scroll () {
-//	overflow-y: scroll;
-	overflow-y: auto;
+	overflow: scroll;
 	-webkit-overflow-scrolling: touch;
 }
 

frontend/delta/scss/style/card.scss

@@ -31,7 +31,8 @@ div.cardList {
 
 			border-bottom: 1px solid #eee;
 			background-color: white;
-			transition: margin-left 0.3s ease-in-out;
+			transition: margin-left 0.1s ease-in-out, padding-right 0.1s ease-in-out;
+//			padding-right:40px; // prevent new lines on selection
 
 			white-space: pre-wrap;
 			word-wrap: break-word;
@@ -44,8 +45,9 @@ div.cardList {
 //				background-color: brown;
 //				background-color: $clipperz-blue;
 //				color: white;
-				margin-left: 50px;
-				box-shadow: -3px 1px 3px 0 rgba(0, 0, 0, 0.2);
+				margin-left: 40px;
+				padding-right: 0px; // prevent new lines on selection
+				box-shadow: -4px 0px 3px -1px rgba(0, 0, 0, 0.2);
 			}
 			
 			&.archived {
@@ -225,8 +227,8 @@ $cardViewBasePadding: 10px;
 		.cardField {
 			&:hover {
 				background-color: #eee;
-			}
-		}
+	}
+}	
 	}
 }	
 

frontend/delta/scss/style/dialogBox.scss

@@ -14,16 +14,14 @@ div.dialog {
 	div.answers {
 
 		div.button {
-			@include border-radius(4);
-//			border: 1px solid black;
+			border: 1px solid black;
 			margin-left: 10px;
-			padding: 5px 15px;
-			background-color: #ddd;
+			padding: 5px 10px;
 			
 			&.isDefault {
 				font-weight: bold;
 				color: white;
-				background-color: #666;
+				background-color: blue;
 			}
 		}
 	}

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;
+	@include overflow-scroll;
 //	height: 100%;
 
 	$iconColumnWidth: 40px;
@@ -43,15 +43,19 @@
 
 	.search {
 		form {
+			padding:2px;
+			position:relative;
+			box-sizing:border-box;
+			width:95%;
+
 			input {
 				font-family: "clipperz-font";
 				color: #999;
 				font-size: 18pt;
 				padding: 0px 30px;
 				margin: 0px 5px;
-//				width: $selectionPanelWidth - $iconColumnWidth - 10px;
-				width: $selectionPanelWidth - ($spacing * 2);
-				vertical-align: middle;
+				width: 100%;
+				box-sizing:border-box;
 			}
 
 			label {
@@ -59,17 +63,20 @@
 				font-size: 18pt;
 				padding-left: $spacing;
 //				padding-right:5px;
-				margin-left: -$selectionPanelWidth + $spacing;
+				position:absolute;
+				top:9px;
+				left:9px;
 				color: #666;
-				vertical-align: sub;
 			}
 		
 			.searchClear {
 				@include icon-font();
-				@include border-radius(4px);
+				@include border-radius(50%);
 				background-color: #aaa;
 				color: white;
-				margin-left: $selectionPanelWidth - $iconColumnWidth - 30px;
+				position:absolute;
+				right:9px;
+				top:9px;
 				cursor: pointer;
 				padding: 5px;
 				font-size: 10pt;
@@ -138,7 +145,7 @@
 
 		padding: 10px;
 		font-size: 12pt;
-
+		
 		input {
 			@include flex(none);
 		}
@@ -156,17 +163,17 @@
 	}
 }
 
-span.count {
-	background-color: gray;
-	font-size: 10pt;
+		span.count {
+			background-color: gray;
+			font-size: 10pt;
 	margin-right: 12px;
 	padding: 3px 5px;
-	@include border-radius(4px);
+			@include border-radius(4px);
 
 	color: white;
 	font-weight: 300;
 	vertical-align: middle;
-}
+		}
 
 
 //$selectionColor: yellow;