metro4/less/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 {
    .hideElement(input);
}

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

    button {
        & > * {
            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 {
        outline-color: @cyan;
    }

    &.drop-on {
        outline-color: @green;
    }
}