A little design for a web chat app I'm working on.
A Pen by Derek Wheelden on CodePen.
<div class="main-container"> | |
<h1>User Listing Panel</h1> | |
<p>It’s over there on the right. It’s responsive too.</p> | |
</div> | |
<div class="user-container"> | |
<i class="fa fa-users"></i> | |
<h3>Connected</h3> | |
<ul class="users"> | |
<li class="is-active"> | |
<div class="users__user--status"><i class="fa fa-circle"></i></div> | |
<div class="users__user--name">Sherriff B.</div> | |
<div class="users__user--interactions"> | |
<i class="fa fa-envelope"></i> | |
<i class="fa fa-comment"></i> | |
</div> | |
</li> | |
<li class="is-active"> | |
<div class="users__user--status"><i class="fa fa-circle"></i></div> | |
<div class="users__user--name">Waco K.</div> | |
<div class="users__user--interactions"> | |
<i class="fa fa-envelope"></i> | |
<i class="fa fa-comment"></i> | |
</div> | |
</li> | |
<li class="is-current-user is-idle"> | |
<div class="users__user--status"><i class="fa fa-circle"></i></div> | |
<div class="users__user--name">Hedley L.</div> | |
<div class="users__user--interactions"> | |
<i class="fa fa-envelope"></i> | |
<i class="fa fa-comment"></i> | |
</div> | |
</li> | |
<li class="is-active"> | |
<div class="users__user--status"><i class="fa fa-circle"></i></div> | |
<div class="users__user--name">Lili V.S.</div> | |
<div class="users__user--interactions"> | |
<i class="fa fa-envelope"></i> | |
<i class="fa fa-comment"></i> | |
</div> | |
</li> | |
<li class="is-offline"> | |
<div class="users__user--status"><i class="fa fa-circle"></i></div> | |
<div class="users__user--name">William J.L.P.</div> | |
<div class="users__user--interactions"> | |
<i class="fa fa-envelope"></i> | |
<i class="fa fa-comment"></i> | |
</div> | |
</li> | |
</ul> | |
</div> |
@import "compass"; | |
$base-color: hsl(200, 100, 40); | |
$breakpoint : 'max-width: 1300px'; | |
.main-container { | |
width: 70%; | |
height: 100%; | |
background: $base-color; | |
float: left; | |
} | |
.user-container { | |
width: 30%; | |
height: 100%; | |
background: desaturate(darken($base-color, 15%), 40%); | |
color: white; | |
float: right; | |
overflow-y: auto; | |
cursor: default; | |
> i { padding: 0.5em; visibility: hidden; } | |
} | |
@media ($breakpoint) { | |
.main-container { | |
width: 100%; | |
float: none; | |
} | |
.user-container { | |
position: absolute; | |
top: 0; | |
right: 0; | |
width: 25em; | |
float: none; | |
transition: transform 0.5s; | |
transform: translateX(calc(100% - 2em)); | |
&:hover { transform: translateX(0); } | |
> i { visibility: visible; } | |
} | |
} | |
.users { | |
margin: 0; | |
padding: 0; | |
list-style: none; | |
line-height: 3; | |
li { | |
padding: 0 3em; | |
@extend .cf; | |
} | |
li:nth-child(odd) { | |
background: desaturate(darken($base-color, 10%), 40%); | |
} | |
li.is-current-user { | |
color: lighten($base-color, 30%); | |
} | |
li.is-active { | |
.users__user--status i { | |
color: hsl(100, 80, 60); | |
} | |
} | |
li.is-idle { | |
.users__user--status i { | |
color: hsl(50, 80, 60); | |
} | |
} | |
li.is-offline { | |
.users__user--status i { | |
color: hsl(0, 80, 60); | |
} | |
.users__user--name { opacity: 0.5; } | |
.users__user--interactions i.fa-comment { | |
opacity: 0.2; | |
cursor: default; | |
&:hover:after { display: none; } | |
} | |
} | |
} | |
.users__user--status { | |
padding-right: 1em; | |
font-size: 0.7em; | |
line-height: 4.3; | |
float: left; | |
} | |
.users__user--name { | |
float: left; | |
} | |
.users__user--interactions { | |
float: right; | |
i { | |
position: relative; | |
margin-left: 0.5em; | |
padding: 0.5em; | |
cursor: pointer; | |
} | |
li.is-current-user & { visibility: hidden; } | |
} | |
i.fa-envelope:hover:after, i.fa-comment:hover:after { | |
content: 'Send Email'; | |
display: inline-block; | |
position: absolute; | |
top: 50%; | |
right: 100%; | |
padding: 0.5em; | |
border-radius: 0.25em; | |
background: white; | |
font-size: 0.7em; | |
font-family: 'Lato'; | |
font-weight: 700; | |
text-transform: lowercase; | |
white-space: nowrap; | |
color: darken($base-color, 20%); | |
z-index: 100; | |
transform: translateY(-50%); | |
} | |
i.fa-comment:hover:after { | |
content: 'Private Message'; | |
} | |
i.disabled { | |
opacity: 0.3; | |
cursor: default; | |
&:hover:after { display: none; } | |
} | |
/** PAGE STYLES **/ | |
@import url(http://fonts.googleapis.com/css?family=Lato:300,700|Oswald); | |
@import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css); | |
* { box-sizing: border-box; } | |
html, body { width: 100%; height: 100%; } | |
html { font-size: 62.5%; } | |
body { | |
font-family: 'Lato', sans-serif; | |
font-size: 2em; | |
line-height: 1.5; | |
font-weight: 300; | |
overflow-x: hidden; | |
-webkit-backface-visibility: hidden; | |
} | |
p { color: white; text-align: center; } | |
h1 { | |
margin: 0; | |
padding: 0.75em 0 0; | |
font-family: 'Oswald', sans-serif; | |
font-size: 4em; | |
text-transform: uppercase; | |
text-align: center; | |
color: white; | |
} | |
h3 { | |
margin: 0 0 0.5em; | |
font-size: 1.5em; | |
font-weight: 300; | |
color: lighten($base-color, 20%); | |
.user-container & { padding: 1em 2em 0; } | |
} | |
.cf:before, | |
.cf:after { | |
content: " "; /* 1 */ | |
display: table; /* 2 */ | |
} | |
.cf:after { | |
clear: both; | |
} | |
.cf { | |
*zoom: 1; | |
} |
A little design for a web chat app I'm working on.
A Pen by Derek Wheelden on CodePen.