metro4/source/components/file/file.less

The front-end framework for Build responsive, mobile-first projects on the web with the first front-end component library in Metro Style

@import (once) "../../include/vars";
@import (once) "../../include/mixins";

.file, .drop-zone, .file-button {
    .hideElement(input);
}

.file {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0;
    padding: 0;

    .button {
        border: none;
        & > * {
            height: 24px;
            max-width: 24px;
        }
    }

    .caption {
        line-height: 35px;
        display: block;
        padding: 0 .5rem;
        width: 100%;
        .text-ellipsis();
    }

    &.disabled {
        .button {
            background-color: @light;
            color: darken(@light, 10%);
        }
    }

    .prepend {order: 1}
    .append {order: 4}
    .caption {order: 2;}
    .button {
        order: 3;
        margin-left: auto;
        height: 34px;
    }
}

.drop-zone {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
    width: 100%;
    height: auto;
    padding: 40px 0;
    outline: 4px dashed @darkGray;
    outline-offset: -12px;
    background-color: @light;

    .icon {
        display: block;
        width: 64px;
        height: 64px;
    }

    .caption {
        margin-top: 10px;
        font-size: 14px;
        .text-ellipsis();
    }

    &.focused, &:hover {
        outline-color: darken(@darkGray, 10%);
    }

    &.drop-on {
        outline-color: lighten(green, 10%);
    }
}

.file-button {
    text-align: center;
}

.file {
    &[dir=rtl], &.rtl {
        .append {order: 1}
        .prepend {order: 4}
        .caption {
            order: 3;
            text-align: right;
        }

        .button {
            order: 2;
            margin-left: 0;
            margin-right: auto;
        }
    }
}