src/pyams_skin/resources/less/apps/mail.less
changeset 0 bb4aabe07487
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/pyams_skin/resources/less/apps/mail.less	Thu Feb 19 10:59:00 2015 +0100
@@ -0,0 +1,536 @@
+/*
+ *  Mail-style application
+ */
+
+#inbox-table {
+	font-size: 13px;
+	border-top: 0;
+	border-left-color: transparent!important;
+	border-right-color: transparent!important;
+
+	tbody tr:hover {
+		cursor: pointer;
+		background: #E4E4E4;
+	}
+	tr td {
+		border-right: 0;
+		border-left: 0;
+		line-height: 26px;
+		padding: 6px 4px 7px!important;
+	}
+	.inbox-table-icon {
+		padding-left: 15px!important;
+
+		@media (max-width:979px) {
+			padding-left: 10px!important;
+		}
+	}
+	tbody tr th {
+		overflow: hidden;
+	}
+	&.table tbody >tr >td {
+		border-color: #fff!important;
+	}
+	.checkbox,
+	.radio {
+		margin-top: -1px;
+		margin-bottom: 0;
+	}
+}
+
+.inbox {
+	&-badge {
+		.minified & {
+			border-radius: 50%;
+			font-size: 9px;
+			padding: 2px;
+			position: absolute;
+			top: 6px;
+			right: 6px;
+			background: #ED1C24;
+			min-width: 13px;
+		}
+	}
+	&-body {
+		position: relative;
+
+		.table-wrap {
+			background: #fff;
+			padding: 10px 14px 7px;
+			position: relative;
+			margin-left: 200px;
+
+			@media (max-width:1024px) {
+				margin-left: 0!important;
+			}
+			@media (max-width:979px) {
+				padding: 0!important;
+			}
+		}
+		&.no-content-padding {
+			margin-top: 0;
+			background: #fff;
+		}
+	}
+	&-nav-bar {
+		height: 70px;
+		margin-bottom: 0;
+		padding: 20px 14px;
+		background: #fff;
+
+		@media (max-width:979px) {
+			padding-left: 5px;
+			padding-right: 5px;
+		}
+		&.no-content-padding {
+			@media (min-width:768px) and (max-width:880px) {
+				margin-top: -10px!important;
+			}
+			@media (max-width:767px) {
+				margin-top: -10px!important;
+			}
+			@media only screen and (min-width:0) and (max-width:679px) {
+				margin-top: -10px!important;
+			}
+			@media only screen and (min-width:320px) and (max-width:479px) {
+				margin-top: -10px!important;
+			}
+		}
+		.page-title {
+			display: inline-block;
+			margin: 0;
+			width: 196px;
+			line-height: 33px;
+			vertical-align: middle;
+		}
+	}
+	&-footer {
+		height: 52px;
+		padding: 15px 14px 0;
+		border-top: 1px solid #CECECE;
+		background: #2a2725;
+		position: absolute;
+		bottom: -53px;
+		width: 100%;
+	}
+	&-footer .btn-group,
+	&-paging {
+		margin-left: 10px;
+	}
+	&-data-attachment,
+	&-table-icon {
+		width: 28px;
+		text-align: left;
+		padding-left: 12px!important;
+		padding-right: 0!important;
+	}
+	&-data-from {
+		width: 200px;
+	}
+	&-data-from >:first-child {
+		width: 200px;
+		display: block;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	&-data-date {
+		width: 80px;
+		padding-left: 7px!important;
+		padding-right: 0!important;
+	}
+	&-data-message {
+		>:first-child {
+			width: 100%;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+			height: 27px;
+			color: #8A8A8A;
+
+			@media (max-width:979px) {
+				height: 50px;
+				overflow: hidden;
+			}
+
+			span {
+				color: #111;
+
+				&.label {
+					color: #fff;
+				}
+			}
+			>:first-child {
+				@media (max-width:979px) {
+					display: block!important;
+					font-size: 14px;
+				}
+				&:after {
+					content: " - ";
+				}
+			}
+		}
+	}
+	&-checkbox-triggered {
+		display: inline-block;
+
+		>.btn-group {
+			margin-right: 10px;
+		}
+		>.btn-group .btn {
+			padding-left: 14px;
+			padding-right: 14px;
+
+			@media (max-width:979px) {
+				padding-left: 10px;
+				padding-right: 10px;
+			}
+		}
+	}
+	&-side-bar {
+		height: 100%;
+		position: absolute;
+		background: #fff;
+		display: block;
+		width: 200px;
+		padding: 10px 0 10px 14px;
+
+		@media (max-width:1024px) {
+			display: none!important;
+		}
+		h6 {
+			font-weight: 400;
+			font-size: 11px;
+			display: block;
+			padding: 0 15px;
+			text-transform: uppercase;
+			color: #838383;
+
+			a {
+				font-size: 14px;
+				margin-top: -2px;
+			}
+			.tooltip {
+				text-transform: none!important;
+			}
+		}
+		>.btn {
+			margin-bottom: 35px;
+		}
+		.input-group {
+			margin-bottom: 25px;
+		}
+	}
+	&-space {
+		display: block;
+		width: 185px;
+
+		>.progress {
+			margin-top: 5px;
+		}
+	}
+	.inbox-menu-lg {
+		list-style: none;
+		padding: 0;
+		margin: 0 0 20px;
+
+		.inbox-menu-lg li {
+			display: block;
+			width: 100%;
+
+			a {
+				display: block;
+				padding: 6px 15px 7px;
+				font-size: 13px;
+				color: #333;
+
+				&:hover {
+					text-decoration: none;
+					background: #f4f4f4;
+				}
+			}
+			&.active a {
+				font-weight: 700;
+				background: #F0F0F0;
+				border-bottom: 1px solid #E7E7E7;
+				color: #3276b1;
+			}
+		}
+	}
+	.inbox-menu-sm {
+		list-style: none;
+		padding: 0;
+		margin: 0 0 20px;
+
+		.inbox-menu-sm li {
+			display: block;
+			width: 100%;
+
+			a {
+				display: block;
+				padding: 8px 15px 10px;
+				font-size: 13px;
+				color: #333;
+
+				&:hover {
+					text-decoration: none;
+					background: #f4f4f4;
+				}
+			}
+			&.active a {
+				font-weight: 700;
+				background: #F0F0F0;
+				border-bottom: 1px solid #E7E7E7;
+				color: #3276b1;
+			}
+		}
+	}
+	&-info-bar {
+		padding: 10px 0;
+		border-bottom: 1px solid #bfbfbf;
+
+		.form-group {
+			margin: 0;
+		}
+		.form-group input,
+		.select2-container-multi .select2-choices {
+			border-color: #fff!important;
+		}
+		.select2-choices >div {
+			display: none;
+		}
+		.col-md-1,
+		.col-md-11 {
+			padding-left: 0;
+			padding-right: 0;
+
+			@media (max-width:1024px) {
+				padding-left: 26px;
+				padding-right: 26px;
+			}
+		}
+		img {
+			width: 35px;
+			height: auto;
+			display: inline-block;
+			vertical-align: middle;
+			margin-right: 7px;
+			margin-left: 2px;
+			border-left: 3px solid #fff;
+		}
+		em {
+			position: absolute;
+			top: 6px;
+			right: 20px;
+			text-align: right;
+			font-style: normal;
+		}
+	}
+	&-download {
+		.inbox-message {
+			padding: 15px 4px;
+			border-bottom: 1px solid #bfbfbf;
+		}
+		&-list {
+			list-style: none;
+			margin: 5px 0 0;
+			padding: 0;
+
+			li {
+				display: inline-block;
+				margin: 0 5px 0 0;
+				vertical-align: top;
+
+				>:first-child {
+					margin-bottom: 0;
+					width: 150px;
+					overflow: hidden;
+
+					&:hover {
+						background: #fff;
+						border-color: silver;
+					}
+					>:first-child {
+						text-align: center;
+						display: block;
+						color: #D6D6D6;
+
+						>.fa {
+							font-size: 150px;
+						}
+						>img {
+							max-width: 120px;
+						}
+					}
+				}
+			}
+		}
+	}
+	&-compose-footer {
+		padding: 10px;
+		background: #F5F5F5;
+		border-bottom: 1px solid #A9A9A9;
+	}
+	&-compose-footer,
+	&-download,
+	&-info-bar,
+	&-message {
+		margin-right: 240px;
+		position: relative;
+
+		@media (max-width:1280px) {
+			margin-right: 0;
+		}
+	}
+	&-table-icon {
+		>:first-child {
+			@media (max-width:979px) {
+				margin-top: 12px;
+			}
+		}
+	}
+}
+
+.unread {
+	td {
+		background: #fff;
+	}
+	.inbox-data-date >:first-child,
+	.inbox-data-from >:first-child,
+	.inbox-data-message >:first-child >:first-child {
+		font-weight: 700;
+	}
+}
+
+tr.highlight td,
+tr.unread.highlight td {
+	background: #ffc!important;
+	color: #333;
+}
+
+#compose-mail-mini {
+	margin-left: 4px;
+}
+
+.email-open-header {
+	margin: -10px 0 0 0;
+	font-size: 20px;
+	border-bottom: 1px solid #bfbfbf;
+	border-top: 1px solid #eee;
+	padding: 15px 3px;
+
+	>span {
+		font-size: 10px;
+		font-weight: 400;
+		padding: 3px 5px;
+		letter-spacing: normal;
+		text-transform: uppercase;
+		vertical-align: middle;
+		line-height: 33px;
+		background: #ACACAC;
+	}
+}
+
+.email-infobox {
+	display: block;
+	width: 180px;
+	border-bottom: 1px solid #bfbfbf;
+	padding-bottom: 0;
+	padding-top: 15px;
+	position: absolute;
+	top: 65px;
+	right: 15px;
+
+	@media (max-width:1280px) {
+		.email-infobox {
+			display: none;
+		}
+	}
+}
+
+.email-reply-text {
+	>div {
+		border-left: 1px solid #D6D6D6;
+		padding-left: 10px;
+		margin-left: 50px;
+		color: #A9A9A9;
+	}
+	>:first-child {
+		padding-left: 45px;
+	}
+}
+
+
+.profile {
+	&-pic {
+		text-align: right;
+
+		>img {
+			border-radius: 0;
+			position: relative;
+			border: 5px solid #fff;
+			top: -30px;
+			display: inline-block;
+			text-align: right;
+			z-index: 4;
+			width: 120px;
+			margin-bottom: -30px;
+		}
+	}
+	&-carousel .carousel-inner {
+		max-height: 150px;
+	}
+}
+
+.friends-list li {
+	margin-bottom: 10px;
+
+	img {
+		width: 35px;
+		border: 1px solid #fff;
+		outline: 1px solid #bfbfbf;
+	}
+}
+
+.search-results {
+	padding: 18px 5px;
+
+	+.search-results {
+		border-top: 1px dashed #E3E3E3;
+	}
+	>:first-child {
+		margin-bottom: 4px;
+		font-weight: 400;
+
+		a {
+			text-decoration: underline;
+		}
+	}
+	.url {
+		font-style: normal;
+		font-size: 14px;
+	}
+	img {
+		display: inline-block;
+		margin-top: 4px;
+		margin-right: 4px;
+		width: 80px;
+	}
+	>div {
+		display: inline-block;
+		vertical-align: top;
+	}
+	.note {
+		margin: 0;
+		line-height: normal;
+
+		a {
+			text-decoration: none!important;
+			color: #333;
+
+			&:hover {
+				color: #ed1c24;
+			}
+		}
+	}
+}