Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
24
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Start moving media queries to sass files

Browse Source
This commit is contained in:
JC Brand 2018-01-25 12:28:24 +01:00
parent 6914ec61dd
commit 97e3199508
6 changed files with 102 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
css/converse.css
View File

@ -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;

33
css/inverse.css
View File

@ -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; }

21
mockup/css/mockup.css
View File

@ -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;

47
sass/_core.scss
View File

@ -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%;
}
}
}

2
sass/inverse/_controlbox.scss
View File

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

19
sass/inverse/_core.scss
View File

@ -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%;
}
}
}