@nodeject/ui-components/cjs/dnd-lists/item/Item.module.less

UI library for non-trivial components

@itemBackgroundColor: white;
@itemBorderColor: #ececec;
@itemBorderRadius: 2px;

.itemBorder {
    border-radius: @itemBorderRadius;
    box-shadow: 0 1px 1px rgba(9, 30, 66, 0.25);
}

.item {
    &:extend(.itemBorder);
    background-color: @itemBackgroundColor;
}

.itemVisibleWebkit {
    content-visibility: visible;
    contain-intrinsic-size: 1px 100px;
}

.itemHiddenWebkit {
    content-visibility: hidden;
    contain-intrinsic-size: 1px 100px;
}

.itemFilteredOut {
    &:extend(.item);
    display: none;
}

.dragging {
    filter: contrast(0.8);
    -webkit-box-shadow: 0px 8px 12px -5px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 8px 12px -5px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 8px 12px -5px rgba(0, 0, 0, 0.75);
    transition: all 0.3s ease;
}