293 lines
6.5 KiB
SCSS
293 lines
6.5 KiB
SCSS
.us-story-main-data {
|
|
margin-bottom: 1rem;
|
|
header {
|
|
align-content: center;
|
|
align-items: stretch;
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-bottom: .5rem;
|
|
}
|
|
.us-title {
|
|
@include font-size(large);
|
|
@include font-type(text);
|
|
align-items: flex-start;
|
|
background: $mass-white;
|
|
display: flex;
|
|
flex: 1;
|
|
flex-direction: column;
|
|
padding: .5rem;
|
|
position: relative;
|
|
transition: all .2s linear;
|
|
&.blocked {
|
|
background: $red;
|
|
transition: all .2s linear;
|
|
vertical-align: middle;
|
|
.us-title-text,
|
|
input {
|
|
margin-bottom: .5rem;
|
|
}
|
|
.us-number,
|
|
.us-name,
|
|
.us-related-task {
|
|
color: $white;
|
|
}
|
|
a {
|
|
color: $white;
|
|
transition: color .3s linear;
|
|
}
|
|
a:hover {
|
|
color: $red-light;
|
|
}
|
|
.unblock {
|
|
@include font-type(bold);
|
|
color: $white;
|
|
float: right;
|
|
}
|
|
.unblock:hover {
|
|
color: $red-light;
|
|
transition: color .3s linear;
|
|
}
|
|
}
|
|
p {
|
|
margin-bottom: 0;
|
|
}
|
|
.us-edit-name-inner {
|
|
display: flex;
|
|
}
|
|
.edit-subject {
|
|
align-content: center;
|
|
align-items: center;
|
|
display: flex;
|
|
width: 100%;
|
|
}
|
|
input {
|
|
background: $white;
|
|
flex-grow: 1;
|
|
}
|
|
.save-container {
|
|
flex-grow: 1;
|
|
.save {
|
|
display: block;
|
|
}
|
|
}
|
|
.us-title-text {
|
|
@include font-size(larger);
|
|
@include font-type(text);
|
|
align-content: center;
|
|
align-items: center;
|
|
display: flex;
|
|
flex: 1;
|
|
margin-bottom: 0;
|
|
max-width: 92%;
|
|
width: 100%;
|
|
}
|
|
.us-title-text:hover {
|
|
.edit {
|
|
opacity: 1;
|
|
transition: opacity .3s linear;
|
|
}
|
|
}
|
|
.us-number {
|
|
@include font-type(text);
|
|
color: $gray-light;
|
|
flex-shrink: 0;
|
|
line-height: 2.2rem;
|
|
margin-right: .5rem;
|
|
}
|
|
.us-name {
|
|
color: $gray;
|
|
display: inline-block;
|
|
flex-grow: 1;
|
|
line-height: 2.2rem;
|
|
padding-right: 1rem;
|
|
width: 100%;
|
|
}
|
|
.save,
|
|
.edit {
|
|
cursor: pointer;
|
|
margin-left: .5rem;
|
|
svg {
|
|
fill: $gray-light;
|
|
}
|
|
}
|
|
.edit {
|
|
opacity: 0;
|
|
}
|
|
.us-related-task {
|
|
@include font-size(small);
|
|
color: $gray-light;
|
|
margin-top: .5rem;
|
|
a {
|
|
border-left: 1px solid $gray-light;
|
|
padding: 0 .2rem;
|
|
}
|
|
a:hover {
|
|
color: $primary;
|
|
}
|
|
a:first-child {
|
|
border: 0;
|
|
}
|
|
}
|
|
.block-desc-container {
|
|
@include font-size(small);
|
|
}
|
|
.block-description-title {
|
|
@include font-type(bold);
|
|
color: $white;
|
|
margin-right: .5rem;
|
|
}
|
|
.block-description {
|
|
color: $white;
|
|
display: inline-block;
|
|
margin-right: 5rem;
|
|
}
|
|
}
|
|
.loading-spinner {
|
|
@include loading-spinner;
|
|
max-height: 1.5rem;
|
|
max-width: 1.5rem;
|
|
}
|
|
}
|
|
|
|
.blocked-warning {
|
|
margin-bottom: 1rem;
|
|
.blocked {
|
|
@include font-type(text);
|
|
@include font-size(xlarge);
|
|
color: $red;
|
|
line-height: 2.5rem;
|
|
margin-bottom: .5rem;
|
|
}
|
|
.icon {
|
|
@include font-size(xlarge);
|
|
vertical-align: middle;
|
|
}
|
|
.block-description {
|
|
color: $grayer;
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.issue-nav {
|
|
position: absolute;
|
|
right: 1rem;
|
|
top: 1rem;
|
|
a {
|
|
display: inline-block;
|
|
}
|
|
svg {
|
|
@include svg-size(1.2rem);
|
|
fill: currentColor;
|
|
}
|
|
}
|
|
|
|
.subheader {
|
|
align-items: flex-start;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
@include breakpoint(laptop) {
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
}
|
|
.ticket-created-by {
|
|
flex-basis: 250px;
|
|
flex-shrink: 0;
|
|
@include breakpoint(laptop) {
|
|
flex-basis: auto;
|
|
order: 1;
|
|
}
|
|
}
|
|
.tags-block {
|
|
flex: 1;
|
|
@include breakpoint(laptop) {
|
|
order: 2;
|
|
}
|
|
}
|
|
}
|
|
|
|
.duty-content {
|
|
@include cursor-progress;
|
|
position: relative;
|
|
&:hover {
|
|
.view-description {
|
|
.edit {
|
|
|
|
opacity: 1;
|
|
top: -1.5rem;
|
|
transition: all .2s linear;
|
|
}
|
|
.editable {
|
|
background: $mass-white;
|
|
cursor: pointer;
|
|
}
|
|
.no-description {
|
|
color: $grayer;
|
|
}
|
|
}
|
|
}
|
|
&.wysiwyg {
|
|
overflow: visible;
|
|
}
|
|
.no-description {
|
|
color: $gray-light;
|
|
}
|
|
textarea {
|
|
background: $white;
|
|
height: 10rem;
|
|
}
|
|
.save-container {
|
|
position: absolute;
|
|
right: 1rem;
|
|
top: .2rem;
|
|
&:hover {
|
|
opacity: .3;
|
|
transition: opacity .2s linear;
|
|
}
|
|
.loading-spinner {
|
|
@include loading-spinner;
|
|
max-height: 1.5rem;
|
|
max-width: 1.5rem;
|
|
}
|
|
}
|
|
.edit {
|
|
cursor: pointer;
|
|
fill: $gray;
|
|
}
|
|
.view-description {
|
|
.edit {
|
|
background: $mass-white;
|
|
height: 2rem;
|
|
left: 0;
|
|
opacity: 0;
|
|
padding: .2rem .5rem;
|
|
position: absolute;
|
|
top: 0;
|
|
transition: all .2s linear;
|
|
width: 2rem;
|
|
}
|
|
}
|
|
.edit-description {
|
|
margin-bottom: 2rem;
|
|
.save {
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
position: relative;
|
|
top: .3rem;
|
|
}
|
|
.edit {
|
|
display: inline-block;
|
|
position: absolute;
|
|
right: 2.5rem;
|
|
top: .4rem;
|
|
transition: all .2s linear;
|
|
}
|
|
.preview {
|
|
padding-top: 1.5rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.comment-list {
|
|
padding: 1rem;
|
|
}
|