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

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

/* .smart-sortable */
.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:before, .smart-sortable .smart-sortable-item.placeholder:after {
  content: none;
}
.smart-sortable:not([disabled]) .smart-sortable-item {
  touch-action: none;
}
.smart-sortable[disabled] {
  pointer-events: none;
  opacity: 0.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:before, .smart-sortable[handle-position=left] .smart-sortable-item:after {
  left: calc(-1 * var(--smart-sortable-handle-size)) !important;
}
.smart-sortable:not([animation=none]) .smart-sortable-item {
  transition: transform 0.15s ease-in;
}
.smart-sortable:not([animation=none]) .smart-sortable-item.returning {
  transition: left 0.15s ease-in, top 0.15s ease-in;
}
.smart-sortable:not([drag-mode=handle]):not([disabled]) .smart-sortable-item {
  cursor: grab;
}
.smart-sortable[drag-mode=handle] .smart-sortable-item:before, .smart-sortable[drag-mode=handle] .smart-sortable-item:after {
  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 0.2s ease-in, opacity 0.2s ease-in;
  color: var(--smart-background-color);
}
.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] .smart-sortable-item.dragged:before, .smart-sortable[drag-mode=handle] .smart-sortable-item.dragged:after {
  visibility: visible;
  opacity: 0.5;
}
.smart-sortable[drag-mode=handle]:not([disabled]) .smart-sortable-item:hover:before,
.smart-sortable[drag-mode=handle]:not([disabled]) .smart-sortable-item:hover:after {
  z-index: 9999999;
  visibility: visible;
  opacity: 0.5;
}
.smart-sortable[drag-mode=handle][handle-visibility=visible]:not([disabled]) .smart-sortable-item:before,
.smart-sortable[drag-mode=handle][handle-visibility=visible]:not([disabled]) .smart-sortable-item:after {
  visibility: visible;
  opacity: 0.5;
}
.smart-sortable[drag-mode=handle][handle-position=bottom] .smart-sortable-item:before, .smart-sortable[drag-mode=handle][handle-position=bottom] .smart-sortable-item:after, .smart-sortable[drag-mode=handle][handle-position=top] .smart-sortable-item:before, .smart-sortable[drag-mode=handle][handle-position=top] .smart-sortable-item:after {
  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 */
.smart-sortable[right-to-left] .smart-sortable-items-parent,
.smart-sortable[right-to-left] .smart-column-panel-label {
  direction: rtl;
}