mti
/
discord-client
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

[scss.container] message input textarea layout

This commit is contained in:
xdrm-brackets 2018-03-22 22:41:30 +01:00
parent 6c08dba3c0
commit 328473a390
3 changed files with 52 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
webpack/scss/constants.scss
View File

@ -12,6 +12,7 @@ $dialog-bg: #2f3136;
$container-bg: #36393e; $container-bg: #36393e;
$header-bg: #36393f; $header-bg: #36393f;
$main: #7289da; $main: #7289da;
$input-bg: #36393f;
/* (1) Header specific /* (1) Header specific

60
webpack/scss/container.scss
View File

@ -57,17 +57,17 @@
/* (2) Container BODY */ /* (2) Container BODY */
& > div.body{ & > div.body{
display: block; display: flex;
position: absolute; position: absolute;
top: calc( #{$header-height} + #{$bb-offset} ); top: calc( #{$header-height} + #{$bb-offset} );
left: 0; left: 0;
width: 100%; width: 100%;
height: calc( 100% - #{$header-height} - #{$bb-offset} ); height: calc( 100% - #{$header-height} - #{$bb-offset} );
background-color: $container-bg; background-color: $input-bg;
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: flex-end;
align-items: stretch; align-items: stretch;
flex-wrap: nowrap; flex-wrap: nowrap;
@ -77,8 +77,18 @@
section.message-stack{ section.message-stack{
flex: 0 1 100%;
display: flex; display: flex;
height: calc( 100% - #{$input-height} ); position: relative;
height: calc( 100% - #{$input-height} - 1px );
// border-bottom: 1px solid #474a4f;
// box-shadow: 0 1px 1px 0 #474a4f;
box-shadow: calc( 100vw - #{$menu-width} - #{$dialog-width} - 1.2em) 0 0 1px #{$input-bg},
1.2em 0 0 1px #474a4f;
background-color: $container-bg;
flex-direction: column; flex-direction: column;
flex-wrap: nowrap; flex-wrap: nowrap;
@ -178,17 +188,47 @@
section.message-input{ section.message-input{
display: block; display: block;
height: $input-height; position: relative;
min-height: calc( #{$input-height} - 2*1em );
// height: 6em;
margin: 0 1em; margin: 1em 1.2em;
border-top: 1px solid #474a4f; border-radius: 5px / 5px;
box-shadow: -1em 1em 0 1em #36393f,
1em 1em 0 1em #36393f;
background-color: #36393f; background-color: #484b52;
& > textarea{
display: block;
position: relative;
left: 1.5em;
width: calc( 100% - 2*1.5em - 2*1.5em - 1em );
height: calc( 100% - 2*.4em - 2*1em );
margin: 1em 1.5em;
padding: .4em 0;
padding-left: 1em;
color: #ddd;
font-family: inherit;
border: none;
border-left: 1px solid #666;
box-sizing: content-box;
// reset
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
outline: none;
resize: none;
background-color: transparent;
overflow: hidden;
}
} }

1
webpack/vue/channel.vue
View File

@ -22,6 +22,7 @@
</section> </section>
<section class='message-input'> <section class='message-input'>
<textarea :placeholder='`Message #${gs.room.get("text").name}`'></textarea>
</section> </section>
</div> </div>