kibana/x-pack/plugins/lens/public/drag_drop/drag_drop.scss

@import '../variables';
@import '../mixins';

.lnsDragDrop {
  user-select: none;
  transition: $euiAnimSpeedFast ease-in-out;
  transition-property: background-color, border-color, opacity;
  z-index: $lnsZLevel1;
}

.lnsDragDrop_ghost {
  @include lnsDraggable;
  border: $euiBorderWidthThin dashed $euiBorderColor;
  position: absolute !important;  // sass-lint:disable-line no-important
  margin: 0 !important;  // sass-lint:disable-line no-important
  bottom: 100%;
  width: 100%;
  left: 0;
  opacity: .9;
  transform: translate(-12px, 8px);
  z-index: $lnsZLevel3;
  pointer-events: none;
  box-shadow: 0 0 0 $euiFocusRingSize $euiFocusRingColor;
}

// Draggable item
.lnsDragDrop-isDraggable {
  @include lnsDraggable;
  @include lnsDragDropHover;

  // Include a possible nested button like when using FieldButton
  > .kbnFieldButton__button {
    cursor: grab;
  }

  &:focus {
    @include euiFocusRing;
  }
}

// Drop area
.lnsDragDrop-isDroppable {
  @include lnsDroppable;
}

// Drop area when there's an item being dragged
.lnsDragDrop-isDropTarget {
  @include lnsDroppable;
  @include lnsDroppableActive;
  > * {
    pointer-events: none;
  }
}

.lnsDragDrop-isActiveGroup {
  background-color: transparentize($euiColorVis0, .75);
}

// Drop area while hovering with item
.lnsDragDrop-isActiveDropTarget {
  z-index: $lnsZLevel3;
  @include lnsDroppableActiveHover;
}

// Drop area that is not allowed for current item
.lnsDragDrop-isNotDroppable {
  @include lnsDroppableNotAllowed;
}

// Drop area will be replacing existing content
.lnsDragDrop-isReplacing {
  &,
  .lnsLayerPanel__triggerText {
    text-decoration: line-through;
  }
}

.lnsDragDrop-notCompatible {
  background-color: $euiColorHighlight;
  border: $euiBorderWidthThin dashed $euiBorderColor;
  &.lnsDragDrop-isActiveDropTarget {
    background-color: rgba(251, 208, 17, .25);
    border-color: $euiColorVis5;
  }
}

.lnsDragDrop__container {
  position: relative;
  width: 100%;
  height: 100%;

  &.lnsDragDrop__container-active {
    z-index: $lnsZLevel3;
  }
}

.lnsDragDrop__reorderableDrop {
  position: absolute;
  width: 100%;
  top: 0;
  height: calc(100% + #{$lnsLayerPanelDimensionMargin});
}

.lnsDragDrop-translatableDrop {
  transform: translateY(0);
  transition: transform $euiAnimSpeedFast ease-in-out;
  pointer-events: none;

  .lnsDragDrop-isDropTarget {
    @include lnsDraggable;
  }

  .lnsDragDrop-isActiveDropTarget {
    z-index: $lnsZLevel3;
  }
}

.lnsDragDrop-translatableDrag {
  transform: translateY(0);
  transition: transform $euiAnimSpeedFast ease-in-out;
  position: relative;
  z-index: $lnsZLevel1;
}

.lnsDragDrop__keyboardHandler {
  top: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: $euiBorderRadius;

  &:focus,
  &:focus-within {
    @include euiFocusRing;
    pointer-events: none;
  }
}

// Draggable item when it is moving
.lnsDragDrop-isHidden {
  opacity: 0;
  .lnsDragDrop__keyboardHandler {
    &:focus,
    &:focus-within {
      animation: none;
    }
  }
}

.lnsDragDrop__extraDrops {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  z-index: $lnsZLevel2;
  right: calc(100% + #{$euiSizeS});
  top: 0;
  transition: opacity $euiAnimSpeedFast ease-in-out;
  width:100%;
}

.lnsDragDrop__extraDrops-visible {
  opacity: 1;
  visibility: visible;
}

.lnsDragDrop__diamondPath {
  position: absolute;
  width: 30%;
  top: 0;
  left: -$euiSize;
  z-index: $lnsZLevel0;
}

.lnsDragDrop__extraDropWrapper {
  position: relative;
  width: 100%;
  height: 100%;
  background: $euiColorLightestShade;
  padding: $euiSizeXS;
  border-radius: 0;
  &:first-child, &:first-child .lnsDragDrop__extraDrop {
    border-top-left-radius: $euiSizeXS;
    border-top-right-radius: $euiSizeXS;
  }
  &:last-child, &:last-child .lnsDragDrop__extraDrop {
    border-bottom-left-radius: $euiSizeXS;
    border-bottom-right-radius: $euiSizeXS;
  }
}

// collapse borders
.lnsDragDrop__extraDropWrapper + .lnsDragDrop__extraDropWrapper {
  margin-top: -1px;
}

.lnsDragDrop__extraDrop {
  position: relative;
  height: $euiSizeXS * 10;
  min-width: $euiSize * 7;
  color: $euiColorSuccessText;
  padding: $euiSizeXS;
  &.lnsDragDrop-incompatibleExtraDrop {
    color: $euiColorWarningText;
  }
}