2020-10-01 17:58:23 +02:00
|
|
|
@import '../variables';
|
|
|
|
@import '../mixins';
|
|
|
|
|
|
|
|
.lnsDragDrop {
|
2021-02-05 18:17:03 +01:00
|
|
|
user-select: none;
|
2021-03-29 14:07:39 +02:00
|
|
|
transition: $euiAnimSpeedFast ease-in-out;
|
|
|
|
transition-property: background-color, border-color, opacity;
|
2021-04-06 10:31:56 +02:00
|
|
|
z-index: $lnsZLevel1;
|
2020-10-01 17:58:23 +02:00
|
|
|
}
|
|
|
|
|
2021-02-15 12:48:06 +01:00
|
|
|
.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);
|
2021-04-06 10:31:56 +02:00
|
|
|
z-index: $lnsZLevel3;
|
2021-02-15 12:48:06 +01:00
|
|
|
pointer-events: none;
|
|
|
|
box-shadow: 0 0 0 $euiFocusRingSize $euiFocusRingColor;
|
|
|
|
}
|
|
|
|
|
2020-10-01 17:58:23 +02:00
|
|
|
// 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 {
|
2021-02-05 18:17:03 +01:00
|
|
|
@include lnsDroppable;
|
2020-10-01 17:58:23 +02:00
|
|
|
@include lnsDroppableActive;
|
2021-02-21 10:02:04 +01:00
|
|
|
> * {
|
|
|
|
pointer-events: none;
|
|
|
|
}
|
2020-10-01 17:58:23 +02:00
|
|
|
}
|
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 {
|
2021-04-06 10:31:56 +02:00
|
|
|
z-index: $lnsZLevel3;
|
2020-10-01 17:58:23 +02:00
|
|
|
@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
|
|
|
|
2021-02-05 18:17:03 +01:00
|
|
|
.lnsDragDrop-notCompatible {
|
|
|
|
background-color: $euiColorHighlight;
|
|
|
|
border: $euiBorderWidthThin dashed $euiBorderColor;
|
|
|
|
&.lnsDragDrop-isActiveDropTarget {
|
|
|
|
background-color: rgba(251, 208, 17, .25);
|
|
|
|
border-color: $euiColorVis5;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-03-29 14:07:39 +02:00
|
|
|
.lnsDragDrop__container {
|
|
|
|
position: relative;
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
|
|
|
|
&.lnsDragDrop__container-active {
|
2021-04-06 10:31:56 +02:00
|
|
|
z-index: $lnsZLevel3;
|
2021-03-29 14:07:39 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-11-03 21:18:44 +01:00
|
|
|
.lnsDragDrop__reorderableDrop {
|
|
|
|
position: absolute;
|
|
|
|
width: 100%;
|
|
|
|
top: 0;
|
|
|
|
height: calc(100% + #{$lnsLayerPanelDimensionMargin});
|
|
|
|
}
|
|
|
|
|
2021-02-01 11:54:16 +01:00
|
|
|
.lnsDragDrop-translatableDrop {
|
|
|
|
transform: translateY(0);
|
2020-11-03 21:18:44 +01:00
|
|
|
transition: transform $euiAnimSpeedFast ease-in-out;
|
|
|
|
pointer-events: none;
|
2021-03-29 14:07:39 +02:00
|
|
|
|
|
|
|
.lnsDragDrop-isDropTarget {
|
|
|
|
@include lnsDraggable;
|
|
|
|
}
|
|
|
|
|
|
|
|
.lnsDragDrop-isActiveDropTarget {
|
2021-04-06 10:31:56 +02:00
|
|
|
z-index: $lnsZLevel3;
|
2021-03-29 14:07:39 +02:00
|
|
|
}
|
2020-11-03 21:18:44 +01:00
|
|
|
}
|
|
|
|
|
2021-02-01 11:54:16 +01:00
|
|
|
.lnsDragDrop-translatableDrag {
|
|
|
|
transform: translateY(0);
|
|
|
|
transition: transform $euiAnimSpeedFast ease-in-out;
|
|
|
|
position: relative;
|
2021-04-06 10:31:56 +02:00
|
|
|
z-index: $lnsZLevel1;
|
2021-02-01 11:54:16 +01:00
|
|
|
}
|
|
|
|
|
2020-11-03 21:18:44 +01:00
|
|
|
.lnsDragDrop__keyboardHandler {
|
|
|
|
top: 0;
|
|
|
|
position: absolute;
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
border-radius: $euiBorderRadius;
|
|
|
|
|
|
|
|
&:focus,
|
|
|
|
&:focus-within {
|
|
|
|
@include euiFocusRing;
|
|
|
|
pointer-events: none;
|
|
|
|
}
|
|
|
|
}
|
2021-02-15 12:48:06 +01:00
|
|
|
|
|
|
|
// Draggable item when it is moving
|
|
|
|
.lnsDragDrop-isHidden {
|
|
|
|
opacity: 0;
|
|
|
|
.lnsDragDrop__keyboardHandler {
|
|
|
|
&:focus,
|
|
|
|
&:focus-within {
|
|
|
|
animation: none;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2021-03-29 14:07:39 +02:00
|
|
|
|
|
|
|
.lnsDragDrop__extraDrops {
|
|
|
|
opacity: 0;
|
|
|
|
visibility: hidden;
|
|
|
|
position: absolute;
|
2021-04-06 10:31:56 +02:00
|
|
|
z-index: $lnsZLevel2;
|
2021-03-29 14:07:39 +02:00
|
|
|
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;
|
2021-04-06 10:31:56 +02:00
|
|
|
z-index: $lnsZLevel0;
|
2021-03-29 14:07:39 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
.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;
|
|
|
|
}
|
|
|
|
}
|