attachmentElement.scss

TLDR

The attachmentElement.scss file contains the styling for a file element component. It defines the styles for the file name, extension and size, uploading text, icon, download button, menu icon, delete menu, and progress bar.

Classes

.FileElement

This class represents the file element component. It defines the overall styling for the component, including background color, border, width, height, box shadow, and display.

.fileElement-file-name

This class represents the styling for the file name within the file element. It defines the font size and weight.

.fileElement-file-ext-and-size

This class represents the styling for the file extension and size within the file element. It defines the text transformation, font weight, font size, line height, and color.

.fileElement-file-uploading

This class represents the styling for the "uploading" text within the file element. It defines the font weight, font size, line height, and color.

.fileElement-icon-division

This class represents the styling for the division between the file name and the icon within the file element. It defines the top margin.

.fileElement-icon

This class represents the styling for the icon within the file element. It defines the font size and color.

.fileElement-download-btn

This class represents the styling for the download button within the file element. It defines the font size, color, padding, and hover effect.

.fileElement-menu-icon

This class represents the styling for the menu icon within the file element. It defines the display and float properties.

.delete-menu

This class represents the styling for the delete menu within the file element. It defines the display and top margin.

.fileElement-delete-download

This class represents the styling for the delete and download container within the file element. It defines the position and display properties.

.progress

This class represents the styling for the progress bar container within the file element. It defines the position, width, height, margin, and border radius.

.progress-bar

This class represents the styling for the progress bar within the file element. It defines the float, width, height, line height, color, text alignment, and background color.

.dialog

This class represents the styling for a dialog within the file element. It defines the maximum width.

.FileElement {
    background: rgb(var(--center-channel-bg-rgb));
    border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
    min-width: 300px;
    width: max-content;
    height: 64px;
    box-shadow: var(--elevation-1);
    display: flex;
    position: relative;

    .fileElement-file-name {
        font-size: 14px;
        font-weight: 600;
    }

    .fileElement-file-ext-and-size {
        text-transform: uppercase;
        font-weight: 400;
        font-size: 12px;
        line-height: 16px;
        color: rgb(var(--center-channel-color-rgb));
    }

    .fileElement-file-uploading {
        font-weight: 400;
        font-size: 12px;
        line-height: 16px;
        color: rgb(var(--center-channel-color-rgb));
    }

    .fileElement-icon-division {
        margin-top: 8px;
    }

    .fileElement-icon {
        font-size: 48px;
        color: rgba(237, 82, 42, 1);
    }

    .fileElement-download-btn {
        display: none;
        font-size: 20px;
        color: rgba(var(--center-channel-color-rgb), 0.56);
        padding: 8px;

        &:hover {
            background-color: rgba(var(--center-channel-color-rgb), 0.08);
            border-radius: 5px;
            cursor: pointer;
        }
    }

    .fileElement-menu-icon {
        display: none;
        float: right;
    }

    .delete-menu {
        display: none;
        margin-top: -30px;
    }

    .fileElement-delete-download {
        position: absolute;
        display: flex;
        right: 0;
    }

    &:hover {
        .fileElement-download-btn {
            display: block;
        }

        .fileElement-menu-icon {
            display: block;
        }

        .delete-menu {
            display: block;
        }
    }

    .progress {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 7px;
        margin-bottom: 0;
        border-radius: 0;
    }

    .progress-bar {
        float: left;
        width: 0%;
        height: 100%;
        line-height: 20px;
        color: #fff;
        text-align: center;
        background-color: #285ab9;
    }

    .dialog {
        max-width: 550px !important;
    }
}