@elliemae/ds-basic 2.2.0-next.4 → 2.3.0-alpha.2

package/styles/components/packages/ds-shuttle/DSShuttle.scss

@@ -11,7 +11,6 @@ $shuttle-footer: #{$shuttle}-footer;
 $shuttle-searchbox: #{$shuttle}-search-box;
 $shuttle-infinte-scroll-indicator: #{$shuttle}-infinite-scroll-indicator;
 
-
 // ********************************************
 // dimsum component classes
 $DSBreadcrumb: #{$prefix}-breadcrumb;
@@ -29,17 +28,16 @@ $shuttle-searchbox-height: space(m) * 1.2;
 
 @keyframes pulse {
   0% {
-    box-shadow: 0 0 0 0 color(brand-primary, 600)
+    box-shadow: 0 0 0 0 color(brand-primary, 600);
   }
   50% {
-    box-shadow: 0 0 5px 0 color(brand-primary, 600)
+    box-shadow: 0 0 5px 0 color(brand-primary, 600);
   }
   100% {
-    box-shadow: 0 0 0 0 color(brand-primary, 600)
+    box-shadow: 0 0 0 0 color(brand-primary, 600);
   }
 }
 
-
 @mixin link-button {
   color: color(brand-primary, 600);
   background-color: transparent;
@@ -58,7 +56,6 @@ $shuttle-searchbox-height: space(m) * 1.2;
 // elements definition
 $move-all-panel-el: #{$shuttle}__move-all-panel;
 
-
 $list-width: space(xxl) * 4.6875;
 $list-height: space(xxl) * 4.65;
 $searchbox-height: space(m) * 1.2;
@@ -79,7 +76,7 @@ $border-style: $theme-base-border-style color(neutral, 100);
   height: 100%;
   @include center();
   span {
-    color: color(neutral, 300)
+    color: color(neutral, 300);
   }
 }
 
@@ -98,11 +95,12 @@ $border-style: $theme-base-border-style color(neutral, 100);
       overflow: hidden;
       align-self: center;
       flex: 1;
+      padding: 4px 0;
 
       .#{$DSBreadcrumb} {
         width: 100%;
         ol {
-          margin: 0
+          margin: 0;
         }
       }
     }
@@ -163,11 +161,11 @@ $border-style: $theme-base-border-style color(neutral, 100);
       -moz-animation: fadeIn ease 1s;
       -o-animation: fadeIn ease 1s;
       -ms-animation: fadeIn ease 1s;
-    }  
+    }
     &__loading-list {
       top: 0;
       position: absolute;
-      width: 100%; 
+      width: 100%;
       height: 100%;
       pointer-events: none;
     }
@@ -184,10 +182,10 @@ $border-style: $theme-base-border-style color(neutral, 100);
 
     @keyframes fadeIn {
       0% {
-        opacity:0;
+        opacity: 0;
       }
       100% {
-        opacity:1;
+        opacity: 1;
       }
     }
   }
@@ -212,15 +210,15 @@ $border-style: $theme-base-border-style color(neutral, 100);
   }
 }
 
-
 .#{$shuttle-list-item} {
-  display: flex;
-  justify-content: flex-start;
+  display: grid;
+  grid-template-columns: auto min-content;
   align-items: center;
   overflow: hidden;
   position: relative;
   border-bottom: $border-style;
   background-color: color(neutral, 000);
+  z-index: 999;
 
   &.drag-helper {
     border: $border-style;
@@ -228,20 +226,19 @@ $border-style: $theme-base-border-style color(neutral, 100);
 
   &__parent-helper-text {
     margin-left: space(xs);
-    color: color(brand-primary, 700)
+    color: color(brand-primary, 700);
   }
 
   &__content {
-    display: flex;
+    display: grid;
     align-items: center;
-    flex: 1 0 auto;
+    grid-template-columns: min-content minmax(0px, min-content) auto;
     height: space(l) * 1.125;
     padding-left: space(xs);
     padding-right: space(xs);
     border-left: 4px solid color(neutral, 100);
     cursor: default;
     pointer-events: none;
-    max-width: calc(100% - 72px);
     span.shuttle-tooltip-text {
       cursor: pointer;
       pointer-events: all;
@@ -256,7 +253,6 @@ $border-style: $theme-base-border-style color(neutral, 100);
       border-left-color: color(brand-primary, 600);
     }
 
-
     &--can-hover {
       cursor: pointer;
       pointer-events: all;
@@ -266,7 +262,7 @@ $border-style: $theme-base-border-style color(neutral, 100);
     }
   }
 
-  &__icon-wrapper {
+  &__icon-wrapper > span {
     margin-right: space(xs);
   }
 
@@ -279,7 +275,8 @@ $border-style: $theme-base-border-style color(neutral, 100);
       width: $item-list-height;
       border-left: $border-style;
 
-      svg, svg:not([fill]) {
+      svg,
+      svg:not([fill]) {
         fill: color(brand-primary, 600);
       }
 

package/styles/components/packages/ds-treeview/Tree.scss

@@ -47,26 +47,39 @@ body > .#{$tree-item} {
   &-children-count-displayer {
     color: color(neutral, 500);
   }
-  &--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);
+  &--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);
+    }
   }
 
   .#{$tree-item}__value {
@@ -94,49 +107,20 @@ 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: 24px;
+    // height: 100%;
+    // width: space(s) * 1.3;
     visibility: visible;
     opacity: 1;
     margin-left: 8px;
-    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;
-    }
+
+    @include icon-color(color(neutral, 500));
   }
   .expandable-arrow {
     margin-left: 8px;
@@ -178,6 +162,10 @@ 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);
 
@@ -192,13 +180,13 @@ body > .#{$tree-item} {
     border-radius: 0px;
     z-index: 1;
     &:before {
-      content: '';
+      content: "";
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
-      border: 2px solid color(brand-primary, 700);
+      border: 1px solid color(brand-primary, 600);
       pointer-events: none;
     }
     &.selected {