blocks.less

// General block styles.
.block {
    .well;
    padding: 8px 0;

    .header {
        h2 {
            .nav-header;
            font-size: 1.1em;
            word-wrap: break-word;
            margin: 0;
        }
        .block_action {
            padding: 3px 15px;
            float: right;
            > * {
                margin-left: 3px;
            }
            .block-hider-show,
            .block-hider-hide {
                cursor: pointer;
            }
            .block-hider-show {
                display: none;
            }
        }
    }
    .content {
        padding: 4px 14px;
        word-wrap: break-word;

        h3 {
            .nav-header;
            font-size: 1.1em;
        }
        hr {
            margin: 5px 0;
        }
        .userpicture {
            width: 16px;
            height: 16px;
            margin-right: 6px;
        }
        .list {
            li.listentry {
                clear: both;
            }
            .c0 {
                display: inline;
            }
            .c1 {
                margin-left: 5px;
                display: inline;
            }
        }
        p {
            &.hasicon {
                img {
                    &.icon {
                        padding-right: 0;
                    }
                }
            }
        }
    }
    .footer {
        margin-bottom: 4px;
        display: block;
        padding: 3px 5px;
    }
    &.beingmoved {
        border-width: 2px;
        border-style: dashed;
    }
    &.invisible {
        .header h2 {
            .opacity(50);
        }
    }

    &.hidden .header .block_action {
        .block-hider-hide {
            display: none;
        }
        .block-hider-show {
            display: inline;
        }
    }
    &.list_block .unlist > li > .column {
        display: inline-block;
        .ie7-inline-block();
    }
}
.editing {
    .block {
        .header {
            .commands {
                clear: both;
                text-align: right;
                display: block;
                padding: 3px 15px;

                > a {
                    margin: 0 3px;
                }
                .icon img {
                    width: 12px;
                    height: 12px;
                }
                img.actionmenu {
                    width: auto;
                }
                .toggle-display[role="menuitem"] img.icon {
                    width: 22px;
                    vertical-align: middle;
                }
            }
        }
    }
}

// Hide the block content when the block has been minimised.
.jsenabled .block.hidden .content {
    display: none;
}

// Style the div used as a move target for non-drag+drop block moves.
.blockmovetarget {
    border-width: 2px;
    border-style: dashed;
    display: block;
    height: 1em;
    margin-bottom: 20px;
}

// Style the div that contains the cancel link for moving a block with JS disabled.
.blockannotation {
    // Blocks have a bottom margin of 20px, to associate this link with the block being moved
    // we move it up 10px, and then give it a bottom margin of 10px giving it a better visual association
    position: relative;
    top: -10px;
    margin-bottom: 10px;
}

// Styles for the blog menu block.
.block_blog_menu #blogsearchquery {
    max-width: 92%;
}

// Styles for the admin block.
.block_settings {
    #adminsearchquery {
        max-width: 92%;
    }
}

// Styles for the search forums block.
.block_search_forums {
    #searchform_search {
        width: auto;
        max-width: 92%;
    }
}

// Styles for the Calendar Upcoming block.
.block_calendar_upcoming {
    .content {
        .date {
            padding-left: 22px;
        }
        .footer {
            margin-top: .5em;
            padding-top: 10px;
            padding-left: 0;
        }
    }
}

// Styles for the RSS client block.
.block_rss_client {
    .content li {
        margin-bottom: 10px;
        padding: 5px;
        border: 1px solid @tableBorder;
        .border-radius(@baseBorderRadius);
        .link {
            font-weight: inherit;
        }
    }
    .list li:first-child {
        border-top-width: 1px; // undo the style provided by the block's styles.css
    }
}

// Styles for the news items block.
.block_news_items .content {
    .newlink {
        padding-bottom: 10px;
    }
    ul li {
        border-top: 1px rgba(0, 0, 0, 0.05) solid;
        padding: 2px;
        display: table;
        width: 100%;
        .info {
            display: table-header-group;
        }
        .date {
            font-size: @fontSizeSmall;
            display: inline;
        }
        .name {
            font-size: @fontSizeSmall;
            padding-left: 1ex;
            display: inline;
        }
    }
    .footer {
        padding-top: 10px;
        padding-left: 0;
    }
}

// Overide for login block.
.block_login {
    input#login_username,
    input#login_password {
        width: 95%;
    }
    .content {
        margin-left: auto;
        margin-right: auto;
        max-width: 280px;
    }
    input[type="submit"] {
        margin: 10px 0;
    }
}

// Styles for the special "Add block" block shown while editing.
.block_adminblock {
    .content {
        display: block;
        margin: 0 10px;
        padding: 3px 5px;
        width: auto;
    }
    .singleselect {
        display: block;
        select.singleselect {
            display: block;
            width: 100%;
        }
    }
}

.block .block-cards {
    .empty-placeholder-image-lg {
        height: 125px;
    }
    .course-info-container {
        flex: 1 1 auto;
        padding: 0.8rem;
    }
    .dashboard-card-footer {
        padding: 0.8rem;
        .border-bottom-radius(@baseBorderRadius);
    }
    .progress {
        height: 0.5rem;
        margin-bottom: 0;
    }
    .list-group {
        margin: 0;
    }
    .course-listitem {
        display: block;
        padding: 0.75rem 1.25rem;
        margin-bottom: 0.5rem;
        background-color: @white;
        border: 1px solid @tableBorder;
        .border-radius(@baseBorderRadius);
    }
    .course-summaryitem {
        padding: 0.5rem;
        background-color: @white;
        border: 1px solid @tableBorder;
        .border-radius(@baseBorderRadius);
    }
    .multiline {
        white-space: normal;
    }
    .summary img {
        max-width: 100%;
    }
    img.icon {
        padding: 0;
    }
    .card .coursemenubtn {
        margin-top: -0.5rem;
    }
    a.coursename {
        color: @textColor;
    }
}

.dashboard-card-deck.one-row {
    flex-flow: nowrap;
    overflow-x: scroll;
}

.block_recentlyaccesseditems {
    img.icon {
        height: auto;
        width: auto;
        margin-right: 6px;
    }
    .ml-1 {
        margin-left: 10px;
    }
    h6 {
        font-size: .9375rem;
        margin-bottom: 0;
    }
    a,
    a:hover {
        text-decoration: none;
        color: unset;
    }
}

.block_myoverview {
    .content {
        min-height: 19.35rem;
    }
    .paged-content-page-container {
        min-height: 13rem;
    }
}

.dashboard-card-deck {
    box-sizing: border-box;
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }
    display: flex;
    flex-flow: row wrap;
    margin-right: -.25rem;
    margin-left: -.25rem;

    .dashboard-card {
        .border-radius(@baseBorderRadius);
        margin-bottom: 0.5rem;
        margin-right: 0.25rem;
        margin-left: 0.25rem;
        flex-grow: 0;
        flex-shrink: 0;
        min-width: 0;
        width: ~"calc(100% - 0.5rem)";
        flex-basis: auto;
    }
    @media (min-width: 647px) {
        .dashboard-card {
            display: flex;
            flex-direction: column;

            width: ~"calc(50% - 0.5rem)";
        }
    }
    @media (min-width: 888px) {
        .dashboard-card {
            width: ~"calc(33.333% - 0.5rem)";
        }
    }
    @media (min-width: 1147px) {
        .dashboard-card {
            width: ~"calc(25% - 0.5rem)";
        }
    }
    @media (min-width: 1407px) {
        .dashboard-card {
            width: ~"calc(20% - 0.5rem)";
        }
    }
}
body.used-region-side-pre.empty-region-side-post,
body.used-region-side-post.empty-region-side-pre {
    .dashboard-card-deck {
        @media (min-width: 768px) {
            .dashboard-card {
                width: ~"calc(100% - 0.5rem)";
            }
        }
        @media (min-width: 815px) {
            .dashboard-card {
                width: ~"calc(50% - 0.5rem)";
            }
        }
        @media (min-width: 1163px) {
            .dashboard-card {
                width: ~"calc(33.333% - 0.5rem)";
            }
        }
        @media (min-width: 1514px) {
            .dashboard-card {
                width: ~"calc(25% - 0.5rem)";
            }
        }
    }
}
body.used-region-side-pre.used-region-side-post {
    .dashboard-card-deck {
        @media (min-width: 768px) {
            .dashboard-card {
                width: ~"calc(100% - 0.5rem)";
            }
        }
        @media (min-width: 1144px) {
            .dashboard-card {
                width: ~"calc(50% - 0.5rem)";
            }
        }
        @media (min-width: 1680px) {
            .dashboard-card {
                width: ~"calc(33.333% - 0.5rem)";
            }
        }
    }
}

/* stylelint-disable declaration-no-important */
@media (min-width: 768px) {
    #block-region-side-post .dashboard-card-deck,
    #block-region-side-pre .dashboard-card-deck {
        .dashboard-card {
            width: ~"calc(100% - 0.5rem)" !important;
        }
    }
}
.block_docked .dashboard-card {
    width: ~"calc(100% - 0.5rem)" !important;
}
/* stylelint-enable */

.dashboard-card-img {
    height: 7rem;
    background-position: center;
    background-size: cover;
    .border-top-radius(@baseBorderRadius);
}

.summaryimage {
    height: 7rem;
    width: 7rem;
    .border-radius(50%);
    background-position: center;
    background-size: cover;
}

.position-absolute {
    position: absolute;
}