Update chat show/hide to make it more sane.

src/styles/components/_buddylist.scss

@@ -24,7 +24,7 @@
   position: absolute;
   right: 0;
   top: 0;
-  width: 285px;
+  width: $buddylist-width + 25;
   z-index: 50;
 }
 
@@ -50,11 +50,14 @@
   position: absolute;
   text-align: center;
   top: 0;
-  width: 25px;
+  width: 26px;
+  z-index: 1;
+  padding-right: 4px;
 }
 
 .withBuddylist #buddylist:before {
   content: "\f101";
+  padding-right: 0px;
 }
 
 .withBuddylistAutoHide #buddylist:before {

src/styles/components/_chat.scss

@@ -20,42 +20,35 @@
  */
 
 #chat {
-  bottom: 0px;
-  perspective: 1000;
   pointer-events: none;
   position: absolute;
-  right: 260px;
+  bottom: 0px;
+  right: $chat-width;
   top: 0px;
-  width: 260px;
+  width: $chat-width;
+  min-width: $chat-width;
   z-index: 45;
+  display: none;
 }
 
 .withChat {
-  #chat .chatcontainer {
+  #chat {
-    left: 0;
+    display: block;
-  }
-  .chatpane.flip {
-    transform: rotateY(360deg);
   }
   &.withChatMaximized #chat {
     left: 0;
     width: auto;
-      .chatcontainer {
-        width: auto;
-      }
   }
 }
 
 .chatcontainer {
   background: $chat-background;
-  bottom: 0;
+  bottom: 0px;
-  left: 260px;
+  left: 0px;
+  right: 0px;
+  top: 0px;
   overflow: hidden;
   position: absolute;
-  right: 0;
-  top: 0;
-  //transition: left 200ms ease-in-out;
-  width: 260px;
 }
 
 .showchatlist {
@@ -72,7 +65,6 @@
   bottom: 0;
   left: 100%;
   position: absolute;
-  //transition: left 200ms ease-in-out;
   top: 0;
   width: 100%;
   .list-group {
@@ -125,8 +117,6 @@
   position: absolute;
   right: 0;
   top: 0;
-  //transition: 0.3s;
-  //transform-style: preserve-3d;
   width: 100%;
 }
 

src/styles/global/_variables.scss

@@ -40,7 +40,6 @@ $logo: url("../img/logo-small.png") !default;
 $scalable-logo: url("../img/logo.svg") !default;
 $load-logo: $scalable-logo !default;
 
-
 // background
 $main-background-image: "../img/bg-tiles.jpg" !default;
 $main-background-image-retina: "../img/bg-tiles_x2.jpg" !default;
@@ -56,6 +55,9 @@ $action-enable: $actioncolor1 !default;
 $welcome: #aaa !default;
 $loading: #ddd !default;
 
+// panes
+$pane-width: 260px !default;
+
 // font
 $font-sans-serif: "Helvetica Neue",Helvetica,Arial,sans-serif !default;
 $base-font-size: 13px; // compass vertical_rhythm mixin
@@ -91,10 +93,11 @@ $video-onlyaudio: rgba(255,255,255,.3) !default;
 $video-overlayactions: rgba(0,0,0,.9) !default;
 
 // settings
-$settings-background: white;
+$settings-background: white !default;
 
 // buddylist
-$buddylist-background: $componentbg;
+$buddylist-width: $pane-width !default;
+$buddylist-background: $componentbg !default;
 $buddylist-tab-color: rgba(0,0,0,.3) !default;
 $buddylist-tab-background: $componentbg !default;
 $buddylist-action-background: rgba(255,255,255,0.5) !default;
@@ -102,6 +105,7 @@ $buddylist-buddy1: $componentfg1 !default;
 $buddylist-buddy2: $componentfg2 !default;
 
 // chat
+$chat-width: $pane-width !default;
 $chat-background: #e7e7e7 !default;
 $chat-header: rgba(255,255,255,0.9) !default;
 $chat-disabled: #aaa !default;