// Thelia : Folder

// Folder Info
.folder-chapo {}
.folder-description {
    margin-bottom: 20px;
}

// Content List
#folder-contents {
    .contents > ul { .contents-grid; }
}

.contents-grid,
.contents-list {
    // Animation
    @media (min-width: @screen-tablet) {
        .content-image {
            display: block;
            overflow: hidden;
            position: relative;
            > .mask {
                background-color: @brand-primary;
                background-color: rgba(red(@brand-primary), green(@brand-primary), blue(@brand-primary), .4);
                display: block;
                .opacity(0);
                overflow: visible;
                position: absolute;
                top: 0; left: 0;
                visibility: hidden;
                width: 100%; height: 100%;
                .transition(opacity 300ms ease-in-out 50ms);
            }
            &:hover,
            &:focus {
                .mask {
                    visibility: visible;
                    .opacity(1);
                }
            }

        }
    }
}


// Contents Grid
.contents-grid {
    .make-row();
    .list-unstyled();
    .item { .make-sm-column(4); .make-md-column(4); .clearfix(); } // default
    &.content-col-2 > .item { .make-md-column(6); }
    &.content-col-3 > .item { .make-md-column(4); }
    &.content-col-4 > .item { .make-md-column(3); }
    &.content-col-5 > .item { .make-md-column(2.4); }
    &.content-col-6 > .item { .make-md-column(2); }

    .item {
        margin-bottom: @line-height-computed;

        .content-image {
            > img  { .img-responsive(); width: 100%; }
            > .mask {}
        }

        .content-info {
            .name { margin: 4px 0; }
            .description { .visible-xs; }
            .short-description { display: block; margin-bottom: 5px; }
        }
    }
}

// Content List
.contents-list {
    .list-unstyled();
    .item {
        + .item { border-top: 1px solid #ededed; padding-top: 15px; }
        > article {
            .make-row();
            margin-left: 0;

            .content-image {
                .make-sm-column(3);
                margin-bottom: 15px; padding: 0;
                > img { .img-responsive(); width: 100%; }
                > .mask {}
            }

            .content-info {
                .make-sm-column(6);
                .name { margin-top: 0; }
                .description {}
                .short-description {}
            }
        }
    }
}