@import "../variables"; @import "../helpers/mixins"; .#{$prefix}-main-container { position:relative; @include flex-row; height: 100%; overflow: auto; border: $main-container-border; box-sizing: border-box; color: $main-container-color; background-color: $main-container-bg-color; font-size: $main-container-font-size; & > .#{$prefix}-conversation-list { order: 0; height: 100%; flex-basis: $main-container-conversation-list-flex-basis; border-top: $main-container-conversation-list-border-top; border-right: $main-container-conversation-list-border-right; border-bottom: $main-container-conversation-list-border-bottom; border-left: $main-container-conversation-list-border-left; box-shadow: 2px 0 5px -2px rgba(0,0,0,0.38); /* Hmm without this, box shadow is cut at bottom */ z-index:2; } & > .#{$prefix}-sidebar.#{$prefix}-sidebar--left { order:0; height:100%; max-width:$main-container-sidebar-left-max-width; flex-basis: 35%; border-right: $main-container-conversation-list-border-right; //box-shadow: 2px 0 5px -2px rgba(0,0,0,0.38); /* Hmm without this, box shadow is cut at bottom */ z-index:2; } & > .#{$prefix}-sidebar.#{$prefix}-sidebar--right { flex-basis: 25%; min-width: $main-container-sidebar-right-min-width; max-width: $main-container-sidebar-right-max-width; border-top: $main-container-sidebar-right-border-top; border-right: $main-container-sidebar-right-border-right; border-bottom: $main-container-sidebar-right-border-bottom; border-left: $main-container-sidebar-right-border-left; } & > .#{$prefix}-sidebar.#{$prefix}-sidebar--left .#{$prefix}-search { margin:0.5em; } & .#{$prefix}-chat-container { order:1; z-index:1; flex-grow: 1; flex-basis: 65%; border-right: $main-container-chat-container-border-right; } & .#{$prefix}-sidebar { order:2; height:100%; //box-shadow: -2px 0px 5px -2px rgba(0,0,0,0.38); z-index:3; } // Clear expansion panel border in sidebar & .#{$prefix}-sidebar .#{$prefix}-expansion-panel { border-left:0; border-top:0; border-right:0; } // 3 because of scrollbar divs & .#{$prefix}-sidebar .#{$prefix}-expansion-panel:nth-last-child(3) { border-bottom: 0; } & .#{$prefix}-conversation-header { z-index: 1; } ///////////////////////////////////////////////////////////// /// Responsive &--responsive { .#{$prefix}-chat-container { .#{$prefix}-conversation-header { .#{$prefix}-conversation-header__back { display: none; } .#{$prefix}-conversation-header__actions { .#{$prefix}-button--info { display: none; } } } } @media( max-width: map-get($grid-breakpoints, md) ) { min-width: calc( 1.6em + 40px + #{$chat-container-min-width} ); // Horizontal padding from conversation-list plus avatar width plus ChatContainer min-width .#{$prefix}-search { display:none; } > .#{$prefix}-sidebar.#{$prefix}-sidebar--left { flex-basis: calc(1.6em + 40px); // Horizontal padding from conversation-list plus avatar width min-width: calc(1.6em + 40px); } >.#{$prefix}-sidebar.#{$prefix}-sidebar--right { display: none; } > .#{$prefix}-conversation-list { // Only if conversation-list is direct child of main-container because main-container and conversation-list have different flex-direction flex-basis: calc(1.6em + 40px); // Horizontal padding from conversation-list plus avatar width } .#{$prefix}-conversation-list, .#{$prefix}-sidebar .#{$prefix}-conversation-list { .#{$prefix}-conversation { > .#{$prefix}-avatar { margin-right:0; // Reset right margin } &__content { display:none; } &__operations { display:none; } &__last-activity-time { display: none; } &__unread-dot { position:absolute; top:0.3em; right:0.3em; margin-right:0; } } } .#{$prefix}-conversation-header { .#{$prefix}-conversation-header__actions { .#{$prefix}-button--info { display: flex; } } } } @media( max-width: map-get($grid-breakpoints, sm) ) { min-width: auto; > .#{$prefix}-sidebar.#{$prefix}-sidebar--left { display:none; } .#{$prefix}-chat-container { // Show back arrow .#{$prefix}-conversation-header { .#{$prefix}-conversation-header__back { display: flex; } .#{$prefix}-conversation-header__info { } } } } } ///////////////////////////////////////////////////////////// }