formstone/src/less/themes/light/upload.less

Library of modular front end components.

/**
 * @theme
 * @name Light
 * @component Upload
 */

.fs-upload {

  @import "_config.less";

  @theme_name: fs-light;

  // Config

  @fs-upload-background: @fs-light-white;
  @fs-upload-border-width: 3px;
  @fs-upload-border-style: dashed;
  @fs-upload-border-color: @fs-light-primary_500;
  @fs-upload-border-radius: 2px;

  @fs-upload-font-size: 14px;
  @fs-upload-text-color: @fs-light-primary_700;

  @fs-upload-margin: 0;
  @fs-upload-padding: 25px;

  // Dropping

  @fs-upload-dropping-background: @fs-light-primary_100;
  @fs-upload-dropping-border-color: @fs-light-primary_600;
  @fs-upload-dropping-text-color: @fs-light-primary_900;

  // Disabled

  @fs-upload-disabled-opacity: 0.5;

  // Target

  &.@{theme_name} &-target {
    background: @fs-upload-background;
    border: @fs-upload-border-width @fs-upload-border-style @fs-upload-border-color;
    border-radius: @fs-upload-border-radius;
    color: @fs-upload-text-color;
    font-size: @fs-upload-font-size;
    margin: @fs-upload-margin;
    padding: @fs-upload-padding;
    text-align: center;
    transition:
      background 0.15s linear,
      border 0.15s linear,
      color 0.15s linear,
      opacity 0.15s linear;
  }

  .@{theme_name}&-dropping &-target,
  .no-touchevents .@{theme_name}:hover &-target,
  .@{theme_name}&-focus &-target {
    background: @fs-upload-dropping-background;
    border-color: @fs-upload-dropping-border-color;
    color: @fs-upload-dropping-text-color;
  }

  // Disabled

  .@{theme_name}&-disabled {
    opacity: @fs-upload-disabled-opacity;
  }

  .@{theme_name}&-disabled &-target,
  .no-touchevents .@{theme_name}&-disabled:hover &-target,
  .@{theme_name}&-disabled&-dropping &-target,
  .no-touchevents .@{theme_name}&-disabled&-dropping:hover &-target,
  .@{theme_name}&-disabled&-focus &-target {
    background: @fs-upload-background;
    border-color: @fs-upload-border-color;
    color: @fs-upload-text-color;
  }

}