Popovers for attributes explanation. Looks 🆒
parent
2202f315cf
commit
0adb56c1dc
|
@ -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
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue