//Variables $sideber-border: #E4E7ED; $sideber-width: 500px; .email-application{ .email-app-sidebar{ z-index: 3; background: white; position: fixed; width: 250px; height: calc(100vh - 150px); border-right: 1px solid $sideber-border; .email-app-sidebar-content{ position: relative; height: 100%; padding: 20px 25px; } } .email-app-content{ margin-top: 0px; padding: 0px; min-height: 100%; } .email-app-list-mails{ position: relative; padding: 0px; width: 100%; overflow-y: hidden; background-color: #ffffff; height: calc(100vh - 212px); } .email-app-mail-content{ float: left; width: 100%; position: relative; padding: 0px; background-color: #ffffff; min-height: calc(100vh - 212px); transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; } .email-app-mail-content-detail{ position: relative; padding: 30px; max-height: calc(100vh - 212px); overflow-y: auto; } .hide-email-content{ transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -webkit-transform: translate3d(-110%, 0, 0); transform: translate3d(-110%, 0, 0); } .email-app-menu{ .form-group-compose{ border-bottom: 1px solid $sideber-border; } .list-group-messages{ border-bottom: 1px solid $sideber-border; a{ padding: 0.85rem 1rem; font-size: 1.1rem; } } } .email-app-list{ position: relative; height: 100%; padding: 1rem 0; p{ margin-bottom: 0.2rem; } } .list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus{ color: #FFF; } .avatar-md{ width: 40px; } .avatar img { width: 100%; max-width: 100%; height: auto; border: 0; border-radius: 1000px; } .avatar-md span.text-circle{ width: 40px; height: 40px; } .avatar span.text-circle { text-align: center; vertical-align: middle; color: #FFF; font-size: 1.2rem; background: #BABFC7; display: table-cell; } .email-app-content-wrapper{ overflow-y: scroll; height: calc(100% - 30px); .email-app-options,.email-app-title{ border-bottom: 1px solid $sideber-border; } } .chat-fixed-search{ // position: fixed; z-index: 999; background: $white; padding: 2rem 1rem; fieldset{ border-bottom: 1px solid $sideber-border; } } } @include media-breakpoint-up(lg) { .email-app-list-mails{ width: 30% !important; border-right: 1px solid #e6ecf5; float: left; } .email-application .email-app-mail-content{ width: 70%; } } @include media-breakpoint-between(md, lg) { .email-app-list-mails{ width: 35% !important; border-right: 1px solid #e6ecf5; float: left; } .email-application .email-app-mail-content{ width: 65%; } } @include media-breakpoint-up(xl){ .email-app-content{ margin-left: 250px; } } @include media-breakpoint-down(sm){ .email-app-mail-content{ position: absolute !important; top: 0 !important; left: 15px !important; width: 98% !important; height: 100%; transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; max-height: calc(100vh - 150px); } } @include media-breakpoint-down(md) { .email-application{ .email-app-sidebar{ left: 0; } } }