app/assets/stylesheets/new_board/_story.scss
.story-container {
.Story {
padding: 7px 8px;
border-bottom: 1px solid $story-border-bottom-color;
border-top: 1px solid $story-border-top-color;
-webkit-transition: background-color ease-in-out .2s;
-o-transition: background-color ease-in-out .2s;
transition: background-color ease-in-out .2s;
&--late-release {
background-color: rgba($darkred, .5) !important;
border-top-color: rgba($darkred, .6) !important;
border-bottom-color: rgba($darkred, .1) !important;
color: $white;
}
&--highlighted {
background-color: $story-background-highlight-color !important;
}
&--accepted {
background-color: $story-background-accepted-color !important;
}
&--collapsed {
display: flex;
justify-content: space-between;
background-color: $story-background-color;
min-height: 37px;
cursor: move;
align-items: center;
font-size: 12px;
&:hover {
background-color: $story-hover-background-color;
}
&.Story--unestimated {
font-style: italic;
}
&.Story--release {
color: $white;
background-color: $blue-4;
border-top-color: $blue-5;
border-bottom-color: $blue-3;
abbr {
color: $white;
}
&:hover {
background-color: $blue-3;
}
.Story__icon {
color: $blue-4;
}
}
&.Story--accepted {
color: $darkgrey-3;
}
&.Story--isDragging {
opacity: 0.8;
}
&.Story--cantBeMoved {
cursor: pointer;
}
.Story {
&__description-icon {
display: flex;
justify-content: flex-start;
align-items: center;
margin-left: 5px;
}
&__info {
flex: 1;
display: flex;
flex-direction: column-reverse;
justify-content: space-between;
margin: 0 10px;
}
&__icons-block {
display: flex;
width: 60px;
}
&__focus-button {
width: 13px;
height: 21px;
position: relative;
}
&__focus-button-icon {
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
}
&__icon {
display: flex;
align-items: center;
margin-right: 5px;
}
&__title {
word-break: break-word;
display: flex;
justify-content: space-between;
text-align: justify;
abbr {
min-width: 25px;
border: none;
}
span {
min-width: 55px;
margin-left: 10px;
}
}
&__actions {
display: flex;
align-items: center;
}
&__estimated-value {
padding: 2px 3px;
display: inline-flex;
align-items: center;
justify-content: center;
background: $estimated-background-color;
margin-right: 1px;
border: 1px solid $estimated-border-color;
border-radius: 3px;
line-height: 1;
min-width: 15px;
font-style: normal;
}
&__estimate-box {
display: inline
}
&__estimate {
padding: 2px;
display: inline-flex;
align-items: center;
justify-content: center;
margin-right: 1px;
line-height: 1;
font-weight: bold;
color: $estimate-background-color;
cursor: pointer;
font-style: normal;
}
&__label {
text-align: left;
color: $story-label-color;
text-decoration: none;
font-style: normal;
margin-right: 5px;
&:hover {
text-decoration: underline;
}
}
&__labels {
color: $story-labels-color;
font-size: 84%;
margin-top: 1px;
}
&__btn {
@extend .btn;
@extend .btn-xs;
font-size: 11px;
display: inline;
&--start {
@extend .btn-default;
}
&--finish {
@extend .btn-primary;
}
&--deliver {
@extend .btn-warning;
}
&--accept {
@extend .btn-success;
}
&--reject {
@extend .btn-danger;
}
&--restart{
@extend .btn-danger;
background-image: sprite-url($icons-sprites);
background-position: sprite-position($icons-sprites, redo, 0, 2px);
background-repeat: no-repeat;
padding-left: 20px;
}
&--release{
@extend .btn-default;
}
}
&__initials {
color: green;
font-weight: bold;
margin-left: 1em;
font-style: normal;
}
}
}
&--expanded {
padding: 8px 10px;
background-color: $butter-2;
color: $aluminium-6;
position: relative;
.Story {
&__flex {
display: flex;
}
&__section-title {
font-size: 12px;
font-weight: bold;
margin-bottom: 5px;
}
&__section {
margin: 5px 5px 5px 0;
&__notes {
.delete-note-button {
margin-left: 5px;
color: $link-primary;
text-decoration: none;
&:hover, &:focus {
color: $link-hover;
cursor: pointer;
text-decoration: underline;
outline: 0;
}
}
.create-note-button {
margin-bottom: 5px;
text-align: right;
input {
@extend .btn;
@extend .btn-default;
@extend .btn-xs;
}
}
.create-note-text {
resize: vertical;
margin: 10px 0;
min-height: 30px;
}
}
&__tasks {
.task label {
min-height: 20px;
padding-left: 20px;
margin-bottom: 1px;
font-weight: normal;
cursor: pointer;
}
.task input[type="checkbox"] {
position: absolute;
margin-left: -20px;
margin-top: 4px \9;
}
.list-task {
font-size: 12px;
position: relative;
}
.task-form {
@extend .clearfix;
}
.add-task-button {
@extend .btn;
@extend .btn-default;
@extend .btn-xs;
@extend .pull-right;
margin-top: 10px;
}
}
&__description {
.story-description-content {
cursor: text;
}
.edit-description-button {
font-size: 12px;
border-radius: 5px;
background-color: $lightgrey-12;
border-color: $darkgrey-11;
border-width: 1px;
outline: none;
color: $aluminium-6;
}
.edit-description-text {
resize: vertical;
min-height: 100px;
background-color: #fff;
&__input {
@extend .form-control;
}
&__suggestions {
position: absolute !important;
background: $blue-6 !important;
color: $white !important;
left: 15px !important;
padding: 5px 10px 5px 10px !important;
top: 7px !important;
&:hover {
background: $blue;
}
}
}
}
}
&__controls {
@extend .btn-group;
height: 22px;
display: block;
input {
@extend .btn;
@extend .btn-default;
@extend .btn-xs;
}
.infoToolTip {
height: 22px;
cursor: default;
float: right;
}
}
&__loading {
background: black;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 3;
opacity: 0.3;
display: none;
}
}
}
&__enable-loading {
cursor: wait;
border-top: 0;
border-bottom: 0;
.Story__loading {
display: block;
}
}
}
}