finish styling owner page elements

This commit is contained in:
Lisa Passing 2015-04-09 16:12:14 +02:00
parent ca483a2a78
commit 11daca52a1
3 changed files with 58 additions and 11 deletions

View File

@ -1,3 +1,32 @@
.owner-header
margin-bottom: 3rem
color: #969496
a
color: #969496
.owner-title
margin: .3em 0 .1em
font-size: 23px
font-weight: 400
.owner-handle
margin: 0
font-size: $font-size-sm
.icon
width: 1.2em
height: 1.3em
vertical-align: middle
img
border-radius: 50%
.sync-button
margin-top: .8rem
p, button
margin: 0
.sync-last
color: #969496
font-size: $font-size-sm
.owner-tiles .owner-tiles
@extend .repo-main @extend .repo-main
@include resetul @include resetul
@ -11,8 +40,9 @@
font-size: 20px font-size: 20px
.tile-additional .tile-additional
padding-left: 2em
font-size: $font-size-m; font-size: $font-size-m;
@media #{$medium-up}
padding-left: 2em
.tile-status .icon-status .tile-status .icon-status
margin-top: 1.3em margin-top: 1.3em
@ -24,6 +54,17 @@
width: .9em width: .9em
height: 1.2em height: 1.2em
.tile-single .tile-single,
.tile-single a
line-height: 3em line-height: 3em
color: #969496 color: #969496
.tabs--owner
padding : 0 $column-gutter/2
.tabnav--owner
margin-bottom: 1.5rem
@media #{$medium-up}
height: 2.2em
border-bottom: solid 2px $grey4

View File

@ -17,7 +17,7 @@
h2 h2
color: #4f4f4f color: #4f4f4f
p p
color: #838384 color: #969496
li li
margin-bottom: 3rem margin-bottom: 3rem

View File

@ -1,23 +1,29 @@
{{!-- {{outlet}} --}} {{!-- {{outlet}} --}}
<header class="row"> <header class="owner-header row">
<section class="columns large-4"> <section class="columns small-10 medium-5 large-4">
<div class="media"> <div class="media">
<div class="media-elem"> <div class="media-elem">
<img src="//placehold.it/120x120" alt=""> <img src="//placehold.it/120x120" alt="">
</div> </div>
<div class="media-body"> <div class="media-body">
<h1>Travis CI GmbH</h1> <h1 class="owner-title">Travis CI GmbH</h1>
<p><a href="//gtihub" title=""><span class="icon icon--github"></span> travis-pro</a></p> <p class="owner-handle"><a href="//gtihub" title=""><span class="icon icon--github-circle"></span> travis-pro</a></p>
{{sync-button}} <div class="sync-button">
<p>
<button {{action sync}} class="button">
<span class="icon icon-sync"></span>Sync account</button>
</p>
<p class="sync-last">last synced {{format-time user.syncedAt}}</p>
</div>
</div> </div>
</div> </div>
</section> </section>
</header> </header>
<div> <div class="tabs--owner">
<nav class="tabnav row" role="tablist"> <nav class="tabnav tabnav--owner row" role="tablist">
<ul class="tab tabs--owner"> <ul class="tab">
<li role="presentational"><a href="#" title="" role="tab">All Repositories</a></li> <li role="presentational"><a href="#" title="" role="tab">All Repositories</a></li>
<li role="presentational"><a href="#" title="" role="tab">Running Builds (2/5)</a></li> <li role="presentational"><a href="#" title="" role="tab">Running Builds (2/5)</a></li>
<li role="presentational"><a href="#" title="" role="tab">Members</a></li> <li role="presentational"><a href="#" title="" role="tab">Members</a></li>