@elliemae/ds-basic 2.3.0-alpha.1 → 2.3.0-alpha.6

package/{styles → dist/styles}/components/packages/ds-treeview/Tree.scss

@@ -47,39 +47,26 @@ body > .#{$tree-item} {
   &-children-count-displayer {
     color: color(neutral, 500);
   }
-  &--valid {
-    &-drop-before {
-      border-top-width: 2px;
-      border-top-style: solid;
-      border-top-color: color(brand-primary, 600);
-    }
-    &-drop-in {
-      border-width: 2px;
-      border-style: solid;
-      border-color: color(brand-primary, 600);
-    }
-    &-drop-after {
-      border-bottom-width: 2px;
-      border-bottom-style: solid;
-      border-bottom-color: color(brand-primary, 600);
-    }
-  }
-  &--invalid {
-    &-drop-before {
-      border-top-width: 2px;
-      border-top-style: solid;
-      border-top-color: color(danger, 900);
-    }
-    &-drop-in {
-      border-width: 2px;
-      border-style: solid;
-      border-color: color(danger, 900);
-    }
-    &-drop-after {
-      border-bottom-width: 2px;
-      border-bottom-style: solid;
-      border-bottom-color: color(danger, 900);
-    }
+  &--valid-drop-in:after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 2px solid color(brand-primary, 600);
+  }
+
+  &--invalid-drop-in:after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 2px solid color(danger, 900);
   }
 
   .#{$tree-item}__value {
@@ -107,20 +94,49 @@ body > .#{$tree-item} {
   }
 
   &.selected {
+    &:before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      border: 1px solid color(brand-primary, 500);
+      pointer-events: none;
+    }
     background-color: color(brand-primary, 200);
   }
 
+  &.drag-overlay {
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
+    border-radius: 2px;
+  }
+
   .drag-handle {
+    position: relative;
     transition: duration(fast) easing(base);
     align-items: center;
     display: flex;
-    // height: 100%;
-    // width: space(s) * 1.3;
+    height: 24px;
     visibility: visible;
     opacity: 1;
     margin-left: 8px;
-
-    @include icon-color(color(neutral, 500));
+    outline: none;
+    cursor: grab;
+    &[data-isactive='true'],
+    &[data-isdragoverlay='true'] {
+      cursor: grabbing;
+    }
+    &.focuseable:focus:after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      border: 2px solid color(brand-primary, 700);
+      pointer-events: none;
+    }
   }
   .expandable-arrow {
     margin-left: 8px;
@@ -162,12 +178,8 @@ body > .#{$tree-item} {
   }
 
   &.hover {
-    .drag-handle {
-      @include icon-color(color(brand-primary, 800));
-    }
-
     //Update from mixins when the correct states story comes
-    background-color: color(neutral, 080);
+    background-color: color(brand-primary, 200);
 
     &.selected {
       background-color: color(brand-primary, 200);
@@ -180,13 +192,13 @@ body > .#{$tree-item} {
     border-radius: 0px;
     z-index: 1;
     &:before {
-      content: "";
+      content: '';
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
-      border: 1px solid color(brand-primary, 600);
+      border: 2px solid color(brand-primary, 700);
       pointer-events: none;
     }
     &.selected {