[scss.container] message input textarea layout
This commit is contained in:
parent
6c08dba3c0
commit
328473a390
|
@ -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
|
||||||
|
|
|
@ -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;
|
||||||
|
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue