@bee-design/ui/lib/_class/Draggable/style/index.less

Bee Design React UI Library.

@import '../../../style/theme/default.less';

@bee-draggable-prefix-cls: ~'bee-draggable';

.@{bee-draggable-prefix-cls} {
  @keyframes ~'@{prefix}-draggable-item-blink' {
    0% {
      opacity: 1;
    }

    50% {
      opacity: 0.3;
    }

    100% {
      opacity: 1;
    }
  }

  &-item {
    box-sizing: border-box;
    list-style: none;
    user-select: none;

    &-dragging {
      opacity: 0.3;
    }

    &-dragover {
      &.@{bee-draggable-prefix-cls}-item-gap-left {
        box-shadow: -1px 0  rgb(var(~'@{bee-cssvars-prefix}-primary-6'));;
      }

      &.@{bee-draggable-prefix-cls}-item-gap-right {
        box-shadow: 1px 0  rgb(var(~'@{bee-cssvars-prefix}-primary-6'));;
      }

      &.@{bee-draggable-prefix-cls}-item-gap-top {
        box-shadow: 0 -1px  rgb(var(~'@{bee-cssvars-prefix}-primary-6'));;
      }

      &.@{bee-draggable-prefix-cls}-item-gap-bottom {
        box-shadow: 0 1px  rgb(var(~'@{bee-cssvars-prefix}-primary-6'));;
      }
    }

    &-dragged {
      animation: ~'@{prefix}-draggable-item-blink' 0.8s;
      animation-timing-function: @transition-timing-function-linear;
    }
  }
}