Proyectos de Subversion Moodle

/*
    TODO: Improve UI:
    - RWD
    - Table
*/
.content-bank-container {
    .cb-content-wrapper {
        padding: 0.5rem;
        min-height: 140px;
        max-height: 500px;
        overflow-x: auto;
        flex-wrap: wrap;
    }
    .cb-thumbnail {
        width: 24px;
        height: 24px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }
    &.view-grid {
        .cb-listitem {
            margin-bottom: 0.5rem;
        }

        .cb-listitem.cb-unlisted {
            position: relative;
        }

        @include media-breakpoint-between(xs,sm) {
            .cb-listitem {
                flex-basis: 50%;
            }
        }

        @include media-breakpoint-up(sm) {
            .cb-listitem {
                max-width: 120px;
                min-width: 120px;
            }
        }

        .cb-name {
            text-align: center;
        }
        .cb-file {
            padding: 0.5rem;
        }
        .cb-thumbnail {
            width: 64px;
            height: 64px;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 0.5rem;
        }

        .cb-unlisted .cb-thumbnail {
            opacity: .15;
        }

        /* Display a centered eye slash on top of unlisted content icons. */
        .cb-unlisted::after {
            position: absolute;
            top: 20px;
            left: 0;
            width: 100%;

            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='#{url-friendly-colour($body-color)}' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M18.6247 10C19.0646 10.8986 19.25 11.6745 19.25 12C19.25 13 17.5 18.25 12 18.25C11.2686 18.25 10.6035 18.1572 10 17.9938M7 16.2686C5.36209 14.6693 4.75 12.5914 4.75 12C4.75 11 6.5 5.75 12 5.75C13.7947 5.75 15.1901 6.30902 16.2558 7.09698'%3E%3C/path%3E%3Cpath stroke='#{url-friendly-colour($body-color)}' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M19.25 4.75L4.75 19.25'%3E%3C/path%3E%3Cpath stroke='#{url-friendly-colour($body-color)}' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M10.409 13.591C9.53033 12.7123 9.53033 11.2877 10.409 10.409C11.2877 9.5303 12.7123 9.5303 13.591 10.409'%3E%3C/path%3E%3C/svg%3E%0A");
            background-repeat: no-repeat;
            background-size: 24px;

            .theme-dark & {
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='#{url-friendly-colour($dm-body-color)}' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M18.6247 10C19.0646 10.8986 19.25 11.6745 19.25 12C19.25 13 17.5 18.25 12 18.25C11.2686 18.25 10.6035 18.1572 10 17.9938M7 16.2686C5.36209 14.6693 4.75 12.5914 4.75 12C4.75 11 6.5 5.75 12 5.75C13.7947 5.75 15.1901 6.30902 16.2558 7.09698'%3E%3C/path%3E%3Cpath stroke='#{url-friendly-colour($dm-body-color)}' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M19.25 4.75L4.75 19.25'%3E%3C/path%3E%3Cpath stroke='#{url-friendly-colour($dm-body-color)}' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M10.409 13.591C9.53033 12.7123 9.53033 11.2877 10.409 10.409C11.2877 9.5303 12.7123 9.5303 13.591 10.409'%3E%3C/path%3E%3C/svg%3E%0A");
            }
        }

        .cb-heading,
        .cb-uses,
        .cb-date,
        .cb-size,
        .cb-type,
        .cb-author {
            display: none;
        }
    }

    &.view-list {
        .cb-content-wrapper {
            padding: 0 0.5rem;
            flex-direction: column;
            flex-wrap: nowrap;
        }

        .cb-thumbnail {
            margin-right: 0.5rem;
        }

        .cb-listitem,
        .cb-heading {
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            border-bottom: $border-width solid $border-color;

            .theme-dark & {border-color: $dm-border-color;}
        }

        .cb-column {
            display: flex;
            align-items: center;
            padding: 0.25rem;
            border-right: $border-width solid $border-color;

            .theme-dark & {border-color: $dm-border-color;}

            .title {
                font-size: 12px;
                font-weight: $font-weight-medium;
                color: $body-color-light;
            }
        }

        .cb-listitem.cb-unlisted .cb-thumbnail {
            opacity: .3;
        }

        .cb-listitem.cb-unlisted .cb-column,
        .cb-listitem.cb-unlisted .cb-column a {
            color: $text-muted;

            .theme-dark & {color: $dm-text-muted;}
        }

        @include media-breakpoint-between(xs,sm) {
            .cb-column {
                flex: 0 0 50%;
                max-width: 50%;
            }
        }

        @include media-breakpoint-up(sm) {
            .cb-heading {
                position: sticky;
                top: 0;
                z-index: 1;
            }

            .cb-file {
                flex: 0 0 40%;
                max-width: 40%;
            }
            .cb-uses,
            .cb-date,
            .cb-size,
            .cb-type,
            .cb-author {
                flex: 0 0 12%;
                max-width: 12%;
            }
            .cb-column.last {
                border-right: 0;
            }
        }

        .cb-btnsort {
            span {
                display: none;
            }
            .title {
                display: inline;
            }
            &.dir-none .default,
            &.dir-asc .asc,
            &.dir-desc .desc {
                display: inline;
            }

            .icon {
                width: 14px;
                height: 14px;
            }
        }
    }
}

.cb-toolbar-container .dropdown-scrollable {
    @include thin-scrolls($dm-drawer-scroll-bg-track);

    max-height: 390px;
    overflow-y: auto;
    overflow-x: hidden;

    .icon-size-4 .icon {
        width: 24px!important;
        height: 24px!important;
    }

    .icon {
        filter: invert(0)!important;
        background: $white;
        opacity: 1;
        border-radius: $btn-border-radius-lg;
    }
}