Move variables to sass/variables.scss

css/converse.css

@@ -305,14 +305,30 @@
     padding-right: 22px; }
 @-webkit-keyframes spin {
   from {
-    -webkit-transform: rotate(0deg); }
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg); }
   to {
-    -webkit-transform: rotate(359deg); } }
+    -webkit-transform: rotate(359deg);
+    -moz-transform: rotate(359deg);
+    -ms-transform: rotate(359deg);
+    -o-transform: rotate(359deg);
+    transform: rotate(359deg); } }
 @-moz-keyframes spin {
   from {
-    -moz-transform: rotate(0deg); }
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg); }
   to {
-    -moz-transform: rotate(359deg); } }
+    -webkit-transform: rotate(359deg);
+    -moz-transform: rotate(359deg);
+    -ms-transform: rotate(359deg);
+    -o-transform: rotate(359deg);
+    transform: rotate(359deg); } }
 @keyframes spin {
   from {
     -webkit-transform: rotate(0deg);

sass/converse.scss

@@ -6,8 +6,6 @@
  * Licensed under the Mozilla Public License
  */
 
-@import "bourbon/bourbon";
-
 @font-face {
   font-family: 'Converse-js';
   src: url('../fonticons/fonts/icomoon.eot?-mnoxh0');
@@ -33,38 +31,10 @@
 }
 
 #conversejs {
-  @import "components/neat/app/assets/stylesheets/neat";
+  @import "../bourbon/bourbon";
+  @import "../components/neat/app/assets/stylesheets/neat";
+  @import "variables";
   
-  // XXX: These should be moved to a separate file
-  $link-color: #436F64;
-  $inverse-link-color: white;
-  $link-shadow-color: #FAFAFA;
-  $text-shadow-color: #FAFAFA;
-  $text-color: #6C4C44;
-  $border-color: #CCC;
-  $warning-color: #681F2C;
-  $light-background-border-color: #F1DCD6;
-  $light-background-color: #F1E2DD;
-  $icon-color: #114327;
-  $highlight-color: #E3C9C1;
-  $chat-head-color: #436F64;
-  $chatroom-head-color: #0F592F;
-  $chat-head-text-color: white;
-  $chat-head-inverse-text-color: white;
-  $chat-head-height: 44px;
-  $save-button-color: #436F64;
-  $chat-textarea-height: 64px;
-  $toolbar-height: 20px;
-  $message-them-color: #4B7003;
-  $roster-height: 194px;
-  $controlbox-dropdown-height: 25px;
-
-  $font-size: 14px;
-  $legend-font-size: 16px;
-
-  $chat-width: 200px;
-  $chat-height: 400px;
-
   color: $text-color;
   font-size: $font-size;
   bottom: 0;
@@ -77,9 +47,6 @@
   display: block;
   @include box-sizing(border-box);
 
-    $font-size: 14px;
-    $legend-font-size: 16px;
-
   a, a:visited {
     text-decoration: none;
     color: $link-color;
@@ -1190,7 +1157,7 @@
     margin: 0;
     padding: 6px;
     &.controlbox-head {
-      background-color: $link-color;
+      background-color: $chat-head-color;
       border-top-left-radius: 4px;
       border-top-right-radius: 4px;
       color: $chat-head-inverse-text-color;

sass/variables.scss

@@ -0,0 +1,29 @@
+
+  $link-color: #436F64;
+  $inverse-link-color: white;
+  $link-shadow-color: #FAFAFA;
+  $text-shadow-color: #FAFAFA;
+  $text-color: #6C4C44;
+  $border-color: #CCC;
+  $warning-color: #681F2C;
+  $light-background-border-color: #F1DCD6;
+  $light-background-color: #F1E2DD;
+  $icon-color: #114327;
+  $highlight-color: #E3C9C1;
+  $chat-head-color: #436F64;
+  $chatroom-head-color: #0F592F;
+  $chat-head-text-color: white;
+  $chat-head-inverse-text-color: white;
+  $chat-head-height: 44px;
+  $save-button-color: #436F64;
+  $chat-textarea-height: 64px;
+  $toolbar-height: 20px;
+  $message-them-color: #4B7003;
+  $roster-height: 194px;
+  $controlbox-dropdown-height: 25px;
+
+  $font-size: 14px;
+  $legend-font-size: 16px;
+
+  $chat-width: 200px;
+  $chat-height: 400px;