weseek__growi/resource/styles/scss/_editor-attachment.scss

@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);

    // unuploadable or rejected
    &.dropzone-unuploadable, &.dropzone-rejected {
      .overlay.overlay-dropzone-active {
        background: rgba(200,200,200,0.8);

        .overlay-content {
          color: #444;
        }
      }
    }
    // uploading
    &.dropzone-uploading {
      @include overlay-processing-style(overlay-dropzone-active, 2.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 #ccc;

          .overlay-content {
            // insert content
            @include insertSimpleLineIcons("\e084");  // icon-cloud-upload
            &:after {
              content: "Drop here to upload";
            }
            // style
            color: #666;
            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-open-dropzone {
    z-index: 2;
    font-size: small;
    padding-top: 3px;
    padding-bottom: 3px;
    border: none;
    border-radius: 0;
    border-top: 1px dotted #ccc;
    &:active {
      box-shadow: none;
    }
  }

}

#page-editor {
  @media (max-width: $screen-xs) {
    .desc-long {
      display: none;
    }
  }
}
.comment-form {
  @media (max-width: $screen-sm) {
    .desc-long {
      display: none;
    }
  }
}