less-plugin-dls/tokens/components/uploader.less

Less plugin for Baidu Light DLS.

@import "../global.less";

// See Button for file button styles
// See Progress for progress styles

/* Font size */
@dls-uploader-font-size-s: @dls-font-size-0;
@dls-uploader-font-size-m: @dls-font-size-1;

// file button spacing with helper text
@dls-uploader-helper-text-spacing-file: @dls-padding-unit * 2;
@dls-uploader-helper-text-spacing-media: @dls-padding-unit * 3;
@dls-uploader-helper-text-font-color: @dls-foreground-color-neutral-weak;
@dls-uploader-helper-text-max-width-media: 10em;

//file button margin with list
@dls-uploader-file-item-spacing-y: @dls-padding-unit * 3;

// file list item styles
@dls-uploader-file-item-padding-x: @dls-padding-unit * 1;
@dls-uploader-file-item-label-spacing-before: @dls-padding-unit * 1;
@dls-uploader-file-item-label-spacing-after: @dls-padding-unit * 2;
@dls-uploader-file-item-width: @dls-height-unit * 64;
@dls-uploader-file-item-height: @dls-height-unit * 5;
@dls-uploader-file-item-background-color: transparent;
@dls-uploader-file-item-background-color-hover: @dls-background-color-base-1-hover;
@dls-uploader-file-item-font-color: @dls-foreground-color-neutral;
@dls-uploader-file-item-icon-color: @dls-foreground-color-neutral-weak;

// feedback
@dls-uploader-foreground-color-error: @dls-foreground-color-error-primary;
@dls-uploader-foreground-color-success: @dls-foreground-color-success-primary;
@dls-uploader-media-border-color-error: @dls-border-color-error-strong;

// upload media
@dls-uploader-media-height-m: @dls-height-unit * 40;
@dls-uploader-media-height-s: @dls-height-unit * 20;
@dls-uploader-media-width-m: @dls-uploader-media-height-m;
@dls-uploader-media-width-s: @dls-uploader-media-height-s;
@dls-uploader-media-icon-size-m: @dls-height-unit * 10;
@dls-uploader-media-icon-size-s: @dls-height-unit * 5;
@dls-uploader-media-icon-color: @dls-foreground-color-neutral-weak;
@dls-uploader-media-padding-x-m: @dls-padding-unit * 3;
@dls-uploader-media-padding-x-s: @dls-padding-unit * 2;
@dls-uploader-media-content-spacing-m: @dls-padding-unit * 3;
@dls-uploader-media-content-spacing-s: @dls-padding-unit * 3;

// See button for upload media button styles

// mask
@dls-uploader-mask-icon-color: @dls-foreground-color-reverse;
@dls-uploader-mask-icon-spacing: @dls-padding-unit * 3;
@dls-uploader-mask-padding-y: @dls-padding-unit * 1;
@dls-uploader-mask-padding-x: @dls-padding-unit * 3;
@dls-uploader-mask-background-color: @dls-background-color-modal;

// entries
@dls-uploader-media-entry-spacing: @dls-padding-unit * 6;
@dls-uploader-media-entry-content-spacing: @dls-padding-unit * 2;
@dls-uploader-media-entry-icon-size: @dls-icon-size-normal;

// See whole view styles in dialog styles

@dls-uploader-media-spacing-x: @dls-padding-unit * 4;
@dls-uploader-media-spacing-y: @dls-padding-unit * 6;
@dls-uploader-media-error-spacing: @dls-padding-unit * 1;

// media preview
@dls-uploader-media-preview-min-width: @dls-height-unit * 60;
@dls-uploader-media-preview-max-width: @dls-height-unit * 120;