taiga-front/app/styles/components/estimation.scss

79 lines
2.0 KiB
SCSS

@mixin estimation {
.points-per-role {
display: flex;
flex-direction: column;
}
.ticket-role-points {
background: rgba($gray-light, .2);
color: $gray-light;
display: flex;
flex: 1;
justify-content: space-between;
margin-bottom: .1rem;
min-height: 2rem;
padding: .5rem 1rem;
position: relative;
&.clickable {
&:hover,
&.active {
background: rgba($primary-light, .9);
color: $whitish;
.points,
.role,
.icon-arrow-bottom {
color: currentColor;
fill: currentColor;
}
}
}
&:last-child {
background: rgba($primary-dark, .5);
border-bottom: 0;
color: $whitish;
.points,
.role,
.icon-arrow-bottom {
@include font-type(text);
color: currentColor;
fill: currentColor;
}
}
.icon-arrow-down {
fill: currentColor;
height: .6rem;
margin-left: .25rem;
width: .6rem;
}
.points {
@include font-type(light);
color: $grayer;
}
.role {
@include font-type(light);
}
}
.popover {
@include popover(200px, $top: 100%, $left: .5rem, $arrow-width: 10px, $arrow-top: -5px, $arrow-left: 10px, $arrow-height: 10px);
li {
display: inline-block;
width: 23%;
}
a {
display: block;
text-align: center;
&:hover,
&.active {
background: $primary-light;
color: $white;
}
}
&.fix {
@include popover(200px, $top: 100%, $left: -160px, $arrow-width: 10px, $arrow-top: -5px, $arrow-left: 90%, $arrow-height: 10px);
}
}
}
.ticket-estimation {
@include estimation;
}