2020-10-01 17:58:23 +02:00
|
|
|
@import '../variables';
|
|
|
|
@import '../mixins';
|
|
|
|
|
|
|
|
.lnsDragDrop {
|
|
|
|
transition: background-color $euiAnimSpeedFast ease-in-out, border-color $euiAnimSpeedFast ease-in-out;
|
|
|
|
}
|
|
|
|
|
|
|
|
// 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;
|
2020-09-04 16:11:41 +02:00
|
|
|
}
|
|
|
|
|
2020-10-01 17:58:23 +02:00
|
|
|
// Drop area when there's an item being dragged
|
|
|
|
.lnsDragDrop-isDropTarget {
|
|
|
|
@include lnsDroppableActive;
|
|
|
|
}
|
2019-09-25 15:58:35 +02:00
|
|
|
|
2020-11-03 21:18:44 +01:00
|
|
|
.lnsDragDrop-isActiveGroup {
|
|
|
|
background-color: transparentize($euiColorVis0, .75);
|
|
|
|
}
|
|
|
|
|
2020-10-01 17:58:23 +02:00
|
|
|
// Drop area while hovering with item
|
|
|
|
.lnsDragDrop-isActiveDropTarget {
|
|
|
|
@include lnsDroppableActiveHover;
|
|
|
|
}
|
|
|
|
|
|
|
|
// Drop area that is not allowed for current item
|
|
|
|
.lnsDragDrop-isNotDroppable {
|
|
|
|
@include lnsDroppableNotAllowed;
|
2019-09-17 20:57:53 +02:00
|
|
|
}
|
|
|
|
|
2020-10-01 17:58:23 +02:00
|
|
|
// Drop area will be replacing existing content
|
|
|
|
.lnsDragDrop-isReplacing {
|
|
|
|
&,
|
2020-11-17 10:19:13 +01:00
|
|
|
.lnsLayerPanel__triggerText {
|
2020-10-01 17:58:23 +02:00
|
|
|
text-decoration: line-through;
|
|
|
|
}
|
2019-09-17 20:57:53 +02:00
|
|
|
}
|
2020-11-03 21:18:44 +01:00
|
|
|
|
|
|
|
.lnsDragDrop__reorderableContainer {
|
|
|
|
position: relative;
|
|
|
|
}
|
|
|
|
|
|
|
|
.lnsDragDrop__reorderableDrop {
|
|
|
|
position: absolute;
|
|
|
|
width: 100%;
|
|
|
|
top: 0;
|
|
|
|
height: calc(100% + #{$lnsLayerPanelDimensionMargin});
|
|
|
|
}
|
|
|
|
|
|
|
|
.lnsDragDrop-isReorderable {
|
|
|
|
transition: transform $euiAnimSpeedFast ease-in-out;
|
|
|
|
pointer-events: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
// Draggable item when it is moving
|
|
|
|
.lnsDragDrop-isHidden {
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.lnsDragDrop__keyboardHandler {
|
|
|
|
top: 0;
|
|
|
|
position: absolute;
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
border-radius: $euiBorderRadius;
|
|
|
|
|
|
|
|
&:focus,
|
|
|
|
&:focus-within {
|
|
|
|
@include euiFocusRing;
|
|
|
|
pointer-events: none;
|
|
|
|
}
|
|
|
|
}
|