Move from CSS to SCSS

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>

1 files changed, 972 insertions, 0 deletions

diff --git a/css/mail.scss b/css/mail.scss
new file mode 100755
index 000000000..9ae88e333
--- /dev/null
+++ b/css/mail.scss
@@ -0,0 +1,972 @@
+.loading {
+	position: absolute;
+	left: 50%;
+	top: 50%;
+}
+
+.emptycontent {
+	padding-top: 30vh;
+	margin-top: 0px;
+}
+.emptycontent > h2 {
+	padding-top: 20px;
+}
+
+.container {
+	position: relative;
+	width: 100%;
+	height: 100%;
+}
+
+.mail-account {
+	max-width: 100%;
+	height: 44px;
+	padding-left: 30px;
+	background-color: transparent;
+	border: none;
+}
+
+.folders .ui-droppable-active {
+	background-color: rgb(240, 240, 240);
+}
+
+.folder.no-select {
+	cursor: not-allowed;
+}
+
+/* ACCOUNT FORM */
+#account-form {
+	z-index: 1001;
+	width: 250px;
+	top: 15%;
+	padding-bottom: 50px;
+	margin: 0 auto;
+	padding-top: 30px;
+}
+@media only screen and (max-height: 400px) {
+	#account-form #emptycontent {
+		margin-top: 0px;
+	}
+}
+@media only screen and (min-height: 401px) and (max-height: 600px) {
+	#account-form #emptycontent {
+		margin-top: 2vh;
+	}
+}
+@media only screen and (min-height: 601px) {
+	#account-form #emptycontent {
+		margin-top: 10vh;
+	}
+}
+#account-form h2 {
+	text-align: center;
+	position: relative;
+	width: 300%;
+	left: -100%;
+	margin-bottom: 20px;
+}
+#account-form input {
+	width: 100%;
+	box-sizing: border-box;
+}
+
+#account-form .toggle-manual-mode {
+	background-position: right;
+	padding-right: 16px;
+	margin-left: 6px;
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
+	opacity: .3;
+}
+
+#setup-imap-ssl-mode,
+#setup-smtp-ssl-mode {
+	position: absolute;
+	top: 0;
+	right: 0;
+	margin: 0;
+	background-color: transparent;
+	border: none;
+	z-index: 100;
+}
+
+#connect-loading {
+	position: absolute;
+	top: 206px;
+	left: 0;
+	right: 0;
+	margin-left: auto;
+	margin-right: auto;
+	height: 30px;
+}
+
+/* app navigation */
+
+/* do not display empty folders in the sidebar */
+#app-navigation .empty {
+	display: none;
+}
+
+
+/* do not overlap collapse icon with special use icon */
+#app-navigation .special-inbox .collapse,
+#app-navigation .special-drafts .collapse,
+#app-navigation .special-sent .collapse,
+#app-navigation .special-trash .collapse {
+	display: none !important;
+}
+#app-navigation .special-inbox:hover .collapse,
+#app-navigation .special-inbox:focus .collapse,
+#app-navigation .special-drafts:hover .collapse,
+#app-navigation .special-drafts:focus .collapse,
+#app-navigation .special-sent:hover .collapse,
+#app-navigation .special-sent:focus .collapse,
+#app-navigation .special-trash:hover .collapse,
+#app-navigation .special-trash:focus .collapse {
+	display: inline-block !important;
+}
+
+
+#emptycontent,
+#mail-messages #emptycontent.emptycontent-search {
+	position: static;
+}
+#mail-messages #emptycontent.emptycontent-search h2 {
+	line-height: 150%;
+}
+#mail-messages #emptycontent {
+	position: absolute;
+}
+
+.mail-account-email {
+	display: inline-block;
+	opacity: .5;
+	padding: 20px 0 10px 25px;
+	width: calc(100% - 50px);
+	margin: initial;
+	font-size: 100%;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+.mail-account-email:first-child {
+	display: none;
+}
+.account-toggle-collapse {
+	display: block;
+	margin-top: 10px;
+	margin-left: 43px;
+	opacity: .2;
+	cursor: pointer;
+}
+.account-toggle-collapse:hover {
+	opacity: .5;
+}
+
+.mail-account-color {
+	position: absolute;
+	width: 14px;
+	height: 14px;
+	border-radius: 50%;
+	left: 15px;
+	top: 15px;
+}
+/* color dot position fix for Safari */
+@media not all and (min-resolution:.001dpcm) { @media
+{
+.mail-account-color {
+        top: 2px;
+}
+}}
+
+.mail-message-account-color {
+	position: absolute;
+	width: 2px;
+	height: 69px;
+	z-index: 1;
+}
+
+
+/* settings */
+
+.mailaccount-list li {
+	padding: 10px 0;
+}
+.mailaccount-list .mail-account-name {
+	display: inline-block;
+	width: 90%;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+.mailaccount-list .actions {
+	display: inline-flex;
+	position: absolute;
+	right: 0;
+	min-height: 16px;
+	min-width: 16px;
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)";
+	opacity: .25;
+}
+.mailaccount-list .actions:hover,
+.mailaccount-list .actions:focus {
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
+	opacity: .5;
+}
+
+
+/* app content*/
+
+#mail-messages {
+	position: relative;
+	width: 30%;
+	height: 100%;
+	overflow-x: hidden;
+	overflow-y: auto;
+	border-right: 1px solid #ebebeb;
+}
+#mail-message-list-loading {
+	position: fixed;
+	width: 22%;
+	height: 40px;
+	z-index: 1;
+	background: -moz-radial-gradient(top, ellipse cover, rgba(255,255,255,1), rgba(255,255,255,0) 70%);
+	background: -webkit-radial-gradient(top, ellipse cover, rgba(255,255,255,1),rgba(255,255,255,0) 70%);
+	background: radial-gradient(ellipse at top, rgba(255,255,255,.9),rgba(255,255,255,0) 70%);
+}
+#load-more-mail-messages {
+	margin: 10px auto;
+	padding: 10px;
+	margin-top: 50px;
+	margin-bottom: 200px;
+}
+/* TODO: put this in core icons.css as general rule for buttons with icons */
+#load-more-mail-messages.icon-loading-small {
+	padding-left: 32px;
+	background-position: 9px center;
+}
+
+.mail-message-header {
+	height: 68px;
+}
+
+.mail-message-summary {
+	border-top: 1px solid #eee;
+	position: relative;
+}
+.mail-message-summary:hover,
+.mail-message-summary:focus,
+.mail-message-summary.active {
+	background-color: #f8f8f8;
+}
+
+.mail-message-summary * {
+	cursor: pointer;
+}
+
+.sender-image {
+	display: inline-block;
+	position: absolute;
+	padding: 5px;
+	padding-left: 10px;
+}
+
+.mail-message-summary-from,
+.mail-message-summary-subject,
+.mail-message-summary .date {
+	display: inline-block;
+	padding: 12px;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.mail-message-summary-from {
+	width: 55%;
+	margin-left: 37px;
+	padding-bottom: 0;
+	opacity: .5;
+}
+
+.mail-message-summary-subject {
+	padding-top: 0;
+	width: 75%;
+	margin-left: 37px;
+}
+
+.mail-message-summary .date {
+	position: absolute;
+	font-size: 80%;
+	right: 0;
+	top: 0;
+	max-width: 40%;
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
+	opacity: .5;
+}
+
+.mail-message-summary.unseen .mail-message-summary-from,
+.mail-message-summary.unseen .mail-message-summary-subject {
+	font-weight: bold;
+}
+
+#mail-messages .action.delete {
+	position: absolute;
+	bottom: 0;
+	right: 0;
+	padding: 20px;
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)";
+	opacity: .15;
+}
+#mail-messages .action.delete:hover,
+#mail-messages .action.delete:focus {
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
+	opacity: .5;
+}
+
+#app-navigation .msg.success {
+	color: #fff;
+	background-color: #47a447;
+	padding: 3px;
+}
+#app-navigation .msg.error {
+	color: #fff;
+	background-color: #d2322d;
+	padding: 3px;
+}
+
+/* autocomplete list */
+.ui-autocomplete .ui-menu-item a.mail-recipient-autocomplete {
+	display: flex;
+	align-content: center;
+	align-items: center;
+}
+.ui-autocomplete .ui-menu-item a.mail-recipient-autocomplete span {
+	margin-left: 10px;
+}
+.ui-autocomplete {
+	padding-left: 16px !important;
+	border-radius: 0 !important;
+	border-left: none;
+	border-right: none;
+}
+
+/* editor */
+#mail-new-message-fixed {
+	z-index: 111; /* navigation menu is 110 ;-) */
+	background-color: rgba(255, 255, 255, .75);
+	padding: 10px;
+	position: relative;
+}
+#mail-new-message-list {
+	margin-top: 36px;
+}
+#mail_new_message {
+	width: 100%;
+	padding: 10px;
+	padding-left: 34px;
+	background-position: 10px center;
+	text-align: left;
+	margin: 0;
+}
+
+.message-composer {
+	margin: 0;
+	margin-bottom: 10px; /* line up with the send button */
+	z-index: 100;
+}
+#reply-composer .message-composer {
+	margin: 0;
+}
+.composer-fields {
+	position: relative;
+}
+input.to,
+input.cc,
+input.bcc,
+input.subject,
+textarea.message-body {
+	width: 100%;
+}
+input.to,
+input.cc,
+input.bcc,
+input.subject,
+textarea.message-body {
+	padding: 12px;
+	padding-left: 64px;
+	border: 1px solid #eee;
+	border-right: none;
+	border-left: none;
+	border-radius: 0;
+	margin: 0;
+}
+input.to {
+	padding-right: 60px; /* for cc-bcc-toggle */
+}
+input.cc,
+input.bcc,
+input.subject,
+textarea.message-body {
+	border-top: none;
+}
+input.subject {
+	font-size: 20px;
+	font-weight: 300;
+}
+input.subject,
+textarea.message-body {
+	padding-left: 30px;
+}
+textarea.message-body {
+	min-height: 300px;
+	resize: none;
+	padding-right: 25%;
+}
+
+.composer-cc-bcc {
+	position: relative;
+}
+label.to-label,
+label.cc-label,
+label.bcc-label {
+	position: absolute;
+	left: 0;
+	top: 0;
+	padding: 12px;
+	padding-left: 30px;
+	cursor: text;
+	opacity: .5;
+}
+label.bcc-label {
+	top: initial;
+	bottom: 0;
+}
+.composer-cc-bcc-toggle {
+	position: absolute;
+	right: 0;
+	padding: 12px;
+}
+textarea.reply {
+	min-height: 100px;
+}
+input.submit-message,
+.submit-message-wrapper {
+	position: fixed;
+	bottom: 10px;
+	right: 15px;
+}
+.submit-message-wrapper {
+	position: fixed;
+	height: 36px;
+	width: 60px;
+}
+
+.submit-message-wrapper-inside {
+	position: absolute;
+	left: 0;
+	right: 0;
+	top: 0;
+	bottom: 0;
+	z-index: 102;
+}
+#reply-msg {
+	float: left;
+}
+
+/* extra button styles */
+.submit-message.send,
+#mail_new_attachment,
+#forward-button {
+	padding: 12px;
+}
+.new-message-attachments,
+#forward-button {
+	margin-left: 30px;
+}
+
+.unread {
+	font-weight: bold;
+}
+/* make sure subfolders of unread folders are not bolded as well */
+.unread ul {
+	font-weight: normal;
+}
+
+
+.avatar {
+	width: 32px;
+	height: 32px;
+}
+
+.star {
+	padding: 20px;
+	background-size: 16px;
+	display: inline-block;
+	position: absolute;
+	left: 16px;
+	top: 28px;
+	z-index: 10;
+}
+/* only show star on hover of row */
+.star.icon-star {
+	display: none;
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
+	opacity: .3;
+}
+.star.icon-star:hover,
+.star.icon-star:focus {
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+	opacity: 1;
+}
+.mail-message-summary.active .star.icon-star,
+.mail-message-summary:hover .star.icon-star,
+.mail-message-summary:focus .star.icon-star {
+	display: inline-block;
+}
+
+.icon-reply {
+	background-image: url('../img/reply.svg');
+	position: absolute;
+	left: 49px;
+	top: 40px;
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
+	opacity: .5;
+}
+.icon-reply ~ .mail-message-summary-subject {
+	margin-left: 57px;
+	width: 65%;
+}
+
+.icon-attachment {
+	position: absolute;
+	left: 9px;
+	top: 40px;
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)";
+	opacity: .25;
+}
+
+.icon-reply,
+.icon-attachment {
+	min-width: 16px;
+	min-height: 16px;
+}
+
+.icon-add {
+	display: inline-block;
+	vertical-align: text-top;
+}
+
+
+/* message display */
+
+.mail-message-body {
+	margin-bottom: 100px;
+}
+
+#mail-message-header {
+	position: fixed;
+	height: 90px;
+	width: 50%;
+	z-index: 100;
+	background: -webkit-linear-gradient(rgba(255,255,255,.97), rgba(255,255,255,.9) 80%, rgba(255,255,255,0));
+	background: -o-linear-gradient(rgba(255,255,255,.97), rgba(255,255,255,.9) 80%, rgba(255,255,255,0));
+	background: -moz-linear-gradient(rgba(255,255,255,.97), rgba(255,255,255,.9) 80%, rgba(255,255,255,0));
+	background: linear-gradient(rgba(255,255,255,.97), rgba(255,255,255,.9) 80%, rgba(255,255,255,0));
+}
+
+#mail-message-header h2,
+#mail-message-header p {
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	padding-bottom: 7px;
+	margin-bottom: 0;
+}
+
+#mail-message-close {
+	display: none;
+}
+
+#mail-content,
+.mail-message-attachments {
+	margin: 100px 10px 50px 30px;
+}
+.mail-message-attachments {
+	margin-top: 10px;
+}
+#mail-content iframe {
+	width: 100%;
+}
+
+#show-images-text {
+	display: none;
+}
+
+#mail-content a,
+.mail-signature a {
+	color: #07d;
+	border-bottom: 1px dotted #07d;
+	text-decoration: none;
+	word-wrap: break-word;
+}
+.mail-signature {
+	font-family: monospace;
+	opacity: 0.5;
+	line-height: initial;
+}
+
+.transparency {
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
+	opacity: .5;
+}
+#mail-message-header .transparency {
+	color: rgba(0, 0, 0, .3) !important;
+	opacity: 1;
+}
+#mail-message-header .transparency a {
+	color: rgba(0, 0, 0, .5) !important;
+}
+
+#mail-message {
+	position: absolute;
+	top: 0;
+	right: 0;
+	width: 70%;
+	height: 100%;
+	overflow-y: auto;
+	overflow-x: hidden;
+}
+.mail-message-container {
+	position: absolute;
+	top: 0px;
+	right: 0px;
+	bottom: 0px;
+	left: 0px;
+}
+
+.new-message-attachments li {
+	padding: 10px;
+}
+.new-message-attachments-action {
+	display: inline-block;
+	vertical-align: middle;
+	padding: 22px;
+	opacity: .5;
+}
+
+.mail-message-attachments {
+	margin-bottom: 20px;
+}
+.mail-message-attachments .attachments > div {
+	position: relative;
+	display: inline-block;
+	border: 1px solid #f5f5f5;
+	border-radius: 3px;
+	margin: 0 10px 10px 0;
+	padding: 5px;
+}
+.mail-message-attachments .attachments > div:hover,
+.mail-message-attachments .attachments > div span:hover {
+	background-color: #f8f8f8;
+	cursor: pointer;
+}
+@media only screen and (max-width: 768px) {
+	.mail-message-attachments .attachments > div {
+		width: calc(100% - 5px);
+	}
+}
+@media only screen and (min-width: 769px) and (max-width: 1400px) {
+	.mail-message-attachments .attachments > div {
+		width: calc(50% - 10px);
+	}
+}
+@media only screen and (min-width: 1401px) {
+	.mail-message-attachments .attachments > div {
+		width: calc(33% - 12px);
+	}
+}
+.mail-message-attachments .mail-attached-image {
+	max-width: 100%;
+	max-height: 120px;
+}
+.attachment-save-to-cloud,
+.attachment-download,
+.attachment-import {
+	position: absolute;
+	height: 32px;
+	width: 32px;
+	margin: 0;
+	bottom: 0;
+	background-color: transparent;
+	border-color: transparent;
+}
+.attachment-save-to-cloud {
+	right: 0;
+}
+.attachment-download {
+	right: 32px;
+	opacity: .6;
+}
+.attachment-import {
+	right: 64px;
+}
+.attachment-import-popover {
+	right: 32px;
+	top: 42px;
+}
+.attachment-import-popover::after {
+	right: 32px;
+}
+/* show icon + text for Download all button
+	as well as when there is only one attachment */
+.attachments-save-to-cloud,
+.attachments-download,
+.mail-message-attachment-single .attachment-save-to-cloud,
+.mail-message-attachment-single .attachment-download {
+	background-position: 9px center;
+	padding-left: 32px;
+}
+.attachment-name {
+	display: inline-block;
+	width: calc(100% - 108px);
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	vertical-align: middle;
+}
+/* show attachment size less prominent */
+.attachment-size {
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
+	opacity: .5;
+}
+.attachment-icon {
+	vertical-align: middle;
+}
+
+/* attachment filenames */
+.new-message-attachment-name {
+	display:inline-block;
+}
+/* Colour the filename with a different color during attachment upload */
+.new-message-attachment-name.upload-ongoing {
+	color: #0082c9;
+}
+/* Colour the filename in red if the attachment upload failed */
+.new-message-attachment-name.upload-warning {
+	color: #d2322d;
+}
+/* Red ProgressBar for failed attachment uploads */
+.new-message-attachment-name.upload-warning .ui-progressbar-value {
+	border: 1px solid #e9322d;
+	background: #e9322d;
+}
+
+
+/* compose (handling mailto links) */
+
+.compose {
+	width: 60%;
+	margin: 0 auto;
+}
+
+/* settings */
+.mailaccount-list .mail-account-name {
+	display: inline-block;
+	width: 90%;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+.mailaccount-list .actions {
+	opacity: .5;
+}
+.app-settings-hint {
+	margin-top: 15px;
+	color: #555;
+}
+
+/* icons */
+.icon-inbox {
+	background-image: url('../img/inbox.svg');
+}
+.icon-flagged {
+	background-image: url('../img/star.svg');
+}
+.icon-drafts {
+	background-image: url('../img/drafts.svg');
+}
+.icon-sent {
+	background-image: url('../img/sent.svg');
+}
+.icon-archive {
+	background-image: url('../img/archive.svg');
+}
+.icon-junk {
+	background-image: url('../img/junk.svg');
+}
+.icon-trash {
+	background-image: url('../img/trash.svg');
+}
+
+
+
+#app-navigation {
+	width: 250px;
+	height: 100%;
+	float: left;
+	box-sizing: border-box;
+	background-color: $color-main-background;
+	padding-bottom: 44px;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+	border-right: 1px solid $color-border;
+	display: flex;
+	flex-direction: column;
+	li {
+		position: relative;
+	}
+	> ul {
+		position: relative;
+		height: 100%;
+		width: inherit;
+		overflow-x: hidden;
+		overflow-y: auto;
+		box-sizing: border-box;
+		display: flex;
+		flex-direction: column;
+		> li {
+			display: inline-flex;
+			flex-wrap: wrap;
+			order: 1;
+			flex-shrink: 0;
+
+			/* Pinned-to-bottom entries */
+			&.pinned {
+				order: 2;
+				&.first-pinned {
+					margin-top: auto !important;
+				}
+			}
+
+			> a,
+			> .app-navigation-entry-deleted {
+				/* Ugly hack for overriding the main entry link */
+				padding-left: 44px !important;
+			}
+			> .app-navigation-entry-edit {
+				/* Ugly hack for overriding the main entry link */
+				/* align the input correctly with the link text
+				   44px-6px padding for the input */
+				padding-left: 38px !important;
+			}
+
+			&:focus,
+			&:hover,
+			&.active,
+			a.selected {
+				&,
+				> a {
+					opacity: 1;
+					box-shadow: inset 2px 0 $color-primary;
+				}
+			}
+
+			/* align loader */
+			&.icon-loading-small:after {
+				left: 22px;
+				top: 22px;
+			}
+
+			/* hide and animate deletion/collapse of subitems */
+			&.deleted,
+			&.collapsible:not(.open) {
+				> ul {
+					opacity: 0;
+					max-height: 0;
+					/* bezier override the hide/slow effect due to the 2000 max-height */
+					transition: max-height 1000ms cubic-bezier(0, 1, 0, 1),
+								opacity 250ms ease-in-out;
+				}
+			}
+
+			/* Second level nesting for lists */
+			> ul {
+				flex: 1 0 100%;
+				padding-left: 62px;
+				width: inherit;
+				transition: max-height 2000ms ease-in-out,
+							opacity 250ms ease-in-out;
+				max-height: 9999px;
+				opacity: 1;
+				> li {
+					display: inline-flex;
+					flex-wrap: wrap;
+					&:focus,
+					&:hover,
+					&.active,
+					a.selected {
+						&,
+						> a {
+							opacity: 1;
+						}
+					}
+
+					/* align loader */
+					&.icon-loading-small:after {
+						left: -10px;
+					}
+
+					/* Submenu fix for icon */
+					> a[class*='icon-'],
+					> a[style*='background-image'],
+					.app-navigation-entry-bullet {
+						margin-left: -32px; /* 44px padding - 12px padding */
+					}
+
+					/* Submenu fix for bullet */
+					> .app-navigation-entry-bullet {
+						left: -32px;/* 44px padding - 12px padding */
+					}
+				}
+			}
+		}
+		/* Menu and submenu */
+		> li,
+		> li > ul > li {
+			position: relative;
+			width: 100%;
+			box-sizing: border-box;
+			/* hide icons if loading */
+			&.icon-loading-small {
+				> a,
+				> .app-navigation-entry-bullet {
+					background: none !important;
+				}
+			}
+			/* Main entry link */
+			> a {
+				background-size: 16px 16px;
+				background-position: 14px center;
+				background-repeat: no-repeat;
+				display: block;
+				justify-content: space-between;
+				line-height: 44px;
+				min-height: 44px;
+				padding: 0 12px;
+				overflow: hidden;
+				box-sizing: border-box;
+				white-space: nowrap;
+				text-overflow: ellipsis;
+				color: $color-main-text;
+				opacity: .57;
+				flex: 1 1 0;
+				z-index: 100; /* above the bullet */
+				/* TODO: forbid using img as icon in menu? */
+				&:first-child img {
+				    margin-right: 11px;
+				    width: 16px;
+				    margin-left: -30px;
+				}
+			}
+		}
+	}
+}