Move form specific styles to _forms.scss

css/converse.css

@@ -6890,20 +6890,6 @@ body.reset {
     color: #A8ABA1; }
   #conversejs ::placeholder {
     color: #A8ABA1; }
-  #conversejs .form-control::-webkit-input-placeholder {
-    /* Chrome/Opera/Safari */
-    color: #A8ABA1; }
-  #conversejs .form-control::-moz-placeholder {
-    /* Firefox 19+ */
-    color: #A8ABA1; }
-  #conversejs .form-control:-ms-input-placeholder {
-    /* IE 10+ */
-    color: #A8ABA1; }
-  #conversejs .form-control:-moz-placeholder {
-    /* Firefox 18- */
-    color: #A8ABA1; }
-  #conversejs .form-control::placeholder {
-    color: #A8ABA1; }
   #conversejs ::selection {
     background-color: #DCF9F6; }
   #conversejs ::-moz-selection {
@@ -7175,50 +7161,6 @@ body.reset {
   #conversejs .button-cancel {
     color: white;
     background-color: #666; }
-  #conversejs form .clear-input {
-    position: absolute;
-    right: 0.2em;
-    cursor: pointer;
-    font-size: 0.75rem; }
-  #conversejs form.converse-form {
-    background: white;
-    padding: 1em; }
-    #conversejs form.converse-form legend {
-      color: #666;
-      font-size: 125%;
-      margin-bottom: 1.5em; }
-    #conversejs form.converse-form input[type=checkbox] {
-      display: block; }
-    #conversejs form.converse-form select,
-    #conversejs form.converse-form input[type=password],
-    #conversejs form.converse-form input[type=number],
-    #conversejs form.converse-form input[type=text] {
-      min-width: 50%; }
-    #conversejs form.converse-form input[type=text],
-    #conversejs form.converse-form input[type=password],
-    #conversejs form.converse-form input[type=number],
-    #conversejs form.converse-form input[type=button],
-    #conversejs form.converse-form input[type=submit] {
-      padding: 0.5em; }
-    #conversejs form.converse-form input[type=button],
-    #conversejs form.converse-form input[type=submit] {
-      padding-left: 1em;
-      padding-right: 1em;
-      margin: 0.5em 0;
-      border: none; }
-    #conversejs form.converse-form input.error {
-      border: 1px solid #A53214;
-      color: #666; }
-    #conversejs form.converse-form .text-muted {
-      color: #A8ABA1 !important;
-      font-size: 85%;
-      padding-top: 0.5em; }
-      #conversejs form.converse-form .text-muted a {
-        color: #79a5ba; }
-      #conversejs form.converse-form .text-muted.error {
-        color: #A53214; }
-  #conversejs form.converse-centered-form {
-    text-align: center; }
   #conversejs .chat-textarea-chatbox-selected {
     border: 1px solid #578308;
     margin: 0; }
@@ -7258,6 +7200,82 @@ body.reset {
 #conversejs > .row {
   flex-direction: row-reverse; }
 
+#conversejs form .form-group {
+  margin-bottom: 2em; }
+#conversejs form .form-check-label {
+  margin-top: 0.3rem; }
+#conversejs form .form-control::-webkit-input-placeholder {
+  /* Chrome/Opera/Safari */
+  color: #A8ABA1; }
+#conversejs form .form-control::-moz-placeholder {
+  /* Firefox 19+ */
+  color: #A8ABA1; }
+#conversejs form .form-control:-ms-input-placeholder {
+  /* IE 10+ */
+  color: #A8ABA1; }
+#conversejs form .form-control:-moz-placeholder {
+  /* Firefox 18- */
+  color: #A8ABA1; }
+#conversejs form .form-control::placeholder {
+  color: #A8ABA1; }
+#conversejs form .clear-input {
+  position: absolute;
+  right: 0.2em;
+  cursor: pointer;
+  font-size: 0.75rem; }
+#conversejs form#converse-register legend, #conversejs form#converse-login legend {
+  width: 100%;
+  text-align: center;
+  margin: 0 auto 0.5em auto; }
+#conversejs form#converse-register fieldset.buttons, #conversejs form#converse-login fieldset.buttons {
+  text-align: center; }
+#conversejs form#converse-register .login-anon, #conversejs form#converse-login .login-anon {
+  height: auto;
+  white-space: normal; }
+#conversejs form#converse-register .save-submit, #conversejs form#converse-login .save-submit {
+  color: #3AA569; }
+#conversejs form#converse-register .form-url, #conversejs form#converse-login .form-url {
+  display: block;
+  font-weight: normal;
+  margin: 1em 0; }
+#conversejs form.converse-form {
+  background: white;
+  padding: 1em; }
+  #conversejs form.converse-form legend {
+    color: #666;
+    font-size: 125%;
+    margin-bottom: 1.5em; }
+  #conversejs form.converse-form select,
+  #conversejs form.converse-form input[type=password],
+  #conversejs form.converse-form input[type=number],
+  #conversejs form.converse-form input[type=text] {
+    min-width: 50%; }
+  #conversejs form.converse-form input[type=text],
+  #conversejs form.converse-form input[type=password],
+  #conversejs form.converse-form input[type=number],
+  #conversejs form.converse-form input[type=button],
+  #conversejs form.converse-form input[type=submit] {
+    padding: 0.5em; }
+  #conversejs form.converse-form input[type=button],
+  #conversejs form.converse-form input[type=submit] {
+    padding-left: 1em;
+    padding-right: 1em;
+    margin: 0.5em 0;
+    border: none; }
+  #conversejs form.converse-form input.error {
+    border: 1px solid #A53214;
+    color: #666; }
+  #conversejs form.converse-form .text-muted {
+    color: #A8ABA1 !important;
+    font-size: 85%;
+    padding-top: 0.5em; }
+    #conversejs form.converse-form .text-muted a {
+      color: #79a5ba; }
+    #conversejs form.converse-form .text-muted.error {
+      color: #A53214; }
+#conversejs form.converse-centered-form {
+  text-align: center; }
+
 #conversejs #user-profile-modal label {
   font-weight: bold; }
 
@@ -7788,25 +7806,6 @@ body.reset {
     color: #666; }
     #conversejs #controlbox .oauth-login .icon-social:before {
       font-size: 16px; }
-  #conversejs #controlbox #converse-register legend, #conversejs #controlbox #converse-login legend {
-    width: 100%;
-    text-align: center;
-    margin: 0 auto 0.5em auto; }
-  #conversejs #controlbox #converse-register label, #conversejs #controlbox #converse-login label {
-    margin-top: 2em; }
-  #conversejs #controlbox #converse-register fieldset.buttons, #conversejs #controlbox #converse-login fieldset.buttons {
-    text-align: center; }
-  #conversejs #controlbox #converse-register .login-anon, #conversejs #controlbox #converse-login .login-anon {
-    height: auto;
-    white-space: normal; }
-  #conversejs #controlbox #converse-register .save-submit, #conversejs #controlbox #converse-login .save-submit {
-    color: #3AA569; }
-  #conversejs #controlbox #converse-register input, #conversejs #controlbox #converse-login input {
-    width: 100%; }
-  #conversejs #controlbox #converse-register .form-url, #conversejs #controlbox #converse-login .form-url {
-    display: block;
-    font-weight: normal;
-    margin: 1em 0; }
   #conversejs #controlbox .controlbox-pane .userinfo {
     padding-bottom: 1em; }
     #conversejs #controlbox .controlbox-pane .userinfo .username {
@@ -7817,12 +7816,12 @@ body.reset {
       margin-bottom: 0.75em; }
   #conversejs #controlbox #chatrooms {
     padding: 0; }
-    #conversejs #controlbox #chatrooms form.add-chatroom {
+    #conversejs #controlbox #chatrooms .add-chatroom {
       margin: 0;
       padding: 0; }
-      #conversejs #controlbox #chatrooms form.add-chatroom input[type=button],
-      #conversejs #controlbox #chatrooms form.add-chatroom input[type=submit],
-      #conversejs #controlbox #chatrooms form.add-chatroom input[type=text] {
+      #conversejs #controlbox #chatrooms .add-chatroom input[type=button],
+      #conversejs #controlbox #chatrooms .add-chatroom input[type=submit],
+      #conversejs #controlbox #chatrooms .add-chatroom input[type=text] {
         width: 100%; }
   #conversejs #controlbox .controlbox-section {
     margin: 1em 0 0 0; }

css/inverse.css

@@ -6890,20 +6890,6 @@ body.reset {
     color: #A8ABA1; }
   #conversejs ::placeholder {
     color: #A8ABA1; }
-  #conversejs .form-control::-webkit-input-placeholder {
-    /* Chrome/Opera/Safari */
-    color: #A8ABA1; }
-  #conversejs .form-control::-moz-placeholder {
-    /* Firefox 19+ */
-    color: #A8ABA1; }
-  #conversejs .form-control:-ms-input-placeholder {
-    /* IE 10+ */
-    color: #A8ABA1; }
-  #conversejs .form-control:-moz-placeholder {
-    /* Firefox 18- */
-    color: #A8ABA1; }
-  #conversejs .form-control::placeholder {
-    color: #A8ABA1; }
   #conversejs ::selection {
     background-color: #DCF9F6; }
   #conversejs ::-moz-selection {
@@ -7175,50 +7161,6 @@ body.reset {
   #conversejs .button-cancel {
     color: white;
     background-color: #666; }
-  #conversejs form .clear-input {
-    position: absolute;
-    right: 0.2em;
-    cursor: pointer;
-    font-size: 0.75rem; }
-  #conversejs form.converse-form {
-    background: white;
-    padding: 1em; }
-    #conversejs form.converse-form legend {
-      color: #666;
-      font-size: 125%;
-      margin-bottom: 1.5em; }
-    #conversejs form.converse-form input[type=checkbox] {
-      display: block; }
-    #conversejs form.converse-form select,
-    #conversejs form.converse-form input[type=password],
-    #conversejs form.converse-form input[type=number],
-    #conversejs form.converse-form input[type=text] {
-      min-width: 50%; }
-    #conversejs form.converse-form input[type=text],
-    #conversejs form.converse-form input[type=password],
-    #conversejs form.converse-form input[type=number],
-    #conversejs form.converse-form input[type=button],
-    #conversejs form.converse-form input[type=submit] {
-      padding: 0.5em; }
-    #conversejs form.converse-form input[type=button],
-    #conversejs form.converse-form input[type=submit] {
-      padding-left: 1em;
-      padding-right: 1em;
-      margin: 0.5em 0;
-      border: none; }
-    #conversejs form.converse-form input.error {
-      border: 1px solid #A53214;
-      color: #666; }
-    #conversejs form.converse-form .text-muted {
-      color: #A8ABA1 !important;
-      font-size: 85%;
-      padding-top: 0.5em; }
-      #conversejs form.converse-form .text-muted a {
-        color: #79a5ba; }
-      #conversejs form.converse-form .text-muted.error {
-        color: #A53214; }
-  #conversejs form.converse-centered-form {
-    text-align: center; }
   #conversejs .chat-textarea-chatbox-selected {
     border: 1px solid #578308;
     margin: 0; }
@@ -7299,15 +7241,82 @@ body {
 #conversejs.fullscreen .converse-chatboxes {
   width: 100vw;
   right: 15px; }
-#conversejs.fullscreen form.converse-form input[type=checkbox] {
-  margin-left: 1em;
-  display: inline;
+
+#conversejs form .form-group {
   margin-bottom: 2em; }
-#conversejs.fullscreen form.converse-form input[type=button],
-#conversejs.fullscreen form.converse-form input[type=submit] {
-  padding-left: 1em;
-  padding-right: 1em;
-  margin-right: 1em; }
+#conversejs form .form-check-label {
+  margin-top: 0.3rem; }
+#conversejs form .form-control::-webkit-input-placeholder {
+  /* Chrome/Opera/Safari */
+  color: #A8ABA1; }
+#conversejs form .form-control::-moz-placeholder {
+  /* Firefox 19+ */
+  color: #A8ABA1; }
+#conversejs form .form-control:-ms-input-placeholder {
+  /* IE 10+ */
+  color: #A8ABA1; }
+#conversejs form .form-control:-moz-placeholder {
+  /* Firefox 18- */
+  color: #A8ABA1; }
+#conversejs form .form-control::placeholder {
+  color: #A8ABA1; }
+#conversejs form .clear-input {
+  position: absolute;
+  right: 0.2em;
+  cursor: pointer;
+  font-size: 0.75rem; }
+#conversejs form#converse-register legend, #conversejs form#converse-login legend {
+  width: 100%;
+  text-align: center;
+  margin: 0 auto 0.5em auto; }
+#conversejs form#converse-register fieldset.buttons, #conversejs form#converse-login fieldset.buttons {
+  text-align: center; }
+#conversejs form#converse-register .login-anon, #conversejs form#converse-login .login-anon {
+  height: auto;
+  white-space: normal; }
+#conversejs form#converse-register .save-submit, #conversejs form#converse-login .save-submit {
+  color: #3AA569; }
+#conversejs form#converse-register .form-url, #conversejs form#converse-login .form-url {
+  display: block;
+  font-weight: normal;
+  margin: 1em 0; }
+#conversejs form.converse-form {
+  background: white;
+  padding: 1em; }
+  #conversejs form.converse-form legend {
+    color: #666;
+    font-size: 125%;
+    margin-bottom: 1.5em; }
+  #conversejs form.converse-form select,
+  #conversejs form.converse-form input[type=password],
+  #conversejs form.converse-form input[type=number],
+  #conversejs form.converse-form input[type=text] {
+    min-width: 50%; }
+  #conversejs form.converse-form input[type=text],
+  #conversejs form.converse-form input[type=password],
+  #conversejs form.converse-form input[type=number],
+  #conversejs form.converse-form input[type=button],
+  #conversejs form.converse-form input[type=submit] {
+    padding: 0.5em; }
+  #conversejs form.converse-form input[type=button],
+  #conversejs form.converse-form input[type=submit] {
+    padding-left: 1em;
+    padding-right: 1em;
+    margin: 0.5em 0;
+    border: none; }
+  #conversejs form.converse-form input.error {
+    border: 1px solid #A53214;
+    color: #666; }
+  #conversejs form.converse-form .text-muted {
+    color: #A8ABA1 !important;
+    font-size: 85%;
+    padding-top: 0.5em; }
+    #conversejs form.converse-form .text-muted a {
+      color: #79a5ba; }
+    #conversejs form.converse-form .text-muted.error {
+      color: #A53214; }
+#conversejs form.converse-centered-form {
+  text-align: center; }
 
 #conversejs #user-profile-modal label {
   font-weight: bold; }
@@ -7858,25 +7867,6 @@ body {
     color: #666; }
     #conversejs #controlbox .oauth-login .icon-social:before {
       font-size: 18px; }
-  #conversejs #controlbox #converse-register legend, #conversejs #controlbox #converse-login legend {
-    width: 100%;
-    text-align: center;
-    margin: 0 auto 0.5em auto; }
-  #conversejs #controlbox #converse-register label, #conversejs #controlbox #converse-login label {
-    margin-top: 2em; }
-  #conversejs #controlbox #converse-register fieldset.buttons, #conversejs #controlbox #converse-login fieldset.buttons {
-    text-align: center; }
-  #conversejs #controlbox #converse-register .login-anon, #conversejs #controlbox #converse-login .login-anon {
-    height: auto;
-    white-space: normal; }
-  #conversejs #controlbox #converse-register .save-submit, #conversejs #controlbox #converse-login .save-submit {
-    color: #3AA569; }
-  #conversejs #controlbox #converse-register input, #conversejs #controlbox #converse-login input {
-    width: 100%; }
-  #conversejs #controlbox #converse-register .form-url, #conversejs #controlbox #converse-login .form-url {
-    display: block;
-    font-weight: normal;
-    margin: 1em 0; }
   #conversejs #controlbox .controlbox-pane .userinfo {
     padding-bottom: 1em; }
     #conversejs #controlbox .controlbox-pane .userinfo .username {
@@ -7887,12 +7877,12 @@ body {
       margin-bottom: 0.75em; }
   #conversejs #controlbox #chatrooms {
     padding: 0; }
-    #conversejs #controlbox #chatrooms form.add-chatroom {
+    #conversejs #controlbox #chatrooms .add-chatroom {
       margin: 0;
       padding: 0; }
-      #conversejs #controlbox #chatrooms form.add-chatroom input[type=button],
-      #conversejs #controlbox #chatrooms form.add-chatroom input[type=submit],
-      #conversejs #controlbox #chatrooms form.add-chatroom input[type=text] {
+      #conversejs #controlbox #chatrooms .add-chatroom input[type=button],
+      #conversejs #controlbox #chatrooms .add-chatroom input[type=submit],
+      #conversejs #controlbox #chatrooms .add-chatroom input[type=text] {
         width: 100%; }
   #conversejs #controlbox .controlbox-section {
     margin: 1em 0 0 0; }

sass/_controlbox.scss

@@ -181,35 +181,6 @@
             }
         }
 
-        #converse-register, #converse-login {
-            legend {
-                width: 100%;
-                text-align: center;
-                margin: 0 auto 0.5em auto;
-            }
-            label {
-                margin-top: 2em;
-            }
-            fieldset.buttons {
-                text-align: center;
-            }
-            .login-anon {
-                height: auto;
-                white-space: normal;
-            }
-            .save-submit {
-                color: $save-button-color;
-            }
-            input {
-                width: 100%;
-            }
-            .form-url {
-                display: block;
-                font-weight: normal;
-                margin: 1em 0;
-            }
-
-        }
 
         .controlbox-pane {
             .userinfo {
@@ -229,7 +200,7 @@
         #chatrooms {
             padding: 0;
 
-            form.add-chatroom {
+            .add-chatroom {
                 input[type=button],
                 input[type=submit],
                 input[type=text] {

sass/_core.scss

@@ -89,23 +89,6 @@ body.reset {
     ::placeholder {
         color: $subdued-color;
     }
-    .form-control {
-        &::-webkit-input-placeholder { /* Chrome/Opera/Safari */
-            color: $subdued-color;
-        }
-        &::-moz-placeholder { /* Firefox 19+ */
-            color: $subdued-color;
-        }
-        &:-ms-input-placeholder { /* IE 10+ */
-            color: $subdued-color;
-        }
-        &:-moz-placeholder { /* Firefox 18- */
-            color: $subdued-color;
-        }
-        &::placeholder {
-            color: $subdued-color;
-        }
-    }
 
     ::selection {
         background-color: $highlight-color;
@@ -402,66 +385,6 @@ body.reset {
         background-color: $text-color;
     }
 
-    form {
-        .clear-input {
-            position: absolute;
-            right: 0.2em;
-            cursor: pointer;
-            font-size: 0.75rem;
-        }
-
-        &.converse-form {
-            background: white;
-            padding: 1em;
-            legend {
-                color: $text-color;
-                font-size: 125%;
-                margin-bottom: 1.5em;
-            }
-            input[type=checkbox] {
-                display: block;
-            }
-            select,
-            input[type=password],
-            input[type=number],
-            input[type=text] {
-                min-width: 50%;
-            }
-            input[type=text],
-            input[type=password],
-            input[type=number],
-            input[type=button],
-            input[type=submit] {
-                padding: 0.5em;
-            }
-            input[type=button],
-            input[type=submit] {
-                padding-left: 1em;
-                padding-right: 1em;
-                margin: 0.5em 0;
-                border: none;
-            }
-            input.error {
-                border: 1px solid $error-color;
-                color: $text-color;
-            }
-            .text-muted {
-                color: $subdued-color !important;
-                font-size: 85%;
-                padding-top: 0.5em;
-                a {
-                    color: lighten($link-color, 10%);
-                }
-                &.error {
-                    color: $error-color;
-                }
-            }
-        }
-        &.converse-centered-form {
-            text-align: center;
-        }
-    }
-
     .chat-textarea-chatbox-selected {
         border: 1px solid #578308;
         margin: 0;

sass/_forms.scss

@@ -0,0 +1,110 @@
+#conversejs {
+    form {
+        .form-group {
+            margin-bottom: 2em;
+        }
+
+        .form-check-label {
+            margin-top: $form-check-input-margin-y;
+        }
+
+        .form-control {
+            &::-webkit-input-placeholder { /* Chrome/Opera/Safari */
+                color: $subdued-color;
+            }
+            &::-moz-placeholder { /* Firefox 19+ */
+                color: $subdued-color;
+            }
+            &:-ms-input-placeholder { /* IE 10+ */
+                color: $subdued-color;
+            }
+            &:-moz-placeholder { /* Firefox 18- */
+                color: $subdued-color;
+            }
+            &::placeholder {
+                color: $subdued-color;
+            }
+        }
+
+        .clear-input {
+            position: absolute;
+            right: 0.2em;
+            cursor: pointer;
+            font-size: 0.75rem;
+        }
+
+        &#converse-register, 
+        &#converse-login {
+            legend {
+                width: 100%;
+                text-align: center;
+                margin: 0 auto 0.5em auto;
+            }
+            fieldset.buttons {
+                text-align: center;
+            }
+            .login-anon {
+                height: auto;
+                white-space: normal;
+            }
+            .save-submit {
+                color: $save-button-color;
+            }
+            .form-url {
+                display: block;
+                font-weight: normal;
+                margin: 1em 0;
+            }
+
+        }
+
+
+        &.converse-form {
+            background: white;
+            padding: 1em;
+            legend {
+                color: $text-color;
+                font-size: 125%;
+                margin-bottom: 1.5em;
+            }
+            select,
+            input[type=password],
+            input[type=number],
+            input[type=text] {
+                min-width: 50%;
+            }
+            input[type=text],
+            input[type=password],
+            input[type=number],
+            input[type=button],
+            input[type=submit] {
+                padding: 0.5em;
+            }
+            input[type=button],
+            input[type=submit] {
+                padding-left: 1em;
+                padding-right: 1em;
+                margin: 0.5em 0;
+                border: none;
+            }
+            input.error {
+                border: 1px solid $error-color;
+                color: $text-color;
+            }
+            .text-muted {
+                color: $subdued-color !important;
+                font-size: 85%;
+                padding-top: 0.5em;
+                a {
+                    color: lighten($link-color, 10%);
+                }
+                &.error {
+                    color: $error-color;
+                }
+            }
+        }
+        &.converse-centered-form {
+            text-align: center;
+        }
+    }
+}

sass/converse.scss

@@ -41,6 +41,7 @@
 }
 @import "core";
 @import "converse/core";
+@import "forms";
 @import "profile";
 @import "chatbox";
 @import "converse/chatbox";

sass/inverse.scss

@@ -40,6 +40,7 @@
 }
 @import "core";
 @import "inverse/core";
+@import "forms";
 @import "profile";
 @import "chatbox";
 @import "inverse/chatbox";

sass/inverse/_core.scss

@@ -35,25 +35,8 @@ body {
 }
 
 #conversejs.fullscreen {
-
     .converse-chatboxes {
         width: 100vw;
         right: 15px; // Hack due to padding added by bootstrap
     }
-
-    form {
-        &.converse-form {
-            input[type=checkbox] {
-                margin-left: 1em;
-                display: inline;
-                margin-bottom: 2em;
-            }
-            input[type=button],
-            input[type=submit] {
-                padding-left: 1em;
-                padding-right: 1em;
-                margin-right: 1em;
-            }
-        }
-    }
 }