Split up CSS into more files
This commit is contained in:
parent
90ab412628
commit
453b993cfb
@ -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;
|
||||
|
43
src/plugins/chatboxviews/styles/chats.scss
Normal file
43
src/plugins/chatboxviews/styles/chats.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
@ -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;
|
||||
|
25
src/shared/chat/styles/unfurl.scss
Normal file
25
src/shared/chat/styles/unfurl.scss
Normal file
@ -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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
@ -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 {
|
||||
|
||||
|
@ -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) {
|
||||
|
43
src/shared/styles/badges.scss
Normal file
43
src/shared/styles/badges.scss
Normal file
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
88
src/shared/styles/buttons.scss
Normal file
88
src/shared/styles/buttons.scss
Normal file
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
@ -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;
|
@ -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";
|
||||
|
@ -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;
|
@ -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;
|
||||
}
|
Loading…
Reference in New Issue
Block a user