mirror of
				http://git.whoc.org.uk/git/password-manager.git
				synced 2025-10-30 19:07:35 +01:00 
			
		
		
		
	Misc SCSS fixes
- added edit mask shadow - updated icon font - updated card edit field action buttons layout - selection panel scroll
This commit is contained in:
		
										
											
												File diff suppressed because one or more lines are too long
											
										
									
								
							
										
											
												File diff suppressed because one or more lines are too long
											
										
									
								
							| @@ -1,6 +1,60 @@ | ||||
| { | ||||
| 	"IcoMoonType": "selection", | ||||
| 	"icons": [ | ||||
| 		{ | ||||
| 			"icon": { | ||||
| 				"paths": [ | ||||
| 					"M640.9 63.9c-141.4 0-256 114.6-256 256 0 19.6 2.2 38.6 6.4 56.9l-391.3 391.2v64l64 64h128l64-64v-64h64v-64h64v-64h128l70.8-70.8c18.7 4.3 38.1 6.6 58.1 6.6 141.4 0 256-114.6 256-256s-114.7-255.9-256-255.9zM384 512l-320 320v-64l320-320v64zM704 320c-35.3 0-64-28.7-64-64s28.7-64 64-64 64 28.7 64 64c0 35.3-28.7 64-64 64z" | ||||
| 				], | ||||
| 				"width": 896, | ||||
| 				"attrs": [], | ||||
| 				"isMulticolor": false, | ||||
| 				"tags": [ | ||||
| 					"key" | ||||
| 				], | ||||
| 				"defaultCode": 61513, | ||||
| 				"grid": 16 | ||||
| 			}, | ||||
| 			"attrs": [], | ||||
| 			"properties": { | ||||
| 				"id": 91, | ||||
| 				"order": 23, | ||||
| 				"prevSize": 32, | ||||
| 				"code": 61513, | ||||
| 				"name": "key", | ||||
| 				"ligatures": "generate password" | ||||
| 			}, | ||||
| 			"setIdx": 0, | ||||
| 			"iconIdx": 91 | ||||
| 		}, | ||||
| 		{ | ||||
| 			"icon": { | ||||
| 				"paths": [ | ||||
| 					"M512 192c-223.318 0-416.882 130.042-512 320 95.118 189.958 288.682 320 512 320 223.312 0 416.876-130.042 512-320-95.116-189.958-288.688-320-512-320zM764.45 361.704c60.162 38.374 111.142 89.774 149.434 150.296-38.292 60.522-89.274 111.922-149.436 150.296-75.594 48.218-162.89 73.704-252.448 73.704-89.56 0-176.858-25.486-252.452-73.704-60.158-38.372-111.138-89.772-149.432-150.296 38.292-60.524 89.274-111.924 149.434-150.296 3.918-2.5 7.876-4.922 11.86-7.3-9.96 27.328-15.41 56.822-15.41 87.596 0 141.382 114.616 256 256 256 141.382 0 256-114.618 256-256 0-30.774-5.452-60.268-15.408-87.598 3.978 2.378 7.938 4.802 11.858 7.302v0zM512 416c0 53.020-42.98 96-96 96s-96-42.98-96-96 42.98-96 96-96 96 42.982 96 96z" | ||||
| 				], | ||||
| 				"attrs": [], | ||||
| 				"isMulticolor": false, | ||||
| 				"tags": [ | ||||
| 					"eye", | ||||
| 					"views", | ||||
| 					"vision", | ||||
| 					"visit" | ||||
| 				], | ||||
| 				"defaultCode": 58073, | ||||
| 				"grid": 16 | ||||
| 			}, | ||||
| 			"attrs": [], | ||||
| 			"properties": { | ||||
| 				"id": 823, | ||||
| 				"order": 21, | ||||
| 				"prevSize": 32, | ||||
| 				"code": 59854, | ||||
| 				"ligatures": "view password", | ||||
| 				"name": "eye" | ||||
| 			}, | ||||
| 			"setIdx": 1, | ||||
| 			"iconIdx": 206 | ||||
| 		}, | ||||
| 		{ | ||||
| 			"icon": { | ||||
| 				"paths": [ | ||||
| @@ -133,33 +187,6 @@ | ||||
| 			"setIdx": 2, | ||||
| 			"iconIdx": 4 | ||||
| 		}, | ||||
| 		{ | ||||
| 			"icon": { | ||||
| 				"paths": [ | ||||
| 					"M832 448h-64v-192c0-141.384-114.616-256-256-256s-256 114.616-256 256v192h-64c-35.2 0-64 28.8-64 64v448c0 35.2 28.8 64 64 64h640c35.2 0 64-28.8 64-64v-448c0-35.2-28.8-64-64-64zM512 832c-35.346 0-64-28.654-64-64s28.654-64 64-64 64 28.654 64 64-28.654 64-64 64zM640 448h-256v-192c0-70.58 57.42-128 128-128s128 57.42 128 128v192z" | ||||
| 				], | ||||
| 				"attrs": [], | ||||
| 				"isMulticolor": false, | ||||
| 				"tags": [ | ||||
| 					"lock", | ||||
| 					"secure", | ||||
| 					"private", | ||||
| 					"encrypted" | ||||
| 				], | ||||
| 				"grid": 16 | ||||
| 			}, | ||||
| 			"attrs": [], | ||||
| 			"properties": { | ||||
| 				"id": 136, | ||||
| 				"order": 8, | ||||
| 				"prevSize": 32, | ||||
| 				"code": 58889, | ||||
| 				"name": "lock", | ||||
| 				"ligatures": "password" | ||||
| 			}, | ||||
| 			"setIdx": 2, | ||||
| 			"iconIdx": 5 | ||||
| 		}, | ||||
| 		{ | ||||
| 			"icon": { | ||||
| 				"paths": [ | ||||
| @@ -181,7 +208,7 @@ | ||||
| 				"order": 15, | ||||
| 				"prevSize": 32, | ||||
| 				"code": 58896, | ||||
| 				"name": "lock2", | ||||
| 				"name": "locked", | ||||
| 				"ligatures": "locked" | ||||
| 			}, | ||||
| 			"setIdx": 2, | ||||
| @@ -234,7 +261,7 @@ | ||||
| 				"order": 13, | ||||
| 				"prevSize": 32, | ||||
| 				"code": 58881, | ||||
| 				"name": "menu2", | ||||
| 				"name": "menu", | ||||
| 				"ligatures": "menu" | ||||
| 			}, | ||||
| 			"setIdx": 2, | ||||
|   | ||||
										
											
												File diff suppressed because one or more lines are too long
											
										
									
								
							| @@ -71,7 +71,7 @@ | ||||
| 			&.selection { | ||||
| 				@include flex($selectionPanelFlexWidth, 0); | ||||
| //				height: 100%; | ||||
| //				overflow-y: scroll; | ||||
| 				@include overflow-scroll; | ||||
| 			} | ||||
| 			 | ||||
| 			&.cardContent { | ||||
| @@ -319,6 +319,8 @@ div.cardContent { | ||||
| 				@include flexbox; | ||||
| 				@include flex-direction(column); | ||||
|  | ||||
| 				box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.75); | ||||
|  | ||||
| 				position: relative; | ||||
| 				z-index: 10+1; | ||||
| 				 | ||||
| @@ -340,14 +342,6 @@ div.cardContent { | ||||
|  | ||||
| 			@include flexbox; | ||||
| 			@include flex-direction(column); | ||||
|  | ||||
|  | ||||
| //			.cardDetailToolbar { | ||||
| //				@include flex(none); | ||||
| //				height: $mainCardToolbarHeight; | ||||
| //				line-height: $mainCardToolbarHeight; | ||||
| //			} | ||||
|  | ||||
| 		} | ||||
|  | ||||
| 		.content { | ||||
| @@ -364,41 +358,7 @@ div.cardContent { | ||||
| 		@include flexbox(); | ||||
| 		@include flex-direction(column); | ||||
| 		height: 100%; | ||||
| /*		 | ||||
| 		.cardDetailToolbar { | ||||
| 			@include flex(none); | ||||
| 			height: $mainCardToolbarHeight; | ||||
| 			line-height: $mainCardToolbarHeight; | ||||
| 			 | ||||
| 			&.commands > div { | ||||
| 				@include flexbox(); | ||||
| 				@include flex-direction(row); | ||||
| //				font-size: 24pt; | ||||
|  | ||||
| 				.back { | ||||
| 					@include flex(auto); | ||||
| 					cursor: pointer; | ||||
| 				} | ||||
| 			 | ||||
| 				.cardMenuOptions { | ||||
| 					@include flex(auto); | ||||
| 					cursor: pointer; | ||||
| 				} | ||||
| 			} | ||||
| 			 | ||||
| 			&.edit { | ||||
| 				ul { | ||||
| 					@include flexbox(); | ||||
| 					@include flex-direction(row); | ||||
| 					 | ||||
| 					li { | ||||
| 						@include flex(auto); | ||||
| 						cursor: pointer; | ||||
| 					} | ||||
| 				} | ||||
| 			} | ||||
| 		} | ||||
| */		 | ||||
| 		.content { | ||||
| 			@include flex(auto); | ||||
| 			overflow-y: scroll; | ||||
|   | ||||
| @@ -164,4 +164,27 @@ | ||||
| 	&:-moz-placeholder           {@content} | ||||
| 	&::-moz-placeholder          {@content} | ||||
| 	&:-ms-input-placeholder      {@content}   | ||||
| } | ||||
| } | ||||
|  | ||||
| @mixin cursor-grab () { | ||||
| 	cursor: grab; | ||||
| 	cursor: -moz-grab; | ||||
| 	cursor: -webkit-grab; | ||||
| } | ||||
|  | ||||
| @mixin cursor-grabbing () { | ||||
| 	cursor: grabbing; | ||||
| 	cursor: -moz-grabbing; | ||||
| 	cursor: -webkit-grabbing; | ||||
| } | ||||
|  | ||||
| @mixin dotted-background () { | ||||
| 	//	http://codepen.io/aleprieto/pen/nAmIy | ||||
| 	background-image: -webkit-repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%); | ||||
| 	background-image: -moz-repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%); | ||||
| 	background-image: -ms-repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%); | ||||
| 	background-image: repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%); | ||||
| 	-webkit-background-size: 3px 3px; | ||||
| 	-moz-background-size: 3px 3px; | ||||
| 	background-size: 3px 3px; | ||||
| } | ||||
|   | ||||
| @@ -1,5 +1,8 @@ | ||||
| .accountStatus { | ||||
| 	background-color: green; | ||||
| 	padding: 3px; | ||||
| 	font-size: 10pt; | ||||
| 	border-bottom: 1px solid white; | ||||
| 	 | ||||
| 	&.FULL { | ||||
| 		display: none; | ||||
| @@ -24,4 +27,18 @@ | ||||
| 	&.EXPIRED { | ||||
| 		background-color: red; | ||||
| 	} | ||||
| } | ||||
| 	 | ||||
| 	&.OFFLINE_COPY { | ||||
| 		background-color: $clipperz-blue; | ||||
| 		color: white; | ||||
| 		 | ||||
| 		.expirationDate { | ||||
| 			display: none; | ||||
| 			visibility: hidden; | ||||
| 		} | ||||
| 		 | ||||
| 		.referenceDate { | ||||
| 			padding-left: 10px; | ||||
| 		} | ||||
| 	} | ||||
| } | ||||
|   | ||||
| @@ -204,6 +204,9 @@ $cardViewBasePadding: 10px; | ||||
| 									padding: 5px 10px; | ||||
| 									border-bottom: 1px solid black; | ||||
| 							 | ||||
| 									&.disabled { | ||||
| 										color: #ddd; | ||||
| 									} | ||||
| 								} | ||||
| 							} | ||||
| 						} | ||||
| @@ -278,6 +281,11 @@ $cardViewBasePadding: 10px; | ||||
| 	ul { | ||||
| 		li { | ||||
| 			text-align: center; | ||||
| 			 | ||||
| 			&.disabled { | ||||
| 				color: #333; | ||||
| 				cursor: default; | ||||
| 			} | ||||
| 		} | ||||
| 	} | ||||
| 	 | ||||
| @@ -360,30 +368,46 @@ $cardViewBasePadding: 10px; | ||||
| 				 | ||||
| 				display: block; | ||||
| 				margin: $iconMargin; | ||||
| 				margin-top: 12px; | ||||
| 				cursor: pointer; | ||||
| 				color: #ccc; | ||||
| 				width: 40px; | ||||
| 				font-size: 20pt; | ||||
|  | ||||
| 				&:hover { | ||||
| 					color: rgb(155, 0, 0); | ||||
| 				}; | ||||
| 			} | ||||
| 			 | ||||
| 			.toggleLock { | ||||
| 				@include align-self(flex-end); | ||||
| 				@include icon-font(); | ||||
|  | ||||
| 			.dragHandler { | ||||
| //				@include dotted-background(); | ||||
| 				@include cursor-grab(); | ||||
| 				 | ||||
| 				background: repeating-linear-gradient( | ||||
| 					0deg, | ||||
| 					white, | ||||
| 					white 2px, | ||||
| 					#ddd 2px, | ||||
| 					#ddd 3px | ||||
| 				); | ||||
|  | ||||
| 				width: 28px; | ||||
| 				height: 20px; | ||||
| 				margin-left: 6px; | ||||
| 				display: block; | ||||
| 				margin: $iconMargin; | ||||
| 				margin-left: $iconMargin * 2; | ||||
| 				cursor: pointer; | ||||
| 				color: #ccc; | ||||
| 				font-size: 20pt; | ||||
| /* | ||||
| 				@include icon-font(); | ||||
| 				color: #aaa; | ||||
|  | ||||
| 				&:hover { | ||||
| 					color: #888; | ||||
| 				font-size: 15pt; | ||||
| 				margin: $iconMargin; | ||||
| 				margin-left: 10px; | ||||
| */				 | ||||
| 				&:active { | ||||
| 					@include cursor-grabbing(); | ||||
| 				}; | ||||
| 			} | ||||
| 			 | ||||
| 		} | ||||
| 		 | ||||
| 		.fieldValues { | ||||
| @@ -427,20 +451,40 @@ $cardViewBasePadding: 10px; | ||||
| 			@include flex(none); | ||||
| //			@include align-self(center); | ||||
| 			@include align-self(flex-start); | ||||
|  | ||||
| 			span { | ||||
| 				display: block; | ||||
|  | ||||
| 				&.action { | ||||
| 					@include icon-font(); | ||||
| 					color: #aaa; | ||||
|  | ||||
| 					width: 20px; | ||||
| 					height: 20px; | ||||
| 					font-size: 15pt; | ||||
| 					margin: $iconMargin; | ||||
| 				} | ||||
|  | ||||
| 				&.toggleLock { | ||||
| 					@include align-self(flex-end); | ||||
| 					@include icon-font(); | ||||
|  | ||||
| 					display: block; | ||||
| 					margin: $iconMargin; | ||||
| 					margin-left: 9px; | ||||
| 					padding-top: 10px; | ||||
| 					cursor: pointer; | ||||
| 					color: #ccc; | ||||
| 					font-size: 18pt; | ||||
|  | ||||
| 					&:hover { | ||||
| 						color: #888; | ||||
| 					}; | ||||
| 				} | ||||
| 				 | ||||
| 			} | ||||
| 		} | ||||
| 	 | ||||
| 		.action { | ||||
| 			@include icon-font(); | ||||
| 			color: #aaa; | ||||
|  | ||||
| //			width: 32px; | ||||
| 			width: 20px; | ||||
| //			height: 32px; | ||||
| 			height: 20px; | ||||
| //			font-size: 20pt; | ||||
| 			font-size: 15pt; | ||||
| 			margin: $iconMargin; | ||||
| 		} | ||||
|  | ||||
| 	} | ||||
|  | ||||
|   | ||||
| @@ -2,7 +2,7 @@ | ||||
| 	background-color: $main-alternate-color; | ||||
| 	color: $main-alternate-text-color; | ||||
| 	font-size: 18pt; | ||||
| 	@include overflow-scroll; | ||||
|  | ||||
| //	height: 100%; | ||||
|  | ||||
| 	$iconColumnWidth: 40px; | ||||
|   | ||||
		Reference in New Issue
	
	Block a user
	 Giulio Cesare Solaroli
					Giulio Cesare Solaroli