//@import "../../../abstracts/abstracts"; #classlist-kanban-board { margin: 0; padding: ($padding-default / 2) $padding-default 0 $padding-default; .dbqdclkb-container { @include border-radius; float: left; width: 100%; height: 100%; //padding: $padding-default; background-color: $kanban-background; box-shadow: 0px 0px 5px rgba(0, 24, 62, 0.07); -webkit-box-shadow: 0px 0px 5px rgba(0, 24, 62, 0.07); -moz-box-shadow: 0px 0px 5px rgba(0, 24, 62, 0.07); .dbqdclkb-toolbar { height: 50px; padding: 10px; .dbqdclkb-search { @include search-field; } } .dbqdclkb-columns { display: flex; position: relative; // Important: when dragging kanban board items horizontally without this attribute, a horizontal scrollbar would appear on the tag width: 100%; height: calc(100% - 50px); overflow-x: auto; @include scrollbar($sidebar-background, 0, $sidebar-scrollbar-thumb-color, $sidebar-scrollbar-thumb-color-hover, $sidebar-scrollbar-width, true); .dbqdclkb-column { float: left; display: flex; flex-direction: column; height: calc(100% - 10px); min-width: 200px; max-width: 640px; margin: 0 10px 10px 10px; .dbqdclkb-column-title { position: relative; padding: 10px 0; &:not(.dbqdclkb-column-title-has-create) { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; column-gap: 8px; height: 40px; .dbqdclkb-column-item-count { position: static; } } &.dbqdclkb-column-title-has-create { .dbqdclkb-column-title-main { display: flex; align-items: center; min-width: 0; } .dbqdclkb-column-title-meta { display: flex; align-items: center; width: 100%; min-height: 24px; gap: 8px; .dbqdclkb-column-item-count { position: static; } } } .dbqdclkb-column-name { color: color(text-color-default); font-size: $font-size-base; font-weight: 600; display: block; flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 0; } .dbqdclkb-column-name-container { display: flex; align-items: center; min-width: 0; max-width: 100%; gap: 4px; justify-self: start; } .dbqdclkb-column-state-info { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; color: color(text-color-muted); svg { width: 14px; height: 14px; fill: currentColor; } } .dbqdclkb-column-item-count { position: absolute; top: 8px; right: 0; display: inline-flex; align-items: center; color: color(text-color-default); font-size: $font-size-small; border-radius: 5px; height: 21px; // background: $kanban-column-item-background; .dbqdclkb-column-item-count-content { display: inline-flex; align-items: center; gap: 4px; } .dbqdclkb-column-item-count-icon { display: inline-flex; align-items: center; svg { width: 14px; height: 14px; fill: currentColor; } } .dbqdclkb-column-item-count-text { line-height: 1; } .dbqdclkb-column-item-count-loading-indicator { display: none; align-items: center; .inline-loading-indicator { width: 16px; height: 16px; } } } .dbqdclkb-column-loading-indicator { display: flex; align-items: center; .inline-loading-indicator { width: 16px; height: 16px; } } .dbqdclkb-column-create-button { display: inline-flex; align-items: center; justify-content: center; margin-left: auto; width: 24px; height: 24px; border: 0; padding: 0; outline: 0; border-radius: 50%; background: transparent; color: color(text-color-default); transition: background-color .2s ease, box-shadow .2s ease; svg { width: 18px; height: 18px; fill: currentColor; transition: transform .2s ease, fill .2s ease; } &:hover, &.dbqdclkb-column-create-button-active { background: $kanban-column-item-background; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); } &.dbqdclkb-column-create-button-active { svg { transform: rotate(45deg); } } &:hover { svg { fill: $color-primary; } } &:disabled { opacity: 0.6; cursor: wait; } } .dbqdclkb-column-quick-create { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; .dbqdclkb-column-create-field { margin-bottom: 0; } .dbqdclkb-column-create-select, .dbqdclkb-column-create-input { width: 100%; &:focus { box-shadow: none; } &:disabled { opacity: 0.6; cursor: wait; } } } } .dbqdclkb-column-items { @include scrollbar($sidebar-scrollbar-color, $sidebar-scrollbar-border-radius, $sidebar-scrollbar-thumb-color, $color-primary); flex: 1 1 auto; min-height: 0; // overflow-x: hidden; overflow-y: auto; } } } } .dbq-inline-loading-indicator { float: left; margin-top: 10px; } .dbqdclkb-item-placeholder { float: left; border: 2px dashed $modal-border-color; width: 100%; border-radius: 5px; margin-top: 10px; } .dbqdclkb-item { float: left; width: 100%; cursor: pointer; background: $kanban-tile-background; border-radius: 5px; border-left: solid; border-width: 5px; border-color: #c0c0c0; padding: 10px; margin-top: 10px; box-shadow: inset 0 -1px 1px #0003, 0 1px 1px #00000014; &:first-of-type { margin: 0; } &:last-of-type { margin-bottom: 0px; } &:hover { .dbqdclkb-dropdown-toggle { display: block; } } &.dbqdclkb-item-selected { // border: 2px solid; // border-left-width: 5px; box-shadow: 0px 0px 0px 2px inset; } .dbqdclkb-item-summary { float: left; width: 100%; overflow: hidden; span { color: color(text-color-default); font-size: 13px; font-weight: 600; line-height: 20px; } } .dbqdclkb-item-tags { float: left; .dbqdclkb-item-tag { // 0 = Text &[data-display-mode="0"] { } // 1 = Image &[data-display-mode="1"], &.dbqdclkb-item-tag-extra { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; font-weight: 600; padding: 0; font-size: $font-size-small; overflow: hidden; } img { width: 100%; height: 100%; object-fit: cover; } } } .dbqdclkb-item-tags.dbqdclkb-item-tags-top-left, .dbqdclkb-item-tags.dbqdclkb-item-tags-bottom-left { float: left; clear: both; } .dbqdclkb-item-tags.dbqdclkb-item-tags-top-right, .dbqdclkb-item-tags.dbqdclkb-item-tags-bottom-right { float: right; } .dbqdclkb-item-tags.dbqdclkb-item-tags-bottom-right { .dbqdclkb-item-tag { // 1 = Image &[data-display-mode="1"] { margin-left: -10px; &:first-of-type { margin-left: 0; } } &.dbqdclkb-item-tag-extra { margin-left: -10px; background: $kanban-tile-tag-extra-background; color: $text-color-default; } span { font-size: 10px; } } } .dbqdclkb-item-extra-tags-container { float: left; position: relative; .dbqdclkb-item-extra-tags { display: none; position: absolute; top: 22px; left: -11px; background: $kanban-tile-background; padding: 2px; border-radius: 11px; border: 1px solid $kanban-tile-tag-extra-background; box-shadow: inset 0 -1px 1px #0003, 0 1px 1px #00000014; .dbqdclkb-item-tag { float: initial; margin: 0 0 1px 0 !important; } } &:hover { .dbqdclkb-item-extra-tags { display: block; } } } } .dbqdclkb-item.ui-sortable-helper { -webkit-transform: rotate(2deg); -moz-transform: rotate(2deg); -o-transform: rotate(2deg); -ms-transform: rotate(2deg); transform: rotate(2deg); } .dbqdclkb-item-tag { float: left; background: $kanban-tile-tag-background; color: color(text-color-default); padding: 2px 5px; font-size: $font-size-small; border-radius: 5px; margin: 0 5px 5px 0; } .dbqdclkb-dropdown { .dropdown-toggle { display: none; border: 0; outline: 0; padding: 0; border-radius: 50%; width: 24px; height: 24px; position: absolute; top: 0; right: 0; background: $kanban-tile-background; svg { fill: $text-color-default; } &:hover { background: $color-white; color: $color-white; box-shadow: 0 0 5px $color-white; text-shadow: 0 0 5px $color-white; svg { fill: $color-primary !important; transform: scale(1.1); } } } } // .dbqdclkb-context-menu { // position: absolute; // display: none; // z-index: 1000; // .dbqdclkb-dropdown-menu { // position: static; // display: block; // border-radius: 10px; // li { // cursor: pointer; // } // } // } } // The dropdown menu styling is purposefully added outside of the #classlist-kanban-board container, because this dropdown will be moved to and from the body element. .dbqdclkb-dropdown-menu { li { cursor: pointer; } .dbqdclkb-disabled { opacity: 0.5; cursor: not-allowed; user-select: none; } .dbqdclkb-hidden { display: none; } }