UNPKG

@syncfusion/ej2-kanban

Version:

The Kanban board is an efficient way to visualize the workflow at each stage along its path to completion. The most important features available are Swim lane, filtering, and editing.

1,010 lines (982 loc) 35.1 kB
.e-popup.e-ddl { border-radius: 4px; -webkit-box-shadow: none; box-shadow: none; margin-top: 1px; } .e-popup.e-ddl .e-input-group { width: auto; } .e-popup.e-ddl .e-input-group input { line-height: 15px; } .e-popup.e-ddl .e-dropdownbase { min-height: 26px; } .e-popup.e-ddl .e-filter-parent .e-input-group { display: -webkit-box; display: -ms-flexbox; display: flex; width: auto; } .e-popup.e-ddl .e-filter-parent .e-input-group .e-back-icon { border: 0; } .e-input-group.e-control-wrapper.e-ddl .e-input[readonly], .e-float-input.e-control-wrapper.e-ddl input[readonly] { background: transparent; } .e-input-group.e-control-wrapper.e-ddl.e-readonly .e-input[readonly], .e-float-input.e-control-wrapper.e-ddl.e-readonly input[readonly] { background: #1b1a19; } .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:active, .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:hover, .e-control.e-dropdownlist .e-input-group:not(.e-disabled) .e-ddl-icon:active, .e-control.e-dropdownlist .e-input-group:not(.e-disabled) .e-ddl-icon:hover, .e-ddl.e-popup .e-input-group:not(.e-disabled) .e-clear-icon:active, .e-ddl.e-popup .e-input-group:not(.e-disabled) .e-clear-icon:hover, .e-ddl.e-popup .e-input-group:not(.e-disabled) .e-back-icon:active, .e-ddl.e-popup .e-input-group:not(.e-disabled) .e-back-icon:hover { background: none; color: #a19f9d; } .e-input-group.e-ddl .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon, .e-input-group.e-control-wrapper.e-ddl .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon, .e-float-input.e-ddl input[readonly] ~ span.e-input-group-icon.e-ddl-icon, .e-float-input.e-control-wrapper.e-ddl input[readonly] ~ span.e-input-group-icon.e-ddl-icon { background: transparent; color: #a19f9d; } .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon, .e-input-group.e-disabled.e-ddl .e-control.e-dropdownlist ~ .e-input-group-icon, .e-control.e-dropdownlist .e-input-group.e-disabled.e-ddl .e-input-group-icon, .e-control.e-dropdownlist .e-input-group.e-ddl .e-input-group-icon { border: 0; } .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-input-group-icon:active, .e-control.e-dropdownlist .e-input-group:not(.e-disabled) .e-input-group-icon:active, .e-ddl.e-popup .e-input-group:not(.e-disabled) .e-back-icon:active, .e-ddl.e-popup .e-input-group:not(.e-disabled) .e-clear-icon:active { -webkit-box-shadow: none; box-shadow: none; } .e-ddl.e-popup .e-input-group:not(.e-disabled) .e-clear-icon { background: none; display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; } .e-ddl.e-popup .e-filter-parent .e-input-group, .e-ddl.e-popup .e-filter-parent { background: #252423; } .e-input-group .e-control.e-dropdownlist ~ .e-ddl-icon { font-size: 14px; } .e-multi-select-wrapper .e-chips-collection .e-chips .e-chips-close.e-icon::before { line-height: 30px; top: 0; } .e-multiselect .e-input-group-icon.e-ddl-icon { border-radius: 0 4px 4px 0; border-right-width: 0; } .e-multiselect.e-rtl .e-input-group-icon.e-ddl-icon { border-left-width: 0; border-radius: 4px 0 0 4px; border-right-width: 1px; } .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon { height: 32px; width: 32px; } .e-multi-select-wrapper .e-searcher input[type=text], .e-multi-select-wrapper .e-multi-searcher input[type=text] { color: #f3f2f1; height: 100%; } .e-multiselect .e-input-group-icon.e-ddl-icon { border-left-width: 0; } /* stylelint-disable-line no-empty-source */ /*! TreeView's bootstrap5 theme wise override definitions and variables */ /* stylelint-disable */ /* stylelint-disable-line no-empty-source */ /* stylelint-disable property-no-vendor-prefix */ @-webkit-keyframes material-spinner-rotate { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes material-spinner-rotate { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes fabric-spinner-rotate { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes fabric-spinner-rotate { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .e-kanban .e-column-expand::before { content: "\e765"; } .e-kanban .e-column-collapse::before { content: "\e748"; } .e-kanban .e-swimlane-row-expand::before { content: "\e729"; } .e-kanban .e-swimlane-row-collapse::before { content: "\e748"; } .e-kanban .e-show-add-icon::before { content: "\e805"; } .e-kanban .e-swimlane-header-toolbar .e-icon-menu::before { content: "\e799"; } .e-kanban.e-rtl .e-column-collapse::before { content: "\e765"; } .e-kanban.e-rtl .e-column-expand::before { content: "\e748"; } .e-kanban.e-rtl .e-swimlane-row-collapse::before { content: "\e765"; } .e-mobile-popup-wrapper .e-close-icon::before { content: "\e7e7"; } /*! kanban component layout */ .e-kanban { display: block; outline: medium none; position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .e-kanban .e-kanban-table { border: 0; border-collapse: separate; border-spacing: 10px 1px; table-layout: fixed; width: 100%; } .e-kanban .e-kanban-table col.e-collapsed { width: 42px; } .e-kanban .e-swimlane .e-kanban-table.e-content-table { border-spacing: 10px 1px; } .e-kanban .e-frozen-swimlane-row { position: relative; z-index: 101; } .e-kanban .e-frozen-swimlane-row .e-frozen-row { padding: 12px 0 0 0; } .e-kanban .e-frozen-swimlane-row .e-frozen-row .e-swimlane-header { display: -webkit-box; display: -ms-flexbox; display: flex; } .e-kanban .e-frozen-swimlane-row .e-frozen-row .e-swimlane-header .e-swimlane-text { font-size: 14px; font-weight: normal; line-height: 1.5; padding: 0 0 0 8px; } .e-kanban .e-frozen-swimlane-row .e-frozen-row .e-swimlane-header .e-item-count { font-size: 12px; font-weight: 600; line-height: 1.25; opacity: 1; padding: 3px 0 0 4px; } .e-kanban .e-frozen-swimlane-row .e-frozen-row .e-swimlane-header .e-swimlane-row-expand, .e-kanban .e-frozen-swimlane-row .e-frozen-row .e-swimlane-header .e-swimlane-row-collapse { border: 1px solid transparent; color: #a19f9d; cursor: pointer; font-size: 16px; height: 24px; margin: 0 0 0 8px; padding: 3px 6px; } .e-kanban .e-frozen-swimlane-row .e-frozen-row .e-swimlane-header .e-swimlane-row-expand:hover, .e-kanban .e-frozen-swimlane-row .e-frozen-row .e-swimlane-header .e-swimlane-row-expand:focus, .e-kanban .e-frozen-swimlane-row .e-frozen-row .e-swimlane-header .e-swimlane-row-collapse:hover, .e-kanban .e-frozen-swimlane-row .e-frozen-row .e-swimlane-header .e-swimlane-row-collapse:focus { background: #252423; border: 1px solid transparent; border-radius: 2px; -webkit-box-shadow: none; box-shadow: none; color: #a19f9d; margin: 0 0 0 8px; padding: 3px 6px; } .e-kanban .e-frozen-swimlane-row .e-frozen-row .e-swimlane-header .e-swimlane-row-expand:focus, .e-kanban .e-frozen-swimlane-row .e-frozen-row .e-swimlane-header .e-swimlane-row-collapse:focus { background: #292827; -webkit-box-shadow: none; box-shadow: none; } .e-kanban .e-kanban-header > div { overflow: hidden; } .e-kanban .e-kanban-header .e-header-cells { border-radius: 4px; height: 42px; overflow: hidden; padding: 10px 12px; position: relative; text-align: left; text-overflow: ellipsis; white-space: nowrap; } .e-kanban .e-kanban-header .e-header-cells .e-header-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; } .e-kanban .e-kanban-header .e-header-cells .e-header-wrap .e-header-title { display: -webkit-box; display: -ms-flexbox; display: flex; overflow: hidden; text-overflow: ellipsis; width: 100%; } .e-kanban .e-kanban-header .e-header-cells.e-stacked-header-cell { border-bottom: 1px solid #292827; } .e-kanban .e-kanban-header .e-header-cells.e-toggle-header .e-column-expand { cursor: pointer; font-size: 16px; padding: 6px; } .e-kanban .e-kanban-header .e-header-cells.e-toggle-header .e-column-collapse { cursor: pointer; font-size: 16px; padding: 6px; } .e-kanban .e-kanban-header .e-header-cells.e-min-color { background: rgb(65.5, 52.9430051813, 0); } .e-kanban .e-kanban-header .e-header-cells.e-max-color { background: #442726; } .e-kanban .e-kanban-header .e-header-cells.e-collapsed { background: #201f1e; text-align: center; width: 42px; } .e-kanban .e-kanban-header .e-header-cells.e-collapsed .e-header-wrap { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .e-kanban .e-kanban-header .e-header-cells.e-collapsed.e-min-color { background: rgb(65.5, 52.9430051813, 0); } .e-kanban .e-kanban-header .e-header-cells.e-collapsed.e-max-color { background: #442726; } .e-kanban .e-kanban-header .e-header-cells.e-collapsed .e-limits, .e-kanban .e-kanban-header .e-header-cells.e-collapsed .e-header-title { display: none; } .e-kanban .e-kanban-header .e-header-cells .e-header-text { font-size: 14px; font-weight: 600; line-height: 1.5; overflow: hidden; padding-right: 5px; text-overflow: ellipsis; } .e-kanban .e-kanban-header .e-header-cells .e-item-count { font-size: 12px; font-weight: 600; line-height: 1.5; margin-top: 2px; opacity: 1; text-transform: capitalize; } .e-kanban .e-kanban-header .e-header-cells .e-limits { display: -webkit-box; display: -ms-flexbox; display: flex; padding-top: 3px; } .e-kanban .e-kanban-header .e-header-cells .e-limits .e-min-count, .e-kanban .e-kanban-header .e-header-cells .e-limits .e-max-count { font-size: 12px; font-weight: 600; opacity: 1; width: 100%; } .e-kanban .e-kanban-header .e-header-cells .e-limits .e-max-count { text-align: right; } .e-kanban .e-kanban-content { overflow: auto; padding-bottom: 10px; } .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-limits { display: -webkit-box; display: -ms-flexbox; display: flex; height: 26px; position: relative; } .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-kanban-border { display: none; } .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-kanban-border.e-dropping { display: block; position: absolute; } .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-limits .e-min-count, .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-limits .e-max-count { font-size: 12px; font-weight: 600; opacity: 1; padding: 4px 8px; } .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-limits .e-max-count { position: absolute; right: 0; } .e-kanban .e-kanban-content .e-content-row .e-content-cells.e-min-color { background: rgb(65.5, 52.9430051813, 0); } .e-kanban .e-kanban-content .e-content-row .e-content-cells.e-max-color { background: #442726; } .e-kanban .e-kanban-content .e-content-row .e-content-cells.e-collapsed { overflow: hidden; text-align: center; width: 42px; } .e-kanban .e-kanban-content .e-content-row .e-content-cells.e-collapsed .e-card-wrapper, .e-kanban .e-kanban-content .e-content-row .e-content-cells.e-collapsed .e-card-container, .e-kanban .e-kanban-content .e-content-row .e-content-cells.e-collapsed .e-limits { display: none; } .e-kanban .e-kanban-content .e-content-row .e-content-cells.e-collapsed .e-collapse-header-text { color: #d2d0ce; font-size: 14px; font-weight: 600; overflow: hidden; padding: 12px 10px; position: relative; text-overflow: ellipsis; white-space: nowrap; -webkit-writing-mode: vertical-lr; -ms-writing-mode: tb-lr; writing-mode: vertical-lr; } .e-kanban .e-kanban-content .e-content-row .e-content-cells.e-collapsed .e-collapse-header-text .e-item-count { display: inline-block; font-size: 13px; font-weight: normal; opacity: 0.57; } .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-show-add-button { border: 1px dashed #0078d4; height: 36px; margin: 8px 8px 0; } .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-show-add-button .e-show-add-icon { padding: 11px; text-align: center; } .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-show-add-button:focus { border: 1px dashed #797775; color: #797775; } .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-multi-card-wrapper, .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-multi-card-container { display: none; } .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-wrapper, .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-container { height: inherit; overflow: auto; padding: 12px 12px 0; } .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-wrapper .e-empty-card, .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-container .e-empty-card { color: #a19f9d; display: table; font-size: 14px; line-height: 1.5; margin: 0 auto; padding: 50px 0; position: relative; } .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-wrapper .e-card, .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-container .e-card { border: 1px solid transparent; border-radius: 2px; -webkit-box-shadow: 0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108); box-shadow: 0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108); margin-bottom: 12px; min-height: 50px; } .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-wrapper .e-card.e-draggable, .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-container .e-card.e-draggable { cursor: all-scroll; } .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-wrapper .e-card .e-card-header, .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-container .e-card .e-card-header { padding: 16px 16px 0; } .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-wrapper .e-card .e-card-header .e-card-header-title, .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-container .e-card .e-card-header .e-card-header-title { font-size: 14px; font-weight: 600; line-height: 1.5; } .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-wrapper .e-card .e-card-footer, .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-container .e-card .e-card-footer { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; line-height: normal; padding: 0 16px 16px; } .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-wrapper .e-card .e-card-content, .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-container .e-card .e-card-content { font-size: 14px; line-height: 1.5; padding: 4px 16px 16px 16px; } .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-wrapper .e-card.e-card-color, .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-container .e-card.e-card-color { border: 1px solid transparent; border-left: 3px solid; } .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-wrapper .e-card.e-card-color .e-card-header, .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-container .e-card.e-card-color .e-card-header { padding: 16px 16px 0 16px; } .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-wrapper .e-card.e-card-color .e-card-content, .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-container .e-card.e-card-color .e-card-content { padding: 4px 16px 16px 16px; } .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-wrapper .e-card.e-card-color .e-card-tags, .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-container .e-card.e-card-color .e-card-tags { padding: 0 16px 16px 16px; } .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-wrapper .e-card.e-card-color.e-selection, .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-container .e-card.e-card-color.e-selection { border: 1px solid #0078d4; border-left: 3px solid; -webkit-box-shadow: 0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108); box-shadow: 0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108); } .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-wrapper .e-card.e-card-color.e-selection:hover, .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-container .e-card.e-card-color.e-selection:hover { border: 1px solid #0078d4; border-left: 3px solid; -webkit-box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108); box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108); padding: 0; } .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-wrapper .e-card.e-card-color:hover, .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-container .e-card.e-card-color:hover { border: 1px solid transparent; border-left: 3px solid; -webkit-box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108); box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108); } .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-wrapper .e-card.e-card-color .e-card-footer, .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-container .e-card.e-card-color .e-card-footer { padding: 0 16px 16px 16px; } .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-wrapper .e-card .e-card-tag, .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-container .e-card .e-card-tag { border-radius: 2px; display: inline-block; font-size: 14px; line-height: 1.5; margin-right: 8px; max-width: 100%; overflow: hidden; padding: 2px 8px; text-overflow: ellipsis; } .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-wrapper .e-card .e-card-tags, .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-container .e-card .e-card-tags { line-height: 1; padding: 0 16px 16px; } .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-wrapper .e-card.e-cloned-card, .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-container .e-card.e-cloned-card { position: absolute; z-index: 1; } .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-wrapper .e-card.e-selection, .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-container .e-card.e-selection { border: 1px solid #0078d4; -webkit-box-shadow: 0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108); box-shadow: 0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108); } .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-wrapper .e-card.e-selection:hover, .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-container .e-card.e-selection:hover { border: 1px solid #0078d4; -webkit-box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108); box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108); padding: 0; } .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-wrapper .e-card:hover, .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-container .e-card:hover { border: 1px solid transparent; -webkit-box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108); box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108); } .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-wrapper .e-card:focus, .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-container .e-card:focus { border: 1px solid #0078d4; } .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-wrapper .e-card.e-card-color:focus, .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-container .e-card.e-card-color:focus { border: 1px solid #0078d4; border-left: 3px solid; } .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-wrapper .e-card.e-kanban-dragged-card, .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-container .e-card.e-kanban-dragged-card { display: none; } .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-wrapper .e-multi-card-clone, .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-container .e-multi-card-clone { border: 1px solid #797775; height: 34px; } .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-wrapper .e-multi-card-text, .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-container .e-multi-card-text { background: #1b1a19; display: table-cell; padding-left: 8px; text-align: center; } .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-wrapper .e-target-dragged-clone, .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-wrapper .e-target-dropped-clone, .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-container .e-target-dragged-clone, .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-container .e-target-dropped-clone { border-radius: 2px; margin-bottom: 12px; } .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-wrapper .e-target-dragged-clone, .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-container .e-target-dragged-clone { background: #252423; border: 1px dashed #797775; } .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-wrapper .e-target-dropped-clone, .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-container .e-target-dropped-clone { background: #004578; border: 1px dashed #0078d4; } .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-target-multi-clone .e-column-key { border-bottom: 1px dashed #797775; border-left: 1px dashed #797775; border-right: 1px dashed #797775; } .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-target-multi-clone .e-column-key .e-text { opacity: 0.5; text-align: center; } .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-target-multi-clone .e-column-key:first-child { border-top: 1px dashed #797775; } .e-kanban .e-kanban-content .e-content-row.e-swimlane-row .e-content-cells { height: 42px; min-height: 50px; } .e-kanban .e-kanban-content .e-content-row.e-swimlane-row .e-content-cells .e-swimlane-header { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 0; } .e-kanban .e-kanban-content .e-content-row.e-swimlane-row .e-content-cells .e-swimlane-header .e-swimlane-row-expand, .e-kanban .e-kanban-content .e-content-row.e-swimlane-row .e-content-cells .e-swimlane-header .e-swimlane-row-collapse { border: 1px solid transparent; color: #a19f9d; cursor: pointer; font-size: 16px; height: 24px; margin: 0 0 0 8px; padding: 4px 6px; } .e-kanban .e-kanban-content .e-content-row.e-swimlane-row .e-content-cells .e-swimlane-header .e-swimlane-row-expand:hover, .e-kanban .e-kanban-content .e-content-row.e-swimlane-row .e-content-cells .e-swimlane-header .e-swimlane-row-expand:focus, .e-kanban .e-kanban-content .e-content-row.e-swimlane-row .e-content-cells .e-swimlane-header .e-swimlane-row-collapse:hover, .e-kanban .e-kanban-content .e-content-row.e-swimlane-row .e-content-cells .e-swimlane-header .e-swimlane-row-collapse:focus { background: #252423; border: 1px solid transparent; border-radius: 2px; color: #a19f9d; font-size: 16px; margin: 0 0 0 8px; padding: 4px 6px; } .e-kanban .e-kanban-content .e-content-row.e-swimlane-row .e-content-cells .e-swimlane-header .e-swimlane-text { font-size: 14px; font-weight: normal; line-height: 1.5; padding: 2px; } .e-kanban .e-kanban-content .e-content-row.e-swimlane-row .e-content-cells .e-swimlane-header .e-item-count { color: inherit; font-size: 12px; font-weight: 600; line-height: 1.25; opacity: 1; padding: 5px 2px 2px 2px; } .e-kanban .e-kanban-content .e-content-row:not(.e-swimlane-row) .e-content-cells { border: 1px solid transparent; border-radius: 4px; vertical-align: top; } .e-kanban .e-kanban-content .e-content-row:not(.e-swimlane-row) .e-content-cells.e-dropping { border: 1px dashed #797775; } .e-kanban .e-kanban-content .e-content-row:not(.e-swimlane-row) .e-content-cells.e-min-color { background: rgb(65.5, 52.9430051813, 0); } .e-kanban .e-kanban-content .e-content-row:not(.e-swimlane-row) .e-content-cells.e-max-color { background: #442726; } .e-kanban .e-kanban-content .e-content-row:not(.e-swimlane-row) .e-content-cells:focus { border: 1px solid transparent; -webkit-box-shadow: none; box-shadow: none; } .e-kanban .e-kanban-content .e-content-row:not(.e-swimlane-row) .e-content-cells .e-card-wrapper, .e-kanban .e-kanban-content .e-content-row:not(.e-swimlane-row) .e-content-cells .e-card-container { min-height: 50px; } .e-kanban .e-kanban-content .e-content-row:not(.e-swimlane-row) .e-content-cells .e-dropping { border: 1px dashed #797775; } .e-kanban .e-kanban-content .e-content-row.e-collapsed:not(.e-swimlane-row) .e-content-cells { border-bottom: 0; height: 0; } .e-kanban .e-kanban-content .e-content-row.e-collapsed:not(.e-swimlane-row) .e-content-cells > .e-collapse-header-text, .e-kanban .e-kanban-content .e-content-row.e-collapsed:not(.e-swimlane-row) .e-content-cells .e-limits, .e-kanban .e-kanban-content .e-content-row.e-collapsed:not(.e-swimlane-row) .e-content-cells .e-show-add-button, .e-kanban .e-kanban-content .e-content-row.e-collapsed:not(.e-swimlane-row) .e-content-cells .e-card-wrapper, .e-kanban .e-kanban-content .e-content-row.e-collapsed:not(.e-swimlane-row) .e-content-cells .e-card-container { display: none; } .e-kanban.e-rtl .e-kanban-table .e-header-cells { text-align: right; } .e-kanban.e-rtl .e-kanban-table .e-header-cells .e-header-text { padding-left: 5px; padding-right: initial; text-align: right; text-transform: uppercase; } .e-kanban.e-rtl .e-kanban-table .e-header-cells .e-limits .e-max-count { text-align: left; } .e-kanban.e-rtl .e-kanban-table .e-header-cells.e-toggle-header .e-column-collapse { text-align: center; } .e-kanban.e-rtl .e-kanban-table.e-content-table .e-content-row .e-content-cells .e-limits .e-max-count { left: 0; right: auto; } .e-kanban.e-rtl .e-kanban-table.e-content-table .e-content-row .e-content-cells.e-collapsed .e-collapse-header-text { direction: initial; } .e-kanban.e-rtl .e-kanban-table.e-content-table .e-content-row.e-swimlane-row .e-content-cells .e-swimlane-header .e-swimlane-row-expand, .e-kanban.e-rtl .e-kanban-table.e-content-table .e-content-row.e-swimlane-row .e-content-cells .e-swimlane-header .e-swimlane-row-collapse { margin: 0 8px 0 0; } .e-kanban.e-device .e-swimlane-header .e-swimlane-header-toolbar { background: #201f1e; border-bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 3px; min-height: 42px; padding: 10px; } .e-kanban.e-device .e-swimlane-header .e-swimlane-header-toolbar .e-toolbar-swimlane-name { color: #f3f2f1; font-size: 16px; font-weight: 400; line-height: 1.5; padding: 6px; } .e-kanban.e-device .e-swimlane-header .e-swimlane-header-toolbar .e-toolbar-swimlane-item-count { padding-top: 9px; } .e-kanban.e-device .e-swimlane-header .e-swimlane-header-toolbar .e-toolbar-swimlane-item-count .e-item-count { font-size: 12px; font-weight: 600; line-height: 1.25; opacity: 1; padding: 3px 0 0 4px; } .e-kanban.e-device .e-swimlane-header .e-swimlane-header-toolbar .e-toolbar-menu, .e-kanban.e-device .e-swimlane-header .e-swimlane-header-toolbar .e-toolbar-level-title { padding-top: 6px; } .e-kanban.e-device .e-swimlane-header .e-swimlane-header-toolbar .e-toolbar-menu .e-icon-menu, .e-kanban.e-device .e-swimlane-header .e-swimlane-header-toolbar .e-toolbar-level-title .e-icon-menu { color: #a19f9d; font-size: 15px; padding: 7px; padding-left: 4px; } .e-kanban.e-device .e-kanban-header .e-swimlane .e-header-cells { border-bottom: 0; } .e-kanban.e-device .e-swimlane-content { position: absolute; width: 100%; } .e-kanban.e-device .e-swimlane-content .e-swimlane-resource { background: #1b1a19; border: 1px solid #292827; height: 100%; width: 225px; } .e-kanban.e-device .e-swimlane-content .e-swimlane-resource .e-swimlane-tree { height: 100%; overflow-y: auto; } .e-kanban.e-device .e-swimlane-content .e-swimlane-overlay { position: absolute; } .e-kanban.e-device .e-swimlane-content .e-swimlane-overlay.e-enable { background: rgba(0, 0, 0, 0.4); height: 100%; opacity: 1; width: 100%; } .e-mobile-popup-wrapper.e-device, .e-mobile-popup-container.e-device { background: #1b1a19; border-radius: 2px; bottom: 0; -webkit-box-shadow: 0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18); box-shadow: 0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18); display: -webkit-box; display: -ms-flexbox; display: flex; height: 60px; left: 0; margin: 0; max-width: 100%; min-width: 100%; opacity: 1; overflow: hidden; padding: 15px; position: fixed; right: 0; top: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: 100%; z-index: 1004; } .e-mobile-popup-wrapper.e-device .e-popup-header .e-close, .e-mobile-popup-container.e-device .e-popup-header .e-close { background: transparent; } .e-mobile-popup-wrapper.e-device .e-popup-content, .e-mobile-popup-container.e-device .e-popup-content { color: inherit; font-size: 15px; font-weight: 500; overflow: hidden; padding: 5px; text-overflow: ellipsis; white-space: nowrap; width: 100%; } .e-kanban-dialog.e-dialog { min-width: 350px; } .e-kanban-dialog.e-dialog .e-kanban-form-wrapper table, .e-kanban-dialog.e-dialog .e-kanban-form-container table { width: 100%; } .e-kanban-dialog.e-dialog .e-kanban-form-wrapper table td, .e-kanban-dialog.e-dialog .e-kanban-form-container table td { color: #c8c6c4; font-size: 14px; font-weight: 600; letter-spacing: 0; line-height: 1.5; opacity: 1; padding: 8px 0; text-align: left; } .e-kanban-dialog.e-dialog .e-kanban-form-wrapper table td textarea.e-field, .e-kanban-dialog.e-dialog .e-kanban-form-container table td textarea.e-field { resize: vertical; } .e-kanban-dialog.e-dialog .e-kanban-form-wrapper table .e-label, .e-kanban-dialog.e-dialog .e-kanban-form-container table .e-label { padding-right: 10px; vertical-align: top; width: 70px; } .e-kanban-dialog.e-dialog .e-kanban-form-wrapper table .e-field, .e-kanban-dialog.e-dialog .e-kanban-form-container table .e-field { width: 100%; } .e-kanban-dialog.e-dialog .e-footer-content .e-dialog-delete.e-btn { float: left; margin-left: 0; } *.e-rtl .e-kanban-form-wrapper table .e-label, *.e-rtl .e-kanban-form-container table .e-label { padding-left: 10px; padding-right: 0; text-align: right; } *.e-rtl .e-dialog-delete { float: right; } .e-card-virtual-skeleton-wrapper .e-skeleton.e-skeleton-text.e-shimmer-wave { border-radius: 2px; } .e-card-virtual-skeleton-wrapper { height: inherit; overflow: hidden; padding: 12px 12px 0; } /*! kanban component theme */ .e-kanban { background: #1b1a19; } .e-kanban .e-kanban-table .e-header-cells { background: #201f1e; } .e-kanban .e-kanban-table .e-header-cells .e-header-text { color: #d2d0ce; } .e-kanban .e-kanban-table .e-header-cells .e-item-count { color: #a19f9d; } .e-kanban .e-kanban-table .e-header-cells .e-limits { color: #a19f9d; } .e-kanban .e-kanban-table .e-header-cells .e-column-expand, .e-kanban .e-kanban-table .e-header-cells .e-column-collapse { border: 1px solid transparent; color: #a19f9d; } .e-kanban .e-kanban-table .e-header-cells .e-column-expand:hover, .e-kanban .e-kanban-table .e-header-cells .e-column-expand:focus, .e-kanban .e-kanban-table .e-header-cells .e-column-collapse:hover, .e-kanban .e-kanban-table .e-header-cells .e-column-collapse:focus { background: #292827; border: 1px solid transparent; border-radius: 2px; -webkit-box-shadow: none; box-shadow: none; color: #a19f9d; } .e-kanban .e-kanban-table.e-content-table .e-content-row:not(.e-swimlane-row) td { background: #201f1e; } .e-kanban .e-kanban-table.e-content-table .e-content-row.e-swimlane-row .e-swimlane-text, .e-kanban .e-kanban-table.e-content-table .e-content-row.e-swimlane-row .e-item-count { color: #f3f2f1; } .e-kanban .e-kanban-table.e-content-table .e-content-row .e-show-add-button:hover { background: #004578; } .e-kanban .e-kanban-table.e-content-table .e-content-row .e-show-add-button .e-show-add-icon { color: #0078d4; } .e-kanban .e-kanban-table.e-content-table .e-card { background: #252423; } .e-kanban .e-kanban-table.e-content-table .e-card.e-selection { background: #252423; } .e-kanban .e-kanban-table.e-content-table .e-card .e-card-header { color: #f3f2f1; } .e-kanban .e-kanban-table.e-content-table .e-card .e-card-content { color: #d2d0ce; } .e-kanban .e-kanban-table.e-content-table .e-card .e-card-tag.e-card-label { background: #292827; color: #f3f2f1; } .e-kanban .e-kanban-table.e-content-table .e-target-multi-clone .e-column-key.e-multi-active { background: #004578; border-color: #0078d4; } .e-kanban .e-kanban-table.e-content-table .e-target-multi-clone .e-column-key.e-multi-bottom-border { border-bottom-color: #0078d4; } .e-kanban .e-kanban-table.e-content-table .e-target-multi-clone .e-column-key.e-multi-active:first-child { border-color: #0078d4; } .e-kanban .e-frozen-swimlane-row { background: #1b1a19; } .e-kanban .e-frozen-swimlane-row .e-swimlane-header .e-swimlane-text { color: #f3f2f1; } .e-kanban .e-frozen-swimlane-row .e-swimlane-header .e-item-count { color: #a19f9d; } .e-kanban-dialog.e-dialog .e-kanban-form-wrapper table textarea { background: #1b1a19; color: #d2d0ce; min-width: 70%; } .e-kanban-dialog.e-dialog .e-kanban-form-wrapper table textarea:focus { -webkit-box-shadow: 0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108); box-shadow: 0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108); } .e-card-virtual-skeleton-wrapper, .e-card-skeleton-wrapper { background: #201f1e; }