taiga-front/app/styles/modules/backlog-table.scss

116 lines
2.7 KiB
SCSS

.backlog-table{
display:flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: flex-start;
align-content: stretch;
align-items: center;
width: 100%;
.row {
display:flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-content: stretch;
align-items: stretch;
width: 100%;
text-align: left;
padding: .5em 0;
@for $i from 1 through 8 {
.width-#{$i} {
flex-grow: $i;
flex-shrink: 0;
flex-basis: 50px;
}
}
&:hover {
background: lighten( $greenTaiga, 60% );
@include transition (background .2s ease-in);
cursor: move;
}
}
.row-selected {
background: lighten( $greenTaiga, 60% );
@include transition (background .2s ease-in);
}
.user-story-name {
flex-basis: 500px;
input {
vertical-align: top;
}
span {
max-width: 70%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
}
}
.user-story-tags {
margin-top: .3rem;
display: none;
}
.title {
font-family: 'DroidSans-Bold';
@extend .medium;
&:hover {
background: transparent;
}
}
.sub-title {
font-family: 'DroidSans';
@extend .small;
background: $whitish;
border-bottom: 2px solid $grayer;
&:hover {
background: $whitish;
}
}
.table-main {
@extend .small;
border-bottom: 1px solid $grayLight;
}
.status, .points {
position: relative;
}
.blocked {
background: $redLight;
color: $white;
&:hover {
background: $red;
@include transition (background .2s ease-in);
cursor: move;
}
a {
color: $white;
&:hover {
color: $white;
}
}
}
.doom-line {
border-bottom: 3px solid $red;
}
.pop-status {
@include popover(150px, "", 30px, 10px, "");
}
.pop-points {
@include popover(150px, "", 30px, 10px, "");
}
.pop-points-open {
@include popover(200px, "", 30px, 10px, "");
li {
width: 23%;
display: inline-block;
}
a{
display: block;
text-align: center;
&:hover {
background: $freshTaiga;
color: $white;
}
}
}
}