Popovers for attributes explanation. Looks 🆒

stable
Xavier Julián 2014-11-06 18:15:24 +01:00 committed by Jesús Espino
parent 2202f315cf
commit 0adb56c1dc
2 changed files with 28 additions and 6 deletions

View File

@ -3,16 +3,28 @@ section.table-team.basic-table
div.username
div.attribute.attribute-name
span Bug Killer
div.popover.attribute-explanation
span Thanks to you, this project still steady!
div.attribute
span Poison Drinker
div.popover.attribute-explanation
span Hey, are you a iocaine-holic?
div.attribute
span Brown Dealer
div.attribute
Total Power
div.attribute
span Brown Dealer
span Brown Dispatcher
div.popover.attribute-explanation
span Oh, stop dealing work!
div.attribute
Total Brown Eater
div.popover.attribute-explanation
span Oh, poor devil, you are valuable!
div.attribute
span Chatter
div.popover.attribute-explanation
span This is not a chat... but I love your comments!
div.attribute
Total Power
div.popover.attribute-explanation
span How far did you go into this Taiga?
div.row.hero
div.username
figure.avatar

View File

@ -7,6 +7,7 @@
}
.attribute {
@include table-flex-child(1, 0, 0);
position: relative;
text-align: center;
.icon,
.points {
@ -21,6 +22,11 @@
color: $fresh-taiga;
opacity: 1;
}
&:hover {
.popover {
display: block;
}
}
}
.team-header {
@extend %title;
@ -40,7 +46,7 @@
}
figcaption {
margin-left: 1rem;
width: 75%;
width: 65%;
span {
overflow: hidden;
text-overflow: ellipsis;
@ -60,4 +66,8 @@
color: $gray-light;
}
}
.popover {
@include popover(100%, '', 0, 30px, '', 15px, '', 50%, -5px);
@extend %small;
}
}