scripts/apps/dashboard/workspace-tasks/styles/tasks.scss
// tasks.scss
// Styling for the superdesk dashboard page (gridster, widgets)
// ----------------------------------------------------------------------------------------
@import '~mixins.scss';
@import '~variables.scss';
/*
---------------------------------------------
TASK PAGE
---------------------------------------------
*/
.task-labels {
list-style-type: none;
padding: 0;
margin: 5px 0 0;
}
.task-label , .task-labels > li {
float: inline-start;
margin-inline-end: 4px;
background: #eee;
@include border-radius(3px);
height: 18px;
line-height: 18px;
color: #444;
padding: 2px 5px;
min-height: auto;
font-size: 10px;
i {
@include opacity(70);
}
&.urgent {
background-color: #ba7474;
}
&.critical {
background-color: #8b0000;
}
&.done {
background-color: $done-color;
}
}
.task-list > header {
padding: 10px;
.card {
.header {
min-height: 24px;
}
.title {
padding: 3px 0;
line-height: 18px;
min-height: 18px;
}
}
button {
border:0;
background: none;
}
.switch-view {
float: inline-start;
margin-inline-end: 30px;
button {
display: inline-block;
@include border-radius(3px);
height: 30px;
@include box-sizing(border-box);
padding: 0 10px;
line-height: 30px;
color: #4f4f4f;
text-decoration: none;
text-transform: uppercase;
font-size: 12px;
&:hover {
background: #e4e4e4;
}
&.active {
background: #ddd;
color: #000;
@include box-shadow(inset 0 2px 0 #ccc);
}
}
}
.status-tabs {
float: inline-start;
margin: -10px 0;
li {
button {
text-transform: uppercase;
font-size: 12px;
}
&.active {
button {
border-block-end: 3px solid $gray;
padding-block-end: 6px;
&.todo {
border-bottom-color: $todo-color;
}
&.in_progress {
border-bottom-color: $inprogress-color;
}
&.done {
border-bottom-color: $done-color;
}
}
}
}
}
}
.task-list {
white-space: nowrap;
.content {
padding: 20px;
white-space: nowrap;
overflow: auto;
}
.card {
.title {
@include text-semibold();
}
.marker {
width: 4px;
position: absolute;
inset-inline-start: 0; inset-block-start: 0; inset-block-end: 0;
@include border-radius(2px 0 0 2px);
&.todo {
background: $todo-color;
}
&.in_progress {
background: $inprogress-color;
}
&.done {
background: $done-color;
}
}
}
.board-holder {
width: 300px;
display: inline-block;
vertical-align: top;
}
.board {
min-height: 500px;
margin-inline-end: 20px;
header {
text-transform: uppercase;
font-size: 11px;
color: $sd-text;
line-height: 24px;
@include text-semibold();
border-block-end: 4px solid $gray;
&.todo {
border-bottom-color: $todo-color;
}
&.in_progress {
border-bottom-color: $inprogress-color;
}
&.done {
border-bottom-color: $done-color;
}
}
.card-list {
> li {
margin-block-start: 5px;
background: #fff;
padding: 5px;
min-height: 24px;
position: relative !important;
height: auto !important;
.title {
padding: 0 10px;
font-size: 13px;
line-height: 20px;
max-height: 40px;
overflow: hidden;
color: $sd-text;
min-height: 24px;
white-space: nowrap;
text-overflow: ellipsis;
}
&:hover {
.title {
padding: 0 45px 0 10px;
}
}
.action {
.item-field {
a {
padding: 0 10px;
line-height: 40px;
}
}
}
}
}
}
}
// .workspace-tasks {
// .preview-pane {
// .action-menu {
// width: 94px !important;
// .change {
// border: 0;
// background: 0;
// padding: 14px;
// float: inline-start;
// }
// }
// header {
// p {
// line-height: $nav-height;
// color: $grayLight;
// max-width: 345px;
// overflow: hidden;
// text-overflow: ellipsis;
// white-space: nowrap;
// }
// }
// .content {
// padding: 20px;
// }
// textarea {
// height: 32px;
// border-color: #ddd !important;
// &:focus {
// border-color: #ddd !important;
// @include box-shadow(none !important);
// }
// }
// .title {
// font-size: 16px;
// @include text-semibold();
// line-height: 24px;
// color: $sd-text;
// margin: 0 0 15px 0;
// }
// .description {
// font-size: 14px;
// margin-block-end: 15px;
// line-height: 22px;
// color:$sd-text;
// }
// .assignee-container {
// background: #eee;
// padding: 10px;
// @include border-radius(3px);
// margin-block-end: 10px;
// @include clearfix();
// .assignee-name {
// margin: 0;
// line-height: 30px;
// float: inline-start;
// }
// }
// .assignee-box {
// margin-block-end: 10px;
// }
// .task-labels {
// margin-block-start: 0;
// margin-block-end: 15px;
// .icon-desk-time {
// vertical-align: middle;
// }
// }
// .time-edit {
// margin-block-start: 5px;
// margin-block-end: 10px;
// @include clearfix();
// .field {
// float: inline-start;
// width: 50%;
// @include border-box();
// &:first-child {
// padding-inline-end: 5px;
// }
// &:last-child {
// padding-inline-start: 5px;
// }
// }
// input {
// @include border-box();
// width: 100%;
// }
// }
// }
// }
.create-task-popup {
.modal-body {
textarea {
resize: none;
}
.title {
border: 0 !important;
border-block-end: 1px solid var(--sd-colour-line--light) !important;
padding: 5px 20px;
@include text-normal();
height: 40px;
font-size: 18px;
line-height: 28px;
&:focus {
@include box-shadow(none !important);
}
}
fieldset{
&.full {
margin: -20px -20px 15px;
}
&.due {
margin: -0 -15px;
position: relative;
.break {
height: 1px;
background: #dcdcdc;
margin: 10px 15px 0;
}
label {
float: inline-start;
background: $sd-background;
padding: 0 10px 0 0;
margin: -10px 15px 10px;
font-weight: bold;
text-transform: uppercase;
color: #666;
@include text-semibold();
}
.field {
&.clear {
clear: left;
}
width: 50%;
float: inline-start;
padding: 0 15px;
}
}
}
.description {
height: 28px;
padding: 5px;
border: 1px solid #dfdfdf !important;
margin-block-end: 15px;
&:focus {
border-color: #ccc !important;
}
}
.assignee-box {
margin-block-end: 15px;
}
}
}
// stages styling
// ---------------------------------------------
.stages-list {
float: none;
margin-block-start: 3px;
}
.stage-label {
a, button {
background: #fff;
border-color: #d7d7d7 !important;
color: var(--color-text) !important;
&:hover {
border-color: #505050 !important;
@include box-shadow(0px 1px 3px 0px rgba(0,0,0,0.3));
}
}
&.active {
a {
background: #505050 !important;
border-color: #505050 !important;
border-block-start: 0 !important;
color: #fff !important;
@include box-shadow(inset 0 2px 0px darken(#505050, 10%) !important);
&:hover {
background: #505050 !important;
}
}
}
}
// Task comment list *** UNUSED ***
// ---------------------------------------------
/*
.add-comment-box {
width: 100%;
@include box-sizing(border-box);
background: $background-main;
border: 1px solid #e1e1e1;
padding: 10px;
@include border-radius(5px);
margin-block-end: 15px;
text-align: end;
textarea {
width: 100%;
min-width: 100%;
max-width: 100%;
min-height: 62px;
line-height: 20px;
@include box-sizing(border-box);
@include border-radius(3px);
padding: 10px;
border-color: #adadad;
@include box-shadow(0px 1px 0px 0px #fff);
@include box-shadow(inset 0px 3px 6px -3px #a8a8a8);
font-size: 14px;
color: #444;
text-align: start;
}
.btn {
margin-inline-start: 5px;
margin-block-start: 10px;
display: none;
}
&.focused {
.btn {
display: inline-block;
}
}
}
.comment-list {
list-style-type: none;
margin: 0;
padding: 0;
li {
padding-block-end: 15px;
margin-block-end: 8px;
position: relative;
.comment-info {
figure {
border: 1px solid #b9b9b9;
float: inline-start;
margin-inline-end: 10px;
img {
width: 30px;
height: 30px;
}
}
b {
font-size: 12px;
display: block;
line-height: 14px;
color: #007fb3;
}
time {
font-size: 11px;
color: #aeaeae;
}
}
.comment-text {
font-size: 13px;
color: #303030;
line-height: 18px;
border-block-start: 1px solid #ddd;
padding-block-start: 5px;
margin: 10px 0 3px 42px;
position: relative;
&:before {
content: " ";
width: 9px;
height: 9px;
position: absolute;
background: url(~images/comment-ballon.png) no-repeat 0 0;
inset-block-start: -9px;
inset-inline-start:15px;
}
}
.action-menu {
@include generic-inline-action-menu();
}
&:hover {
.action-menu {
display: block;
}
}
}
}
*/