Merge pull request #7802 from opf/feature/improve-styling-of-drag-and-drop-in-grid

Improve styling of drag and drop in grid

[ci skip]

app/assets/stylesheets/content/_grid.sass

@@ -20,15 +20,20 @@ body.widget-grid-layout
   position: relative
   overflow: hidden
   min-height: 30px
+  border-radius: 3px
 
   &.-drop-target
-    background-color: $gray-light
+    &.cdk-drop-list-dragging
+      border: none
 
   &.-widgeted
     z-index: 10
     @include widget-box--style
     margin: 0
 
+    &:hover
+      @include widget-box--hover-style
+
     .widget-box
       min-height: 200px
       padding: $grid--widget-padding
@@ -48,6 +53,7 @@ body.widget-grid-layout
 
   &.-placeholder
     @include modifying--placeholder
+    background: transparent
     z-index: 30
 
   &.-dragged
@@ -72,13 +78,11 @@ body.widget-grid-layout
 
   &.-drop-target,
   &.-passive
-    opacity: 0.5
     border-width: 1px
     border-style: solid
     border-color: $secondary-color
     transition: border-color 0.5s ease
     z-index: 20
-    background: transparent
 
   &.-resize-target
     z-index: 1000
@@ -127,6 +131,8 @@ body.widget-grid-layout
     background: white
     padding: $grid--widget-padding
     @include widget-box--style
+    @include widget-box--hover-style
+    border-radius: 3px
     margin: 0
 
 .grid--widget-content

app/assets/stylesheets/openproject/_mixins.sass

@@ -62,8 +62,10 @@
 @mixin widget-box--style
   background: $widget-box-block-bg-color
   margin: 10px
-  box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.04)
+  box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.1)
 
+@mixin widget-box--hover-style
+  box-shadow: 0px 1px 20px 0px rgba(0,0,0,0.1)
 
 // These mixins are necessary so that other classes can inherit     the styles.
 // In future Sass versions a doubled inheritance like @extend classA.classB will not work any more.