input component, style sizing

master
f0x 5 years ago
parent d8b61a1ec4
commit deb1d7863f

@ -10,6 +10,7 @@ const Sidebar = require('./components/sidebar.js')
const Info = require('./components/info.js') const Info = require('./components/info.js')
const Chat = require('./components/chat.js') const Chat = require('./components/chat.js')
const Input = require('./components/input.js')
let backend = new Matrix("user", "pass", "http://localhost") let backend = new Matrix("user", "pass", "http://localhost")
@ -23,6 +24,7 @@ let App = create({
<div className="main"> <div className="main">
<Info /> <Info />
<Chat /> <Chat />
<Input />
</div> </div>
</> </>
) )

@ -13,6 +13,7 @@ html, body {
padding: 0; padding: 0;
background: $bg; background: $bg;
color: white; color: white;
font-family: monospace;
} }
body { body {
@ -79,20 +80,21 @@ body {
} }
.roomListItem { .roomListItem {
$height: 1.5rem;
#avatar { #avatar {
line-height: 2rem; line-height: $height;
height: 2rem; height: $height;
width: 2rem; width: $height;
vertical-align: middle; vertical-align: middle;
object-fit: cover; object-fit: cover;
} }
#name { #name {
height: 2rem; height: $height;
line-height: 2rem; line-height: $height;
font-size: 1.2rem; vertical-align: middle;
vertical-align: top;
padding-left: $spacing; padding-left: $spacing;
font-size: 1rem;
} }
} }
@ -108,4 +110,13 @@ body {
.input { .input {
background: $bg1; background: $bg1;
display: flex;
input {
background: transparent;
box-sizing: border-box;
flex: 1 1 auto;
padding: $spacing;
font-size: 1.2rem;
}
} }

Loading…
Cancel
Save