add delete button tooltips

This commit is contained in:
Lisa Passing 2015-07-02 11:52:10 +02:00
parent 0d4e3a029a
commit 413a326022

View File

@ -89,12 +89,15 @@ $input-main-height: 30px
.env-var-name .env-var-name
display: inline-block display: inline-block
vertical-align: middle
@media #{$medium-up}
width: grid-calc(6, 12) width: grid-calc(6, 12)
vertical-align: middle
.env-var-value .env-var-value
display: inline-block display: inline-block
width: grid-calc(4, 12)
@media #{$medium-up}
width: grid-calc(3, 12)
input input
display: inline-block display: inline-block
width: 100% width: 100%
@ -108,19 +111,52 @@ $input-main-height: 30px
size: 14px size: 14px
repeat: no-repeat repeat: no-repeat
position: 0.4em 0.7em position: 0.4em 0.7em
@media #{$medium-up}
width: grid-calc(3, 12)
.env-var-action .env-var-action
position: relative
display: inline-block display: inline-block
text-align: right
line-height: 2 line-height: 2
width: grid-calc(2, 24)
float: right
.icon-delete .icon-delete
@extend %icon @extend %icon
@extend .icon-delete @extend .icon-delete
display: block
width: 1.1em width: 1.1em
height: 1.3em height: 1.3em
@media #{$medium-up} margin: .2em auto 0
width: grid-calc(1, 24)
float: right
.tooltip
display: none
position: absolute
right: 0
left: 0
top: -2.7em
width: 4.2em
margin: auto
padding: 0 .8em
z-index: 5
background-color: #818383
border-radius: 4px
color: $white
&:before
content: ""
position: absolute
bottom: -0.3em
left: 39%
width: 1em
height: 1em
transform: rotate(45deg)
z-index: -1
background-color: #818383
&:hover
.icon-delete
@extend .icon-delete-hover
.tooltip
display: block