File Picker

Series of classes that are used to style a file picker control.

Wgraj plik

HTML

<div class="control">
    <div class="control__content">
        <div class="control__element">
            <h-file-picker control-id="file-picker" control-name="file_picker" label-text="Wgraj plik" label-icon-name="add-file" remove-button-text="Usuń plik" remove-button-icon-name="remove-file" formats=".jpg, .png" class="file-picker">
                <input type="file" hidden class="file-picker__input" id="file-picker" name="file_picker" accept=".jpg,.png">

                <label class="file-picker__label" for="file-picker">
                    <h-file-picker-icon name="add-file" class="file-picker-icon icon">
                        <h-icon icon-name="add-file" class="icon">
                            <svg class="icon">
                                <use xlink:href="/assets/img/icons/symbol-defs.svg#add-file"></use>
                            </svg>
                        </h-icon> 
                    </h-file-picker-icon>
                    Wgraj plik
                </label>
            </h-file-picker>
        </div>
    </div>
</div>

LESS

You can modify any file picker less variable in your User Less section to change file picker styles.

file picker variables

Variables used to style file picker.

@filePickerColor: @neutralColors700;
@filePickerButtonAppearanceHeight: 36;
@filePickerButtonAppearancePaddingH: 16;
@filePickerButtonAppearanceBorder: 1px solid @neutralColors300;
@filePickerButtonAppearanceBorderRadius: 2px;
@filePickerButtonAppearanceFontSize: 14;
@filePickerButtonAppearanceLineHeight: 20;
@filePickerErrorBorder: 2px solid @errorColors500;
@filePickerLabelIconMargin: 10;

If you want, for example change file picker color, you can just change the value of proper variable responsible for this style, which in this case is @filePickerColor.

@filePickerColor: @neutralColors700;

file picker styles

Standard file picker styles.

.file-picker {
    .pixel-to-rem(min-height, @filePickerButtonAppearanceHeight);
    display: inline-block;

    &__label {
        .file-picker-button-appearance-with-border();
        color: @filePickerColor;
        cursor: pointer;

        .file-picker-icon {
            .pixel-to-rem(margin-right, @filePickerLabelIconMargin);
        }
    }

    &_error {
        .file-picker__label {
            border: @filePickerErrorBorder;
        }
    }
}