minio/browser/app/less/inc/objects.less

.objects {
    height: 100%;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.objects__lists {
    flex: 1 1 auto;
    overflow: auto;
    position: relative;
}

.objects--active {
    .objects__lists {
        &:before,
        &:after {
            position: absolute;
            .animated(zoomIn, 300ms);
        }

        &:before {
            content: '';
            left: 1.5rem;
            top: 0.5rem;
            width: ~"calc(100% - 3rem)";
            height: ~"calc(100% - 2rem)";
            border: 2px dashed darken(@muted-bg, 50%);
            background-color: @body-bg;
            z-index: 11;
            opacity: 0.75;
        }

        &:after {
            content: 'Drop Your Files Here';
            font-size: 1.25rem;
            text-transform: uppercase;
            z-index: 12;
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            width: 14.33rem;
            text-align: center;
            height: 1.8rem;
        }
    }
}

.objects__header {
    @media(min-width: @screen-sm-min) {
        color: @headings-color;
        text-transform: uppercase;
        font-weight: @font-weight-bold;
        font-size: @font-size-small;
        border-bottom: 1px solid darken(@muted-border, 3%);
        border-top: 1px solid darken(@muted-border, 3%);
        margin-bottom: 1rem;

        & > .objects__column {
            overflow: hidden;
            cursor: pointer;
            .transition(color);
            .transition-duration(300ms);

            &:hover {
                color: @text-color;

                .objects__sort {
                    opacity: 1;
                }
            }
        }
    }
}

.objects__row {
    position: relative;

    @media (min-width: (@screen-sm-min)) {
        padding: 0 1.5rem;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        flex-shrink: 0;
    }

    @media(max-width: @screen-xs-max) {
        padding: 1rem 1rem 1rem 4.25rem;

        &:nth-child(even) {
            background-color: @white;
        }

        &.objects__row--directory {
            .objects__column--size,
            .objects__column--date {
                display: none;
            }
        }
    }

    &:hover {
        &:not(.objects__header) {
            @media (min-width: @screen-sm-min) {
                background-color: @object-row-hover-bg;
            }
        }

        .objects__select {
            & > i {
                &:before {
                    .scale(0);
                    opacity: 0;
                }

                &:after {
                    .scale(1);
                }
            }
        }
    }
}

.objects__column {
    position: relative;

    @media(min-width: @screen-sm-min) {
        padding: 0.8rem 0.5rem;

        &:not(.objects__column--name):not(.objects__column--select) {
            margin: 0 0 0 1.5rem;
        }
    }
}

.objects__column--select {
    @media(max-width: @screen-xs-max) {
        position: absolute;
        left: 1.25rem;
        top: 0;
        bottom: 0;
        height: 30px;
        margin: auto;
    }
}

.objects__select {
    position: relative;
    height: 30px;
    width: 30px;

    & > input[type="checkbox"],
    & > i,
    & > i:before,
    & > i:after {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }

    & > input[type="checkbox"] {
        z-index: 2;
        opacity: 0;

        &:checked ~ i {
            &:before {
                .scale(0);
            }

            &:after {
                .scale(1);
                .font-icon('\f269');
                color: @headings-color;
            }
        }
    }

    & > i {
        font-style: normal;

        &:before,
        &:after {
            content: '';
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.6rem;
            color: @text-color;
            .transition(all);
            .transition-duration(200ms);
        }

        &:before {
            background-color: red;
            z-index: 1;
            border-radius: 50%;
        }

        &:after {
            .scale(0);
            .font-icon('\f26c');

        }
    }
}

.objects__column--name {
    overflow: hidden;
    .text-overflow();

    @media(min-width: @screen-sm-min) {
        flex: 1 1 auto;
    } 

    & > a {
        color: @headings-color;
        display: block;
    }
}

@media(min-width: @screen-sm-min) {
    .objects__column--size {
        width: 6.5rem;
    }

    .objects__column--date {
        width: 11.5rem;
    }
}

@media(max-width: @screen-xs-max) {
    .objects__column--size,
    .objects__column--date {
        display: inline-block;
        font-size: @font-size-small;
        margin: 0.25rem 1rem 0 0;
        color: @text-muted-color;
    }
}

.objects__sort  {
    position: absolute;
    bottom: 0.8rem;
    right: 0;
    opacity: 0;
    color: @text-color;
    font-size: 1rem;
    .transition(opacity);
    .transition-duration(300ms);
}


// File types
.object-type(@color, @icon, @icon2x, @width, @height) {
    .objects__select {
        & > i {
            &:before {
                content: '';
                .img-retina('/../../img/icons/files/@{icon}.png', '/../../img/icons/files/@{icon2x}.png', @width, @height);
                background-color: @color;
                background-position: center;
                background-repeat: no-repeat;
            }
        }
    }
}

[data-object-type=folder] { .object-type(#65baff, 'folder', 'folder@2x', 14px, 12px); }
[data-object-type=pdf] { .object-type(#fa7775, 'pdf', 'pdf@2x',16px, 15px); }
[data-object-type=zip] { .object-type(#427089, 'zip', 'zip@2x', 16px, 26px); }
[data-object-type=audio] { .object-type(#0fc5b4, 'audio', 'audio@2x', 16px, 14px); }
[data-object-type=code] { .object-type(#c1a08f, 'code', 'code@2x', 17px, 14px); }
[data-object-type=excel] { .object-type(#32c787, 'excel', 'excel@2x', 16px, 16px); }
[data-object-type=image] { .object-type(#ff85af, 'image', 'image@2x', 16px, 8px); }
[data-object-type=video] { .object-type(#f8c363, 'video', 'video@2x', 14px, 11px); }
[data-object-type=other] { .object-type(#c1c1c1, 'other', 'other@2x', 12px, 9px); }
[data-object-type=doc] { .object-type(#03A9F4, 'doc', 'doc@2x', 16px, 16px); }
[data-object-type=presentation] { .object-type(#ac91ca, 'presentation', 'presentation@2x', 16px, 16px); }
[data-object-type=text] { .object-type(#00BCD4, 'text', 'text@2x', 12px, 12px); }