metro4/source/components/drag-items/drag-items.less

The front-end framework for Build responsive, mobile-first projects on the web with the first front-end component library in Metro Style

@import (once) "../../include/vars";
@import (once) "../../include/mixins";

.drag-items-target {
}

.dragged-item {
    opacity: .3;
}

.drag-item-marker {
    position: absolute;
    top: 8px;
    left: 4px;
    height: 20px;
    width: 24px;
    background-color: @transparent;
    cursor: move;
    border-top: 4px solid @white;

    &::before, &::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 4px;
        background-color: @white;
    }

    &::before {
        top: 4px;
    }

    &::after {
        top: 12px;
    }
}

.drag-marker-dark {
    .drag-item-marker {
        border-top-color: @dark;
    }
    &::before, &::after {
        background-color: @dark;
    }
}

.dragged-item-avatar {
    cursor: move;
    display: block;
    position: absolute;
    background-color: @blue;
    opacity: .3;
    z-index: @zindex-absolute;
    box-shadow: inset -1px 0px 10px -4px rgba(red(@primaryColor),green(@primaryColor),blue(@primaryColor),1);
}