smart-webcomponents-react/source/styles/components/smart.sortable.css

[](https://jqwidgets.com/license/)

.smart-sortable{display:block}.smart-sortable .smart-sortable-items-parent{display:flex;flex-direction:column}.smart-sortable .smart-sortable-item{transform:translate(0,0);position:relative}.smart-sortable .smart-sortable-item.dragged{position:absolute;box-shadow:var(--smart-elevation-4);z-index:9999999}.smart-sortable .smart-sortable-item.placeholder:after,.smart-sortable .smart-sortable-item.placeholder:before{content:none}.smart-sortable:not([disabled]) .smart-sortable-item{touch-action:none}.smart-sortable[disabled]{pointer-events:none;opacity:.7}.smart-sortable:not([items]).smart-container,.smart-sortable:not([items])>.smart-container{display:flex;flex-direction:column}.smart-sortable:not([items])[mode=horizontal]>.smart-container{flex-direction:row}.smart-sortable[dragged]>.smart-container{user-select:none}.smart-sortable[mode=horizontal] .smart-sortable-items-parent{flex-direction:row}.smart-sortable[handle-position=left] .smart-sortable-item:after,.smart-sortable[handle-position=left] .smart-sortable-item:before{left:calc(-1 * var(--smart-sortable-handle-size))!important}.smart-sortable:not([animation=none]) .smart-sortable-item{transition:transform .15s ease-in}.smart-sortable:not([animation=none]) .smart-sortable-item.returning{transition:left .15s ease-in,top .15s ease-in}.smart-sortable:not([drag-mode=handle]):not([disabled]) .smart-sortable-item{cursor:grab}.smart-sortable[drag-mode=handle] .smart-sortable-item:after,.smart-sortable[drag-mode=handle] .smart-sortable-item:before{content:var(--smart-icon-ellipsis);position:absolute;left:100%;top:calc(50% - var(--smart-sortable-handle-size)/ 2);width:var(--smart-sortable-handle-size);height:var(--smart-sortable-handle-size);display:flex;align-items:flex-end;justify-content:center;font-family:var(--smart-font-family-icon);font-size:var(--smart-font-size);line-height:calc(var(--smart-sortable-handle-size) - var(--smart-font-size)/ 2);cursor:grab;visibility:hidden;opacity:0;transition:visibility .2s ease-in,opacity .2s ease-in;color:var(--smart-background-color)}.smart-sortable[drag-mode=handle] .smart-sortable-item.dragged:after,.smart-sortable[drag-mode=handle] .smart-sortable-item.dragged:before,.smart-sortable[drag-mode=handle][handle-visibility=visible]:not([disabled]) .smart-sortable-item:after,.smart-sortable[drag-mode=handle][handle-visibility=visible]:not([disabled]) .smart-sortable-item:before{visibility:visible;opacity:.5}.smart-sortable[drag-mode=handle] .smart-sortable-item:before{transform:rotate(-90deg)}.smart-sortable[drag-mode=handle] .smart-sortable-item:after{transform:rotate(90deg)}.smart-sortable[drag-mode=handle]:not([disabled]) .smart-sortable-item:hover:after,.smart-sortable[drag-mode=handle]:not([disabled]) .smart-sortable-item:hover:before{z-index:9999999;visibility:visible;opacity:.5}.smart-sortable[drag-mode=handle][handle-position=bottom] .smart-sortable-item:after,.smart-sortable[drag-mode=handle][handle-position=bottom] .smart-sortable-item:before,.smart-sortable[drag-mode=handle][handle-position=top] .smart-sortable-item:after,.smart-sortable[drag-mode=handle][handle-position=top] .smart-sortable-item:before{left:calc(50% - var(--smart-sortable-handle-size)/ 2);top:100%;align-items:center;transform:none}.smart-sortable[drag-mode=handle][handle-position=bottom] .smart-sortable-item:after{align-items:flex-start}.smart-sortable[drag-mode=handle][handle-position=top] .smart-sortable-item:before{top:calc(-1 * var(--smart-sortable-handle-size))}.smart-sortable[drag-mode=handle][handle-position=top] .smart-sortable-item:after{top:calc(-1 * var(--smart-sortable-handle-size));align-items:flex-end}.smart-sortable[right-to-left] .smart-column-panel-label,.smart-sortable[right-to-left] .smart-sortable-items-parent{direction:rtl}