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/flash";
@import "app/modules/media"; @import "app/modules/media";
@import "app/modules/switch"; @import "app/modules/switch";
@import "app/modules/memberlist";
@import "app/layout"; @import "app/layout";
@import "app/layouts/dashboard"; @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> </ul>
</section> </section>
<section role="tabpanel"> <section role="tabpanel">
<ul class="members"> <ul class="memberlist">
<li class="columns medium-6 large-4"> <li class="columns small-6 large-4">
<div class="media"> <img src="//placehold.it/50x50" alt="">
<img src="//placehold.it/50x50" alt="" class="media-elem"> <div class="memberlist-names">
<div class="media-body"> <h2>Firstname Lastname</h2>
<h2>Firstname Lastname</h2> <p>githubhandle</p>
<p>githubhandle</p>
</div>
</div> </div>
</li> </li>
<li class="columns medium-6 large-4"> <li class="columns small-6 large-4">
<div class="media"> <img src="//placehold.it/50x50" alt="">
<img src="//placehold.it/50x50" alt="" class="media-elem"> <div class="memberlist-names">
<div class="media-body"> <h2>Firstname Lastname</h2>
<h2>Firstname Lastname</h2> <p>githubhandle</p>
<p>githubhandle</p>
</div>
</div> </div>
</li> </li>
<li class="columns medium-6 large-4"> <li class="columns small-6 large-4">
<div class="media"> <img src="//placehold.it/50x50" alt="">
<img src="//placehold.it/50x50" alt="" class="media-elem"> <div class="memberlist-names">
<div class="media-body"> <h2>Firstname Lastname</h2>
<h2>Firstname Lastname</h2> <p>githubhandle</p>
<p>githubhandle</p>
</div>
</div> </div>
</li> </li>
<li class="columns medium-6 large-4"> <li class="columns small-6 large-4">
<div class="media"> <img src="//placehold.it/50x50" alt="">
<img src="//placehold.it/50x50" alt="" class="media-elem"> <div class="memberlist-names">
<div class="media-body"> <h2>Firstname Lastname</h2>
<h2>Firstname Lastname</h2> <p>githubhandle</p>
<p>githubhandle</p>
</div>
</div> </div>
</li> </li>
<li class="columns medium-6 large-4"> <li class="columns small-6 large-4">
<div class="media"> <img src="//placehold.it/50x50" alt="">
<img src="//placehold.it/50x50" alt="" class="media-elem"> <div class="memberlist-names">
<div class="media-body"> <h2>Firstname Lastname</h2>
<h2>Firstname Lastname</h2> <p>githubhandle</p>
<p>githubhandle</p>
</div>
</div> </div>
</li> </li>
<li class="columns medium-6 large-4"> <li class="columns small-6 large-4">
<div class="media"> <img src="//placehold.it/50x50" alt="">
<img src="//placehold.it/50x50" alt="" class="media-elem"> <div class="memberlist-names">
<div class="media-body"> <h2>Firstname Lastname</h2>
<h2>Firstname Lastname</h2> <p>githubhandle</p>
<p>githubhandle</p>
</div>
</div> </div>
</li> </li>
<li class="columns medium-6 large-4"> <li class="columns small-6 large-4">
<div class="media"> <img src="//placehold.it/50x50" alt="">
<img src="//placehold.it/50x50" alt="" class="media-elem"> <div class="memberlist-names">
<div class="media-body"> <h2>Firstname Lastname</h2>
<h2>Firstname Lastname</h2> <p>githubhandle</p>
<p>githubhandle</p>
</div>
</div> </div>
</li> </li>
<li class="columns medium-6 large-4"> <li class="columns small-6 large-4">
<div class="media"> <img src="//placehold.it/50x50" alt="">
<img src="//placehold.it/50x50" alt="" class="media-elem"> <div class="memberlist-names">
<div class="media-body"> <h2>Firstname Lastname</h2>
<h2>Firstname Lastname</h2> <p>githubhandle</p>
<p>githubhandle</p>
</div>
</div> </div>
</li> </li>
</ul> </ul>