File Box¶

Styles for a file box used in file_box macro.

Structurally .file-box contains following elements:

.file-box__header
.file-box__extension_icon
.file-box__title
.file-box__size
.file-box__description

Example¶

Here is an example of file box element usage.

HTML

<div class="file-box">
    <a class="file-box__header">
        <img class="file-box__extension-icon" src="https://example.com/extension.png" alt="File icon"></img>
        <span class="file-box__title">
            Title
            <svg class="file-box__download-icon icon">
                <use xlink:href="/assets/img/icons/symbol-defs.svg#icon-download"></use>
            </svg>
            <span class="file-box__size">10 kb</span>
        </span>
    </a>

    <p class="file-box__description">File description</p>
</div>

File Box tags¶

The .file-box classes were designed to be used with block elements like <div>. However, you can use them with any other element and customize it to your own needs.

LESS¶

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

File Box variables¶

Variables used to style a file box.

@fileBoxHeaderPaddingHorizontal: 4;
@fileBoxHeaderPaddingVertical: 6;
@fileBoxHeaderTextDecoration: none;

@fileBoxTitlePaddingHorizontal: 4;

@fileBoxDownloadIconStroke: @globalFontColorSecondary;

@fileBoxSizeColor: @globalFontColorSecondary;

@fileBoxDescriptionMarginTop: 12;

@fileBoxHeaderBackgroundColorHover: @neutralColors100;
@fileBoxHeaderBorderRadiusHover: 2px;
@fileBoxHeaderTextDecorationHover: underline;

@fileBoxBorderColorHover: @neutralColors200;

If you want to change file box styles, you can just change the variables. To change a default header text-decoration just modify @fileBoxHeaderTextDecoration variable.

@fileBoxHeaderTextDecoration: underline;

File Box styles¶

Here are standard file box styles.

.file-box {
    .box();
    transition: border-color 0.2s ease-in;

    &__header {
        .padding-to-unit(@fileBoxHeaderPaddingVertical, @fileBoxHeaderPaddingHorizontal, @fileBoxHeaderPaddingVertical, @fileBoxHeaderPaddingHorizontal);
        display: flex;
        align-items: center;
        text-decoration: @fileBoxHeaderTextDecoration;
        transition: background-color 0.2s ease-in;

        &:hover {
            background-color: @fileBoxHeaderBackgroundColorHover;
            border-radius: @fileBoxHeaderBorderRadiusHover;
            text-decoration: @fileBoxHeaderTextDecorationHover;
            cursor: pointer;
        }
    }

    &__title {
        .box-header();
        .padding-to-unit(0, @fileBoxTitlePaddingHorizontal, 0, @fileBoxTitlePaddingHorizontal);
    }

    &__download-icon {
        stroke: @fileBoxDownloadIconStroke;
    }

    &__size {
        .weight-normal();
        color: @fileBoxSizeColor;
    }

    &__description {
        .box-content();
        .margin-top-to-unit(@fileBoxDescriptionMarginTop);
    }

    &:hover {
        border-color: @fileBoxBorderColorHover;
    }
}

Macros reference¶

file_box