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

Redesign role points selector
stable
Juanfran 2015-02-03 00:21:24 -08:00
commit 1fbd91ecf4
1 changed files with 16 additions and 11 deletions

View File

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