Redesign role points selector

stable
Xavier Julián 2015-01-30 08:16:29 +01:00
parent 7dd1302525
commit b631aef22d
1 changed files with 14 additions and 11 deletions

View File

@ -263,23 +263,27 @@
.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;
padding: .5rem;
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 +293,14 @@
@extend %xlarge; @extend %xlarge;
@extend %title; @extend %title;
display: block; display: block;
margin-bottom: .3rem;
text-align: center; text-align: center;
} }
.role { .role {
@include ellipsis(90%);
display: inline-block; display: inline-block;
max-width: 90%; line-height: .8rem;
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);