get dropdown right

This commit is contained in:
Lisa Passing 2015-02-20 14:04:55 +01:00
parent 84259fc9d6
commit 597c31b375
3 changed files with 66 additions and 48 deletions

View File

@ -57,6 +57,7 @@ $button-border-color: #d4d4d4
.button--signin
display: inline-block
padding: 0.7em 2em 0.65em 0.6em
margin-right: 1em
color: $white
font-size: $font-size-small
line-height: 1

View File

@ -89,7 +89,7 @@ $db-gray: #C9C9C9
opacity: .9
.db-controls
position: relative
// position: relative
transform: translateY(24%)
line-height: 3em
border-left: 1px solid $db-gray
@ -109,6 +109,7 @@ $db-gray: #C9C9C9
.db-timeago
position: relative
padding-left: 2.2em
z-index: 30
.db-lock
position: absolute
@ -129,27 +130,43 @@ $db-gray: #C9C9C9
height: 100%
width: 4em
cursor: pointer
z-index: 30
.icon
width: 2em
height: 2em
left: 0
right: 0
.dropdown
@include resetul
.db-burger:hover ~ .dropdown
display: block
.dropdown
@include resetul
@extend %br-4px
position: absolute
padding: .5em
z-index: 90
width: 15em;
right: 0;
top: 4em;
border: 2px $dropdown-color solid;
background-color: $white
&:before
content: ""
width: 1.2em
height: 1.2em
display: block
position: absolute
z-index: 50
width: 10em;
right: 0;
top: 3em;
border: solid;
top: -0.7em;
right: 1.1em;
background-color: $white
background-color: #fff;
border-top: solid 2px $dropdown-color;
border-left: solid 2px $dropdown-color;
transform: rotate(45deg);
//display: none
// &:hover
// .dropdown
// display: block
display: none
@mixin colorDbelements($color)

View File

@ -87,14 +87,14 @@
<p class="db-branch column medium-3"><span class="icon icon-branch"></span>master</p>
<p class="db-commit column medium-3"><span class="icon icon-github"></span>394348a</p>
<p class="db-timeago column medium-3"><span class="icon icon-cal"></span>in queue</p>
<div class="db-burger">
<span class="icon icon-burger"></span>
<ul class="dropdown">
<li><a href="#" title="">Deactivate repository</a></li>
<li><a href="#" title="">Trigger a build</a></li>
</ul>
</div>
</div>
<div class="db-burger">
<span class="icon icon-burger"></span>
</div>
<ul class="dropdown">
<li><a href="#" title="">Deactivate repository</a></li>
<li><a href="#" title="">Trigger a build</a></li>
</ul>
</div>
<div class="db db--fail row">
@ -112,14 +112,14 @@
<p class="db-branch column medium-3"><span class="icon icon-branch"></span>master</p>
<p class="db-commit column medium-3"><span class="icon icon-github"></span>394348a</p>
<p class="db-timeago column medium-3"><span class="icon icon-cal"></span>25 minutes ago</p>
<div class="db-burger">
<span class="icon icon-burger"></span>
<ul class="dropdown">
<li><a href="#" title="">Deactivate repository</a></li>
<li><a href="#" title="">Trigger a build</a></li>
</ul>
</div>
</div>
<div class="db-burger">
<span class="icon icon-burger"></span>
</div>
<ul class="dropdown">
<li><a href="#" title="">Deactivate repository</a></li>
<li><a href="#" title="">Trigger a build</a></li>
</ul>
</div>
<div class="db db--error row">
@ -137,14 +137,14 @@
<p class="db-branch column medium-3"><span class="icon icon-branch"></span>master</p>
<p class="db-commit column medium-3"><span class="icon icon-github"></span>394348a</p>
<p class="db-timeago column medium-3"><span class="icon icon-cal"></span>1 hour ago</p>
<div class="db-burger">
<span class="icon icon-burger"></span>
<ul class="dropdown">
<li><a href="#" title="">Deactivate repository</a></li>
<li><a href="#" title="">Trigger a build</a></li>
</ul>
</div>
</div>
<div class="db-burger">
<span class="icon icon-burger"></span>
</div>
<ul class="dropdown">
<li><a href="#" title="">Deactivate repository</a></li>
<li><a href="#" title="">Trigger a build</a></li>
</ul>
</div>
<div class="db db--cancel row">
@ -162,14 +162,14 @@
<p class="db-branch column medium-3"><span class="icon icon-branch"></span>master</p>
<p class="db-commit column medium-3"><span class="icon icon-github"></span>394348a</p>
<p class="db-timeago column medium-3"><span class="icon icon-cal"></span>3 hours ago</p>
<div class="db-burger">
<span class="icon icon-burger"></span>
<ul class="dropdown">
<li><a href="#" title="">Deactivate repository</a></li>
<li><a href="#" title="">Trigger a build</a></li>
</ul>
</div>
</div>
<div class="db-burger">
<span class="icon icon-burger"></span>
</div>
<ul class="dropdown">
<li><a href="#" title="">Deactivate repository</a></li>
<li><a href="#" title="">Trigger a build</a></li>
</ul>
</div>
<div class="db db--pass row">
@ -187,14 +187,14 @@
<p class="db-branch column medium-3"><span class="icon icon-branch"></span>master</p>
<p class="db-commit column medium-3"><span class="icon icon-github"></span>394348a</p>
<p class="db-timeago column medium-3"><span class="icon icon-cal"></span>2 days ago</p>
<div class="db-burger">
<span class="icon icon-burger"></span>
<ul class="dropdown">
<li><a href="#" title="">Deactivate repository</a></li>
<li><a href="#" title="">Trigger a build</a></li>
</ul>
</div>
</div>
<div class="db-burger">
<span class="icon icon-burger"></span>
</div>
<ul class="dropdown">
<li><a href="#" title="">Deactivate repository</a></li>
<li><a href="#" title="">Trigger a build</a></li>
</ul>
</div>
</section>