diff --git a/src/components/layers/LayerListItem.jsx b/src/components/layers/LayerListItem.jsx
index 91fb0443..88834eb6 100644
--- a/src/components/layers/LayerListItem.jsx
+++ b/src/components/layers/LayerListItem.jsx
@@ -2,7 +2,7 @@ import React from 'react'
import PropTypes from 'prop-types'
import classnames from 'classnames'
-import {MdContentCopy, MdVisibility, MdVisibilityOff, MdDelete} from 'react-icons/md'
+import {MdMenu, MdContentCopy, MdVisibility, MdVisibilityOff, MdDelete} from 'react-icons/md'
import LayerIcon from '../icons/LayerIcon'
import {SortableElement, SortableHandle} from 'react-sortable-hoc'
@@ -11,15 +11,15 @@ class LayerTypeDragHandle extends React.Component {
static propTypes = LayerIcon.propTypes
render() {
- return
+ return
}
}
diff --git a/src/styles/_layer.scss b/src/styles/_layer.scss
index 45af9ac1..cb9b5c89 100644
--- a/src/styles/_layer.scss
+++ b/src/styles/_layer.scss
@@ -42,6 +42,8 @@
opacity: 1;
-webkit-transition: opacity 600ms, visibility 600ms;
transition: opacity 600ms, visibility 600ms;
+ padding-left: 0;
+ margin-left: -4px;
@media screen and (prefers-reduced-motion: reduce) {
transition-duration: 0;
@@ -111,6 +113,8 @@
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
+ color: inherit;
+ text-decoration: none;
}
&-group-header {
@@ -229,3 +233,30 @@
min-width: 28px;
}
}
+
+.layer-handle {
+ width: 35px;
+ flex-shrink: 0;
+ cursor: move;
+
+ &__handle {
+ margin-right: 4px;
+ display: inline-block;
+ width: 14px;
+ height: 14px;
+
+ :not(:hover) {
+ path {
+ fill: #555;
+ }
+ }
+ }
+
+ &__icon {
+ padding-right: 3px;
+ display: inline-block;
+ width: 14px;
+ height: 14px;
+ }
+}
+