mirror of
				http://git.whoc.org.uk/git/password-manager.git
				synced 2025-10-29 18:37:35 +01:00 
			
		
		
		
	Fixed scrollbars on FF
This commit is contained in:
		| @@ -21,7 +21,6 @@ | |||||||
| 	@include flexbox(); | 	@include flexbox(); | ||||||
| 	@include flex-direction(column); | 	@include flex-direction(column); | ||||||
| 	min-height: 100%; | 	min-height: 100%; | ||||||
| 	@include overflow-scroll; |  | ||||||
|  |  | ||||||
| 	ul.defaultSet { | 	ul.defaultSet { | ||||||
| 		@include flex(none); | 		@include flex(none); | ||||||
| @@ -34,9 +33,8 @@ | |||||||
| 	ul.tagList { | 	ul.tagList { | ||||||
| 		@include flex(auto); | 		@include flex(auto); | ||||||
| 		margin-left: 0px; | 		margin-left: 0px; | ||||||
|  | //		overflow-y: scroll; | ||||||
| //		min-height: 100%; | 		overflow:auto; | ||||||
| //		@include overflow-scroll; |  | ||||||
|  |  | ||||||
| 		li { | 		li { | ||||||
| //			@include flexbox(); | //			@include flexbox(); | ||||||
| @@ -72,9 +70,8 @@ | |||||||
| 			 | 			 | ||||||
| 			&.selection { | 			&.selection { | ||||||
| 				@include flex($selectionPanelWidth, 0); | 				@include flex($selectionPanelWidth, 0); | ||||||
| 				height: 100%; | //				height: 100%; | ||||||
| //				overflow-y: scroll; | //				overflow-y: scroll; | ||||||
| //				@include overflow-scroll; |  | ||||||
| 			} | 			} | ||||||
| 			 | 			 | ||||||
| 			&.cardContent { | 			&.cardContent { | ||||||
| @@ -231,7 +228,7 @@ div.cardContent { | |||||||
| 	div.cardListColumn.column { | 	div.cardListColumn.column { | ||||||
| 		@include flex($cardListWidth, 0); | 		@include flex($cardListWidth, 0); | ||||||
| //		overflow-y: scroll; | //		overflow-y: scroll; | ||||||
| 		overflow-y: auto; | 		overflow:auto; | ||||||
|  |  | ||||||
| 		z-index: 5; | 		z-index: 5; | ||||||
| 		box-shadow: 2px 0 6px 0 rgba(0,0,0, 0.1); | 		box-shadow: 2px 0 6px 0 rgba(0,0,0, 0.1); | ||||||
| @@ -240,6 +237,7 @@ div.cardContent { | |||||||
| 		} | 		} | ||||||
| 		 | 		 | ||||||
| 		div.cardList { | 		div.cardList { | ||||||
|  | //			overflow-y: scroll; | ||||||
| 			padding-bottom: 120px; | 			padding-bottom: 120px; | ||||||
|  |  | ||||||
| 			ul { | 			ul { | ||||||
| @@ -249,15 +247,13 @@ div.cardContent { | |||||||
| 		div.addCardButton { | 		div.addCardButton { | ||||||
| 			@include icon-font(); | 			@include icon-font(); | ||||||
| 			@include border-radius(50px); | 			@include border-radius(50px); | ||||||
| //			@include radial-gradient (white, rgba(0, 0, 0, 0)); | 			@include radial-gradient (white, rgba(0, 0, 0, 0)); | ||||||
| 			box-shadow: 0 0 50px 20px rgba(255, 255, 255, 0.9); |  | ||||||
| 			 | 			 | ||||||
| 			position: relative; | 			position: relative; | ||||||
| 			bottom: 0px; | 			bottom: 0px; | ||||||
| 			font-size: 75pt; | 			font-size: 75pt; | ||||||
| //			color: blue; | //			color: blue; | ||||||
| 			color: #aaa; | 			color: #aaa; | ||||||
| 			background-color: white; |  | ||||||
|  |  | ||||||
| 			width: 100px; | 			width: 100px; | ||||||
| 			height: 100px; | 			height: 100px; | ||||||
| @@ -271,8 +267,7 @@ div.cardContent { | |||||||
| 			 | 			 | ||||||
| 			&:hover { | 			&:hover { | ||||||
| //				color: $clipperz-orange; | //				color: $clipperz-orange; | ||||||
| 				color: $clipperz-blue; | 				color: green; | ||||||
| //				color: green; |  | ||||||
| //				color: brown; | //				color: brown; | ||||||
| 			}; | 			}; | ||||||
| 		} | 		} | ||||||
| @@ -325,7 +320,7 @@ div.cardContent { | |||||||
| 		.content { | 		.content { | ||||||
| 			@include flex(auto); | 			@include flex(auto); | ||||||
| //			overflow-y: scroll; | //			overflow-y: scroll; | ||||||
| 			overflow-y: auto; | 			overflow:auto; | ||||||
| 		} | 		} | ||||||
| 	} | 	} | ||||||
| } | } | ||||||
| @@ -374,7 +369,6 @@ div.cardContent { | |||||||
| 		.content { | 		.content { | ||||||
| 			@include flex(auto); | 			@include flex(auto); | ||||||
| //			overflow-y: scroll; | //			overflow-y: scroll; | ||||||
| 			overflow-y: auto; |  | ||||||
| 		} | 		} | ||||||
| 	} | 	} | ||||||
| } | } | ||||||
|   | |||||||
| @@ -155,8 +155,7 @@ | |||||||
| } | } | ||||||
|  |  | ||||||
| @mixin overflow-scroll () { | @mixin overflow-scroll () { | ||||||
| //	overflow-y: scroll; | 	overflow: scroll; | ||||||
| 	overflow-y: auto; |  | ||||||
| 	-webkit-overflow-scrolling: touch; | 	-webkit-overflow-scrolling: touch; | ||||||
| } | } | ||||||
|  |  | ||||||
|   | |||||||
| @@ -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; | $cardListHeight: 48px; | ||||||
| $faviconSize: 32px; | $faviconSize: 32px; | ||||||
| $padding: ($cardListHeight - $faviconSize) / 2; | $padding: ($cardListHeight - $faviconSize) / 2; | ||||||
| $cardArchivedColor: #eee; | $cardArchivedColor: #eee; | ||||||
| //$cardToolbarBackgroundColor: #e38800; | $cardToolbarBackgroundColor: #e38800; | ||||||
| $cardToolbarBackgroundColor: $clipperz-blue; | //$cardToolbarBackgroundColor: $clipperz-blue; | ||||||
| $iconMargin: 6px; | $iconMargin: 6px; | ||||||
| $labelColor: gray; | $labelColor: gray; | ||||||
|  |  | ||||||
| @@ -31,10 +24,8 @@ div.cardList { | |||||||
|  |  | ||||||
| 			border-bottom: 1px solid #eee; | 			border-bottom: 1px solid #eee; | ||||||
| 			background-color: white; | 			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; |  | ||||||
|  |  | ||||||
| 			@include flexbox(); | 			@include flexbox(); | ||||||
| 			@include flex-direction(row); | 			@include flex-direction(row); | ||||||
| @@ -44,8 +35,9 @@ div.cardList { | |||||||
| //				background-color: brown; | //				background-color: brown; | ||||||
| //				background-color: $clipperz-blue; | //				background-color: $clipperz-blue; | ||||||
| //				color: white; | //				color: white; | ||||||
| 				margin-left: 50px; | 				margin-left: 40px; | ||||||
| 				box-shadow: -3px 1px 3px 0 rgba(0, 0, 0, 0.2); | 				padding-right: 0px; // prevent new lines on selection | ||||||
|  | 				box-shadow: -4px 0px 3px -1px rgba(0, 0, 0, 0.2); | ||||||
| 			} | 			} | ||||||
| 			 | 			 | ||||||
| 			&.archived { | 			&.archived { | ||||||
| @@ -83,8 +75,6 @@ div.cardList { | |||||||
| } | } | ||||||
|  |  | ||||||
| div.cardList.narrow { | div.cardList.narrow { | ||||||
| 	@include overflow-scroll; |  | ||||||
| 	 |  | ||||||
| 	&.loadingCard { | 	&.loadingCard { | ||||||
| 		li.selected { | 		li.selected { | ||||||
| //			background-color: gray; | //			background-color: gray; | ||||||
| @@ -221,12 +211,6 @@ $cardViewBasePadding: 10px; | |||||||
|  |  | ||||||
| //			box-shadow: inset 2px 0 6px 0 rgba(0, 0, 0, 0.1); | //			box-shadow: inset 2px 0 6px 0 rgba(0, 0, 0, 0.1); | ||||||
| 		} | 		} | ||||||
| 		 |  | ||||||
| 		.cardField { |  | ||||||
| 			&:hover { |  | ||||||
| 				background-color: #eee; |  | ||||||
| 			} |  | ||||||
| 		} |  | ||||||
| 	} | 	} | ||||||
| }	 | }	 | ||||||
|  |  | ||||||
|   | |||||||
| @@ -14,16 +14,14 @@ div.dialog { | |||||||
| 	div.answers { | 	div.answers { | ||||||
|  |  | ||||||
| 		div.button { | 		div.button { | ||||||
| 			@include border-radius(4); | 			border: 1px solid black; | ||||||
| //			border: 1px solid black; |  | ||||||
| 			margin-left: 10px; | 			margin-left: 10px; | ||||||
| 			padding: 5px 15px; | 			padding: 5px 10px; | ||||||
| 			background-color: #ddd; |  | ||||||
| 			 | 			 | ||||||
| 			&.isDefault { | 			&.isDefault { | ||||||
| 				font-weight: bold; | 				font-weight: bold; | ||||||
| 				color: white; | 				color: white; | ||||||
| 				background-color: #666; | 				background-color: blue; | ||||||
| 			} | 			} | ||||||
| 		} | 		} | ||||||
| 	} | 	} | ||||||
|   | |||||||
| @@ -2,7 +2,7 @@ | |||||||
| 	background-color: $main-alternate-color; | 	background-color: $main-alternate-color; | ||||||
| 	color: $main-alternate-text-color; | 	color: $main-alternate-text-color; | ||||||
| 	font-size: 18pt; | 	font-size: 18pt; | ||||||
| //	@include overflow-scroll; | 	@include overflow-scroll; | ||||||
| //	height: 100%; | //	height: 100%; | ||||||
|  |  | ||||||
| 	$iconColumnWidth: 40px; | 	$iconColumnWidth: 40px; | ||||||
| @@ -30,15 +30,19 @@ | |||||||
|  |  | ||||||
| 	.search { | 	.search { | ||||||
| 		form { | 		form { | ||||||
|  | 			padding:2px; | ||||||
|  | 			position:relative; | ||||||
|  | 			box-sizing:border-box; | ||||||
|  | 			width:95%; | ||||||
|  |  | ||||||
| 			input { | 			input { | ||||||
| 				font-family: "clipperz-font"; | 				font-family: "clipperz-font"; | ||||||
| 				color: #999; | 				color: #999; | ||||||
| 				font-size: 18pt; | 				font-size: 18pt; | ||||||
| 				padding: 0px 30px; | 				padding: 0px 30px; | ||||||
| 				margin: 0px 5px; | 				margin: 0px 5px; | ||||||
| //				width: $selectionPanelWidth - $iconColumnWidth - 10px; | 				width: 100%; | ||||||
| 				width: $selectionPanelWidth - ($spacing * 2); | 				box-sizing:border-box; | ||||||
| 				vertical-align: middle; |  | ||||||
| 			} | 			} | ||||||
|  |  | ||||||
| 			label { | 			label { | ||||||
| @@ -46,17 +50,20 @@ | |||||||
| 				font-size: 18pt; | 				font-size: 18pt; | ||||||
| 				padding-left: $spacing; | 				padding-left: $spacing; | ||||||
| //				padding-right:5px; | //				padding-right:5px; | ||||||
| 				margin-left: -$selectionPanelWidth + $spacing; | 				position:absolute; | ||||||
|  | 				top:9px; | ||||||
|  | 				left:9px; | ||||||
| 				color: #666; | 				color: #666; | ||||||
| 				vertical-align: sub; |  | ||||||
| 			} | 			} | ||||||
| 		 | 		 | ||||||
| 			.searchClear { | 			.searchClear { | ||||||
| 				@include icon-font(); | 				@include icon-font(); | ||||||
| 				@include border-radius(4px); | 				@include border-radius(50%); | ||||||
| 				background-color: #aaa; | 				background-color: #aaa; | ||||||
| 				color: white; | 				color: white; | ||||||
| 				margin-left: $selectionPanelWidth - $iconColumnWidth - 30px; | 				position:absolute; | ||||||
|  | 				right:9px; | ||||||
|  | 				top:9px; | ||||||
| 				cursor: pointer; | 				cursor: pointer; | ||||||
| 				padding: 5px; | 				padding: 5px; | ||||||
| 				font-size: 10pt; | 				font-size: 10pt; | ||||||
| @@ -119,28 +126,18 @@ | |||||||
| 	} | 	} | ||||||
| 	 | 	 | ||||||
| 	.showArchivedCards { | 	.showArchivedCards { | ||||||
| 		padding: 10px; |  | ||||||
| 		font-size: 12pt; | 		font-size: 12pt; | ||||||
| 		 | 		 | ||||||
| 		.label { | 		span.count { | ||||||
| 			padding-left: 5px; | 			background-color: gray; | ||||||
|  | 			font-size: 10pt; | ||||||
|  | 			margin-left: 10px; | ||||||
|  | 			padding: 0px 4px; | ||||||
|  | 			@include border-radius(4px); | ||||||
| 		} | 		} | ||||||
|  |  | ||||||
| 	} | 	} | ||||||
| } | } | ||||||
|  |  | ||||||
| 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; |  | ||||||
| } |  | ||||||
|  |  | ||||||
|  |  | ||||||
| //$selectionColor: yellow; | //$selectionColor: yellow; | ||||||
| $selectionColor: $clipperz-orange; | $selectionColor: $clipperz-orange; | ||||||
|   | |||||||
		Reference in New Issue
	
	Block a user
	 Roberto Pasini
					Roberto Pasini