weseek__growi/src/client/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, 0.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, 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;

    &:active {
      box-shadow: none;
    }

    &:hover,
    &:focus {
      border-bottom: none;
    }
  }
}