@elliemae/ds-basic 2.2.1 → 2.2.3-next.0

package/css/dimsum.css

@@ -8778,30 +8778,24 @@ body > .em-ds-tree-item {
     white-space: nowrap; }
   .em-ds-tree-item-children-count-displayer {
     color: #697489; }
-  .em-ds-tree-item--valid-drop-before {
-    border-top-width: 2px;
-    border-top-style: solid;
-    border-top-color: #1e79c2; }
-  .em-ds-tree-item--valid-drop-in {
-    border-width: 2px;
-    border-style: solid;
-    border-color: #1e79c2; }
-  .em-ds-tree-item--valid-drop-after {
-    border-bottom-width: 2px;
-    border-bottom-style: solid;
-    border-bottom-color: #1e79c2; }
-  .em-ds-tree-item--invalid-drop-before {
-    border-top-width: 2px;
-    border-top-style: solid;
-    border-top-color: #C64252; }
-  .em-ds-tree-item--invalid-drop-in {
-    border-width: 2px;
-    border-style: solid;
-    border-color: #C64252; }
-  .em-ds-tree-item--invalid-drop-after {
-    border-bottom-width: 2px;
-    border-bottom-style: solid;
-    border-bottom-color: #C64252; }
+  .em-ds-tree-item--valid-drop-in:after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 2px solid #1e79c2; }
+  .em-ds-tree-item--invalid-drop-in:after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 2px solid #C64252; }
   .em-ds-tree-item .em-ds-tree-item__value {
     min-width: 0;
     width: 100%;
@@ -8821,14 +8815,40 @@ body > .em-ds-tree-item {
       fill: #005181; }
   .em-ds-tree-item.selected {
     background-color: #EBF6FF; }
+    .em-ds-tree-item.selected:before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      border: 1px solid #1394E5;
+      pointer-events: none; }
+  .em-ds-tree-item.drag-overlay {
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
+    border-radius: 2px; }
   .em-ds-tree-item .drag-handle {
+    position: relative;
     transition: 100ms cubic-bezier(0.64, 0, 0.35, 1);
     align-items: center;
     display: flex;
+    height: 24px;
     visibility: visible;
     opacity: 1;
     margin-left: 8px;
-    fill: #697489; }
+    outline: none;
+    cursor: grab; }
+    .em-ds-tree-item .drag-handle[data-isactive='true'], .em-ds-tree-item .drag-handle[data-isdragoverlay='true'] {
+      cursor: grabbing; }
+    .em-ds-tree-item .drag-handle.focuseable:focus:after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      border: 2px solid #006AA9;
+      pointer-events: none; }
   .em-ds-tree-item .expandable-arrow {
     margin-left: 8px;
     width: 16px;
@@ -8853,9 +8873,7 @@ body > .em-ds-tree-item {
   .em-ds-tree-item .tree-item-radio {
     padding-bottom: 0; }
   .em-ds-tree-item.hover {
-    background-color: #EBEDF0; }
-    .em-ds-tree-item.hover .drag-handle {
-      fill: #005181; }
+    background-color: #EBF6FF; }
     .em-ds-tree-item.hover.selected {
       background-color: #EBF6FF; }
   .em-ds-tree-item:focus {
@@ -8864,13 +8882,13 @@ body > .em-ds-tree-item {
     border-radius: 0px;
     z-index: 1; }
     .em-ds-tree-item:focus:before {
-      content: "";
+      content: '';
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
-      border: 1px solid #1e79c2;
+      border: 2px solid #006AA9;
       pointer-events: none; }
     .em-ds-tree-item:focus.selected {
       outline: unset; }