DragAndDropWrapper styles implemented

Fixes #13674

Change-Id: Id21a8e31ec09617b902ef6deca04889c926b3367

1 files changed, 116 insertions, 3 deletions

diff --git a/WebContent/VAADIN/themes/valo/components/_dragwrapper.scss b/WebContent/VAADIN/themes/valo/components/_dragwrapper.scss
index 9089c47d33..0aa1cf54fd 100644
--- a/WebContent/VAADIN/themes/valo/components/_dragwrapper.scss
+++ b/WebContent/VAADIN/themes/valo/components/_dragwrapper.scss
@@ -1,5 +1,118 @@
 @mixin valo-dragwrapper ($primary-stylename: v-ddwrapper) {
-  
-  // TODO
 
-}
\ No newline at end of file
+  [draggable=true] {
+    -khtml-user-drag: element;
+    -webkit-user-drag: element;
+    @include user-select(none);
+  }
+
+  .v-active-drag-source {
+    @include opacity(0);
+  }
+
+  .#{$primary-stylename} {
+    position: relative;
+  }
+
+  .#{$primary-stylename}-over:before,
+  .#{$primary-stylename}-over:after {
+    content: "";
+    position: absolute;
+    z-index: 10;
+    top: -1px;
+    right: -1px;
+    bottom: -1px;
+    left: -1px;
+  }
+
+  .#{$primary-stylename}-over-top:before {
+    border-top-width: 2px;
+  }
+
+  .#{$primary-stylename}-over-right:before {
+    border-right-width: 2px;
+  }
+
+  .#{$primary-stylename}-over-bottom:before {
+    border-bottom-width: 2px;
+  }
+
+  .#{$primary-stylename}-over-left:before {
+    border-left-width: 2px;
+  }
+
+  .no-vertical-drag-hints {
+    .#{$primary-stylename}-over-top,
+    &.#{$primary-stylename}-over-top {
+      &:before {
+        border-top-width: 0;
+      }
+      &:after {
+        @include valo-ddwrapper-box-hint-style;
+      }
+    }
+
+    .#{$primary-stylename}-over-bottom,
+    &.#{$primary-stylename}-over-bottom {
+      &:before {
+        border-bottom-width: 0;
+      }
+      &:after {
+        @include valo-ddwrapper-box-hint-style;
+      }
+    }
+  }
+
+  .no-horizontal-drag-hints {
+    &.#{$primary-stylename}-over-left,
+    .#{$primary-stylename}-over-left {
+      &:before {
+        border-left-width: 0;
+      }
+      &:after {
+        @include valo-ddwrapper-box-hint-style;
+      }
+    }
+
+    &.#{$primary-stylename}-over-right,
+    .#{$primary-stylename}-over-right {
+      &:before {
+        border-right-width: 0;
+      }
+      &:after {
+        @include valo-ddwrapper-box-hint-style;
+      }
+    }
+  }
+
+  .#{$primary-stylename}-over-middle:after,
+  .#{$primary-stylename}-over-center:after {
+    @include valo-ddwrapper-box-hint-style;
+  }
+
+  .no-box-drag-hints {
+    &.#{$primary-stylename}:after,
+    .#{$primary-stylename}:after {
+      display: none !important;
+      content: none;
+    }
+  }
+
+
+}
+
+
+
+
+@mixin valo-ddwrapper-box-hint-style {
+  border-width: 2px;
+  border-radius: $v-border-radius;
+  @include opacity(.3);
+
+  $focus-color: valo-focus-color();
+  @if is-dark-color($focus-color) {
+    background: scale-color($focus-color, $lightness: 50%);
+  } @else {
+    background: scale-color($focus-color, $lightness: -50%);
+  }
+}