taiga
/
taiga-front
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge pull request #303 from taigaio/issue/2108/roles-rows 

Redesign role points selector
stable
Juanfran 2015-02-03 00:21:24 -08:00
parent 3a71868deb 09235a9bc5
commit 1fbd91ecf4
1 changed files with 16 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
app/styles/layout/us-detail.scss
View File

@ -263,23 +263,28 @@
.points-per-role {
display: flex;
flex-wrap: wrap;
position: relative;
> li {
border-right: 1px solid rgba($grayer, .3);
background: rgba($gray-light, .1);
border-radius: 2px;
color: rgba($grayer, .3);
display: inline-block;
flex-basis: 18%;
flex-basis: 80px;
flex-grow: 1;
margin: .5rem .1rem;
flex-shrink: 0;
margin: .1rem;
max-width: 50%;
padding: .5rem 0 .1rem;
position: relative;
text-align: center;
transition: color .3s linear;
width: 18%;
&.active {
color: rgba($green-taiga, 1);
background: rgba($fresh-taiga, .9);
color: $whitish;
}
&:first-child {
opacity: 1;
background: rgba($grayer, .5);
color: $whitish;
}
&:last-child {
border: 0;
@ -289,15 +294,15 @@
@extend %xlarge;
@extend %title;
display: block;
margin-bottom: .3rem;
text-align: center;
}
.role {
@extend %small;
@include ellipsis(90%);
display: inline-block;
max-width: 90%;
overflow: hidden;
line-height: 1rem;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
}
.popover {
@include popover(200px, $top: 105%, $left: 35%, $arrow-width: 10px, $arrow-top: -5px, $arrow-left: 10px);