//Variables $sideber-border: #E4E7ED; .chat-application{ overflow:hidden; .content-wrapper{ padding: 0 !important; } .chat-sidebar{ background: white; position:fixed; width: 300px; vertical-align: top; height: calc(100vh - 168px); border-right: 1px solid $sideber-border; z-index: 999; } .chat-fixed-search{ width: 300px; position: fixed; z-index: 999; background: $white; border-bottom: 1px solid $sideber-border; border-right: 1px solid $sideber-border; } .users-list-padding{ padding-top:63px; } .list-group-item-heading{ font-size: 0.8rem; font-weight: 500; span{ font-size: 0.8rem; font-weight: 400; } } .chat-name{ margin-left: 300px; border-bottom: 1px solid $sideber-border; } .chat-app-window{ margin-left: 300px; padding: 20px 30px; overflow-y: scroll; text-align: center; height: calc(100% - 183px); background-color: #fff; } .chat-app-form{ margin-left: 300px; position: relative; padding: 20px 10px; overflow: hidden; } .chats { padding: 0; .chat-body { display: block; margin: 10px 30px 0 0; overflow: hidden; .chat-content { &:before{ position: absolute; top: 10px; right: -10px; width: 0; height: 0; content: ''; border: 5px solid transparent; border-left-color: theme-color('primary'); } +.chat-content:before { border-color: transparent; } text-align: right; position: relative; display: block; float: right; padding: 8px 15px; margin: 0 20px 10px 0; clear: both; color: #fff; background-color: theme-color('primary'); border-radius: 4px; p{ margin: 0; } } } .chat-avatar{ float: right; .avatar { width: 50px; margin-top: -10px } } .time { color: $gray-500; font-size: 12px; text-align: center; margin: 40px 0 } .chat-left { .chat-avatar{ float: left; } .chat-body { margin-right: 0; margin-left: 30px; } .chat-content{ +.chat-content:before { border-color: transparent; } &:before{ right: auto; left: -10px; border-right-color: lighten($body-bg, 18%); border-left-color: transparent; } text-align: left; float: left; margin: 0 0 10px 20px; color: theme-color("dark"); background-color: $body-bg; } } } .form-control-position{ cursor: pointer; &.control-position-right{ right: 18px; top: 2px; cursor: pointer; } } @include media-breakpoint-down(sm) { .chat-app-window{ height: calc(100% - 132px); margin-left: 0; } .chat-app-form{ margin-left: 0; } .chat-name{ margin-left: 0; } .chat-sidebar{ left: 0; } } }