218 lines
3.5 KiB
SCSS
218 lines
3.5 KiB
SCSS
//
|
|
// RTL: Pages / Mail
|
|
//
|
|
// --------------------------------------------------
|
|
|
|
$mail-padding: 16px;
|
|
$mail-nav-width: 200px;
|
|
|
|
|
|
// ************************************************************************* //
|
|
//** Small screens (mobile first) **//
|
|
|
|
&.page-mail {
|
|
// Mail navigation
|
|
//
|
|
|
|
.mail-nav {
|
|
.navigation {
|
|
&.open {
|
|
li.active:after {
|
|
-ms-transform: rotate(-90deg); /* IE 9 */
|
|
-webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
|
|
transform: rotate(-90deg);
|
|
}
|
|
}
|
|
}
|
|
|
|
.sections {
|
|
li {
|
|
&.active {
|
|
&:after {
|
|
content: "\f104";
|
|
left: $mail-padding;
|
|
right: auto;
|
|
}
|
|
}
|
|
|
|
&.active .label,
|
|
&.active .badge {
|
|
margin-left: $mail-padding + 20;
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
.label,
|
|
.badge {
|
|
margin-left: $mail-padding;
|
|
margin-right: 0;
|
|
}
|
|
|
|
a {
|
|
padding: 0 $mail-padding 0 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.m-nav-icon {
|
|
margin-left: 10px;
|
|
margin-right: 0;
|
|
}
|
|
|
|
.mail-nav-header {
|
|
padding-left: 0;
|
|
padding-right: $mail-padding;
|
|
}
|
|
|
|
.mail-nav-lbl {
|
|
margin-left: 10px;
|
|
margin-right: 0;
|
|
}
|
|
|
|
|
|
// Controls
|
|
//
|
|
|
|
.mail-controls .btn-group + .btn-group {
|
|
margin-left: 0;
|
|
margin-right: 12px;
|
|
}
|
|
|
|
.mail-controls .pages {
|
|
margin-left: 13px;
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
|
|
// ************************************************************************* //
|
|
//** Desktops **//
|
|
|
|
@media(min-width: $screen-md) {
|
|
&.page-mail {
|
|
|
|
// Mail navigation
|
|
//
|
|
|
|
.mail-nav {
|
|
border-left-width: 1px;
|
|
border-right-width: 0;
|
|
|
|
// Add fixed background
|
|
&:before {
|
|
border-right: none;
|
|
border-left: 1px solid;
|
|
}
|
|
|
|
.navigation {
|
|
.label {
|
|
margin-left: $mail-padding !important;
|
|
margin-right: 0 !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// Mail container
|
|
//
|
|
|
|
.mail-container {
|
|
margin-left: 0;
|
|
margin-right: $mail-nav-width;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// Mail list
|
|
//
|
|
|
|
// ************************************************************************* //
|
|
//** Small screens (mobile first) **//
|
|
|
|
&.page-mail {
|
|
|
|
.mail-item {
|
|
padding: 12px 46px 12px 14px;
|
|
}
|
|
|
|
.m-chck {
|
|
left: auto;
|
|
right: 15px;
|
|
}
|
|
|
|
.m-star {
|
|
left: auto;
|
|
right: 15px;
|
|
}
|
|
|
|
.m-from,
|
|
.m-subject {
|
|
margin-left: 80px;
|
|
margin-right: 0;
|
|
}
|
|
|
|
// Date
|
|
.m-date {
|
|
left: 15px;
|
|
right: auto;
|
|
text-align: left;
|
|
}
|
|
}
|
|
|
|
|
|
// ************************************************************************* //
|
|
//** Desktops **//
|
|
|
|
@media(min-width: $screen-md) {
|
|
&.page-mail {
|
|
.mail-item {
|
|
padding-left: 100px;
|
|
padding-right: 220px;
|
|
}
|
|
|
|
// Star
|
|
.m-star {
|
|
left: auto;
|
|
right: 40px;
|
|
}
|
|
|
|
// From
|
|
.m-from {
|
|
left: auto;
|
|
right: 70px;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// Mail Details
|
|
//
|
|
|
|
// ************************************************************************* //
|
|
//** Small screens (mobile first) **//
|
|
|
|
&.page-mail {
|
|
.m-details-star {
|
|
margin-left: 12px;
|
|
margin-right: 0;
|
|
float: right;
|
|
}
|
|
|
|
.mail-info {
|
|
.avatar {
|
|
float: right;
|
|
}
|
|
|
|
.from {
|
|
float: right;
|
|
margin-left: 0;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.date {
|
|
float: left;
|
|
}
|
|
}
|
|
}
|