delete _editor-attachment.scss

packages/app/src/components/PageEditor/CodeMirrorEditor.module.scss

@@ -90,4 +90,41 @@
       }
     }
   }
+
+  // cheat sheat
+  .overlay.overlay-gfm-cheatsheet {
+    align-items: flex-end;
+    justify-content: flex-end;
+
+    pointer-events: none;
+
+    .card.gfm-cheatsheet {
+      box-shadow: unset;
+      opacity: 0.6;
+      .card-body {
+        min-width: 30em;
+        padding-bottom: 0;
+        font-family: monospace;
+        color: bs.$text-muted;
+      }
+      ul > li {
+        list-style: none;
+      }
+    }
+
+    .gfm-cheatsheet-modal-link {
+      color: bs.$text-muted;
+      pointer-events: all;
+      cursor: pointer;
+      background-color: transparent;
+      border: none;
+
+      opacity: 0.6;
+
+      &:hover,
+      &:focus {
+        opacity: 1;
+      }
+    }
+  }
 }

packages/app/src/components/PageEditor/Editor.module.scss

@@ -1,24 +1,9 @@
 @use '~/styles/mixins' as ms;
 @use '~/styles/bootstrap/init' as bs;
-@use '~/styles/bootstrap/variables' as var;
 
-// TODO: Refactor Scss improt bellow. This classes from _editor-overlay.scss
 
-// TODO: Move to ~/styles/mixins.
-// @mixin overlay-processing-style($additionalSelector, $contentFontSize: inherit, $contentPadding: inherit) {
-//   .overlay.#{$additionalSelector} {
-//     background: rgba(255, 255, 255, 0.5);
-//     .overlay-content {
-//       padding: $contentPadding;
-//       font-size: $contentFontSize;
-//       color: $gray-700;
-//       background: rgba(200, 200, 200, 0.5);
-//     }
-//   }
-// }
-
-// overlay in .editor-container
 .editor-container :global {
+  // overlay in .editor-container
   .overlay {
     position: absolute;
     top: 0;
@@ -34,43 +19,6 @@
   // loading keymap
   @include ms.overlay-processing-style(overlay-loading-keymap, 2.5em, 0.3em);
 
-  // cheat sheat
-  .overlay.overlay-gfm-cheatsheet {
-    align-items: flex-end;
-    justify-content: flex-end;
-
-    pointer-events: none;
-
-    .card.gfm-cheatsheet {
-      box-shadow: unset;
-      opacity: 0.6;
-      .card-body {
-        min-width: 30em;
-        padding-bottom: 0;
-        font-family: monospace;
-        color: bs.$text-muted;
-      }
-      ul > li {
-        list-style: none;
-      }
-    }
-
-    .gfm-cheatsheet-modal-link {
-      color: bs.$text-muted;
-      pointer-events: all;
-      cursor: pointer;
-      background-color: transparent;
-      border: none;
-
-      opacity: 0.6;
-
-      &:hover,
-      &:focus {
-        opacity: 1;
-      }
-    }
-  }
-
 
   // TODO: Refactor Scss improt bellow. This classes from _editor-attachment.scss
   // for Dropzone
@@ -95,7 +43,7 @@
         background: rgba(200, 200, 200, 0.8);
 
         .overlay-content {
-          color: var.$gray-300;
+          color: bs.$gray-300;
         }
       }
     }
@@ -124,7 +72,7 @@
       // accepted
       &.dropzone-accepted:not(.dropzone-rejected) {
         .overlay.overlay-dropzone-active {
-          border: 4px dashed var.$gray-300;
+          border: 4px dashed bs.$gray-300;
 
           .overlay-content {
             // insert content
@@ -179,7 +127,7 @@
     padding-bottom: 3px;
     font-size: small;
     border: none;
-    border-top: 1px dotted var.$gray-300;
+    border-top: 1px dotted bs.$gray-300;
     border-bottom: none;
 
     &:hover,

packages/app/src/styles/_editor-attachment.scss

@@ -1,117 +0,0 @@
-@import 'editor-overlay';
-
-.editor-container {
-  // for Dropzone
-  .dropzone {
-    @mixin insertSimpleLineIcons($code) {
-      &:before {
-        margin-right: 0.2em;
-        font-family: 'simple-line-icons';
-        content: $code;
-      }
-    }
-
-    position: relative; // against .overlay position: absolute
-
-    @include overlay-processing-style(overlay-dropzone-active, 2.5em, 0.5em);
-
-    // unuploadable or rejected
-    &.dropzone-unuploadable,
-    &.dropzone-rejected {
-      .overlay.overlay-dropzone-active {
-        background: rgba(200, 200, 200, 0.8);
-
-        .overlay-content {
-          color: $gray-700;
-        }
-      }
-    }
-
-    // uploading
-    &.dropzone-uploading {
-      @include overlay-processing-style(overlay-dropzone-active, 2.5em, 0.5em);
-    }
-
-    // unuploadable
-    &.dropzone-unuploadable {
-      .overlay.overlay-dropzone-active {
-        .overlay-content {
-          // insert content
-          @include insertSimpleLineIcons('\e617'); // icon-exclamation
-
-          &:after {
-            content: 'File uploading is disabled';
-          }
-        }
-      }
-    }
-
-    // uploadable
-    &.dropzone-uploadable {
-      // accepted
-      &.dropzone-accepted:not(.dropzone-rejected) {
-        .overlay.overlay-dropzone-active {
-          border: 4px dashed $gray-300;
-
-          .overlay-content {
-            // insert content
-            @include insertSimpleLineIcons('\e084'); // icon-cloud-upload
-
-            &:after {
-              content: 'Drop here to upload';
-            }
-
-            // style
-            color: $secondary;
-            background: rgba(200, 200, 200, 0.8);
-          }
-        }
-      }
-
-      // file type mismatch
-      &.dropzone-rejected:not(.dropzone-uploadablefile) {
-        .overlay.overlay-dropzone-active {
-          .overlay-content {
-            // insert content
-            @include insertSimpleLineIcons('\e032'); // icon-picture
-
-            &:after {
-              content: 'Only an image file is allowed';
-            }
-          }
-        }
-      }
-
-      // multiple files
-      &.dropzone-accepted.dropzone-rejected {
-        .overlay.overlay-dropzone-active {
-          .overlay-content {
-            // insert content
-            @include insertSimpleLineIcons('\e617'); // icon-exclamation
-
-            &:after {
-              content: 'Only 1 file is allowed';
-            }
-          }
-        }
-      }
-    }
-
-    /* end of.dropzone */
-  }
-
-  .btn.btn-open-dropzone {
-    z-index: 2;
-    padding-top: 3px;
-    padding-bottom: 3px;
-    font-size: small;
-    border: none;
-    border-top: 1px dotted $gray-300;
-    border-bottom: none;
-
-    &:hover,
-    &:focus {
-      border-bottom: none;
-    }
-  }
-}

packages/app/src/styles/_editor-overlay.scss

@@ -1,72 +0,0 @@
-@mixin overlay-processing-style($additionalSelector, $contentFontSize: inherit, $contentPadding: inherit) {
-  .overlay.#{$additionalSelector} {
-    background: rgba(255, 255, 255, 0.5);
-    .overlay-content {
-      padding: $contentPadding;
-      font-size: $contentFontSize;
-      color: $gray-700;
-      background: rgba(200, 200, 200, 0.5);
-    }
-  }
-}
-
-// overlay in .editor-container
-.editor-container :global {
-  .overlay {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 7; // forward than .CodeMirror-vscrollbar
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  // loading keymap
-  @include overlay-processing-style(overlay-loading-keymap, 2.5em, 0.3em);
-
-  // cheat sheat
-  .overlay.overlay-gfm-cheatsheet {
-    align-items: flex-end;
-    justify-content: flex-end;
-
-    pointer-events: none;
-
-    .card.gfm-cheatsheet {
-      box-shadow: unset;
-      opacity: 0.6;
-      .card-body {
-        min-width: 30em;
-        padding-bottom: 0;
-        font-family: monospace;
-        color: $text-muted;
-      }
-      ul > li {
-        list-style: none;
-      }
-    }
-
-    .gfm-cheatsheet-modal-link {
-      color: $text-muted;
-      pointer-events: all;
-      cursor: pointer;
-      background-color: transparent;
-      border: none;
-
-      opacity: 0.6;
-
-      &:hover,
-      &:focus {
-        opacity: 1;
-      }
-    }
-  }
-}
-
-.modal-gfm-cheatsheet .modal-body {
-  .hljs {
-    font-family: $font-family-monospace;
-  }
-}

packages/app/src/styles/_mixins.scss

@@ -1,5 +1,4 @@
 @use './bootstrap/init' as bs;
-@use './bootstrap/variables' as var;
 
 @mixin variable-font-size($basesize) {
   font-size: $basesize * 0.6;
@@ -206,7 +205,7 @@
     .overlay-content {
       padding: $contentPadding;
       font-size: $contentFontSize;
-      color: var.$gray-700;
+      color: bs.$gray-700;
       background: rgba(200, 200, 200, 0.5);
     }
   }

packages/app/src/styles/_on-edit.scss

@@ -2,7 +2,6 @@
 @import './variables' ;
 @import './mixins' ;
 @import 'sidebar-wiki';
-@import 'editor-overlay';
 
 // global imported
 body.on-edit {