style memberlist

This commit is contained in:
Lisa Passing 2015-04-09 13:20:43 +02:00
parent 49b83f4d2b
commit 466b42b8c1
3 changed files with 68 additions and 57 deletions

View File

@ -53,6 +53,7 @@
@import "app/modules/flash";
@import "app/modules/media";
@import "app/modules/switch";
@import "app/modules/memberlist";
@import "app/layout";
@import "app/layouts/dashboard";

View File

@ -0,0 +1,26 @@
.memberlist
@include resetul
img
margin-right: 1em
border-radius: 50%
.memberlist-names
display: inline-block
vertical-align: middle
h2, p
margin: auto
font-weight: 400
font-size: $font-size-m
line-height: $line-height-m
h2
color: #4f4f4f
p
color: #838384
li
margin-bottom: 3rem
li[class*='column']:last-of-type
float: left

View File

@ -182,77 +182,61 @@
</ul>
</section>
<section role="tabpanel">
<ul class="members">
<li class="columns medium-6 large-4">
<div class="media">
<img src="//placehold.it/50x50" alt="" class="media-elem">
<div class="media-body">
<h2>Firstname Lastname</h2>
<p>githubhandle</p>
</div>
<ul class="memberlist">
<li class="columns small-6 large-4">
<img src="//placehold.it/50x50" alt="">
<div class="memberlist-names">
<h2>Firstname Lastname</h2>
<p>githubhandle</p>
</div>
</li>
<li class="columns medium-6 large-4">
<div class="media">
<img src="//placehold.it/50x50" alt="" class="media-elem">
<div class="media-body">
<h2>Firstname Lastname</h2>
<p>githubhandle</p>
</div>
<li class="columns small-6 large-4">
<img src="//placehold.it/50x50" alt="">
<div class="memberlist-names">
<h2>Firstname Lastname</h2>
<p>githubhandle</p>
</div>
</li>
<li class="columns medium-6 large-4">
<div class="media">
<img src="//placehold.it/50x50" alt="" class="media-elem">
<div class="media-body">
<h2>Firstname Lastname</h2>
<p>githubhandle</p>
</div>
<li class="columns small-6 large-4">
<img src="//placehold.it/50x50" alt="">
<div class="memberlist-names">
<h2>Firstname Lastname</h2>
<p>githubhandle</p>
</div>
</li>
<li class="columns medium-6 large-4">
<div class="media">
<img src="//placehold.it/50x50" alt="" class="media-elem">
<div class="media-body">
<h2>Firstname Lastname</h2>
<p>githubhandle</p>
</div>
<li class="columns small-6 large-4">
<img src="//placehold.it/50x50" alt="">
<div class="memberlist-names">
<h2>Firstname Lastname</h2>
<p>githubhandle</p>
</div>
</li>
<li class="columns medium-6 large-4">
<div class="media">
<img src="//placehold.it/50x50" alt="" class="media-elem">
<div class="media-body">
<h2>Firstname Lastname</h2>
<p>githubhandle</p>
</div>
<li class="columns small-6 large-4">
<img src="//placehold.it/50x50" alt="">
<div class="memberlist-names">
<h2>Firstname Lastname</h2>
<p>githubhandle</p>
</div>
</li>
<li class="columns medium-6 large-4">
<div class="media">
<img src="//placehold.it/50x50" alt="" class="media-elem">
<div class="media-body">
<h2>Firstname Lastname</h2>
<p>githubhandle</p>
</div>
<li class="columns small-6 large-4">
<img src="//placehold.it/50x50" alt="">
<div class="memberlist-names">
<h2>Firstname Lastname</h2>
<p>githubhandle</p>
</div>
</li>
<li class="columns medium-6 large-4">
<div class="media">
<img src="//placehold.it/50x50" alt="" class="media-elem">
<div class="media-body">
<h2>Firstname Lastname</h2>
<p>githubhandle</p>
</div>
<li class="columns small-6 large-4">
<img src="//placehold.it/50x50" alt="">
<div class="memberlist-names">
<h2>Firstname Lastname</h2>
<p>githubhandle</p>
</div>
</li>
<li class="columns medium-6 large-4">
<div class="media">
<img src="//placehold.it/50x50" alt="" class="media-elem">
<div class="media-body">
<h2>Firstname Lastname</h2>
<p>githubhandle</p>
</div>
<li class="columns small-6 large-4">
<img src="//placehold.it/50x50" alt="">
<div class="memberlist-names">
<h2>Firstname Lastname</h2>
<p>githubhandle</p>
</div>
</li>
</ul>