password-manager/frontend/delta/scss/style/selectionPanel.scss

/*

Copyright 2008-2015 Clipperz Srl

This file is part of Clipperz, the online password manager.
For further information about its features and functionalities please
refer to http://www.clipperz.com.

* Clipperz is free software: you can redistribute it and/or modify it 
  under the terms of the GNU Affero General Public License as published 
  by the Free Software Foundation, either version 3 of the License, or 
  (at your option) any later version.

* Clipperz is distributed in the hope that it will be useful, but 
  WITHOUT ANY WARRANTY; without even the implied warranty of 
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
  See the GNU Affero General Public License for more details.

* You should have received a copy of the GNU Affero General Public
  License along with Clipperz. If not, see http://www.gnu.org/licenses/.

*/

#selections {
	background-color: $main-alternate-color;
	color: $main-alternate-text-color;
	font-size: 14pt;

//	height: 100%;

	$iconColumnWidth: 40px;
	$spacing: 5px;

	ul.defaultSet {
//		font-weight: bold;
		padding-top: 10px;
		padding-bottom: 10px;

		li {
			@include flexbox();
			@include flex-direction(row);

			span.label {
				@include flex(auto);
			}

			span.count {
				@include flex(none);
				@include align-self(flex-end);
			}

			&.allCards:before {
				content: "clipperz";
			}
			
			&.recentCards:before {
				content: "recent";
			}

			&.withAttachmentCards:before {
//				transform: scaleX(-1);
				content: "attachment";
				font-weight: bold;
			}

			&.untaggedCards {
				padding-left: 35px;
			}
		}
	}

	.search {
		form {
			div.form {
				@include flexbox();
				@include flex-direction(row);
				@include align-items(stretch);

				div.label {
					@include flex(none);
					@include order(0);

					label {
						display: block;
						@include icon-font();
						font-weight: normal;
						padding: 4px 8px 0px 8px;
						font-size: 14pt;
						vertical-align: baseline;
					}
				}

				div.input {
					@include flex(1);
					@include order(1);
					overflow: hidden;

					input {
						font-family: "clipperz-font";
						font-size: 14pt;
						color: white;
						background-color: black;
						border: 0px;
						border-bottom: 1px solid #333;
						outline: none;
						display: block;
						width: 160px;

						@include placeholder {
							font-style: italic;
							color: #ccc;
						}
					}
				}

				.searchClear {
					@include flex(none);
					@include order(2);
					@include align-self(flex-end);
					padding-bottom: 4px;

					span {
						padding: 3px 5px;
						cursor: pointer;
						text-align: right;
						display: block;

						&.count {
							display: none;
						}
						&.clear {
							@include icon-font();
							display: none;

							@include border-radius(4px);
							color: white;
							background-color: gray;
							font-size: 10pt;
							margin-right: 12px;
						}
					}

					&:hover {
						.count {
							display: none;
						}
						.clear {
							background-color: #666;
							display: block;
						}
					}
				}
			}
		}

		.searchResultInfo {
			font-size: 10pt;
			padding: 2px 6px;
			display: none;

			label {
				padding-right: 3px;
			}
		}
	}

	ul.tagList {
		padding-top: 10px;

		li {
			@include flexbox();
			@include flex-direction(row);

			&.title:before {
				content: "tag";
			}

			span.label {
				font-size: 14pt;
				@include flex(auto);
				padding-left: 35px;

				overflow: hidden;
				text-overflow: ellipsis;				
			}
		
			span.count {
				@include flex(none);
				@include align-self(flex-end);

//				background-color: gray;
//				font-size: 10pt;
//				margin-left: 10px;
//				padding: 0px 4px;
//				@include border-radius(4px);
			}
		}
	}
	
	li {
//		padding-left: 35px;
//		text-indent: -35px;

		padding-top: 7px;
		padding-bottom: 7px;

		cursor: pointer;

		&:before {
			@include icon-font();
			font-weight: normal;
			padding-left: 8px;
			padding-right: 8px;
			font-size: 14pt;
			vertical-align: baseline;
		}
	}
	
	.showArchivedCards {
		@include flexbox();
		@include flex-direction(row);
		border-top: 1px dotted #333;

		padding: 10px;
		font-size: 10pt;
		
		input {
			@include flex(none);
		}

		.label {
			@include flex(auto);
			padding-left: 5px;
			
//			font-size: 10pt;
			line-height: initial;
		}

		.count {
			@include flex(none);
			@include align-self(flex-end);
			margin-right: 2px;
		}
	}
}

span.count {
	background-color: white;
	font-size: 10pt;
	margin-right: 12px;
	padding: 3px 5px;
	@include border-radius(4px);

	color: black;
	font-weight: 300;
	vertical-align: middle;
}


//$selectionColor: yellow;
$selectionColor: $clipperz-orange;

#selections.ALL {
	li.allCards {
		color: $selectionColor;
		
		&:before {
			color: white;
		}
	}
}

#selections.WITH_ATTACHMENTS {
	li.withAttachmentCards {
		color: $selectionColor;

		&:before {
			color: white;
		}
	}
}

#selections.RECENT {
	li.recentCards {
		color: $selectionColor;

		&:before {
			color: white;
		}
	}
}

#selections.UNTAGGED {
	li.untaggedCards {
		color: $selectionColor;

		&:before {
			color: white;
		}
	}
}

#selections.SEARCH {
	div.search {
//		.searchResultInfo {
//			color: $selectionColor;
//			display: block;
//		}
		
		form {
			div.form {
				label {
//					color: $selectionColor;
				}
				
				input {
					color: $selectionColor;
				}

				.searchClear {
					span.count {
						display: block;
					}
				
					&:hover {
						.count {
							display: none;
						}
					}
				}
			}
		}
	}
}

#selections.TAG {
	ul.tagList {
		li.selected {
			color: $selectionColor;

			&:before {
				color: white;
			}
		}
	}
}