Start moving media queries to sass files

css/converse.css

@@ -761,6 +761,23 @@ body .brand-heading {
     margin: 0;
     padding: 0; }
 
+@media screen and (max-width: 575px) {
+  body .brand-heading {
+    font-size: 3.75em; }
+
+  #conversejs {
+    margin: 0;
+    width: 100%;
+    height: 100%; }
+    #conversejs .chatbox .chat-body {
+      border-radius: 4px; }
+    #conversejs .flyout {
+      border-radius: 4px; } }
+@media screen and (max-width: 767px) {
+  #conversejs.login {
+    margin: 0;
+    width: 100%;
+    height: 100%; } }
 #converse-embedded-chat .flyout,
 #conversejs .flyout {
   border-radius: 4px;

css/inverse.css

@@ -761,6 +761,23 @@ body .brand-heading {
     margin: 0;
     padding: 0; }
 
+@media screen and (max-width: 575px) {
+  body .brand-heading {
+    font-size: 3.75em; }
+
+  #conversejs {
+    margin: 0;
+    width: 100%;
+    height: 100%; }
+    #conversejs .chatbox .chat-body {
+      border-radius: 0; }
+    #conversejs .flyout {
+      border-radius: 0; } }
+@media screen and (max-width: 767px) {
+  #conversejs.login {
+    margin: 0;
+    width: 100%;
+    height: 100%; } }
 body {
   width: 100%;
   height: 100%;
@@ -811,6 +828,10 @@ body {
   bottom: 0;
   left: 0;
   right: 0; }
+  #conversejs.fullscreen.login {
+    width: calc(100vw - 1em);
+    height: calc(100vh - 1em);
+    margin: 0.5em; }
   #conversejs.fullscreen form.pure-form.converse-form {
     margin: 1em; }
     #conversejs.fullscreen form.pure-form.converse-form input[type=checkbox] {
@@ -828,11 +849,13 @@ body {
       padding-left: 1em;
       padding-right: 1em;
       margin-right: 1em; }
-  #conversejs.fullscreen.login {
-    width: calc(100vw - 1em);
-    height: calc(100vh - 1em);
-    margin: 0.5em; }
 
+@media screen and (max-width: 767px) {
+  #conversejs.fullscreen.login {
+    background-color: white;
+    margin: 0;
+    width: 100%;
+    height: 100%; } }
 #converse-embedded-chat .flyout,
 #conversejs .flyout {
   border-radius: 0;
@@ -1715,7 +1738,7 @@ body {
   float: left;
   margin: 0; }
   #conversejs.fullscreen #controlbox #login-dialog {
-    border-radius: 5px; }
+    border-radius: 0; }
     #conversejs.fullscreen #controlbox #login-dialog .converse-form {
       margin: 0;
       padding: 3em 2em 3em; }

mockup/css/mockup.css

@@ -1,23 +1,4 @@
-@media screen and (max-width: 575px) {
-  body .brand-heading {
-    font-size: 3.75em;
-  }
-  #conversejs.fullscreen.login #controlbox #login-dialog .brand-heading,
-  #conversejs #controlbox #login-dialog .brand-heading {
-    font-size: 3.75em;
-  }
-  #conversejs .chatbox .chat-body {
-    border-radius: 7px;
-  }
-  #conversejs .flyout {
-    border-radius: 4px;
-  }
-}
 @media screen and (max-width: 767px) {
-  #conversejs {
-    left: 0;
-    margin: 0;
-  }
   #conversejs.fullscreen.chatbox > .chatbox,
   #conversejs.fullscreen.chatbox .chatroom {
     width: calc(100% - 50px);
@@ -33,7 +14,7 @@
     left: 0;
   }
   #conversejs.login {
-    margin: 10px;
+    margin: 1em;
   }
   #conversejs.login #controlbox {
     margin: 0;

sass/_core.scss

@@ -14,13 +14,14 @@
   color: #fff;
 }
 
-body .brand-heading {
-  margin: auto;
-  font-size: 6em;
-  font-weight: bold;
-
-    .icon-conversejs {
-        font-size: 0.88em;
+body {
+    .brand-heading {
+        margin: auto;
+        font-size: 6em;
+        font-weight: bold;
+        .icon-conversejs {
+            font-size: 0.88em;
+        }
     }
 }
 
@@ -378,3 +379,35 @@ body .brand-heading {
         padding: 0;
     }
 }
+
+@media screen and (max-width: 575px) {
+    body {
+      .brand-heading {
+        font-size: 3.75em;
+        }
+    }
+    #conversejs {
+        margin: 0;
+        width: 100%;
+        height: 100%;
+
+        .chatbox  {
+            .chat-body {
+                border-radius: $chatbox-border-radius;
+            }
+        }
+        .flyout {
+            border-radius: $chatbox-border-radius;
+        }
+    }
+}
+
+@media screen and (max-width: 767px) {
+    #conversejs {
+        &.login {
+            margin: 0;
+            width: 100%;
+            height: 100%;
+        }
+    }
+}

sass/inverse/_controlbox.scss

@@ -6,7 +6,7 @@
         margin: 0;
 
         #login-dialog {
-            border-radius: 5px;
+            border-radius: $chatbox-border-radius;
             .converse-form {
                 margin: 0;
                 padding: 3em 2em 3em;

sass/inverse/_core.scss

@@ -44,6 +44,12 @@ body {
     left: 0;
     right: 0;
 
+    &.login {
+        width: calc(100vw - 1em);
+        height: calc(100vh - 1em);
+        margin: 0.5em;
+    }
+
     form {
         &.pure-form.converse-form {
             margin: 1em;
@@ -67,10 +73,15 @@ body {
             }
         }
     }
+}
 
-    &.login {
-        width: calc(100vw - 1em);
-        height: calc(100vh - 1em);
-        margin: 0.5em;
+@media screen and (max-width: 767px) {
+    #conversejs.fullscreen {
+        &.login {
+            background-color: white;
+            margin: 0;
+            width: 100%;
+            height: 100%;
+        }
     }
 }