snappymail/dev/Styles/Compose.less

.b-compose {

	&.modal {

		width: 850px;
		margin: 10px auto;

		.modal-body {
			overflow: auto;
			padding: 0px;
		}
	}

	.textAreaParent, .attachmentAreaParent {
		overflow: hidden;
		position: relative;
	}

	.attachmentAreaParent {
		padding: 10px 10px 6px 10px;
		background: #ddd;
		border-top: 1px solid #ccc;

		overflow-y: auto;
	}

	.attachmentAreaParent {

		.no-attachments-desc {
			padding: 50px 10px;
			text-align: center;
			font-size: 24px;
			color: #666;
			text-shadow: 0 1px 0 #fff;
			text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
		}

		.attachmentList {

			margin: 0;
			padding: 10px;

			.attachmentItem {

				display: inline-block;
				margin: 3px 6px;;
				max-width: 200px;
				min-width: 60px;
				overflow: hidden;
				/*cursor: pointer;*/
				list-style: none;
				line-height: 24px;
				border: 0;
				background-color: #fff;
				box-shadow: 0 1px 5px #ccc;
				box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
				box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 1px 5px rgba(0, 0, 0, 0.1);

				border-radius: 2px;

				&.waiting {
					opacity: 0.6;
				}

				&.error {
					.attachmentIcon, .attachmentSize, .attachmentName {
						color: red;
					}
				}

				.attachmentIconParent {

					position: relative;

					height: 56px;
					width: 60px;

					background: none;

					.iconPreview, .iconBG, .iconMain, .iconProgress {
						position: absolute;
						top: 0;
						left: 0;

						display: inline-block;
						width: 100%;
						height: 100%;
					}

					.iconProgress {
						background: #eee;
						width: 0%;
					}

					.iconBG {
						font-size: 18px;
						text-align: center;
						color: #999;
						font-weight: bold;
						line-height: 55px;

						text-shadow: 0 1px 0 #FFF;
						text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
					}

					.iconPreview {
						display: none;

						background: #555;
						background-image: none;
						background: rgba(0, 0, 0, .5) !important;

						.attachmentIcon {
							color: #fff;
							text-shadow: 0 1px 0 #000;
						}
					}
				}

				.attachmentNameParent {

					position: relative;

					margin-left: 60px;
					padding: 4px;
					padding-left: 6px;
					min-width: 90px;

					color: #333;
					background: #fafafa;
					border-left: 1px solid #ddd;
				}

				.attachmentIcon {
					margin: 6px 0 0 13px;
					font-size: 36px;
					width: 36px;
					height: 36px;
					color: #aaa;
				}

				.attachmentIconParent.hasPreview:hover {
					.iconPreview {
						display: inline-block;
					}
					.iconMain {
						display: none;
					}
				}

				.showPreview {
					display: none;
				}

				.attachmentIconParent.hasPreview {
					.showPreview {
						display: inline;
					}

					.hidePreview {
						display: none;
					}
				}
			}
		}
	}

	.b-header-toolbar {

		height: 40px;

		color: #fff;
		background-color: @rlMainDarkColor;

		background-color: #333;
		background-color: rgba(0,0,0,0.8) !important;

		.close {
			color: #fff;
			opacity: 1;
		}

		.btn.disabled {
			&.button-delete {
				visibility: hidden;
			}
		}

		.button-save, .button-delete, .saved-text {
			margin-left: 8px;
		}

		.button-close, .button-skip {
			margin-left: 8px;
		}

		.disabled.button-delete {
			margin-left: 0px;
		}
	}

	.b-header {

		padding: 10px;
		background-color: #eee;
		color: #333;

		.e-identity {

			color: #333;
			text-decoration: none;
			font-weight: bold;

			&:hover {
				color: #333;
				text-decoration: none;
			}

			&.multiply {
				cursor: pointer;
				border-bottom: 1px dashed #555;
			}
		}

		.e-row {
			line-height: 30px;
		}

		.e-label {
			text-align: right;
			width: 1%;
			min-width: 70px;
			padding: 6px 10px;
		}

		.e-value {

			padding: 2px 0px;

			textarea, input[type="text"] {
				width: 98%;
			}
			textarea {
				height: 40px;
			}
		}

		.error-desc {
			color: red;
		}

		.b-appachments {

			.b-attacment {
				line-height: 20px;
				padding-bottom: 10px;
			}

			.b-attacment-in-process {

				line-height: 20px;
				padding-bottom: 10px;

				.uploading {
					display: none;
					padding-right: 5px;
				}

				&.uploading .uploading {
					display: inline;
				}

				.upload-progress {
					font-weight: bold;
				}

				&.error .namedStr {
					color: #888;
				}
				.error {
					color: red;
				}
				.close {
					float: left;
					padding-right: 13px;
				}
			}
		}
	}

	.cke_chrome {
		border-left-width: 0 !important;
		border-right-width: 0 !important;
		border-bottom-width: 0 !important;
	}

	.b-attachment-button {
		display: inline-block;
	}

	.b-attachment-place {

		position: absolute;
		height: 120px;
		border: 2px #777 dashed;
		line-height: 119px;
		text-align: center;
		background-color: #fff;
		z-index: 300;
		left: 20px;
		right: 20px;
		font-size: 24px;

		&.drag-and-drop-over {
			background: #777;
			color: #fff;
		}
	}
}