Breakout the @media to mixens. Convert chat to scss.

Rearrange elements.

Convert colors to variables. Convert msg icons to variables.

Convert colors to variables.

Rearrange elements.

src/styles/components/_chat.scss

@@ -30,20 +30,20 @@
   z-index: 45;
 }
 
-.withChat #chat .chatcontainer {
-  left:0px;
-}
-
-.withChat .chatpane.flip {
-  transform: rotateY(360deg);
-}
-
-.withChat.withChatMaximized #chat {
-  left: 0;
-  width: auto;
-    .chatcontainer {
-      width: auto;
-    }
+.withChat {
+  #chat .chatcontainer {
+    left: 0;
+  }
+  .chatpane.flip {
+    transform: rotateY(360deg);
+  }
+  &.withChatMaximized #chat {
+    left: 0;
+    width: auto;
+      .chatcontainer {
+        width: auto;
+      }
+  }
 }
 
 .chatcontainer {
@@ -68,53 +68,51 @@
 }
 
 .chatlist {
+  background: $chat-background;
+  bottom: 0;
+  left: 100%;
   position: absolute;
+  transition: left 200ms ease-in-out;
   top: 0;
-  left: 100%;
-  bottom: 0;
   width: 100%;
-  background: $chat-background;
-  transition: left 200ms ease-in-out;
   .list-group {
-    overflow-x: hidden;
-    overflow-y: auto;
     margin-top: -1px;
     margin-bottom: -1px;
     max-height: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
   }
   .list-group-item {
     border-right: none;
     border-left: none;
     border-radius: 0;
-    position: relative;
-  }
-  .list-group-item.newmessage {
-    animation: newmessage 1s ease -0.3s infinite;
-  }
-  .list-group-item .fa-lg {
-    display: inline-block;
-    text-align: center;
-    width: 18px;
-  }
-  .list-group-item .badge {
-    background: $chat-badge;
-    border: 1px solid white;
-    font-size: .8em;
-  }
-  .list-group-item {
     padding-right: 30px;
-  }
-  .list-group-item.disabled {
-    color: $chat-disabled;
-  }
-  .list-group-item > .item-btn {
-    cursor: pointer;
-    display:none;
-    position:absolute;
-    right:12px;
-  }
-  .list-group-item:hover > .item-btn {
-    display:inline;
+    position: relative;
+    &.newmessage {
+      animation: newmessage 1s ease -0.3s infinite;
+    }
+    &.disabled {
+      color: $chat-disabled;
+    }
+    &:hover .item-btn {
+      display: inline;
+    }
+    .fa-lg {
+      display: inline-block;
+      text-align: center;
+      width: 18px;
+    }
+    .badge {
+      background: $chat-badge;
+      border: 1px solid white;
+      font-size: .8em;
+    }
+    .item-btn {
+      cursor: pointer;
+      display: none;
+      position: absolute;
+      right: 12px;
+    }
   }
 }
 
@@ -144,7 +142,7 @@
 .chat {
   &.active {
     &.visible {
-      display:block;
+      display: block;
     }
     .chatbody {
       // nothing
@@ -162,6 +160,10 @@
   position: absolute;
   right: 0;
   top: 36px;
+  @include breakpt-height($breakpoint-chat-small) {
+    border-top: 1px solid $bordercolor;
+    top: 0px;
+  }
 }
 
 .chatheader {
@@ -188,8 +190,8 @@
     width: 36px;
   }
   .chatheadertitle {
-    padding-left: 28px;
     display: inline;
+    padding-left: 28px;
   }
   .ctrl {
     color: $chat-ctrl;
@@ -210,6 +212,9 @@
     vertical-align: middle;
     white-space: nowrap;
   }
+  @include breakpt-height($breakpoint-chat-small) {
+    display: none;
+  }
 }
 
 .chat .outputbox {
@@ -218,6 +223,9 @@
   position: absolute;
   right: 0;
   top: 0;
+  @include breakpt-height($breakpoint-chat-small) {
+    bottom: 45px;
+  }
 }
 
 .chat .output {
@@ -227,40 +235,39 @@
   padding: 0.4em 0;
   > i {
     clear: both;
-    color: #aaa;
+    color: $chat-meta;
     display: block;
-    font-size: 0.8em;
+    font-size: .8em;
     padding: 6px 0;
     text-align: center;
     &.p2p {
-      padding: 6px 0;
       font-weight: bold;
+      padding: 6px 0;
     }
   }
 }
 
-.chat.with_pictures .output .message.is_self .timestamp {
-  right: 58px;
-}
-.chat.with_pictures .output .message.is_remote {
-  padding-left: 58px;
-}
-.chat.with_pictures .output .message.is_self {
-  padding-right:54px;
+.chat.with_pictures .message {
+  &.is_self {
+    padding-right: 54px;
+    .timestamp {
+      right: 58px;
+    }
+  }
+  &.is_remote {
+    padding-left: 58px;
+  }
 }
 
-
 .chat .message {
-  background: #fff;
-  border: 1px solid #e5e5ef;
+  background: $chat-msg-background;
+  border: 1px solid $chat-msg-border;
   border-radius: 6px;
   clear: both;
   display: block;
-  margin-bottom: 2px;
+  margin: 0 4px 2px 20px;
   padding: 8px;
   position: relative;
-  margin-left: 20px;
-  margin-right: 4px;
   word-wrap: break-word;
   ul {
     list-style-type: none;
@@ -273,83 +280,92 @@
     padding-left: 1.2em;
     position: relative;
     &:before {
-      color: #ccc;
+      color: $chat-msg-default-icon-color;
       content: '\f075';
       font-family: FontAwesome;
       left: 0;
-      text-align: center;
       position: absolute;
+      text-align: center;
       width: 12px;
     }
   }
   .timestamp {
     color: $chat-timestamp;
-    font-size: 0.8em;
+    font-size: .8em;
     position: absolute;
     right: 8px;
     text-align: right;
     top: 8px;
   }
+  strong {
+    display: block;
+    padding-bottom: 2px;
+    margin-right: 40px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 }
 
 .chat .message {
   &.is_self li:before {
-    color:#ccc;
+    color: $chat-msg-default-icon-color;
     transform: scale(-1, 1);
   }
   li {
     &.unread:before {
-      content: '\f0eb';
-      color: #FE9A2E;
+      content: $chat-msg-unread-icon;
+      color: $chat-msg-unread-icon-color;
     }
     &.sending:before {
-      content: '\f0ec';
+      content: $chat-msg-sending-icon;
+      color: $chat-msg-sending-icon-color;
     }
     &.sent:before {
-      content: '\f003';
-      color:#5882FA;
+      content: $chat-msg-sent-icon;
+      color: $chat-msg-sent-icon-color;
     }
     &.delivered:before {
-      content: '\f019';
-      color:#5882FA;
+      content: $chat-msg-delivered-icon;
+      color: $chat-msg-delivered-icon-color;
     }
     &.received:before {
-      content: '\f06e';
-      color:#84b819;
+      content: $chat-msg-received-icon;
+      color: $chat-msg-received-icon-color;
     }
     &.read:before {
-      content: '\f00c';
-      color:#ccc;
+      content: $chat-msg-read-icon;
+      color: $chat-msg-read-icon-color;
     }
   }
 }
 
 .chat .message {
   &.is_self .avatar {
-    right: 4px;
     left: auto;
+    right: 4px;
   }
   .avatar {
-    position: absolute;
-    top: 4px;
-    width:46px;
-    height:46px;
+    background: $actioncolor1;
+    border-radius: 2px;
+    height: 46px;
     left: 4px;
     overflow: hidden;
-    border-radius: 2px;
-    background: $actioncolor1;
-    text-align:center;
+    position: absolute;
+    text-align: center;
+    top: 4px;
+    width: 46px;
     .#{$fa-css-prefix} {
-      line-height:46px;
-      color:$actioncolor2;
+      color: $actioncolor2;
+      line-height: 46px;
     }
     img {
+      display: block;
+      bottom: 0;
+      left: 0;
+      right: 0;
       position: absolute;
-      left:0px;
-      right:0px;
-      bottom:0px;
-      top:0px;
-      display:block;
+      top: 0;
     }
   }
 }
@@ -357,46 +373,47 @@
 .chat .message {
   &:before,
   &:after {
+    border-style: solid;
     content: "";
+    display: block;
     position: absolute;
-    border-style: solid;
     width: 0;
-    display: block;
   }
   &.is_remote {
-    &:before {
-      top: 4px;
+    background: $chat-msg-remote-background;
+    &:before {  // arrow border
+      border-width: 10px 17px 10px 0;
+      border-color: transparent $chat-msg-remote-background;
       bottom: auto;
       left: -16px;
-      border-width: 10px 17px 10px 0;
-      border-color: transparent #fff;
+      top: 4px;
     }
-    &:after {
-      top:5px;
-      bottom:auto;
-      left:-15px;
+    &:after { // arrow background
       border-width: 9px 15px 9px 0;
-      border-color: transparent #fff;
+      border-color: transparent $chat-msg-remote-background;
+      bottom:auto;
+      left: -15px;
+      top: 5px;
     }
   }
   &.is_self {
-    background: #fff;
+    background: $chat-msg-self-background;
     margin-right:20px;
-    margin-left:4px;
-    padding-right:0px;
-    &:before {
-      top:4px;
-      bottom:auto;
-      right:-16px;
+    margin-left: 4px;
+    padding-right: 0;
+    &:before { // arrow border
       border-width: 10px 0 10px 17px;
-      border-color: transparent #fff;
+      border-color: transparent $chat-msg-self-background;
+      bottom: auto;
+      right: -16px;
+      top: 4px;
     }
-    &:after {
-      top:5px;
-      bottom:auto;
-      right:-15px;
+    &:after { // arrow background
       border-width: 9px 0 9px 15px;
-      border-color: transparent #fff;
+      border-color: transparent $chat-msg-self-background;
+      bottom: auto;
+      right: -15px;
+      top: 5px;
     }
   }
   &.with_name {
@@ -404,70 +421,69 @@
   }
 }
 
-.chat .output .message strong {
-  display:block;
-  padding-bottom:2px;
-  margin-right:40px;
-  white-space:nowrap;
-  overflow:hidden;
-  text-overflow:ellipsis;
-}
-
 .chat {
   .chatbodybottom {
-    background: #e7e7e7;
+    background: $chat-bottom-background;
+    bottom: 1px;
+    left: 0;
+    margin: 0 auto;
     position: absolute;
-    left:0px;
-    bottom:1px;
-    right:0px;
-    margin:0 auto;
+    right: 0;
+    @include breakpt-height($breakpoint-chat-small) {
+      height: auto;
+    }
   }
   .typinghint {
-    padding:2px 6px 0 6px;
+    padding: 2px 6px 0 6px;
     white-space: nowrap;
     overflow: hidden;
     font-size:.8em;
-    color: #aaa;
-    height:14px;
+    color: $chat-typing;
+    height: 14px;
+    @include breakpt-height($breakpoint-chat-small) {
+      display: none;
+    }
   }
   .inputbox {
-    position:relative;
+    position: relative;
     .btn {
-      position:absolute;
-      right:6px;
-      top:1px;
-      padding: 0.5em 1em;
-      display:none;
+      position: absolute;
+      right: 6px;
+      top: 1px;
+      padding: .5em 1em;
+      display: none;
     }
     > div {
-      border-top:1px solid $bordercolor;
+      border-top: 1px solid $bordercolor;
+    }
+    @include breakpt-height($breakpoint-chat-small) {
+      height: auto;
     }
   }
   .input {
-    display:block;
-    resize: none;
-    width:100%;
-    height:54px;
-    max-height:54px; /* FF hack */
-    margin:0px;
-    -webkit-border-radius: 0px;
-    -moz-border-radius: 0px;
-    border-radius: 0px;
-    border-color:transparent;
-    -webkit-box-shadow: none;
-    -moz-box-shadow: none;
+    border-radius: 0;
+    border-color: transparent;
     box-shadow: none;
+    display: block;
+    height: 54px;
+    max-height: 54px; /* FF hack */
+    margin: 0;
+    resize: none;
+    width: 100%;
     &:active,
     &:focus {
-      border-color:#66afe9;
+      border-color: $chat-input-border-color;
+    }
+    @include breakpt-height($breakpoint-chat-small) {
+      max-height: 2.5em;
     }
   }
 }
 
 @keyframes newmessage {
-  0% {background-color: rgba(132,184,25,1.0);}
+  0% {background-color: $actioncolor1;}
   50% {background-color: $componentbg;}
-  100% {background-color: rgba(132,184,25,1.0);}
+  100% {background-color: $actioncolor1;}
 }
 
 .chat.newmessage {
@@ -481,28 +497,3 @@
     animation: newmessage 1s ease -0.3s infinite;
   }
 }
-
-@media all and (max-height: 210px) {
-  .chat .inputbox {
-    height: auto;
-  }
-  .chat .input {
-    max-height: 2.5em;
-  }
-  .chat .outputbox {
-    bottom:45px;
-  }
-  .chat .chatbodybottom {
-    height: auto;
-  }
-  .chat .typinghint {
-    display: none;
-  }
-  .chat .chatheader {
-    display: none;
-  }
-  .chat .chatbody {
-    border-top: 1px solid $bordercolor;
-    top: 0px;
-  }
-}

src/styles/global/_mixins.scss

@@ -5,6 +5,12 @@
   }
 }
 
+@mixin breakpt-height($pt) {
+  @media (max-height: $pt) {
+    @content;
+  }
+}
+
 @mixin breakpt-only-screen($pt) {
   @media only screen and (max-width: $pt) {
     @content;

src/styles/global/_variables.scss

@@ -48,11 +48,37 @@ $video-overlayactions: rgba(0,0,0,.9);
 $buddylist-background: rgba(0,0,0,.3);
 $buddylist-action-background: rgba(255,255,255,0.5);
 
+// chat
 $chat-background: #e7e7e7;
 $chat-disabled: #aaa;
 $chat-badge: #84b819;
 $chat-ctrl: rgba(0,0,0,.3);
 $chat-timestamp: #aaa;
+$chat-meta: #aaa;
+$chat-msg-background: white;
+$chat-msg-border: #e5e5ef;
+
+$chat-msg-default-icon-color: #ccc;
+$chat-msg-unread-icon-color: #FE9A2E;
+$chat-msg-sending-icon-color: $chat-msg-default-icon-color;
+$chat-msg-sent-icon-color: #5882FA;
+$chat-msg-delivered-icon-color: #5882FA;
+$chat-msg-received-icon-color: #84b819;
+$chat-msg-read-icon-color: $chat-msg-default-icon-color;
+
+$chat-msg-unread-icon: '\f0eb';
+$chat-msg-sending-icon: '\f0ec';
+$chat-msg-sent-icon: '\f003';
+$chat-msg-delivered-icon: '\f019';
+$chat-msg-received-icon: '\f06e';
+$chat-msg-read-icon: '\f00c';
+
+$chat-msg-self-background: white;
+$chat-msg-remote-background: white;
+
+$chat-bottom-background: $chat-background;
+$chat-typing: $chat-meta;
+$chat-input-border-color: #66afe9;
 
 $tap-highlight: rgba(0, 0, 0, 0);
 
@@ -63,6 +89,8 @@ $breakpoint-large: 1280px;
 $breakpoint-video-small: 590px;
 $breakpoint-video-medium: 630px;
 
+$breakpoint-chat-small: 210px;
+
 $font-sans-serif: "Helvetica Neue",Helvetica,Arial,sans-serif;
 
 // compass