Split up CSS into more files

src/plugins/chatboxviews/index.js

@@ -10,6 +10,8 @@ import ChatBoxViews from './container.js';
 import { ViewWithAvatar } from 'shared/avatar.js';
 import { _converse, api, converse } from '@converse/headless/core';
 
+import './styles/chats.scss';
+
 
 function calculateViewportHeightUnit () {
     const vh = window.innerHeight * 0.01;

src/plugins/chatboxviews/styles/chats.scss

@@ -0,0 +1,43 @@
+#conversejs {
+    converse-chats {
+        &.converse-chatboxes {
+            z-index: 1031; // One more than bootstrap navbar
+            position: fixed;
+            bottom: 0;
+            right: 0;
+        }
+        &.converse-overlayed {
+            height: 3em;
+            > .row {
+                flex-direction: row-reverse;
+            }
+        }
+
+        &.converse-fullscreen,
+        &.converse-mobile {
+            flex-wrap: nowrap;
+            width: 100vw;
+        }
+        &.converse-embedded {
+            box-sizing: border-box;
+            *, *:before, *:after {
+                box-sizing: border-box;
+            }
+            bottom: auto;
+            height: 100%; // When embedded, it fills the containing element
+            position: relative;
+            right: auto;
+            width: 100%;
+
+            &.converse-chatboxes {
+                z-index: 1031; // One more than bootstrap navbar
+                position: inherit;
+                flex-wrap: nowrap;
+                bottom: auto;
+                height: 100%;
+                width: 100%;
+                margin-left: -15px;
+            }
+        }
+    }
+}

src/plugins/chatview/styles/_chatbox.scss

@@ -551,16 +551,6 @@
             font-size: var(--font-size-huge);
         }
 
-        &.converse-chatboxes {
-            z-index: 1031; // One more than bootstrap navbar
-            position: inherit;
-            flex-wrap: nowrap;
-            bottom: auto;
-            height: 100%;
-            width: 100%;
-            margin-left: -15px;
-        }
-
         .chatbox {
             .box-flyout {
                 bottom: 0;

src/shared/chat/styles/unfurl.scss

@@ -0,0 +1,25 @@
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "shared/styles/_mixins.scss";
+
+#conversejs {
+    @import "bootstrap/scss/card";
+
+    .message {
+        .card--unfurl {
+            margin: 1em 0;
+            @include media-breakpoint-down(sm) {
+                max-width: 95%;
+            }
+            @include media-breakpoint-up(md) {
+                max-width: 75%;
+            }
+            @include media-breakpoint-up(lg) {
+                max-width: 66%;
+            }
+            @include media-breakpoint-up(xl) {
+                max-width: 50%;
+            }
+        }
+    }
+}

src/shared/chat/unfurl.js

@@ -2,6 +2,8 @@ import { CustomElement } from 'components/element.js';
 import { _converse, api } from "@converse/headless/core";
 import tpl_unfurl from './templates/unfurl.js';
 
+import './styles/unfurl.scss';
+
 
 export default class MessageUnfurl extends CustomElement {
 

src/shared/styles/_core.scss

@@ -32,32 +32,6 @@
       overflow-y: none;
     }
 
-    converse-chats {
-      &.converse-overlayed {
-          height: 3em;
-          > .row {
-              flex-direction: row-reverse;
-          }
-      }
-
-      &.converse-fullscreen,
-      &.converse-mobile {
-          flex-wrap: nowrap;
-          width: 100vw;
-      }
-      &.converse-embedded {
-          box-sizing: border-box;
-          *, *:before, *:after {
-              box-sizing: border-box;
-          }
-          bottom: auto;
-          height: 100%; // When embedded, it fills the containing element
-          position: relative;
-          right: auto;
-          width: 100%;
-      }
-    }
-
     converse-brand-heading {
         text-align: center;
     }
@@ -157,13 +131,6 @@
         position: fixed;
     }
 
-    .converse-chatboxes {
-        z-index: 1031; // One more than bootstrap navbar
-        position: fixed;
-        bottom: 0;
-        right: 0;
-    }
-
     ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
         color: var(--subdued-color);
     }
@@ -304,25 +271,6 @@
         border-radius: 50%;
     }
 
-    .badge {
-        line-height: 1;
-        font-weight: normal;
-        font-size: 90%;
-    }
-
-    .btn {
-        font-weight: normal;
-        color: #fff;
-        .fa, .far, .fas {
-            color: #fff;
-            margin-right: 0.5em;
-
-            &.only-icon {
-              margin-right: 0;
-            }
-        }
-    }
-
     .no-text-select {
         -webkit-touch-callout: none;
         user-select: none;
@@ -491,104 +439,6 @@
     .nav-pills .show > .nav-link {
         background-color: var(--primary-color);
     }
-
-    .list-group-item.active {
-        background-color: var(--primary-color);
-        border-color: var(--primary-color-dark);
-    }
-
-    .badge {
-        text-shadow: none;
-        color: white;
-    }
-
-    .badge-light {
-        color: var(--text-color);
-    }
-
-    .btn-primary, .button-primary, .badge-primary {
-        background-color: var(--primary-color);
-        border-color: transparent;
-        &:focus, &:hover, &:active {
-            background-color: var(--primary-color-dark) !important;
-            border-color: transparent !important;
-        }
-    }
-
-    .btn--transparent {
-        background: transparent;
-        border: none;
-    }
-
-    .btn-circle {
-        width: 30px;
-        height: 30px;
-        text-align: center;
-        padding: 0.5em 0;
-        font-size: var(--font-size-small);
-        line-height: 1.428571429;
-        border-radius: 50%;
-    }
-
-    .btn {
-      &.fa {
-        color: white !important;
-      }
-    }
-
-    .badge-groupchat {
-        background-color: var(--chatroom-badge-color);
-        border-color: transparent;
-        &:hover {
-            background-color: var(--chatroom-badge-hover-color);
-            border-color: transparent;
-        }
-        &.active {
-            background-color: var(--chatroom-badge-hover-color) !important;
-            border-color: transparent !important;
-        }
-    }
-
-    .btn-info, .badge-info {
-        background-color: var(--primary-color);
-        border-color: var(--primary-color);
-        &:hover {
-            background-color: var(--primary-color-dark);
-            border-color: var(--primary-color-dark);
-        }
-    }
-
-    .button-cancel,
-    .btn-secondary, .badge-secondary {
-        color: white;
-        background-color: var(--secondary-color);
-        border-color: var(--secondary-color);
-        &:hover {
-            background-color: var(--secondary-color-dark);
-            border-color: var(--secondary-color-dark);
-        }
-    }
-
-    .btn-warning {
-        color: white;
-        background-color: var(--warning-color);
-        border-color: var(--warning-color);
-        &:hover {
-            color: white;
-            background-color: var(--warning-color-dark);
-            border-color: var(--warning-color-dark)
-        }
-    }
-
-    .btn-danger {
-        color: white;
-        background-color: var(--danger-color);
-        border-color: var(--danger-color) !important;
-        &:hover {
-            background-color: var(--danger-color-dark);
-            border-color: var(--danger-color-dark);
-        }
-    }
 }
 
 @media screen and (max-width: 575px) {

src/shared/styles/badges.scss

@@ -0,0 +1,43 @@
+#conversejs {
+    @import "bootstrap/scss/badge";
+
+    .badge {
+        color: white;
+        font-size: 90%;
+        font-weight: normal;
+        line-height: 1;
+        text-shadow: none;
+    }
+
+    .badge-light {
+        color: var(--text-color);
+    }
+
+    .badge-primary {
+        background-color: var(--primary-color);
+        border-color: transparent;
+        &:focus, &:hover, &:active {
+            background-color: var(--primary-color-dark) !important;
+            border-color: transparent !important;
+        }
+    }
+
+    .badge-info {
+        background-color: var(--primary-color);
+        border-color: var(--primary-color);
+        &:hover {
+            background-color: var(--primary-color-dark);
+            border-color: var(--primary-color-dark);
+        }
+    }
+
+    .badge-secondary {
+        color: white;
+        background-color: var(--secondary-color);
+        border-color: var(--secondary-color);
+        &:hover {
+            background-color: var(--secondary-color-dark);
+            border-color: var(--secondary-color-dark);
+        }
+    }
+}

src/shared/styles/buttons.scss

@@ -0,0 +1,88 @@
+#conversejs {
+    @import "bootstrap/scss/buttons";
+    @import "bootstrap/scss/button-group";
+
+    .btn {
+        font-weight: normal;
+        color: #fff;
+        .fa, .far, .fas {
+            color: #fff;
+            margin-right: 0.5em;
+
+            &.only-icon {
+              margin-right: 0;
+            }
+        }
+    }
+
+    .btn-primary {
+        background-color: var(--primary-color);
+        border-color: transparent;
+        &:focus, &:hover, &:active {
+            background-color: var(--primary-color-dark) !important;
+            border-color: transparent !important;
+        }
+    }
+
+    .btn--transparent {
+        background: transparent;
+        border: none;
+    }
+
+    .btn-circle {
+        width: 30px;
+        height: 30px;
+        text-align: center;
+        padding: 0.5em 0;
+        font-size: var(--font-size-small);
+        line-height: 1.428571429;
+        border-radius: 50%;
+    }
+
+    .btn {
+      &.fa {
+        color: white !important;
+      }
+    }
+
+    .btn-info, .badge-info {
+        background-color: var(--primary-color);
+        border-color: var(--primary-color);
+        &:hover {
+            background-color: var(--primary-color-dark);
+            border-color: var(--primary-color-dark);
+        }
+    }
+
+    .button-cancel,
+    .btn-secondary, .badge-secondary {
+        color: white;
+        background-color: var(--secondary-color);
+        border-color: var(--secondary-color);
+        &:hover {
+            background-color: var(--secondary-color-dark);
+            border-color: var(--secondary-color-dark);
+        }
+    }
+
+    .btn-warning {
+        color: white;
+        background-color: var(--warning-color);
+        border-color: var(--warning-color);
+        &:hover {
+            color: white;
+            background-color: var(--warning-color-dark);
+            border-color: var(--warning-color-dark)
+        }
+    }
+
+    .btn-danger {
+        color: white;
+        background-color: var(--danger-color);
+        border-color: var(--danger-color) !important;
+        &:hover {
+            background-color: var(--danger-color-dark);
+            border-color: var(--danger-color-dark);
+        }
+    }
+}

src/shared/styles/_forms.scss → src/shared/styles/forms.scss

@@ -1,4 +1,8 @@
 #conversejs {
+    @import "bootstrap/scss/forms";
+    @import "bootstrap/scss/input-group";
+    @import "bootstrap/scss/custom-forms";
+
     .btn--small {
         font-size: 80%;
         font-weight: normal;

src/shared/styles/index.scss

@@ -17,19 +17,11 @@
     @import "bootstrap/scss/type";
     @import "bootstrap/scss/images";
     @import "bootstrap/scss/grid";
-    @import "bootstrap/scss/forms";
-    @import "bootstrap/scss/buttons";
     @import "bootstrap/scss/transitions";
     @import "bootstrap/scss/dropdown";
-    @import "bootstrap/scss/button-group";
-    @import "bootstrap/scss/input-group";
-    @import "bootstrap/scss/custom-forms";
     @import "bootstrap/scss/nav";
-    @import "bootstrap/scss/card";
-    @import "bootstrap/scss/badge";
     @import "bootstrap/scss/alert";
     @import "bootstrap/scss/media";
-    @import "bootstrap/scss/list-group";
     @import "bootstrap/scss/close";
     @import "bootstrap/scss/tooltip";
     @import "bootstrap/scss/popover";
@@ -39,6 +31,8 @@
 @import "variables";
 
 @import "core";
+@import "buttons";
+@import "badges";
 @import "forms";
 @import "toolbar";
 @import "lists";

src/shared/styles/_lists.scss → src/shared/styles/lists.scss

@@ -1,4 +1,11 @@
 #conversejs {
+    @import "bootstrap/scss/list-group";
+
+    .list-group-item.active {
+        background-color: var(--primary-color);
+        border-color: var(--primary-color-dark);
+    }
+
     .list-container {
         text-align: left;
         padding: 0.3em 0;

src/shared/styles/_messages.scss → src/shared/styles/messages.scss

@@ -9,23 +9,6 @@
         }
     }
     .message {
-
-        .card--unfurl {
-            margin: 1em 0;
-            @include media-breakpoint-down(sm) {
-                max-width: 95%;
-            }
-            @include media-breakpoint-up(md) {
-                max-width: 75%;
-            }
-            @include media-breakpoint-up(lg) {
-                max-width: 66%;
-            }
-            @include media-breakpoint-up(xl) {
-                max-width: 50%;
-            }
-        }
-
         .show-msg-author-modal {
             color: var(--text-color) !important;
         }