haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ref(chat): make wider

This commit is contained in:
Leonard Kim 2019-05-02 14:31:27 -07:00 committed by virtuacoplenny
parent 3d9606f6da
commit ec2826e0fc
2 changed files with 14 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
css/_chat.scss
View File

@ -1,6 +1,6 @@
#sideToolbarContainer { #sideToolbarContainer {
background-color: $newToolbarBackgroundColor; background-color: $newToolbarBackgroundColor;
display: flex;
/** /**
* Make the sidebar flush with the top of the toolbar. Take the size of * Make the sidebar flush with the top of the toolbar. Take the size of
* the toolbar and subtract from 100%. * the toolbar and subtract from 100%.
@ -43,7 +43,7 @@
font-size: 10pt; font-size: 10pt;
line-height: 20px; line-height: 20px;
overflow: auto; overflow: auto;
padding: 5px; padding: 16px;
text-align: left; text-align: left;
width: $sidebarWidth; width: $sidebarWidth;
word-wrap: break-word; word-wrap: break-word;
@ -189,9 +189,6 @@
.chatmessage { .chatmessage {
background-color: rgba(240, 243, 247, 0.15); background-color: rgba(240, 243, 247, 0.15);
width: 93%;
margin-left: 9px;
margin-right: auto;
border-radius: 0px 6px 6px 6px; border-radius: 0px 6px 6px 6px;
margin-top: 3px; margin-top: 3px;
color: white; color: white;
@ -248,14 +245,22 @@
.smileys-panel { .smileys-panel {
bottom: 100%; bottom: 100%;
box-sizing: border-box; box-sizing: border-box;
height: 0; height: auto;
max-height: 0;
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;
transition: height 0.3s;
width: $sidebarWidth; width: $sidebarWidth;
/**
* CSS transitions do not apply for auto dimensions. So to produce the css
* accordion effect for showing and hiding the smiley-panel, while allowing
* for variable panel, height, use a very large max-height and animate off
* of that.
*/
transition: max-height 0.3s;
&.show-smileys { &.show-smileys {
height: 146px; max-height: 500%;
} }
#smileysContainer { #smileysContainer {

2
css/_variables.scss
View File

@ -87,7 +87,7 @@ $modalTextColor: #333;
*/ */
$borderRadius: 4px; $borderRadius: 4px;
$defaultWatermarkLink: '../images/watermark.png'; $defaultWatermarkLink: '../images/watermark.png';
$sidebarWidth: 220px; $sidebarWidth: 375px;
$popoverMenuPadding: 13px; $popoverMenuPadding: 13px;
$happySoftwareBackground: transparent; $happySoftwareBackground: transparent;
$desktopAppDragBarHeight: 25px; $desktopAppDragBarHeight: 25px;