password-manager/frontend/delta/scss/core/layout.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/.

*/

@import "parameters";

html {
	position: fixed;
	height: 100%;
	width: 100%;
}

.page {
	@include pageElement();
//	@include user-select(none);
}

input[type=text] {
	-webkit-appearance: none;	
}

.mainPage {
//	background-color: yellow;
	height: 100%;
}

.mainPage > #selectionPanel {
	@include sliding-panel(left, $selectionPanelWidth);
	@include overflow-auto;
//	overflow: auto;

	&.open {
		@include sliding-panel-open(left, $selectionPanelWidth);
	}
}

#selections {
	@include flexbox();
	@include flex-direction(column);
//	min-height: 100%;
	height: 100%;

	ul.defaultSet {
		@include flex(none);
	}

	.search {
		@include flex(none);
	}

	ul.tagList {
		@include flex(auto);
		margin-left: 0px;
//		overflow-y: scroll;
//		overflow:auto;
		@include overflow-auto;

		li {
//			@include flexbox();

			span.tagLabel {
//				@include flex(auto);
			}
			
			span.tagCount {
//				@include flex(none);
			}
		}
	}
	
	.showArchivedCards {
		@include flex(none);
		
		cursor: pointer;
	}
}

#mainPanel {
//	background-color: $yellow;
	left: 0px;

	&.extra-wide {
		@include sliding-panel-container();
		
		.container {
			@include flexbox();
		}
		
		.subpanel {
			
			&.selection {
				@include flex($selectionPanelFlexWidth, 0);
//				height: 100%;
//				@include overflow-auto;
			}
			
			&.cardContent {
				@include flex($cardContentPanelFlexWidth);
				@include flexbox();
				@include flex-direction(column);
			}
		}
		
		.selectionToggle {
			.button {
				display: none;
				visibility: hidden;
			}
		}

		div.addCardButton {
			margin-left: 20%;
			z-index: 5;
		}
	}

	&.wide {
		transition: left 0.3s ease-in-out;
		.container {
			@include sliding-panel-container();
		}
	}

	&.narrow {
		transition: left 0.3s ease-in-out;
		.container {
			@include sliding-panel-container();
		}

		.column {
			@include pageElement();
		}
		
		div.addCardButton {
			margin-left: 75%;
			z-index: 5;
		}
	}

	&.open.left {
//		transition: left 0.3s ease-in-out;
		@include sliding-panel-wrapper-open (left, $selectionPanelWidth);
		@include mask();
	}

	&.open.right {
//		@include sliding-panel-wrapper-open (right, $settingsPanelWidth);
		@include mask();
	}

}

//=============================================================================

#extraFeaturesPanel {
	@include sliding-panel(right, $settingsPanelWidth);

	&.open {
		@include sliding-panel-open(right, $settingsPanelWidth);
	}

	.extraFeatureContent {
		display: none;
		width: 100%;
	}

	&.fullOpen {
		width: 100%;

		.extraFeatureContent {
			@include flexbox();
			@include flex-direction(column);
		}
	}

	@include flexbox();
	@include flex-direction(row-reverse);

	.extraFeatureIndex {
		@include flex(none);

		width: $settingsPanelWidth;
		height: 100%;
		@include flexbox();
		@include flex-direction(column);

		header {
			@include flex(none);
		}
	
		& > div {
			@include flex(auto);
			@include overflow-auto();
		}

		footer {
			@include flex(none);
		}
	}

	.extraFeatureContent {
		@include flex(auto);
		background-color: black;

		header {
		}

		.extraFeature {
			@include flex(auto);
			@include overflow-auto();

			@include flexbox();
			@include flex-direction(column);
			.header {
				@include flex(none);
				padding: 20px;
			}
			.content {
				@include flex(auto);
				padding: 0px 20px 20px 20px;
				@include overflow-auto();
			}
		}

//		footer {
//			@include flex(none);
//			height: 48px;
//			width: 100%;
//		}
	}
}

//.............................................................................

.mainPage.narrow {
	#extraFeaturesPanel.fullOpen {

		.extraFeatureIndex {
			width: 0px;
		}

		.extraFeatureContent {
			width: 100%;

			header {
				@include flex(none);
				display: block;
				height: 48px;
			}
			
			.extraFeature {
				
			}
		}
	}
}

//=============================================================================

.container {
	height: 100%;
	width: 100%;
}

/* IE fix for 'wide' mode. */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	position: absolute;
}

.cardToolbarFrame {
	width: 100%;
	height: 100%;
	
	@include flexbox();
	@include flex-direction(column);

	.cardToolbar {
		@include flex(none);
	}

	.cardContent {
		@include flex(1);
		@include overflow-auto();
	}
}

div.cardToolbar {
//	background-color: $orange;
	
	header {
		@include flexbox();
		height: $mainCardToolbarHeight;
		line-height: $mainCardToolbarHeight;
		
		background-color: $clipperz-orange;
		color: white;
		font-size: 24pt;

		div {
			
			&.clipperz {
				
				span.logo {
					@include icon-font();

					@include align-self(center);
					@include flex(4);
					text-align: center;
					
					&.tag, &.search {
						font-size: 14pt;
					}
					
					&.withAttachments {
						font-weight: bold;
					}
				}
				
				span.value {
					display: inline-block;
					padding-left: 5px;
					font-size: 18pt;
				}
			}
		
			&.selectionToggle {
				@include flex(1);
				text-align: left;

				.button {
					display: inline-block;

					.label {
						padding-left: 8px;
						padding-right: 8px;
					}
				}
			}

			&.settingsToggle {
				@include flex(1);
				text-align: right;

				.button {
					display: inline-block;

					.label {
						padding-right: 8px;
						padding-left: 8px;
					}
					
					.attachmentQueueToggleButton {
						font-family: "clipperz-font";
						margin-right: 10px;

						h3 {
							font-weight: bold;
							font-size: 33pt;

							letter-spacing: -10px;
						}

						.badge {
							position: absolute;
							margin-left: -12px;
							width: auto;
							height: 16px;
							line-height: 17px;
							background-color: #1863a1;
							color: white;
							text-align: center;
							font-size: 8pt;
							font-weight: bold;
							border-radius: 8px;
							padding: 0px 4px;

							&.top {
								top: 11px;
							}

							&.bottom {
								top: 25px;
								margin-left: -42px;
							}
						}
					}
				}
			}
			
			.button {
				overflow: hidden;
				font-size: 24pt;
				@include icon-font();
				vertical-align: center;
			}
		}
	}
}

/* IE fix for badges being shifted to left. */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	.attachmentQueueToggleButton {
		.badge {
			.top {
				margin-left: 37px;
			}

			.bottom {
				margin-left: 7px;
			}
		}
	}
}

$arrow-size: 8px;
div.attachmentQueueStatus {
	position: fixed;
	top: calc(48px - #{$arrow-size});
	right: 0;
	padding: 0;
	color: white;
	z-index: 10;

	height: calc(100% - 48px);
	pointer-events: none;

	.arrow {
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 0 $arrow-size $arrow-size $arrow-size;
		border-color: transparent transparent black transparent;
		position: fixed;
		right: 70px;
		top: calc(49px - #{$arrow-size});
	}

	&.closed {
		display: none;
		visibility: hidden;
	}

	p {
		padding: 1em;
	}

	ul {
		pointer-events: all;
		
		max-height: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		white-space: nowrap;

		background: black;
		margin-top: $arrow-size;
		padding: 0;
		box-shadow: 0px 2px 5px #888888;

		li {
			padding: 0 0 0 1em;;
			border-bottom: 1px solid white;

			span {
				display: inline-block;
				vertical-align: middle;
				height: 40px;
				line-height: 40px;
			}

			.contentType {
				@include icon-font();
				color: white;
				width: 30px;
			}

			.name {
				width: 250px;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.status {
				width: 150px;
				text-align: right;

				.statusString {
					font-size: 14px;
				}

				.processIcon {
					margin-left: 1em;
				}
			}

			.close {
				a {
					@include icon-font();
					display: inline-block;

					width: 50px;
					text-align: center;
					letter-spacing: 1px;
					font-size: 20px;

					@include userSelectNone();
				}

				a:hover {
					color: lightgray;
					cursor: pointer;
				}
			}

			.progress {
				width: 50px;
				height: 30px;
				text-align: center;

				@include userSelectNone();
			}

			&:last-child {
				border-bottom: 0;
			}
		}
	}

	.radialProgressIndicator {
		height: 25px;

		.background {
			fill: white;
		}

		.progress {
			fill: $clipperz-orange;
		}
	}
}


.narrow {
	.attachmentQueueStatus {
		width:100%;

		ul {
			white-space: inherit;

			li {
				padding-top: .2em;
				padding-bottom: .2em;

				span {
					height: 25px;
					line-height: 30px;
				}

				.name {
					width: 225px;
				}

				.status {
					padding-left: 30px;
					text-align: left;
					width: calc(100% - 100px);
					line-height: 20px;
					font-size: .8em;

					.processIcon {
						margin-left: 0.5em;
					}
				}

				.close {
					height: inherit;
					line-height: inherit;
					float: right;
					display: block;
					margin-top: -5px;
				}

				.progress {
					padding-left: 18px;
					margin-top: -24px;
				}
			}
		}
	}
}


div.cardContent {
//	@include flex(flex-grow);	//	???

	@include flexbox();
	@include flex-direction(row);
//	height: 100%;

	div.cardListColumn.column {
		@include flex($cardListWidth, 0);
		@include flexbox();
//		overflow-y: scroll;
//		overflow:auto;
//		@include overflow-auto;
		overflow: hidden;
//		height: 100%;

		z-index: 5;
		box-shadow: 2px 0 6px 0 rgba(0,0,0, 0.1);

		div.cardToolbar.narrow {
		}
		
		&.addCard {
			div.cardList {
				.cardListInnerWrapper {
					padding-bottom: #{$cardListPadding};
				}
			}
		}
		
		div.cardList {
			@include overflow-auto;
			width: 100%;
		}

		$addButtonSize: 60px;
		div.addCardButton {
			@include icon-font();
			@include border-radius($addButtonSize / 2);
			z-index: 5;
//			@include radial-gradient (white, rgba(0, 0, 0, 0));
			
			position: relative;
			bottom: 0px;
			font-size: 45pt;
//			text-align: center;
//			line-height: 56px;

			color: white;
			background-color: $clipperz-blue;
			box-shadow: 2px 8px 6px 0 rgba(0,0,0, 0.2);

			width: $addButtonSize;
			height: $addButtonSize;
			
//			float: right;
			position: absolute;
//			margin-left: 150px;
			margin-left: 25%;
			margin-bottom: 20px;
			
			cursor: pointer;
			
			&:hover {
				background-color: darken($clipperz-blue, 10%);
			};
		}
	}

	div.cardDetail.column {
		@include flex($cardDetailWidth);

		@include flexbox();

		div.editWrapper {
			@include flex(auto);
			@include mask();

			width:100%;

			@include flexbox();
			& > div.edit {
				@include flex(auto);
				@include flexbox();
				@include flex-direction(column);

				box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.75);

				position: relative;
				z-index: 10+1;
				
				.content {
//					background-color: yellow;
					background-color: white;
					@include chromeFix();
				}
			}
			
			.mask {
//				background-color: rgba(255, 255, 255, 0.8);
//				background-color: rgba(24, 99, 161, 0.6);
				background-color: rgba(0, 0, 0, 0.6);
			}
		}

		& > div.view /*, & > div.editWrapper > div.edit */ {
			@include flex(auto);

			@include flexbox();
			@include flex-direction(column);

			width:100%;
		}

		.content {
			@include flex(auto);
//			overflow-y: scroll;
//			overflow:auto;
			@include overflow-auto();
		}
	}
}


#cardDetailPage {
	& > .view, & > .editWrapper > .edit {
		@include flexbox();
		@include flex-direction(column);
		height: 100%;
		width: 100%;

		.content {
			@include flex(auto);
			overflow-y: scroll;
		}
	}
}

.cardDetailToolbar {
	@include flex(none);
	height: $mainCardToolbarHeight;
	line-height: $mainCardToolbarHeight;
	
	li.enabled:hover {
		background-color: #114875;
	}

	&.edit {
		@include order(1);

		@include chromeFix();

		width:100%;

		li.save {
			cursor: default;
			background-color: #55aa55;
		}
		li.cancel {
			background-color: #666666;

			&:hover {
				background-color: #444444;
			};
		}
		
		&.hasPendingChanges {
			li.save {
				cursor: pointer;
				background-color: #22aa22;

				&:hover {
					background-color: #1a801a;
				};
			}

			li.cancel {
				background-color: #aa2222;

				&:hover {
					background-color: #dd1111;
				};
			}
		}
	}

	&.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;
//			}
//		}
//	}

	ul {
		@include flexbox();
//		@include flex-direction(row);
		@include flex-direction(row-reverse);

		li {
			@include flex(auto);
			cursor: pointer;
	
			span {
			}
		}
	}
}


.button {
	cursor: pointer;
	
	&.disabled {
		cursor: default;
	}
}


div.dialogBox {
	@include mask();

	@include flexbox();
	@include align-items(center);
	@include justify-content(center);

	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;

	.mask {
		z-index: 25;
		@include chromeFix();
	}

	div.dialog {
		@include flex(none);
		z-index: 99999;

		h3.message {
		}
		
		div.answers {
			@include flexbox();
			@include flex-direction(row);
			@include justify-content(flex-end);
			
			div.button {
				@include flex(none);
				cursor: pointer;
				
				&.isDefault {
				}
			}
		}
	}
}

div.help {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
	background-color: rgba(0, 0, 0, 0);
}


#loginPage, #registrationPage, #unlockPage {

	.content {
		@include flexbox();
		@include flex-direction(column);

		@include overflow-auto;
		height: 100%;

		.miscInfo {
			@include flex(0);
		}
	
		header {
			@include flex(auto);

			@include flexbox();
			.headerContent {
				width: 100%;
			}
		}
	
		.body {
			@include flex(none);
//			width: 100%;
			@include flexbox();

			.bodyContent {
				@include flex(auto);
				margin-left: auto;
				margin-right: auto;
			}
		}

		.afterBody {
			@include flex(auto);
		}

		.other {
			@include flex(none);

			@include flexbox();
			@include align-items(center);
			.otherContent {
				@include flex(auto);
				width: 100%;
			}
		}

		footer {
			@include flex(none);

			.footerContent {
				width: 100%;

				.links {
				}

				.applicationVersion {
				}
			}
		}
	}
}