‰PNG  IHDRôxÔúsBIT|dˆ pHYsÄÄ•+tEXtSoftwarewww.inkscape.org›î<,àtEXtComment // Variables $msg-item-gap-x:1.25rem; $msg-item-gap-x-tab :2rem; $msg-item-gap-x-dsk :1.75rem; $msg-item-gap-y :1.25rem; $msg-body-gap-x :1.25rem; $msg-body-gap-x-tab :2.25rem; $msg-body-gap-x-dsk :2.5rem; .nk-msg{ &-nav{ position: relative; border-bottom: 1px solid $border-light; padding: 0 $msg-item-gap-x; background: $white; z-index: 2; @if($rtl==false){ border-top-left-radius: ($border-radius - 1); } @if($rtl==true){ border-top-right-radius: ($border-radius - 1); } .search-wrap{ padding: 0 1rem; bottom: -1px; border-bottom: 1px solid $border-light; border-radius: 0; } .search-submit { @if($rtl==false){ transform: translate(0.25rem, -50%); } @if($rtl==true){ transform: translate(-0.25rem, -50%); } } } &-menu{ display: flex; margin: 0 -0.75rem; &-item { padding: 0 0.75rem; a{ display: inline-flex; position: relative; color: $base-light; font-weight: $fw-medium; font-size: .875rem; line-height: 1.5rem; padding: 1rem 0; &:after{ position: absolute; content: ''; height: 2px; background: $accent-color; bottom: -1px; left: 0; right: 0; opacity: 0; transition: .3s ease; } .icon{ font-size: 1.125rem; line-height: 1.5rem; } &:hover{ color:$accent-color; } } &.active{ a{ color:$accent-color; &:after{ opacity: 1; } } } } } } .nk-msg{ position: relative; display: flex; overflow: hidden; background: $white; // border:1px solid $border-color; // border-radius: $border-radius; min-height: calc(100vh - (#{$header-height} + 64px + 64px)); max-height: calc(100vh - (#{$header-height} + 64px + 64px)); &-aside{ width: 100%; overflow: hidden; max-height: 100%; position: relative; display: flex; flex-direction: column; flex-shrink: 0; background: $white; @if($rtl==false){ border-top-left-radius: ($border-radius - 1); border-bottom-left-radius: ($border-radius - 1); } @if($rtl==true){ border-top-right-radius: ($border-radius - 1); border-bottom-right-radius: ($border-radius - 1); } } &-list{ // max-height: calc(100% - 57px); max-height: 100%; height: 100%; overflow: auto; } &-item{ display: flex; padding:$msg-item-gap-y $msg-item-gap-x; &:not(:last-child){ border-bottom: 1px solid $border-light; } cursor: pointer; &.active,&.current{ background: rgba($lighter, .7); position: relative; cursor: default; &:after { position: absolute; content: ""; @if($rtl==false){ left: 0; } @if($rtl==true){ right: 0; } top: 0; height: 100%; width: 3px; background: $accent-color; } } } &-info{ max-width:calc(100% - 52px); @if($rtl==false){ margin-left: 0.75rem; } @if($rtl==true){ margin-right: 0.75rem; } flex-grow: 1; } &-from{ display: flex; justify-content: space-between; align-items: center; } &-context{ display: flex; justify-content: space-between; margin-top: 0.25rem; .asterisk{ margin-top: auto; } } &-sender{ display: inline-flex; align-items: center; color: $base-light; font-size: $fx-sz-12; .name{ @if($rtl==false){ margin-right: 0.5rem; } @if($rtl==true){ margin-left: 0.5rem; } .is-unread &{ font-weight: $fw-medium; color: $base-color; } } } &-meta{ display: inline-flex; align-items: center; color: $base-light; font-size: $fx-sz-12; .attchment{ .icon{ font-size: 1.125rem; } } .date{ @if($rtl==false){ margin-left: 0.75rem; } @if($rtl==true){ margin-right: 0.75rem; } } } &-text{ max-width: calc(100% - 35px); flex-grow: 0; @if($rtl==false){ padding-right: 0.5rem; } @if($rtl==true){ padding-left: 0.5rem; } .title{ font-size: $fx-sz-15; margin-bottom: 0.25rem; @extend .ellipsis; } p{ font-size: $fx-sz-13; color:$base-light; max-height: 42px; overflow: hidden; .is-unread &{ color: $base-text; font-weight: $fw-medium; } } } &-lables{ text-align: center; margin: -.125rem; display: inline-flex; flex-direction: column; > div{ padding: .125rem; } .icon{ font-size: 1.125rem; } .badge{ line-height: 14px; font-size: 10px; padding: 0 .25rem; } } &-body{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; flex-grow: 1; display: flex; flex-direction: column; overflow: hidden; transition: padding .3s ease-in-out; opacity: 0;pointer-events: none; z-index: 5; &.show-message{ opacity: 1; pointer-events: auto; } } &-profile{ position: absolute; top: 0; @if($rtl==false){ right: 0; transform: translateX(100%); } @if($rtl==true){ left: 0; transform: translateX(-100%); } width: 280px; height: 100%; max-height: 100%; transition: transform .3s ease-in-out; background: $white; z-index: 100; &-toggle{ position: absolute; height: 36px; width: 36px; display: none; align-items: center; justify-content: center; bottom: -18px; @if($rtl==false){ right: -18px; margin-right: 40px; transition: right .3s ease-in-out, margin .3s ease-in-out .2s; } @if($rtl==true){ left: -18px; margin-left: 40px; transition: left .3s ease-in-out, margin .3s ease-in-out .2s; } border: 1px solid $border-light; background-color: $white; border-radius: 50%; font-size: 1.125rem; z-index: 2; color:$base-light; z-index: 110; &.active{ @if($rtl==false){ margin-right: 0; } @if($rtl==true){ margin-left: 0; } transform: rotate(-180deg); } } &-overlay{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: $sidebar-overlay; z-index: 600; z-index: 90; animation: overlay-fade-in .4s ease 1; } &.visible{ transform: none; } } &-head{ position: relative; padding: .75rem $msg-body-gap-x; border-bottom: 1px solid $border-light; .title{ margin-bottom: .5rem; } &-meta{ display: flex; justify-content: space-between; align-items: center; } } &-hide{ font-size: 1rem; } &-tags{ margin:0 -.75rem; li{ padding: 0 .75rem; color:$base-light; > span { display: inline-flex; align-items: center; .icon{ color: $accent-color; @if($rtl==false){ margin-right: 0.25rem; } @if($rtl==true){ margin-left: 0.25rem; } } } } } &-actions{ display: flex; margin:0 -.25rem; li{ padding: 0 .25rem; } } } @include media-breakpoint-down(xs){ .nk-msg{ border: none; border-radius: $border-radius; min-height: calc(100vh - (#{$header-height} + 64px)); max-height: calc(100vh - (#{$header-height} + 64px)); // margin: -24px -18px; } } @include media-breakpoint-up(sm){ .nk-msg{ &-nav{ padding: 0 $msg-item-gap-x-tab; .search-wrap{ padding: 0 1.7rem; } } &-item{ padding:$msg-item-gap-y $msg-item-gap-x-tab; } &-head{ padding: 1rem $msg-body-gap-x-tab; .title{ margin-bottom: 1rem; } } } } @include media-breakpoint-between(sm,md){ .nk-msg{ &-text{ .title{ margin-top: 0.125rem; margin-bottom: 0.375rem; } } } } @include media-breakpoint-up(lg){ .nk-msg{ &-nav{ padding: 0 $msg-item-gap-x-dsk; .search-wrap{ padding: 0 ($msg-item-gap-x-dsk - .325rem); } } &-item{ padding:$msg-item-gap-y $msg-item-gap-x-dsk; } &-head{ padding: 2rem $msg-body-gap-x-dsk; .title{ max-height: 82px; overflow: hidden; } } &-aside{ width: 320px; @if($rtl==false){ border-right: 1px solid $border-light; } @if($rtl==true){ border-left: 1px solid $border-light; } } &-body{ position: static; opacity: 1; pointer-events: auto; } &-profile { @if($rtl==false){ border-left: 1px solid $border-light; } @if($rtl==true){ border-right: 1px solid $border-light; } &-toggle{ @if($rtl==false){ margin-right: 55px; } @if($rtl==true){ margin-left: 55px; } display: flex; } } } } @include media-breakpoint-up(xxl){ .nk-msg{ &-aside{ width: 380px; } } } @include media-breakpoint-down(xl){ .profile-shown{ .nk-msg-profile-toggle{ @if($rtl==false){ right: 262px; } @if($rtl==true){ left: 262px; } } } } @include media-breakpoint-up(xxl){ .nk-msg-body{ &.profile-shown{ @if($rtl==false){ padding-right: 2