formstone/src/less/upload.less

Library of modular front end components.

/**
 * @component
 * @name Upload
 */

@import "imports/utils.less";

/**
 * @class
 * @name .fs-upload-element
 * @type element
 * @description Target elmement
 */

/**
 * @class
 * @name .fs-upload
 * @type element
 * @description Base widget class
 */

/**
 * @class
 * @name .fs-upload.fs-upload-dropping
 * @type modifier
 * @description Indicates dropping state
 */

/**
 * @class
 * @name .fs-upload.fs-upload-disabled
 * @type modifier
 * @description Indicates disabled state
 */

.fs-upload {
  position: relative;

  overflow: hidden;

  &,
  &:after,
  &:before,
  *,
  *:after,
  *:before {
    box-sizing: border-box;
    transition: none;
    user-select: none !important;
  }

  /**
   * @class
   * @name .fs-upload-input
   * @type element
   * @description Masked Input
   */

  &-input {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1px;

    opacity: 0;
    pointer-events: none;
  }

  /**
   * @class
   * @name .fs-upload-target
   * @type element
   * @description Drop target
   */

  &-target {
    cursor: pointer;
  }

  &-dropping &-target,
  .no-touch &:hover &-target {
  }

  // Disabled

  &-disabled &-target,
  .no-touch &-disabled:hover &-target {
    cursor: default;
    cursor: not-allowed;
  }

  &-disabled&-dropping &-target,
  .no-touch &-disabled&-dropping:hover &-target {
  }
}