@nodeject/ui-components/esm/dnd-lists/list/List.module.less

UI library for non-trivial components

@import '../scrollbar-styles/FancyScrollbar.module.less';
@import (reference) '../item/Item.module.less';

@marginScrollbar: 4px;
@listWidth: 272px;

.listWrapper {
    width: @listWidth;
    height: 100%;
    box-sizing: border-box;
    display: inline-block;
    vertical-align: top;
    white-space: nowrap;
}

.disableScrollbars {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */
}
.disableScrollbars::-webkit-scrollbar {
    display: none;
    width: 0px;
    background: transparent; /* Chrome/Safari/Webkit */
}

.list {
    background: inherit;
    border: 1px solid inherit;
    border-radius: 2px;
    min-width: 150px;
    border-radius: 3px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    max-height: 100%;
    position: relative;
    white-space: normal;

    // .title {
    //     padding: 8px;
    // }

    .itemListWithItems {
        background: inherit;
    }

    .itemListNoItems {
        background: rgba(255, 255, 255, 0.4);
        :global(.smooth-dnd-container) {
            min-height: 100px;
        }
    }

    .itemList {
        // margin: @marginScrollbar * 2 0;
        position: relative;
        &:hover {
            cursor: grab;
        }
        transition: background-color 0.2s ease;
        min-height: 80px;

        flex: 1 1 auto;
        overflow-y: auto;
        overflow-x: hidden;

        // z-index: 1;
        &::-webkit-scrollbar-button:end {
            display: block;
            height: 4px;
            width: 4px;
        }
    }
}

.cardGhost {
    filter: contrast(0.8);
    -webkit-box-shadow: 0px 5px 8px 5px rgba(0, 0, 0, 0.45);
    -moz-box-shadow: 0px 5px 8px 5px rgba(0, 0, 0, 0.45);
    box-shadow: 0px 5px 8px 5px rgba(0, 0, 0, 0.45);
    transition: all 0s ease;
    // transform: rotateZ(2deg);
}

.cardGhostDrop {
    transition: transform 0s ease-in-out;
    // transform: rotateZ(0deg);
}

.dropPreview {
    backdrop-filter: contrast(50%);
}