inputFiles.scss

/*
 * This file is part of the QuidPHP package <https://quidphp.com>
 * Author: Pierre-Philippe Emond <emondpph@gmail.com>
 * License: https://github.com/quidphp/lemur/blob/master/LICENSE
 */

// inputFiles
// stylesheet for the files upload inputs component of the CMS

// componentFilesSpecific
// style pour le component files dans le formulaire
@mixin componentFilesSpecific() {
    .file-block {
        @include filesBlock();

        &:not(:last-child) {
            margin-bottom: 10px;
        }
    }
}

// componentFilesGeneral
// mixin pour l'affichage d'un champ media/medias dans general
@mixin componentFilesGeneral() {
    @include filesShowThumbnail();
    text-align: center;

    .slider {
        position: relative;
        padding: 0 20px;

        .prev,
        .next {
            @include trianglePrevNext(14px);
            margin-top: -5px;
            display: block;

            &:disabled {
                display: none;
            }
        }

        .prev {
            @include abs(50%, null, null, 0);
        }

        .next {
            @include abs(50%, 0);
        }

        .slider-element {
            display: none;

            &[data-tab='1'] {
                display: block;
            }
        }
    }
}

// filesBlock
// mixin avec les styles pour un bloc du champ de chargement de fichiers
@mixin filesBlock() {
    width: 100%;
    max-width: 500px;
    background-color: $white;
    border-radius: 5px;
    position: relative;
    border: 1px solid $lightGray;

    &[data-action='1'] {
        .info,
        .actions,
        .versions {
            display: none;
        }

        .form {
            input[type='file'] {
                display: none;
            }

            .message {
                @include flex(center);
            }
        }
    }

    .count-circle {
        @include flex(center);
        @include abs(10px, 10px);
        @include wh(24px);
        background-color: $white;
        font-weight: bold;
        border-radius: 50%;
        border: 1px solid $lightGray;

        > .count {
            line-height: 1;
        }
    }

    .actions {
        @include abs(-8px, -8px);
        @include flex();

        > .action {
            margin-left: 4px;

            &:hover {
                opacity: 0.6;
            }
        }
    }

    .form {
        background-color: $lightGray;
        padding: 10px;

        .message {
            display: none;
            font-weight: bold;

            .close {
                margin-left: 4px;

                &:hover {
                    opacity: 0.8;
                }
            }
        }
    }

    .info {
        @include imageLegend();
        padding: 10px;
        text-align: left;
        text-align: center;

        > a {
            @include inbl();
            @include statesOpacity();
            background-color: $gray;

            &:first-child {
                margin-bottom: 10px;
            }
        }

        .media-placeholder {
            @include wh(64px);
            margin: auto;
        }

        .line {
            @include flex(center);

            .notFound {
                @include nothing();
                margin-bottom: 3px;
            }

            a.filename {
                text-decoration: underline;
            }

            .filesize {
                margin-left: 10px;
                font-weight: bold;
            }
        }
    }

    .versions {
        padding: 10px;
        background-color: $lightestGray;
        font-size: 90%;

        > ul {
            @include ulOlMargin();

            > li {
                &:not(:first-child) {
                    padding-top: 5px;
                }

                > span.notFound,
                > span.filesize {
                    margin-left: 5px;
                    font-weight: bold;
                }

                > a {
                    text-decoration: underline;
                    margin-left: 5px;
                }
            }
        }
    }

    /* PRINT */
    @include print() {
        .actions,
        .form,
        &.empty {
            display: none !important;
        }
    }
}

// filesShowThumbnail
// mixin pour afficher une image dans une cellule du tableau general
@mixin filesShowThumbnail() {
    @include imageLegend();

    a {
        .thumbnail,
        .media-placeholder {
            @include transitions(opacity 0.3s);
            display: block;
            margin-left: auto;
            margin-right: auto;
        }

        .thumbnail > img {
            background-color: $gray;
        }

        @include hoverAndSelected() {
            .thumbnail,
            .media-placeholder {
                opacity: 0.8;
            }
        }

        @include activeAndClick() {
            .thumbnail,
            .media-placeholder {
                opacity: 0.6;
            }
        }
    }

    .media-placeholder {
        @include wh(64px);
        margin: auto;
        margin-bottom: 3px;
    }
}