diff --git a/src/Squidex/app/shared/components/markdown-editor.component.html b/src/Squidex/app/shared/components/markdown-editor.component.html index b3f735d5f..43a36ead4 100644 --- a/src/Squidex/app/shared/components/markdown-editor.component.html +++ b/src/Squidex/app/shared/components/markdown-editor.component.html @@ -1,4 +1,4 @@ -
+
diff --git a/src/Squidex/app/shared/components/markdown-editor.component.scss b/src/Squidex/app/shared/components/markdown-editor.component.scss index 935dcdcee..8d1de2c38 100644 --- a/src/Squidex/app/shared/components/markdown-editor.component.scss +++ b/src/Squidex/app/shared/components/markdown-editor.component.scss @@ -7,41 +7,8 @@ $background: #fff; height: 30rem; } -.editor-container { - position: relative; - - .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; - } +.drop-area { + @include absolute(80px, 30px, 66px, 30px); } .fullscreen { diff --git a/src/Squidex/app/shared/components/rich-editor.component.html b/src/Squidex/app/shared/components/rich-editor.component.html index 4a527d42a..fe35d6df8 100644 --- a/src/Squidex/app/shared/components/rich-editor.component.html +++ b/src/Squidex/app/shared/components/rich-editor.component.html @@ -1,4 +1,4 @@ -
+
diff --git a/src/Squidex/app/shared/components/rich-editor.component.scss b/src/Squidex/app/shared/components/rich-editor.component.scss index f1525ac5a..0d59cf0be 100644 --- a/src/Squidex/app/shared/components/rich-editor.component.scss +++ b/src/Squidex/app/shared/components/rich-editor.component.scss @@ -7,39 +7,6 @@ height: 30rem; } -.editor-container { - position: relative; - - .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; - } +.drop-area { + @include absolute(100px, 30px, 66px, 30px); } \ No newline at end of file diff --git a/src/Squidex/app/theme/_common.scss b/src/Squidex/app/theme/_common.scss index f05bf3eaa..305d44b2e 100644 --- a/src/Squidex/app/theme/_common.scss +++ b/src/Squidex/app/theme/_common.scss @@ -117,4 +117,44 @@ body { // Hidden helper (fast *ngIf replacement) .invisible { visibility: hidden; -} \ No newline at end of file +} + +// +// 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; + } +}