Merge pull request #62 from kalamun/master

Fixed scrollbars on FF

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

@@ -1,16 +1,9 @@
-//	ARCHIVE - RESTORE
-//	
-//	background-color: #800;
-//	box-shadow: inset 0 2px 3px 0 rgba(0,0,0,0.3);
-//	color: #ccc;
-
-
 $cardListHeight: 48px;
 $faviconSize: 32px;
 $padding: ($cardListHeight - $faviconSize) / 2;
 $cardArchivedColor: #eee;
-//$cardToolbarBackgroundColor: #e38800;
-$cardToolbarBackgroundColor: $clipperz-blue;
+$cardToolbarBackgroundColor: #e38800;
+//$cardToolbarBackgroundColor: $clipperz-blue;
 $iconMargin: 6px;
 $labelColor: gray;
 
@@ -31,10 +24,8 @@ div.cardList {
 
 			border-bottom: 1px solid #eee;
 			background-color: white;
-			transition: margin-left 0.3s ease-in-out;
-
-			white-space: pre-wrap;
-			word-wrap: break-word;
+			transition: margin-left 0.1s ease-in-out, padding-right 0.1s ease-in-out;
+			padding-right:40px; // prevent new lines on selection
 
 			@include flexbox();
 			@include flex-direction(row);
@@ -44,8 +35,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 {
@@ -83,8 +75,6 @@ div.cardList {
 }
 
 div.cardList.narrow {
-	@include overflow-scroll;
-	
 	&.loadingCard {
 		li.selected {
 //			background-color: gray;
@@ -221,12 +211,6 @@ $cardViewBasePadding: 10px;
 
 //			box-shadow: inset 2px 0 6px 0 rgba(0, 0, 0, 0.1);
 		}
-		
-		.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;
@@ -30,15 +30,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 {
@@ -46,17 +50,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;
@@ -119,26 +126,16 @@
 	}
 	
 	.showArchivedCards {
-		padding: 10px;
 		font-size: 12pt;
 		
-		.label {
-			padding-left: 5px;
-		}
-
-	}
-}
-
 		span.count {
 			background-color: gray;
 			font-size: 10pt;
 			margin-left: 10px;
 			padding: 0px 4px;
 			@include border-radius(4px);
-
-	color: white;
-	font-weight: 300;
-	vertical-align: middle;
+		}
+	}
 }