scripts/apps/desks/styles/desks.scss
// desk.scss
// Styling for the superdesk desk module
// ----------------------------------------------------------------------------------------
@import '~mixins.scss';
@import '~variables.scss';
@import '~labels.scss';
$main-desk-color: #ffffff;
$main-desk-border: #cacaca;
$main-desk-padding-side : 60px;
$desk-width: 270px;
/* board colors */
@mixin status-config-color($color) {
$r: red($color);
$g: green($color);
$b: blue($color);
background: rgba($r, $g, $b, 25%);
color: rgb($r, $g, $b);
&.active {
background: rgb($r, $g, $b);
color: $white;
}
}
.todo-status {
background: $todo-color;
}
.inprogress-status {
background: $inprogress-color;
}
.done-status {
background: $done-color;
}
.desk-tabs {
.online-users {
margin-block-start: -10px;
margin-inline-start: 20px;
border-inline-start: 1px solid #dfdfdf;
}
}
.master-desk-view {
overflow: hidden;
padding-block-end: 0 !important;
z-index: auto;
}
.main-desk-container {
position: absolute;
inset-block-start: 0; inset-inline-start: 0; inset-inline-end: 0; inset-block-end: 0;
display: flex;
overflow-x: scroll;
overflow-y: hidden;
flex: 1 1;
flex-flow: row wrap;
flex-wrap: nowrap;
align-items: stretch;
justify-content: flex-start;
height: auto;
padding: 20px;
@include border-box();
@include user-select(none);
// horizontal scroll adjustment
&::-webkit-scrollbar {
width: 18px;
height: 18px;
border-block-start: 1px solid #d0d0d0;
}
&::-webkit-scrollbar:hover {
background-color: $sd-background;
}
&::-webkit-scrollbar-thumb {
border-block-start: 1px solid #d0d0d0;
background: #bbb;
@include box-shadow(inset 0px 1px 0px 3px $sd-background);
}
&::-webkit-scrollbar-thumb:hover {
background: #777;
}
.desk-container {
flex: 0 0 20%;
min-width: 250px;
@include border-box();
position: relative;
}
.desk {
position: absolute;
inset-inline-start: 0; inset-inline-end: 30px; inset-block-start:0; inset-block-end: 0;
overflow:hidden;
&__header {
position: absolute;
inset-inline-start: 0; inset-inline-end: 0; inset-block-start:0;
height: 25px;
line-height: 25px;
border-block-end: 5px solid #4d4d4d;
}
&__name {
text-transform: uppercase;
float: inline-start;
@include text-bold();
&:hover {
cursor: default;
}
}
&__open {
margin-inline-start: 10px;
i { margin-block-end: 3px; color: $grayLight; }
&:hover {
i { color: $grayDark; }
cursor:pointer;
}
}
&__action {
float: inline-end;
.dropdown__toggle {
@include opacity(60);
border: 0;
background: none;
vertical-align: baseline;
}
.dropdown__menu {
inset-inline-end: 5px;
}
}
&__content {
position: absolute;
inset-inline-start: 0; inset-inline-end: 0; inset-block-start:30px; inset-block-end: 0;
overflow-x: hidden;
overflow-y: auto;
&::-webkit-scrollbar {
width: 10px;
height: 10px;
}
&::-webkit-scrollbar:hover {
background: $sd-background;
}
&::-webkit-scrollbar-thumb {
background: #ddd;
@include box-shadow(inset 3px 2px 0px 1px $sd-background);
}
&::-webkit-scrollbar-thumb:hover {
background: #ccc;
}
}
}
}
.inline-content-items {
min-height: 18px;
margin-block-end: 6px;
@include box-shadow(0 1px 4px 0 rgba(0,0,0,.2));
.item {
cursor: default;
background: $white;
height: 32px;
line-height: 32px;
@include border-box();
border-inline-start: 3px solid #d1d1d1;
border-inline-end: 2px solid $white;
border-block-end: 1px solid #eee;
position: relative;
&:last-child {
border-block-end: none;
}
&.active {
background: $sd-hover;
border-right-color: $sd-blue;
}
&.locked {
border-left-color: #b70101;
}
.type {
float: inline-start;
height: 32px;
i {
margin: 0 8px;
text-align: center;
vertical-align: middle;
color: $grayLight;
}
}
.urgency {
height: 32px;
float: inline-start;
line-height: 30px;
margin-inline-end: 10px;
}
.urgency-label, .priority-label {
vertical-align: middle;
}
time {
color: $sd-text-lighter;
font-size: 11px;
}
.text {
height: 32px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 12px;
padding-inline-end: 10px;
.keywords {
color: $sd-keyword;
font-weight: 500;
text-transform: uppercase;
margin-inline-end: 5px;
}
}
&:not(:-moz-handler-blocked) {
.text {
white-space: normal;
}
}
.action {
position: absolute;
inset-inline-end: 0; inset-block-start: 0;
display: none;
background-color: inherit;
button {
background: transparent;
height: 32px;
border: 0;
border-inline-start: 1px solid var(--sd-colour-line--light);
display: block;
float: inline-start;
&:hover {
cursor: pointer;
background: var(--sd-item__main-Bg--hover);
}
}
}
&.active {
.action button:hover {
background: darken($sd-hover, 10%);
}
}
&.shifted:hover {
.text {
padding-inline-end: 57px;
}
.action {
display: block;
}
}
}
&.content-tasks {
.item {
border-inline-start: none;
}
}
}
.slugline-content {
.loading {
width: 18px;
height: 18px;
background: url(~images/loading-large.gif) center center no-repeat $sd-background;
background-size: 18px;
text-align: center;
}
.no-items {
color: #bababa;
@include text-semibold();
cursor: default;
}
.inline_slugline_item {
.place {
text-transform: uppercase;
color: #777;
@include text-semibold();
}
.slugline {
padding-inline-start: 20px;
color: $sd-keyword;
text-transform: uppercase;
font-weight: 500;
}
.oldslugline {
padding-inline-start: 20px;
color: $sd-blue-text;
text-transform: uppercase;
}
.headline {
padding-inline-start: 40px;
text-transform: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
@media (max-width: 1560px) {
.main-desk-container .desk-container {
flex: 0 0 25%;
}
}
@media (max-width: 1180px) {
.main-desk-container .desk-container {
flex: 0 0 33%;
}
}
// Desk config
// ---------------------------------------------
/* Desk create/edit popup */
.sd-wizard {
.modal__body {
.modal__body-content {
display: flex;
flex-direction: column;
padding: 0;
background: 0 0;
> div, > div > div, > form, > form > fieldset {
display: flex;
flex-direction: column;
overflow-y: auto;
}
.content {
flex: 1 1 auto;
width: 100%;
overflow-y: auto;
padding: 2rem;
background: $sd-background;
}
form.content, .field {
display: block;
}
.modal__footer {
display: block;
flex: 0 0 auto;
}
}
}
.stages {
.col {
position: absolute;
inset-block-start: 60px;
inset-block-end: 10px;
inset-inline-start: 0;
inset-inline-end: 50%;
padding: 10px 20px;
overflow-x: hidden;
overflow-y: auto;
&:last-child {
inset-inline-start: 50%; inset-inline-end: 0;
border-inline-start: 1px solid var(--sd-colour-line--light);
}
}
.row {
padding-block-start: 20px;
clear: both;
label {
display: inline-block;
}
.prevent-off {
pointer-events: none;
}
}
.heading {
padding: 2px 0;
color: var(--color-text-light);
margin-inline-end: 10px;
text-transform: uppercase;
}
[sd-content-expiry] {
position: relative;
float: none;
.right {
position: absolute;
inset-block-start: -18px; inset-inline-end: 0;
}
label {
font-size: 13px;
color: $sd-text;
}
}
.stage-type { margin-block-end: 10px; }
select { margin-block-end: 10px; }
.pills-list {
li {
cursor: pointer;
label { line-height: 12px; }
.global-label {
font-size: 12px;
color: var(--color-text-lighter);
margin-block-start: 5px;
margin-inline-end: 5px;
text-transform: none;
span:nth-child(2) {
margin-inline-start: 0;
}
}
&.active {
.global-label {
color: $white;
opacity: 0.8;
}
}
&.editable {
padding-block-start: 0;
.char-count {
&.error {
@include text-semibold();
color: #D33C30;
}
}
}
}
&.edit-mode {
li.editable {
box-shadow: none;
border-radius: 2px;
outline: 1px solid var(--sd-colour-interactive);
background-color: var(--sd-colour-interactive--alpha-20);
margin-block-end: 10px;
}
li:not(.editable) {
display: none;
}
}
}
.status-list {
.status {
display: block;
@include border-radius(3px);
@include border-box();
margin-block-end: 5px;
height: 28px;
padding: 5px 10px;
text-transform: uppercase;
&:hover {
cursor: pointer;
}
&.todo {
@include status-config-color($todo-color);
}
&.in_progress {
@include status-config-color($inprogress-color);
}
&.done {
@include status-config-color($done-color);
}
}
}
}
.people-stage {
.header {
.search-result {
overflow: auto;
background: var(--color-dropdown-menu-Bg);
box-shadow: var(--sd-shadow__dropdown);
padding: 10px;
z-index: 1;
border-radius: 0 0 3px 3px;
}
}
}
textarea {
height: 44px;
}
.col-heading {
padding: 2px 0;
color: var(--color-text-light);
margin-inline-end: 10px;
text-transform: uppercase;
}
}
.user-email {
color: var(--sd-colour-interactive);
font-weight: 300;
display: inline-block;
padding: 0 2rem;
}
.content-expiry-label {
color: var(--color-text);
}
.modal--tabs {
.button-toolbar {
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
background-color: var(--sd-colour-bg__sliding-toolbar);
padding: 10px;
text-align: end;
width: 100%;
animation: dropOut2 .3s cubic-bezier(.695,.105,.285,1.275) 1;
box-shadow: var(--sd-shadow__subnav);
}
}
.members-list {
padding-block-start: 1rem;
}
/*----------------------------------------
#Item groups (stages, task statuses etc.)
----------------------------------------*/
.item-group {
margin-block-start:5px;
margin-block-end: 10px;
&__content {
padding: 2px;
overflow: auto;
max-height: 330px;
overflow-x: hidden;
&--full-height {
max-height: none;
}
// vertical scroll adjustment
&::-webkit-scrollbar {
width: 4px;
height: 4px;
border:none;
}
&::-webkit-scrollbar:hover {
background-color: $sd-background;
}
&::-webkit-scrollbar-thumb {
border: none;
background: rgba(0,0,0,0.1);
}
&::-webkit-scrollbar-thumb:hover {
background: rgba(0,0,0,0.25);
}
}
&__loading {
width: 18px;
height: 18px;
background: url(~images/loading-large.gif) center center no-repeat $sd-background;
background-size: 18px;
text-align: center;
}
&__no-items {
color: #bababa;
@include text-semibold();
cursor: default;
}
&__header {
padding: 0;
height: 26px;
line-height: 16px;
}
&__name {
font-size: 12px;
text-transform: uppercase;
color: #777;
@include text-semibold();
cursor: default;
float: inline-start;
&--todo {
color: $todo-color;
}
&--in_progress {
color: $inprogress-color;
}
&--done {
color: $done-color;
}
}
}
/*---------------------------------------------------------------
#Content item (list item for content, tasks, users and slulines
----------------------------------------------------------------*/
.content-item {
cursor: default;
background: var(--sd-item__main-Bg);
height: 32px;
line-height: 32px;
border-inline-start: 3px solid transparent;
border-inline-end: 2px solid var(--sd-item__main-Bg);
border-block-end: 1px solid var(--sd-colour-line--light);
position: relative;
display:flex;
padding-inline-end: 8px;
&--slugline-view {
min-height: 32px;
border-inline-start:none;
height:auto;
line-height: 160%;
padding: 10px;
}
&:last-child {
border-block-end: none;
}
&--active {
background: var(--sd-item__main-Bg--activated);
border-right-color: var(--sd-colour-interactive);
}
&--locked {
border-left-color: #b70101;
}
&.gone {
opacity: 0.5;
}
&--no-border {
border-inline-start:none;
}
&__type {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
i {
margin: 0 8px 0 6px;
text-align: center;
color: $grayLight;
flex-shrink: 0;
}
}
&__urgency-field {
height: 100%;
margin-inline-end: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.urgency-label, .priority-label {
vertical-align: middle;
flex-shrink: 0;
}
time {
color: $sd-text-lighter;
font-size: 11px;
}
&__text {
height: 32px;
@include text-overflow();
font-size: 12px;
padding-inline-end: 10px;
flex-grow: 1;
.keywords {
color: $sd-keyword;
font-weight: 500;
text-transform: uppercase;
margin-inline-end: 5px;
}
}
&__date time {
white-space: nowrap;
}
&:not(:-moz-handler-blocked) {
.content-item__text {
white-space: normal;
}
}
&__action {
display: none;
background-color: inherit;
margin-inline-end: -8px;
}
&.active {
.action button:hover {
background: darken($sd-hover, 10%);
}
&.custom-monitoring {
background-color: #eff7fa !important;
}
}
&.shifted:hover {
.content-item__text {
padding-inline-end: 0;
}
.content-item__action {
display: flex;
align-items: center;
justify-content: center;
}
time {
display:none;
}
}
&.custom-monitoring:hover {
background-color: #f4f4f4;
cursor: pointer;
}
}
.slugline-item {
@extend .content-item;
border-inline-start:none;
height:auto;
line-height: 160%;
padding: 0 8px;
margin:0;
display:block;
border-block-end: 1px var(--sd-colour-line--light);
&:last-child {
border-block-end: none;
}
&__row {
height: 24px;
clear: both;
@include text-overflow();
&--main {
padding-block-start: 10px;
}
}
.place {
font-size: 12px;
text-transform: uppercase;
color: $sd-text-light;
font-weight: 500;
}
.slugline {
color: $sd-keyword;
font-weight: 500;
text-transform: uppercase;
}
.oldslugline {
color: $sd-keyword;
font-weight: 400;
opacity: 0.75;
text-transform: uppercase;
}
.headline {
font-weight: 400;
color: $sd-text-light;
}
time {
color:$sd-text-light;
font-size: 11px;
}
}