@progress/kendo-ui/css/web/Default/taskboard/_layout.less

This package is part of the [Kendo UI for jQuery](http://www.telerik.com/kendo-ui) suite.

// TaskBoard
.k-taskboard {
    box-sizing: border-box;
    font-size: @taskboard-font-size;
    font-family: @taskboard-font-family;
    line-height: @taskboard-line-height;
    display: flex;
    flex-direction: column;
    position: relative;
}

// Toolbar
.k-toolbar.k-taskboard-toolbar {
    padding: @taskboard-toolbar-padding-y @taskboard-toolbar-padding-x;
    border-width: 0;
    box-shadow: none;
    background: none;
    background-image: none;
}

// Content
.k-taskboard-content {
    padding: 0 @taskboard-toolbar-padding-x @taskboard-content-padding-y;
    display: flex;
    position: relative;
    flex: 1 1 auto;
    overflow-x: auto;
}

// Columns
.k-taskboard-columns-container {
    outline: none;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    gap: @taskboard-columns-container-gap;
    overflow-x: visible;
}

.k-taskboard-column {
    width: @taskboard-column-width;
    border-width: @taskboard-column-border-width;
    border-radius: @taskboard-column-border-radius;
    border-style: solid;
    outline: none;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    overflow: hidden;
}

.k-taskboard-column-header {
    padding: @taskboard-column-header-padding-y @taskboard-column-header-padding-x;
    font-weight: @taskboard-column-header-font-weight;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: @taskboard-column-header-gap;
}

.k-taskboard-column-header-actions {
    display: inline-flex;
    flex-shrink: 0;
    align-self: flex-start;
    gap: @taskboard-column-header-actions-gap;
}

.k-taskboard-column-cards-container {
    padding: @taskboard-column-container-padding-y @taskboard-column-container-padding-x;
    outline: none;
    overflow: auto;
    margin-bottom: @taskboard-column-container-spacing-y;
    flex: 1 1 auto;
}

.k-taskboard-column-cards {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    gap: @taskboard-column-cards-gap 0;
}

// Edit/New Columns
.k-taskboard-column-new {
    max-height: @taskboard-column-new-calc-height;
}

.k-taskboard-column-new,
.k-taskboard-column-edit {
    .k-taskboard-column-header {
        font-weight: inherit;
    }

    .k-taskboard-column-header-text {
        flex: 1 1 100%;
    }

    .k-textbox {
        width: 100%;
    }
}

// Preview/Edit Pane
.k-taskboard-pane {
    width: @taskboard-pane-width;
    border-width: @taskboard-pane-border-width;
    border-style: solid;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 2;
}

.k-taskboard-pane-header {
    padding: @taskboard-pane-header-padding-y @taskboard-pane-header-padding-x;
    font-weight: @taskboard-pane-header-font-weight;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.k-taskboard-pane-header-text {
    word-break: break-word;
}

.k-taskboard-pane-header-actions {
    align-self: flex-start;
    flex-shrink: 0;
}

.k-taskboard-pane-content {
    padding: @taskboard-pane-content-padding-y @taskboard-pane-content-padding-x;
    overflow: auto;
    flex: 1 1 auto;
}

.k-taskboard-pane-actions {
    padding: @taskboard-pane-actions-padding-y @taskboard-pane-actions-padding-x;
}

.k-taskboard-pane-start {
    right: auto;
    left: 0;
}

// Cards
.k-taskboard-card {
    .border-radius( @taskboard-card-border-radius );
    border-width: @taskboard-card-border-width;

    &.k-taskboard-card-category {
        border-left-width: @taskboard-card-category-border-width;

        .k-rtl &,
        &.k-rtl,
        [dir="rtl"] &,
        &[dir="rtl"] {
            border-left-width: @taskboard-card-border-width;
            border-right-width: @taskboard-card-category-border-width;
        }
    }

    .k-card-header
    .k-card-body,
    .k-card-footer {
        padding: @taskboard-card-padding-y @taskboard-card-padding-x;
    }

    .k-card-header {
        display: flex;
        align-items: center;
    }

    .k-card-title {
        margin: 0;
        font-size: inherit;
        font-weight: inherit;
        word-break: break-word;

        &:focus,
        &.k-state-focus,
        &:hover,
        &.k-state-hover {
            text-decoration: underline;
        }
    }

    .k-card-header-actions {
        align-self: flex-start;
    }
}

// Card Drag Placeholder
.k-taskboard-drag-placeholder {
    .border-radius( @taskboard-drag-placeholder-border-radius );
    border-width: @taskboard-drag-placeholder-border-width;
    border-style: solid;
    position: relative;
}

.k-ie {
    .k-taskboard-column:not(:last-child) {
        margin-right: @taskboard-columns-container-gap;
    }

    .k-rtl .k-taskboard-column:not(:last-child) {
        margin-right: 0;
        margin-left: @taskboard-columns-container-gap;
    }

    .k-taskboard-column-cards-container {
        margin-bottom: calc(3 * @taskboard-column-container-spacing-y);
    }

    .k-taskboard-column-cards > .k-taskboard-card:not(:last-child) {
        margin-bottom: @taskboard-column-cards-gap;
    }

    .k-taskboard-column-header-actions > .k-button:not(:last-child) {
        margin-right: @taskboard-column-header-actions-gap;
    }

    .k-rtl .k-taskboard-column-header-actions > .k-button:not(:last-child) {
        margin-right: 0;
        margin-left: @taskboard-column-header-actions-gap;
    }
}