Put all Sass variables into one file.

updates #1091

css/converse.css

@@ -7287,7 +7287,6 @@ body.reset {
 
 #conversejs .flyout {
   border-radius: 4px;
-  bottom: 1em;
   position: absolute; }
   @media screen and (max-height: 450px) {
     #conversejs .flyout {
@@ -7316,7 +7315,6 @@ body.reset {
   flex-wrap: nowrap;
   color: #ffffff;
   font-size: 100%;
-  height: 55px;
   margin: 0;
   padding: 0.5em;
   position: relative; }
@@ -7379,8 +7377,6 @@ body.reset {
     justify-content: space-between;
     background-color: #3AA569;
     box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
-    height: 450px;
-    min-height: 225px;
     z-index: 1;
     overflow-y: scroll;
     width: 100%; }
@@ -7488,7 +7484,6 @@ body.reset {
       width: 100%;
       border: none;
       min-height: 60px;
-      max-height: 200px;
       margin-bottom: -4px; }
       #conversejs .chatbox .sendXMPPMessage .chat-textarea.spoiler {
         height: 42px; }
@@ -7553,7 +7548,6 @@ body.reset {
           #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu a {
             color: #578EA9; }
           #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-picker {
-            height: 100px;
             overflow: scroll;
             padding: 0.5em; }
           #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li {
@@ -7620,11 +7614,34 @@ body.reset {
       top: 0;
       left: 0; }
 
+#conversejs.converse-overlayed .flyout {
+  bottom: 1em; }
+#conversejs.converse-overlayed .box-flyout {
+  height: 450px;
+  min-height: 225px; }
+#conversejs.converse-overlayed .chat-head {
+  height: 55px; }
+#conversejs.converse-overlayed .chat-textarea {
+  max-height: 200px; }
+#conversejs.converse-overlayed .emoji-picker {
+  height: 100px; }
+
+#conversejs.converse-fullscreen .flyout {
+  bottom: 6px; }
+#conversejs.converse-fullscreen .box-flyout {
+  height: 100%;
+  min-height: 50%; }
 #conversejs.converse-fullscreen .chatbox-btn {
   font-size: 16px; }
-#conversejs.converse-fullscreen .chat-head .chatbox-buttons {
-  flex: 0 0 25%;
-  max-width: 25%; }
+#conversejs.converse-fullscreen .chat-head {
+  height: 62px; }
+  #conversejs.converse-fullscreen .chat-head .chatbox-buttons {
+    flex: 0 0 25%;
+    max-width: 25%; }
+#conversejs.converse-fullscreen .chat-textarea {
+  max-height: 400px; }
+#conversejs.converse-fullscreen .emoji-picker {
+  height: 150px; }
 
 @media screen and (max-width: 767px) {
   #conversejs:not(.converse-embedded) > .row {
@@ -8072,7 +8089,6 @@ body.reset {
   position: relative;
   margin: 0;
   height: 194px;
-  height: calc(~"100% - 50px - 20px");
   padding: 0;
   overflow: hidden;
   height: calc(100% - 70px);
@@ -8094,7 +8110,6 @@ body.reset {
       font-size: calc(14px - 2px); }
     #conversejs #converse-roster .roster-filter-form .state-type {
       font-size: calc(14px - 2px);
-      height: 25px;
       width: 100%; }
   #conversejs #converse-roster .roster-contacts {
     padding: 0;
@@ -8165,8 +8180,7 @@ body.reset {
               max-width: 60%; }
           #conversejs #converse-roster .roster-contacts .roster-group li .open-chat .avatar {
             float: left;
-            display: inline-block;
-            height: 60px; }
+            display: inline-block; }
         #conversejs #converse-roster .roster-contacts .roster-group li.current-xmpp-contact span {
           font-size: 14px;
           float: left;
@@ -8297,8 +8311,7 @@ body.reset {
       #conversejs .chatroom .box-flyout .chatroom-body .chat-area {
         display: flex;
         flex-direction: column;
-        word-wrap: break-word;
-        min-width: 250px; }
+        word-wrap: break-word; }
         #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-area .new-msgs-indicator,
         #conversejs .chatroom .box-flyout .chatroom-body .chat-area .new-msgs-indicator {
           background-color: #E77051; }
@@ -8471,6 +8484,8 @@ body.reset {
       font-size: 80%; }
   #conversejs.converse-overlayed .chatbox.chatroom .chatroom-body .occupants .chatroom-features .feature {
     font-size: 12px; }
+  #conversejs.converse-overlayed .chatbox.chatroom .chatroom-body .chat-area {
+    min-width: 250px; }
 
 /* ******************* Fullpage styles *************************** */
 #conversejs.converse-fullscreen .chatroom .box-flyout,

css/inverse.css

@@ -7287,7 +7287,6 @@ body.reset {
 
 #conversejs .flyout {
   border-radius: 4px;
-  bottom: 6px;
   position: absolute; }
   @media screen and (max-height: 450px) {
     #conversejs .flyout {
@@ -7316,7 +7315,6 @@ body.reset {
   flex-wrap: nowrap;
   color: #ffffff;
   font-size: 100%;
-  height: 62px;
   margin: 0;
   padding: 0.5em;
   position: relative; }
@@ -7379,8 +7377,6 @@ body.reset {
     justify-content: space-between;
     background-color: #3AA569;
     box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
-    height: 100%;
-    min-height: 50%;
     z-index: 1;
     overflow-y: scroll;
     width: 100%; }
@@ -7488,7 +7484,6 @@ body.reset {
       width: 100%;
       border: none;
       min-height: 60px;
-      max-height: 400px;
       margin-bottom: -4px; }
       #conversejs .chatbox .sendXMPPMessage .chat-textarea.spoiler {
         height: 42px; }
@@ -7553,7 +7548,6 @@ body.reset {
           #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu a {
             color: #578EA9; }
           #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-picker {
-            height: 150px;
             overflow: scroll;
             padding: 0.5em; }
           #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li {
@@ -7620,11 +7614,34 @@ body.reset {
       top: 0;
       left: 0; }
 
+#conversejs.converse-overlayed .flyout {
+  bottom: 1em; }
+#conversejs.converse-overlayed .box-flyout {
+  height: 450px;
+  min-height: 225px; }
+#conversejs.converse-overlayed .chat-head {
+  height: 55px; }
+#conversejs.converse-overlayed .chat-textarea {
+  max-height: 200px; }
+#conversejs.converse-overlayed .emoji-picker {
+  height: 100px; }
+
+#conversejs.converse-fullscreen .flyout {
+  bottom: 6px; }
+#conversejs.converse-fullscreen .box-flyout {
+  height: 100%;
+  min-height: 50%; }
 #conversejs.converse-fullscreen .chatbox-btn {
   font-size: 16px; }
-#conversejs.converse-fullscreen .chat-head .chatbox-buttons {
-  flex: 0 0 25%;
-  max-width: 25%; }
+#conversejs.converse-fullscreen .chat-head {
+  height: 62px; }
+  #conversejs.converse-fullscreen .chat-head .chatbox-buttons {
+    flex: 0 0 25%;
+    max-width: 25%; }
+#conversejs.converse-fullscreen .chat-textarea {
+  max-height: 400px; }
+#conversejs.converse-fullscreen .emoji-picker {
+  height: 150px; }
 
 @media screen and (max-width: 767px) {
   #conversejs:not(.converse-embedded) > .row {
@@ -7640,22 +7657,22 @@ body.reset {
       bottom: 0;
       height: 100vh;
       box-shadow: none; } }
-#conversejs.fullscreen .chatbox-btn {
+#conversejs.converse-fullscreen .chatbox-btn {
   font-size: 16px;
   margin: 0 0.3em; }
-#conversejs.fullscreen .flyout {
+#conversejs.converse-fullscreen .flyout {
   border-radius: 0;
   border: 1.2em solid #3AA569;
   border-top: 0.8em solid #3AA569;
   bottom: 0; }
-#conversejs.fullscreen .chat-head {
+#conversejs.converse-fullscreen .chat-head {
   font-size: 20px;
   padding: 0; }
-  #conversejs.fullscreen .chat-head .user-custom-message {
+  #conversejs.converse-fullscreen .chat-head .user-custom-message {
     font-size: 50%;
     height: auto;
     line-height: 16px; }
-#conversejs.fullscreen .chatbox {
+#conversejs.converse-fullscreen .chatbox {
   width: 100%;
   height: 100%;
   margin: 0;
@@ -7665,43 +7682,43 @@ body.reset {
   padding-right: 15px;
   padding-left: 15px; }
   @media (min-width: 768px) {
-    #conversejs.fullscreen .chatbox {
+    #conversejs.converse-fullscreen .chatbox {
       flex: 0 0 75%;
       max-width: 75%; } }
   @media (min-width: 1200px) {
-    #conversejs.fullscreen .chatbox {
+    #conversejs.converse-fullscreen .chatbox {
       flex: 0 0 83.3333333333%;
       max-width: 83.3333333333%; } }
-  #conversejs.fullscreen .chatbox .box-flyout {
+  #conversejs.converse-fullscreen .chatbox .box-flyout {
     background-color: #3AA569;
     height: 100vh;
     width: 100%;
     box-shadow: none; }
-  #conversejs.fullscreen .chatbox .chat-body {
+  #conversejs.converse-fullscreen .chatbox .chat-body {
     background-color: #3AA569;
     border-top-left-radius: 4px;
     border-top-right-radius: 4px; }
-    #conversejs.fullscreen .chatbox .chat-body .chat-message {
+    #conversejs.converse-fullscreen .chatbox .chat-body .chat-message {
       line-height: 16px;
       font-size: 12px; }
-      #conversejs.fullscreen .chatbox .chat-body .chat-message .chat-msg-author {
+      #conversejs.converse-fullscreen .chatbox .chat-body .chat-message .chat-msg-author {
         line-height: 16px; }
-      #conversejs.fullscreen .chatbox .chat-body .chat-message .chat-msg-content {
+      #conversejs.converse-fullscreen .chatbox .chat-body .chat-message .chat-msg-content {
         line-height: 16px; }
-        #conversejs.fullscreen .chatbox .chat-body .chat-message .chat-msg-content .emojione {
+        #conversejs.converse-fullscreen .chatbox .chat-body .chat-message .chat-msg-content .emojione {
           height: 16px;
           margin-bottom: -4px; }
-  #conversejs.fullscreen .chatbox .chat-content {
+  #conversejs.converse-fullscreen .chatbox .chat-content {
     border-top-left-radius: 4px;
     border-top-right-radius: 4px; }
-  #conversejs.fullscreen .chatbox .chat-title {
+  #conversejs.converse-fullscreen .chatbox .chat-title {
     font-size: 20px;
     line-height: 24px; }
-  #conversejs.fullscreen .chatbox .sendXMPPMessage ul {
+  #conversejs.converse-fullscreen .chatbox .sendXMPPMessage ul {
     width: 100%; }
-  #conversejs.fullscreen .chatbox .sendXMPPMessage .toggle-smiley ul.emoji-toolbar .emoji-category-picker {
+  #conversejs.converse-fullscreen .chatbox .sendXMPPMessage .toggle-smiley ul.emoji-toolbar .emoji-category-picker {
     margin-right: 5em; }
-  #conversejs.fullscreen .chatbox .sendXMPPMessage .toggle-smiley ul.emoji-toolbar .emoji-category {
+  #conversejs.converse-fullscreen .chatbox .sendXMPPMessage .toggle-smiley ul.emoji-toolbar .emoji-category {
     padding-left: 10px;
     padding-right: 10px; }
 
@@ -8108,7 +8125,6 @@ body.reset {
   position: relative;
   margin: 0;
   height: 194px;
-  height: calc(~"100% - 60px - 20px");
   padding: 0;
   overflow: hidden;
   height: calc(100% - 70px);
@@ -8130,7 +8146,6 @@ body.reset {
       font-size: calc(14px - 2px); }
     #conversejs #converse-roster .roster-filter-form .state-type {
       font-size: calc(14px - 2px);
-      height: 30px;
       width: 100%; }
   #conversejs #converse-roster .roster-contacts {
     padding: 0;
@@ -8201,8 +8216,7 @@ body.reset {
               max-width: 60%; }
           #conversejs #converse-roster .roster-contacts .roster-group li .open-chat .avatar {
             float: left;
-            display: inline-block;
-            height: 30px; }
+            display: inline-block; }
         #conversejs #converse-roster .roster-contacts .roster-group li.current-xmpp-contact span {
           font-size: 14px;
           float: left;
@@ -8421,8 +8435,7 @@ body.reset {
       #conversejs .chatroom .box-flyout .chatroom-body .chat-area {
         display: flex;
         flex-direction: column;
-        word-wrap: break-word;
-        min-width: 100%; }
+        word-wrap: break-word; }
         #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-area .new-msgs-indicator,
         #conversejs .chatroom .box-flyout .chatroom-body .chat-area .new-msgs-indicator {
           background-color: #E77051; }
@@ -8595,6 +8608,8 @@ body.reset {
       font-size: 80%; }
   #conversejs.converse-overlayed .chatbox.chatroom .chatroom-body .occupants .chatroom-features .feature {
     font-size: 12px; }
+  #conversejs.converse-overlayed .chatbox.chatroom .chatroom-body .chat-area {
+    min-width: 250px; }
 
 /* ******************* Fullpage styles *************************** */
 #conversejs.converse-fullscreen .chatroom .box-flyout,

sass/_chatbox.scss

@@ -1,7 +1,6 @@
 #conversejs {
     .flyout {
         border-radius: $chatbox-border-radius;
-        bottom: $chatbox-hover-height;
         position: absolute;
 
         @media screen and (max-height: $mobile-landscape-height) {
@@ -38,7 +37,6 @@
         flex-wrap: nowrap;
         color: #ffffff;
         font-size: 100%;
-        height: $chat-head-height;
         margin: 0;
         padding: 0.5em;
         position: relative;
@@ -120,8 +118,6 @@
             justify-content: space-between;
             background-color: $chat-head-color;
             box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
-            height: $chat-height;
-            min-height: $chat-height/2;
             z-index: 1;
             overflow-y: scroll;
             width: 100%;
@@ -246,7 +242,6 @@
                 width: 100%;
                 border: none;
                 min-height: $chat-textarea-height;
-                max-height: $max-chat-textarea-height;
                 margin-bottom: -4px; // Not clear why this is necessar :(
                 &.spoiler {
                     height: 42px;
@@ -330,7 +325,6 @@
                         }
                         ul {
                             &.emoji-picker {
-                                height: $emoji-picker-height;
                                 overflow: scroll;
                                 padding: 0.5em;
                             }
@@ -434,15 +428,48 @@
     }
 }
 
+#conversejs.converse-overlayed  {
+    .flyout {
+        bottom: $overlayed-chatbox-hover-height;
+    }
+    .box-flyout {
+        height: $overlayed-chat-height;
+        min-height: $overlayed-chat-height/2;
+    }
+    .chat-head {
+        height: $overlayed-chat-head-height;
+    }
+    .chat-textarea {
+        max-height: $overlayed-max-chat-textarea-height;
+    }
+    .emoji-picker {
+        height: $overlayed-emoji-picker-height;
+    }
+}
+
 #conversejs.converse-fullscreen  {
+    .flyout {
+        bottom: $fullpage-chatbox-hover-height;
+    }
+    .box-flyout {
+        height: $fullpage-chat-height;
+        min-height: $fullpage-chat-height/2;
+    }
     .chatbox-btn {
         font-size: $fullpage-chatbox-button-size;
     }
     .chat-head {
+        height: $fullpage-chat-head-height;
         .chatbox-buttons {
             @include make-col(3);
         }
     }
+    .chat-textarea {
+        max-height: $fullpage-max-chat-textarea-height;
+    }
+    .emoji-picker {
+        height: $fullpage-emoji-picker-height;
+    }
 }
 
 @media screen and (max-width: 767px) {

sass/_chatrooms.scss

@@ -101,7 +101,6 @@
                     display: flex;
                     flex-direction: column;
                     word-wrap: break-word; 
-                    min-width: $chat-width;
                     .new-msgs-indicator {
                         background-color: $chatroom-head-color;
                     }
@@ -292,6 +291,7 @@
     }
 }
 
+
 /* ******************* Overlay  styles *************************** */
 
 #conversejs.converse-overlayed {
@@ -317,6 +317,9 @@
                         }
                     }
                 }
+                .chat-area {
+                    min-width: $overlayed-chat-width;
+                }
             }
         }
     }
@@ -326,6 +329,7 @@
 
 #conversejs.converse-fullscreen,
 #conversejs.converse-mobile {
+
     .chatroom {
         .box-flyout {
             background-color: $chatroom-head-color;
@@ -347,7 +351,7 @@
                 }
                 .chat-area {
                     border-top-left-radius: $chatbox-border-radius;
-                    min-width: auto;
+                    min-width: $fullpage-chat-width;
 
                     .chat-content {
                         border-top-left-radius: $chatbox-border-radius;

sass/_embedded.scss

@@ -1,5 +1,4 @@
 @import "bourbon";
-@import "converse/variables";
 #conversejs.converse-embedded {
 
     @include box-sizing(border-box);

sass/_roster.scss

@@ -4,10 +4,8 @@
     position: relative;
     margin: 0;
     height: $roster-height;
-    height: calc(~"100% - #{$controlbox-dropdown-height*2} - 20px");
     padding: 0;
     overflow: hidden;
-
     // XXX: FIXME
     height: calc(100% - 70px);
 
@@ -43,7 +41,6 @@
         }
         .state-type {
             font-size: calc(#{$font-size} - 2px);
-            height: $controlbox-dropdown-height;
             width: 100%;
         }
     }
@@ -142,7 +139,6 @@
                     .avatar {
                         float: left;
                         display: inline-block;
-                        height: $roster-item-height;
                     }
                 }
                 &.current-xmpp-contact span {

sass/_variables.scss

@@ -141,3 +141,22 @@ $line-height-huge:  24px !default;
 
 $occupants-padding: 1em;
 
+$overlayed-max-chat-textarea-height: 200px !default;
+$fullpage-max-chat-textarea-height: 400px !default;
+
+$fullpage-emoji-picker-height: 150px !default;
+$overlayed-emoji-picker-height: 100px !default;
+
+$fullpage-chat-head-height: 62px !default;
+$overlayed-chat-head-height: 55px !default;
+
+$fullpage-chatbox-hover-height: 6px !default;
+$overlayed-chatbox-hover-height: 1em !default;
+
+$fullpage-chat-height: 100%;
+$overlayed-chat-height: 450px !default;
+
+$fullpage-chat-width: auto;
+$overlayed-chat-width: 250px !default;
+
+$roster-item-height: 30px !default;

sass/converse.scss

@@ -8,7 +8,6 @@
 @import "font-awesome";
 @import "bourbon";
 @import "variables";
-@import "converse/variables";
 
 @import "bootstrap/scss/functions";
 @import "bootstrap/scss/variables";

sass/converse/_chatbox.scss

@@ -13,12 +13,12 @@
         }
     }
     .chatbox {
-        min-width: $chat-width!important;
-        width: $chat-width;
+        min-width: $overlayed-chat-width!important;
+        width: $overlayed-chat-width;
 
         .box-flyout {
-            min-width: $chat-width!important;
-            width: $chat-width;
+            min-width: $overlayed-chat-width!important;
+            width: $overlayed-chat-width;
         }
 
         .chat-body {

sass/converse/_variables.scss

@@ -1,14 +0,0 @@
-$max-chat-textarea-height: 200px !default;
-$emoji-picker-height: 100px !default;
-
-$roster-item-height: 60px !default;
-
-$chat-head-height: 55px !default;
-
-$controlbox-dropdown-height: 25px !default;
-$controlbox-head-height: 55px !default;
-
-$chatbox-hover-height: 1em !default;
-
-$chat-width: 250px !default;
-$chat-height: 450px !default;

sass/inverse.scss

@@ -8,7 +8,6 @@
 @import "font-awesome";
 @import "bourbon";
 @import "variables";
-@import "inverse/variables";
 
 @import "bootstrap/scss/functions";
 @import "bootstrap/scss/variables";

sass/inverse/_chatbox.scss

@@ -1,4 +1,4 @@
-#conversejs.fullscreen {
+#conversejs.converse-fullscreen {
     .chatbox-btn {
         font-size: $font-size-large;
         margin: 0 0.3em;

sass/inverse/_variables.scss

@@ -1,16 +0,0 @@
-$max-chat-textarea-height: 400px !default;
-$emoji-picker-height: 150px !default;
-
-$roster-item-height: 30px !default;
-
-$chat-head-height: 62px !default;
-
-$controlbox-dropdown-height: 30px !default;
-$controlbox-head-height: 63px !default;
-
-$rounded-border-radius: 4px !default;
-
-$chatbox-hover-height: 6px !default;
-
-$chat-width: 100% !default;
-$chat-height: 100%;