CSS shared

src/Squidex/app/shared/components/markdown-editor.component.html

@@ -1,4 +1,4 @@
-<div #container class="editor-container">
+<div #container class="drop-container">
     <div #inner [class.fullscreen]="isFullscreen">
         <textarea class="form-control" #editor></textarea>
     </div>

src/Squidex/app/shared/components/markdown-editor.component.scss

@@ -7,41 +7,8 @@ $background: #fff;
     height: 30rem;
 }
 
-.editor-container {
+.drop-area {
-    position: relative;
+    @include absolute(80px, 30px, 66px, 30px);
-
-    .drop-area {
-        & {
-            @include absolute(80px, 30px, 66px, 30px);
-            @include border-radius;
-            z-index: 1;
-            align-content: center;
-            align-items: center;
-            display: none;
-            border: 2px dashed $color-border;
-            font-size: 1.2rem;
-            font-weight: normal;
-            justify-content: center;
-            color: darken($color-border, 30%);
-        }
-
-        &.dragging {
-            @include flex-box;
-        }
-
-        &.drag,
-        &.dnd-drag-over,
-        &.dnd-drag-enter {
-            border-color: darken($color-border, 10%);
-            cursor: copy;
-            color: darken($color-border, 40%);
-            text-decoration: none;
-        }
-    }
-
-    .drop-text {
-        background: $color-dark-foreground;
-    }
 }
 
 .fullscreen {

src/Squidex/app/shared/components/rich-editor.component.html

@@ -1,4 +1,4 @@
-<div class="editor-container">
+<div class="drop-container">
     <div class="editor" #editor></div>
 
     <div class="file-drop drag drop-area" [class.dragging]="draggedOver" dnd-droppable (onDropSuccess)="onItemDropped($event)">

src/Squidex/app/shared/components/rich-editor.component.scss

@@ -7,39 +7,6 @@
     height: 30rem;
 }
 
-.editor-container {
+.drop-area {
-    position: relative;
+    @include absolute(100px, 30px, 66px, 30px);
-
-    .drop-area {
-        & {
-            @include absolute(115px, 30px, 66px, 30px);
-            @include border-radius;
-            z-index: 1;
-            align-content: center;
-            align-items: center;
-            display: none;
-            border: 2px dashed $color-border;
-            font-size: 1.2rem;
-            font-weight: normal;
-            justify-content: center;
-            color: darken($color-border, 30%);
-        }
-
-        &.dragging {
-            @include flex-box;
-        }
-
-        &.drag,
-        &.dnd-drag-over,
-        &.dnd-drag-enter {
-            border-color: darken($color-border, 10%);
-            cursor: copy;
-            color: darken($color-border, 40%);
-            text-decoration: none;
-        }
-    }
-
-    .drop-text {
-        background: $color-dark-foreground;
-    }
 }

src/Squidex/app/theme/_common.scss

@@ -118,3 +118,43 @@ body {
 .invisible {
     visibility: hidden;
 }
+
+//
+// Drop area for drag and drop features.
+//
+.drop-container {
+    position: relative;
+
+    .drop-area {
+        & {
+            @include absolute(30px, 30px, 30px, 30px);
+            @include border-radius;
+            z-index: 10;
+            align-content: center;
+            align-items: center;
+            display: none;
+            border: 2px dashed $color-border;
+            font-size: 1.2rem;
+            font-weight: normal;
+            justify-content: center;
+            color: darken($color-border, 30%);
+        }
+
+        &.dragging {
+            @include flex-box;
+        }
+
+        &.drag,
+        &.dnd-drag-over,
+        &.dnd-drag-enter {
+            border-color: darken($color-border, 10%);
+            cursor: copy;
+            color: darken($color-border, 40%);
+            text-decoration: none;
+        }
+    }
+
+    .drop-text {
+        background: $color-dark-foreground;
+    }
+}