Skip to content

Instantly share code, notes, and snippets.

/index.html

Created July 9, 2015 02:26
Show Gist options
  • Save anonymous/c6cffe988c3b3e9a05d6 to your computer and use it in GitHub Desktop.
Save anonymous/c6cffe988c3b3e9a05d6 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/payiqe
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
font-family: Helvetica, sans-serif;
font-size: 100%;
}
.app {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
}
.app .users-list {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 150px;
background: #e64a19;
color: rgba(255, 255, 255, 0.66);
padding: 10px 0;
}
.app .users-list .user-item {
padding: 0 10px;
color: inherit;
text-decoration: none;
display: block;
line-height: 26px;
}
.app .users-list .user-item:hover {
background: #ff5722;
}
.app .users-list .user-item:active {
color: #ffffff;
}
.app .messages-container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 150px;
}
.app .messages-container .messages-window {
position: absolute;
top: 0;
bottom: 35px;
left: 0;
right: 0;
padding: 10px;
}
.app .messages-container .messages-window .message {
margin: 0 0 10px 0;
line-height: 26px;
}
.app .messages-container .messages-window .message .message-author {
font-weight: 700;
}
.app .messages-container .message-input {
position: absolute;
height: 35px;
bottom: 0;
width: 100%;
background: #ffccbc;
}
.app .messages-container .message-input input {
height: 35px;
width: 100%;
line-height: 35px;
font-size: 100%;
padding: 0 10px;
}
</style>
</head>
<body>
<div class="app">
<div class="users-list">
<a href="#" class="user-item">alan</a>
<a href="#" class="user-item">Cade</a>
<a href="#" class="user-item">devgeeks</a>
<a href="#" class="user-item">MattE</a>
</div>
<div class="messages-container">
<div class="messages-window">
<div class="message">
<div class="message-author">
devgeeks
</div>
<div class="message-body">So test. Such wow. ¯\_(ツ)_/¯</div>
</div>
<div class="message">
<div class="message-author">
alan
</div>
<div class="message-body">This is a message test 💩</div>
</div>
<div class="message">
<div class="message-author">
devgeeks
</div>
<div class="message-body">Suuuuure it is...</div>
</div>
<div class="message">
<div class="message-author">
MattE
</div>
<div class="message-body">Hoobly hoobly</div>
</div>
<div class="message">
<div class="message-author">
devgeeks
</div>
<div class="message-body">*sighs*</div>
</div>
</div>
<div class="message-input">
<input type="text" placeholder="Say it, don't spray it..." />
</div>
</div>
</div>
<script id="jsbin-source-css" type="text/css">@darkPrimaryColor: #E64A19;
@primaryColor: #FF5722;
@lightPrimaryColor: #FFCCBC;
@textPrimaryColor: #FFFFFF;
@accentColor: #FFC107;
@primaryTextColor: #212121;
@secondaryTextColor: #727272;
@dividerColor: #B6B6B6;
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
font-family: Helvetica, sans-serif;
font-size: 100%;
}
.app {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
.users-list {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 150px;
background: @darkPrimaryColor;
color: fade(@textPrimaryColor, 66%);
padding: 10px 0;
.user-item {
padding: 0 10px;
color: inherit;
text-decoration: none;
display: block;
line-height: 26px;
&:hover {
background: @primaryColor;
}
&:active {
color: @textPrimaryColor;
}
}
}
.messages-container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 150px;
.messages-window {
position: absolute;
top: 0;
bottom: 35px;
left: 0;
right: 0;
padding: 10px;
.message {
margin: 0 0 10px 0;
line-height: 26px;
.message-author {
font-weight: 700;
}
.message-body {
}
}
}
.message-input {
position: absolute;
height: 35px;
bottom: 0;
width: 100%;
background: @lightPrimaryColor;
input {
height: 35px;
width: 100%;
line-height: 35px;
font-size: 100%;
padding: 0 10px;
}
}
}
}
</script>
</body>
</html>
Raw
jsbin.payiqe.css
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
font-family: Helvetica, sans-serif;
font-size: 100%;
}
.app {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
}
.app .users-list {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 150px;
background: #e64a19;
color: rgba(255, 255, 255, 0.66);
padding: 10px 0;
}
.app .users-list .user-item {
padding: 0 10px;
color: inherit;
text-decoration: none;
display: block;
line-height: 26px;
}
.app .users-list .user-item:hover {
background: #ff5722;
}
.app .users-list .user-item:active {
color: #ffffff;
}
.app .messages-container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 150px;
}
.app .messages-container .messages-window {
position: absolute;
top: 0;
bottom: 35px;
left: 0;
right: 0;
padding: 10px;
}
.app .messages-container .messages-window .message {
margin: 0 0 10px 0;
line-height: 26px;
}
.app .messages-container .messages-window .message .message-author {
font-weight: 700;
}
.app .messages-container .message-input {
position: absolute;
height: 35px;
bottom: 0;
width: 100%;
background: #ffccbc;
}
.app .messages-container .message-input input {
height: 35px;
width: 100%;
line-height: 35px;
font-size: 100%;
padding: 0 10px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment