react-layouts-builder
Version:
Lightweight and powerfull react layouts drag and drop
1 lines • 1.2 kB
CSS
p{margin:0}.droppable-container{position:relative}.lb-indice.drop-top:before{display:block;top:0}.lb-indice.drop-bottom:before{bottom:0;display:block}.lb-indice.drop-left:before{display:block;height:100%;left:0;width:5px}.lb-indice.drop-right:before{display:block;height:100%;right:0;width:5px}.lb-dg-container{background-color:#61dafb}.lb-dg-row{background-color:#7fffd4;margin-bottom:5px;margin-top:5px}.droppable-container:before{background:red;border-radius:10px;content:"";display:none;height:5px;position:absolute;width:100%;z-index:999}.lb-dp-row{flex:1 1 0}.lb-row{display:flex;flex-direction:column}.lb-col{flex:1 1 0}.lb-spacing{padding-bottom:0;padding-top:0}.lb-w-full{width:100%}.animated-element{height:0;overflow:hidden;transition:height .3s ease}.animated-element.visible{height:100px}.active-drop-element{background-color:#f0f8ffad}.droppable-element{border-color:transparent;border-width:5px}.active-border-top{border-top:5px solid #db0000}.active-border-bottom{border-bottom:5px solid #db0000}.active-border-left{border-left:5px solid #db0000}.active-border-right{border-right:5px solid #db0000}.border-hidden{border:1px solid transparent}.block-container:hover .drag-icon{opacity:1}