Move scss for minimized chats into separate file.

css/converse.css

@@ -369,17 +369,15 @@
     display: block;
     margin: 0 auto;
     clear: both; }
-  #conversejs .toggle-controlbox,
-  #conversejs #minimized-chats {
-    border-top-left-radius: 4px;
-    border-top-right-radius: 4px;
-    float: right;
-    margin: 0 7px;
-    font-weight: bold; }
   #conversejs .toggle-controlbox {
     background-color: #436F64;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
     color: #0a0a0a;
+    float: right;
+    font-weight: bold;
     height: 100%;
+    margin: 0 7px;
     padding: 10px 8px 0 8px; }
     #conversejs .toggle-controlbox span {
       color: white; }
@@ -391,52 +389,6 @@
   #conversejs .input-button-group button,
   #conversejs .input-button-group input {
     display: table-cell; }
-  #conversejs #minimized-chats {
-    color: white;
-    display: none;
-    height: 100%;
-    padding: 0;
-    width: 130px; }
-    #conversejs #minimized-chats #toggle-minimized-chats {
-      border-top-left-radius: 4px;
-      border-top-right-radius: 4px;
-      background-color: ivory;
-      position: relative;
-      padding: 10px 0 0 0;
-      display: block;
-      width: 100%;
-      height: 100%;
-      text-align: center; }
-    #conversejs #minimized-chats .unread-message-count,
-    #conversejs #minimized-chats .chat-head-message-count {
-      font-weight: bold;
-      background-color: #f6f6f6;
-      background-image: -webkit-linear-gradient(#f6f6f6 5%, #808080 100%);
-      background-image: linear-gradient(#f6f6f6 5%, #808080 100%);
-      border: 1px solid;
-      text-shadow: 1px 1px 0 #FAFAFA;
-      color: #681F2C;
-      border-radius: 5px;
-      padding: 2px 4px;
-      font-size: 16px;
-      text-align: center;
-      position: absolute;
-      right: 116px;
-      bottom: 10px; }
-    #conversejs #minimized-chats .box-flyout {
-      position: absolute;
-      display: block;
-      height: auto;
-      bottom: 35px;
-      margin-left: 0; }
-      #conversejs #minimized-chats .box-flyout .chat-head {
-        font-size: 100%;
-        border-radius: 4px;
-        padding: 3px 0 0 5px;
-        margin: 0 0 1px 0;
-        box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
-        height: 24px;
-        width: 130px; }
   #conversejs .chat-body {
     background-color: white;
     border-bottom-right-radius: 4px;
@@ -1182,18 +1134,6 @@
     @media screen and (max-width: 480px) {
       #conversejs .box-flyout {
         height: 400px; } }
-  #conversejs .minimized-chats-flyout {
-    height: auto;
-    width: 130px;
-    bottom: 35px; }
-    #conversejs .minimized-chats-flyout .chat-head-chatroom,
-    #conversejs .minimized-chats-flyout .chat-head {
-      border-radius: 4px;
-      width: 130px;
-      height: 35px;
-      margin-bottom: 0.2em; }
-    #conversejs .minimized-chats-flyout.minimized {
-      height: auto; }
   #conversejs .dragresize {
     background: transparent;
     border: 0;
@@ -1328,4 +1268,68 @@
   #conversejs .chatroom .invited-contact.tt-input {
     background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gkBCjE0uzKkOgAAAidJREFUKM+N0k+IEnEUB/D3cyscdagkWpHV0WGWREXm0AgOGkSJ07kh2UXYU5cOewm6Bp0KXG/tpSCv6hyEFQIhMEaE3yERYfwTOoqKGLQxDAbqYadLgu7J7/XxeY/3ez8EACDLsgljfMfj8ZxUKhXXYDAAnueBoqgyAMipVOovXAuSZdnUaDQeDofDs16vFyUIAjRNUwmCoG02G1AUdZ5IJN7GYrHfm3AvEAjcnUwmX0ajUdRqtV74fL6sruufKYoa6bp+fzabPUMI7ZfL5eImNHk8npNerxc1m80XHMe98fv9H3K5XDkSibxjWfb1arWaYoyPMMbCFqxUKi6CIODw8LDmdDq7oigaAACiKK5omv7KcdylpmlIkiTHFlRVFTRNUxVFqa/ROqIoGoqi5A3DgFartfU4Jp7ngSAI2uVyPZIk6dZmUZKk2w6H4xghBPF4HK7vWLbZbDCdTp+rqvpUkiS0RvV6/bTf7x8wDHMViURqm/AGAMgURZ232+1X1Wr102KxuEwmk3lZlo/7/f7BcrkkSZKs2e12tHXH/x/gHsY4jTE+0jQNGYYBCCFgGOaKJMkfjUaDZximGQ6HXzSbzZ+ZTMbY6oIxFgqFgqPT6YAgCMBxXM1ut6N0Op0fj8chi8XyjWXZ98Fg8DuCHZLNZh+USqWP8/n8idvt/hUKhV7u7QK9Xu8fmqanAJBQVXUfAGY7TQQAKBaLN8fjsdDtdh/run72Dzhf7XLe2UevAAAAAElFTkSuQmCC) no-repeat right 3px center; }
 
+#conversejs #minimized-chats {
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+  color: white;
+  display: none;
+  float: right;
+  font-weight: bold;
+  height: 100%;
+  margin: 0 7px;
+  padding: 0;
+  width: 130px; }
+  #conversejs #minimized-chats #toggle-minimized-chats {
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+    background-color: ivory;
+    position: relative;
+    padding: 10px 0 0 0;
+    display: block;
+    width: 100%;
+    height: 100%;
+    text-align: center; }
+  #conversejs #minimized-chats .minimized-chats-flyout {
+    height: auto;
+    width: 130px;
+    bottom: 35px; }
+    #conversejs #minimized-chats .minimized-chats-flyout .chat-head-chatroom,
+    #conversejs #minimized-chats .minimized-chats-flyout .chat-head {
+      border-radius: 4px;
+      width: 130px;
+      height: 35px;
+      margin-bottom: 0.2em; }
+    #conversejs #minimized-chats .minimized-chats-flyout.minimized {
+      height: auto; }
+  #conversejs #minimized-chats .unread-message-count,
+  #conversejs #minimized-chats .chat-head-message-count {
+    font-weight: bold;
+    background-color: #f6f6f6;
+    background-image: -webkit-linear-gradient(#f6f6f6 5%, #808080 100%);
+    background-image: linear-gradient(#f6f6f6 5%, #808080 100%);
+    border: 1px solid;
+    text-shadow: 1px 1px 0 #FAFAFA;
+    color: #681F2C;
+    border-radius: 5px;
+    padding: 2px 4px;
+    font-size: 16px;
+    text-align: center;
+    position: absolute;
+    right: 116px;
+    bottom: 10px; }
+  #conversejs #minimized-chats .box-flyout {
+    position: absolute;
+    display: block;
+    height: auto;
+    bottom: 35px;
+    margin-left: 0; }
+    #conversejs #minimized-chats .box-flyout .chat-head {
+      font-size: 100%;
+      border-radius: 4px;
+      padding: 3px 0 0 5px;
+      margin: 0 0 1px 0;
+      box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
+      height: 24px;
+      width: 130px; }
+
 /*# sourceMappingURL=converse.css.map */

mockup/index.html

@@ -450,7 +450,7 @@ JID: rassie.erasmus@localhost">Rassie Erasmus</span>
                 <p class="chatroom-topic"></p>
                 <p></p>
             </div>
-            <div class="chat-body">
+            <div class="chatroom-body">
                 <div class="chatroom-form-container">
                     <form class="chatroom-form">
                         <!-- TODO: Make this a long form that scrolls -->

sass/_core.scss

@@ -294,19 +294,15 @@
     clear: both;
   }
 
-  .toggle-controlbox,
-  #minimized-chats {
+  .toggle-controlbox {
+    background-color: $link-color;
     border-top-left-radius: $chatbox-border-radius;
     border-top-right-radius: $chatbox-border-radius;
+    color: #0a0a0a;
     float: right;
-    margin: 0 $chat-gutter;
     font-weight: bold;
-  }
-
-  .toggle-controlbox {
-    background-color: $link-color;
-    color: #0a0a0a;
     height: 100%;
+    margin: 0 $chat-gutter;
     padding: 10px 8px 0 8px;
     span {
       color: $inverse-link-color;
@@ -325,60 +321,6 @@
     display: table-cell;
   }
 
-  #minimized-chats {
-    color: $inverse-link-color;
-    display: none;
-    height: 100%;
-    padding: 0;
-    width: 130px;
-
-    #toggle-minimized-chats {
-      border-top-left-radius: $chatbox-border-radius;
-      border-top-right-radius: $chatbox-border-radius;
-      background-color: ivory;
-      position: relative;
-      padding: 10px 0 0 0;
-      display: block;
-      width: 100%;
-      height: 100%;
-      text-align: center;
-    }
-
-    .unread-message-count,
-    .chat-head-message-count {
-      font-weight: bold;
-      @include linear-gradient(#f6f6f6 5%, #808080 100%);
-      border: 1px solid;
-      text-shadow: 1px 1px 0 $text-shadow-color;
-      color: $warning-color;
-      border-radius: 5px;
-      padding: 2px 4px;
-      font-size: 16px;
-      text-align: center;
-      position: absolute;
-      right: 116px;
-      bottom: 10px;
-    }
-
-    .box-flyout {
-      position: absolute;
-      display: block;
-      height: auto;
-      bottom: $bottom-gutter-height;
-      margin-left: 0;
-
-      .chat-head {
-        font-size: 100%;
-        border-radius: $chatbox-border-radius;
-        padding: 3px 0 0 5px;
-        margin: 0 0 1px 0;
-        box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
-        height: 24px;
-        width: 130px;
-      }
-    }
-  }
-
   .chat-body {
     background-color: white;
     border-bottom-right-radius: $chatbox-border-radius;
@@ -1399,22 +1341,6 @@
     }
   }
 
-  .minimized-chats-flyout {
-    height: auto;
-    width: $minimized-chats-width;
-    bottom: $bottom-gutter-height;
-    .chat-head-chatroom,
-    .chat-head {
-      border-radius: $chatbox-border-radius;
-      width: $minimized-chats-width;
-      height: 35px;
-      margin-bottom: 0.2em;
-    }
-    &.minimized {
-      height: auto;
-    }
-  }
-
   .dragresize {
     background: transparent;
     border: 0;

sass/_minimized_chats.scss

@@ -0,0 +1,76 @@
+#conversejs {
+    #minimized-chats {
+        border-top-left-radius: $chatbox-border-radius;
+        border-top-right-radius: $chatbox-border-radius;
+        color: $inverse-link-color;
+        display: none;
+        float: right;
+        font-weight: bold;
+        height: 100%;
+        margin: 0 $chat-gutter;
+        padding: 0;
+        width: 130px;
+
+        #toggle-minimized-chats {
+            border-top-left-radius: $chatbox-border-radius;
+            border-top-right-radius: $chatbox-border-radius;
+            background-color: ivory;
+            position: relative;
+            padding: 10px 0 0 0;
+            display: block;
+            width: 100%;
+            height: 100%;
+            text-align: center;
+        }
+
+        .minimized-chats-flyout {
+            height: auto;
+            width: $minimized-chats-width;
+            bottom: $bottom-gutter-height;
+            .chat-head-chatroom,
+            .chat-head {
+                border-radius: $chatbox-border-radius;
+                width: $minimized-chats-width;
+                height: 35px;
+                margin-bottom: 0.2em;
+            }
+            &.minimized {
+                height: auto;
+            }
+        }
+
+        .unread-message-count,
+        .chat-head-message-count {
+            font-weight: bold;
+            @include linear-gradient(#f6f6f6 5%, #808080 100%);
+            border: 1px solid;
+            text-shadow: 1px 1px 0 $text-shadow-color;
+            color: $warning-color;
+            border-radius: 5px;
+            padding: 2px 4px;
+            font-size: 16px;
+            text-align: center;
+            position: absolute;
+            right: 116px;
+            bottom: 10px;
+        }
+
+        .box-flyout {
+            position: absolute;
+            display: block;
+            height: auto;
+            bottom: $bottom-gutter-height;
+            margin-left: 0;
+
+            .chat-head {
+                font-size: 100%;
+                border-radius: $chatbox-border-radius;
+                padding: 3px 0 0 5px;
+                margin: 0 0 1px 0;
+                box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
+                height: 24px;
+                width: 130px;
+            }
+        }
+    }
+}

sass/converse.scss

@@ -10,3 +10,4 @@
 @import "variables";
 @import "core";
 @import "chatrooms";
+@import "minimized_chats";