Skip to content

Instantly share code, notes, and snippets.

@hadyfayed
Created January 28, 2014 04:28
Show Gist options
  • Save hadyfayed/8662267 to your computer and use it in GitHub Desktop.
Save hadyfayed/8662267 to your computer and use it in GitHub Desktop.
A Pen by Derek Wheelden.
<div class="main-container">
<h1>User Listing Panel</h1>
<p>It&rsquo;s over there on the right. It&rsquo;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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment