vue-mover/vue-mover.css

A simple list picker vue-component, with drag and drop and sortable items.

.mover-container {
    display: flex;
    flex-flow:  row nowrap;  
}
.mover-panel-box {
    flex: 1 1 auto;
    border: 1px solid #ddd;
    background: #f9f9f9;
    
    border-radius: 3px;
    overflow: auto;    

    display: flex;
    flex-direction: column
}
.mover-panel {
    height: 280px;
    min-height: 240px;
    overflow-y: auto !important;    
}
.mover-controls {
    flex: 0 0 auto;
    align-self: center;
    padding: 0 30px;
}
.mover-controls>button {
    padding: 10px;
    width: 50px; 
    display: block; 
    margin-bottom: 10px;
}

.mover-item, .mover-ghost, .mover-selected, .mover-header {
    padding: 8px 10px;    
    border-bottom:1px solid #ccc; 
}
.mover-header{
    background:#444;
    color: #fafafa; 
    font-size: 1.1em;  
    font-weight: 600;
    text-align: center;
}
.mover-ghost {
    background: coral;
    opacity: 0.80;
}
.mover-selected {
    background: steelblue;
    color: #F0F0F0;
    font-weight: 600;
    opacity: 0.80;
}