You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
504 lines
12 KiB
504 lines
12 KiB
// ================================================================================================ |
|
// File Name: app-email.scss |
|
// Description: SCC file for email application page. |
|
// ---------------------------------------------------------------------------------------------- |
|
// Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template |
|
// Author: PIXINVENT |
|
// Author URL: http://www.themeforest.net/user/pixinvent |
|
// ================================================================================================ |
|
|
|
@import '../bootstrap-extended/include'; // Bootstrap includes |
|
@import '../components/include'; // Components includes |
|
|
|
$email_read: $body-bg; |
|
$email_selected_border: #e4e1e8; |
|
$email_details_header_height: 5rem; |
|
|
|
.email-application { |
|
.content-area-wrapper { |
|
border: 1px solid $border-color; |
|
border-radius: $card-border-radius; |
|
// Sidebar area starts |
|
.sidebar { |
|
.email-app-sidebar { |
|
width: $menu-expanded-width; |
|
height: inherit; |
|
background-color: $white; |
|
border-top-left-radius: $card-border-radius; |
|
border-bottom-left-radius: $card-border-radius; |
|
transition: all 0.3s ease, background 0s; |
|
z-index: 210; |
|
.email-app-menu { |
|
width: 100%; |
|
height: 100%; |
|
z-index: 3; |
|
.compose-btn { |
|
padding: 1.5rem; |
|
} |
|
.sidebar-menu-list { |
|
position: relative; |
|
height: calc(100% - 80px); // search section height 80px |
|
} |
|
} |
|
} |
|
.list-group .list-group-item { |
|
padding: 0.58rem 1.5rem; |
|
border: 0; |
|
font-weight: $font-weight-bold; |
|
letter-spacing: 0.4px; |
|
border-left: 2px solid transparent; |
|
border-radius: 0; |
|
+ .list-group-item.active { |
|
margin-top: 0; |
|
} |
|
&:hover, |
|
&:focus, |
|
&.active { |
|
background: transparent; |
|
color: $primary; |
|
} |
|
&.active { |
|
border-color: #7367f0; |
|
} |
|
} |
|
} |
|
// Sidebar area ends |
|
|
|
// Right content area common css starts |
|
.content-right { |
|
width: calc(100% - #{$menu-expanded-width}); |
|
border-left: 1px solid $border-color; |
|
.email-app-list { |
|
height: inherit; |
|
} |
|
.app-fixed-search { |
|
padding: 0.4215rem 0.5rem; |
|
border-bottom: 1px solid $border-color; |
|
background-color: $white; |
|
border-top-right-radius: $border-radius; |
|
|
|
.input-group:focus-within { |
|
box-shadow: none; |
|
} |
|
input, |
|
.input-group-text { |
|
border: 0; |
|
background-color: transparent; |
|
} |
|
} |
|
.action-icon { |
|
cursor: pointer; |
|
} |
|
} |
|
// Right content area common css End |
|
// Sidebar toggle icon |
|
.sidebar-toggle { |
|
cursor: pointer; |
|
float: left; |
|
} |
|
.go-back { |
|
cursor: pointer; |
|
} |
|
|
|
// Email user list area |
|
.email-user-list { |
|
position: relative; |
|
height: calc( |
|
100% - calc(3.49rem + 3.32rem) |
|
); // ? search box height (3.49rem) + select all section height (3.32rem) |
|
.email-media-list { |
|
padding: 0; |
|
margin: 0; |
|
// Set delay per List Item |
|
@for $i from 1 through 5000 { |
|
li:nth-child(#{$i}) { |
|
animation-delay: 0.1s * $i; |
|
} |
|
} |
|
li { |
|
cursor: pointer; |
|
transition: all 0.2s, background 0s, border-color 0s, color 0s; |
|
animation: fadeIn 0.5s linear; |
|
animation-fill-mode: both; |
|
position: relative; |
|
background: $white; |
|
&.user-mail { |
|
padding: ($spacer + 0.5); |
|
&:hover { |
|
transform: translateY(-2px); |
|
box-shadow: 0 3px 10px 0 $border-color; |
|
transition: all 0.2s; |
|
z-index: 1; |
|
} |
|
.mail-left { |
|
display: flex; |
|
flex-direction: column; |
|
} |
|
.mail-body { |
|
overflow: hidden; |
|
width: 100%; |
|
} |
|
} |
|
// Email avatar style |
|
.avatar { |
|
margin-bottom: 0.65rem; |
|
} |
|
.avatar, |
|
.avatar img { |
|
height: $avatar-size + 8; |
|
width: $avatar-size + 8; |
|
} |
|
|
|
// read email |
|
&.mail-read { |
|
background-color: $email_read; |
|
} |
|
// selected email |
|
&.selected-row-bg { |
|
background-color: rgba($primary, 0.06); |
|
&:not(:first-child) { |
|
border-color: $email_selected_border; |
|
} |
|
} |
|
&:not(:first-child) { |
|
border-top: 1px solid $border-color; |
|
} |
|
.mail-details { |
|
display: flex; |
|
justify-content: space-between; |
|
margin-bottom: 0.55rem; |
|
} |
|
.mail-date { |
|
color: $text-muted; |
|
font-size: 0.857rem; |
|
} |
|
.mail-message { |
|
p { |
|
color: $text-muted; |
|
} |
|
} |
|
} |
|
.user-action { |
|
display: flex; |
|
.email-favorite { |
|
i, |
|
svg { |
|
height: 1.25rem; |
|
width: 1.25rem; |
|
font-size: 1.25rem; |
|
vertical-align: text-top; |
|
color: $text-muted; |
|
&.favorite { |
|
fill: $warning; |
|
stroke: $warning; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
.no-results { |
|
display: none; |
|
padding: 1.5rem; |
|
text-align: center; |
|
&.show { |
|
display: block; |
|
} |
|
} |
|
.ps__rail-y { |
|
z-index: 2; |
|
} |
|
} |
|
} |
|
// Action area of email list section |
|
.app-action { |
|
padding: 0.9rem ($spacer + 0.5); |
|
display: flex; |
|
justify-content: space-between; |
|
border-bottom: 1px solid $border-color; |
|
background-color: $white; |
|
.action-right { |
|
ul { |
|
li:not(:last-child) { |
|
margin-right: 1rem; |
|
} |
|
} |
|
.dropdown-toggle { |
|
color: $headings-color; |
|
white-space: normal; |
|
&::after { |
|
display: none; |
|
} |
|
} |
|
} |
|
} |
|
// On click of mail Details section slide in from right |
|
// Email details section starts |
|
.email-app-details { |
|
position: absolute; |
|
display: block; |
|
z-index: 2; |
|
visibility: hidden; |
|
top: 0; |
|
width: calc(100% - #{$menu-expanded-width}); |
|
background-color: $body-bg; |
|
transform: translateX(100%); |
|
transition: all 0.25s ease, color 0s; |
|
height: 100%; |
|
&.show { |
|
visibility: visible; |
|
transition: all 0.25s ease, color 0s; |
|
transform: translateX(0%); |
|
} |
|
.email-detail-header { |
|
display: flex; |
|
flex-wrap: wrap; |
|
justify-content: space-between; |
|
align-items: center; |
|
box-shadow: 0 4px 6px rgba($black, 0.04); |
|
border-bottom: 1px solid $kbd-bg; |
|
position: relative; |
|
padding: 0.5rem 2rem; |
|
background-color: $white; |
|
height: $email_details_header_height; |
|
} |
|
.email-header-left { |
|
.email-subject { |
|
display: -webkit-box; |
|
-webkit-line-clamp: 1; |
|
-webkit-box-orient: vertical; |
|
overflow: hidden; |
|
} |
|
} |
|
.email-header-right { |
|
.dropdown-toggle, |
|
.action-icon { |
|
color: $body-color; |
|
} |
|
} |
|
// Email detail scroll area |
|
.email-scroll-area { |
|
padding: 0 2rem; |
|
position: relative; |
|
height: calc(100% - #{$email_details_header_height}); |
|
|
|
.email-detail-head { |
|
border-bottom: 1px solid $border-color; |
|
.mail-meta-item { |
|
.dropdown { |
|
line-height: 0; |
|
} |
|
} |
|
} |
|
.email-label { |
|
margin: 2rem 0; |
|
} |
|
.email-info-dropup { |
|
.dropdown-toggle::after { |
|
left: -2px; |
|
margin: 0; |
|
background-image: url(str-replace(str-replace($chevron-down, 'currentColor', $text-muted), '#', '%23')); |
|
background-size: 0.857rem; |
|
} |
|
.dropdown-menu { |
|
padding: 0.5rem; |
|
} |
|
} |
|
} |
|
} |
|
|
|
#compose-mail { |
|
.compose-mail-form-field { |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
padding: 0.12rem $modal-header-padding-x; |
|
border-bottom: 1px solid $modal-footer-border-color; |
|
.select2-container--open { |
|
box-shadow: none; |
|
} |
|
.select2-selection--multiple, |
|
.form-control { |
|
border: 0; |
|
background-color: transparent; |
|
&:focus { |
|
box-shadow: none !important; |
|
background-color: transparent; |
|
} |
|
} |
|
.select2-selection--multiple { |
|
min-height: 42px !important; |
|
.select2-selection__rendered li .select2-search__field { |
|
margin-top: 10px; |
|
} |
|
} |
|
.select2-selection__choice__remove:before { |
|
top: 40%; |
|
} |
|
label { |
|
font-size: $font-size-base; |
|
} |
|
} |
|
// On compose form full screen |
|
.modal-fullscreen { |
|
.compose-form { |
|
height: 100%; |
|
} |
|
#message-editor { |
|
height: calc(100% - 240px); |
|
} |
|
.editor { |
|
height: calc(100% - 3rem); |
|
} |
|
} |
|
.editor { |
|
height: 250px; |
|
} |
|
.ql-container, |
|
.ql-toolbar { |
|
border: none; |
|
border-radius: 0; |
|
border-bottom: 1px solid $border-color; |
|
.ql-picker.ql-expanded .ql-picker-options { |
|
bottom: 100%; |
|
top: auto; |
|
} |
|
} |
|
.compose-footer-wrapper { |
|
padding: $modal-inner-padding; |
|
display: flex; |
|
align-items: center; |
|
justify-content: space-between; |
|
} |
|
} |
|
} |
|
@include media-breakpoint-down(lg) { |
|
.email-application { |
|
.content-area-wrapper { |
|
.sidebar-left { |
|
position: relative; |
|
.email-app-sidebar { |
|
transform: translateX(-110%); |
|
transition: all 0.3s ease-in-out; |
|
position: absolute; |
|
left: 0; |
|
border-top-left-radius: $border-radius-sm; |
|
border-bottom-left-radius: $border-radius-sm; |
|
} |
|
&.show { |
|
.email-app-sidebar { |
|
transform: translateX(0%); |
|
transition: all 0.3s ease; |
|
} |
|
} |
|
} |
|
.content-right { |
|
width: 100%; |
|
border-left: 0; |
|
.app-fixed-search { |
|
border-top-left-radius: $border-radius; |
|
} |
|
.email-app-details { |
|
width: 100%; |
|
border-radius: $border-radius; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
@include media-breakpoint-down(md) { |
|
.email-application #compose-mail .ql-editor { |
|
min-height: 150px; |
|
} |
|
} |
|
|
|
// Extra small devices (portrait phones, less than 576px) |
|
@include media-breakpoint-down(sm) { |
|
.email-application { |
|
.email-detail-head .mail-meta-item { |
|
display: flex; |
|
justify-content: space-between; |
|
margin-left: 4rem; // Spacing from left according to avatar image |
|
.mail-date, |
|
.mail-time { |
|
margin: 1rem 0.75rem 0 0; |
|
} |
|
} |
|
.content-area-wrapper { |
|
.content-right .email-app-details { |
|
.email-scroll-area { |
|
padding: 0 1rem; |
|
} |
|
|
|
.email-detail-header { |
|
padding: 0.5rem 1rem; |
|
} |
|
} |
|
.email-user-list { |
|
.email-media-list li .mail-details { |
|
display: block; |
|
.mail-items { |
|
width: 70%; |
|
display: inline-grid; |
|
} |
|
.mail-meta-item { |
|
width: 15%; |
|
position: absolute; |
|
right: 1rem; |
|
top: 1.5rem; |
|
i, |
|
svg, |
|
.bullet { |
|
display: none; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
@media (max-width: 359.98px) { |
|
.email-application .content-area-wrapper .sidebar .email-app-sidebar { |
|
width: 230px; |
|
} |
|
.email-application .email-app-details .email-detail-header { |
|
padding: 0 0.5rem; |
|
} |
|
} |
|
|
|
// Keyframe animation |
|
@-webkit-keyframes fadeIn { |
|
0% { |
|
opacity: 0; |
|
top: 100px; |
|
} |
|
75% { |
|
opacity: 0.5; |
|
top: 0px; |
|
} |
|
100% { |
|
opacity: 1; |
|
} |
|
} |
|
|
|
// RTL Style |
|
html[data-textdirection='rtl'] { |
|
.email-application { |
|
.email-app-details { |
|
.email-prev, |
|
.email-next { |
|
.action-icon i, |
|
.action-icon svg { |
|
transform: rotate(180deg); |
|
} |
|
} |
|
.go-back { |
|
i, |
|
svg { |
|
transform: rotate(180deg); |
|
} |
|
} |
|
} |
|
} |
|
}
|
|
|