MDL-63698 block_myoverview: Summary view course images eq height/width.

[moodle.git] / theme / boost / scss / moodle / blocks.scss

.blockmovetarget .accesshide {
    position: relative;
    left: initial;
}

.block:target {
    padding-top: 0 !important; /* stylelint-disable declaration-no-important */
    margin-top: 0 !important;
}

.block_search_forums .searchform {
    /* Override plugin's default. */
    text-align: left;
}

.block.block_navigation .block_tree ul,
.block_settings .block_tree ul {
    margin-left: 0;
}

.block .block-controls {
    .dropdown-toggle {
        /* So that the caret takes the colour of the icon. */
        color: $body-color;
    }
}

$blocks-column-width: 250px !default;

[data-region="blocks-column"] {
    width: $blocks-column-width;
    float: right;
}

$blocks-plus-gutter: $blocks-column-width + ( $grid-gutter-width / 2 );

/* We put an absolutely positioned div in a relatively positioned div so it takes up no space */
#region-main-settings-menu {
    position: relative;
    float: left;
    width: 100%;
}
#region-main-settings-menu > div {
    position: absolute;
    right: 0;
    z-index: 100;
    margin: 1rem;
}
.region_main_settings_menu_proxy {
    width: 4rem;
    height: 2rem;
    background-color: $card-bg;
    margin-left: $card-spacer-x / 2;
    margin-bottom: $card-spacer-x / 2;
    border-bottom-left-radius: 0.5rem;
    float: right;
}

// Required for IE11 to prevent blocks being pushed under the content.
#region-main-settings-menu.has-blocks,
#region-main.has-blocks {
    display: inline-block;
    width: calc(100% - #{$blocks-plus-gutter});
    @include media-breakpoint-down(lg) {
        width: 100%;
        /* MDL-63102 - Remove extra space at bottom.
        If modifying make sure block-region is horizontally stacked when in full screen */
        display: block;
    }
}

[data-region="blocks-column"] {
    @include media-breakpoint-down(lg) {
        width: 100%;
    }
}

$card-gutter : $card-deck-margin * 2;

.block_myoverview {
    .empty-placeholder-image-lg {
        height: 125px;
    }
    .course-info-container {
        padding: 0.8rem;
    }
    .progress {
        height: 0.5rem;
    }
    .course-summaryitem {
        border: $border-width solid $border-color;
        background-color: $body-bg;
    }
    .icon {
        margin-right: 0;
    }
    a,
    .btn-link {
        color: inherit;
    }
    .btn.btn-link.btn-icon {
        height: 36px;
        width: 36px;
        padding: 0;
        border-radius: 50%;

        @include hover-focus {
            background-color: $gray-200;
        }
    }
}

.summaryimage {
    height: 7rem;
    background-position: center;
    background-size: cover;
}

.dashboard-card-deck .dashboard-card {
    margin-bottom: $card-gutter;
    flex-basis: 100%;
    flex-grow: 0;
    .dashboard-card-img {
        height: 7rem;
        background-position: center;
        background-size: cover;
    }
    .dashboard-card-footer {
        padding: 0.8rem;
    }
}

.dashboard-card-deck {
    @include media-breakpoint-up(sm) {
        .dashboard-card {
            flex-basis: calc(50% - #{$card-gutter});
        }
    }
    @include media-breakpoint-up(md) {
        .dashboard-card {
            flex-basis: calc(33.33% - #{$card-gutter});
        }
    }
    @include media-breakpoint-up(lg) {
        .dashboard-card {
            flex-basis: calc(25% - #{$card-gutter});
        }
    }
    @include media-breakpoint-up(xl) {
        .dashboard-card {
            flex-basis: calc(20% - #{$card-gutter});
        }
    }
}

#region-main.has-blocks {
    .dashboard-card-deck {
        @include media-breakpoint-up(lg) {
            .dashboard-card {
                flex-basis: calc(33.33% - #{$card-gutter});
            }
        }
        @include media-breakpoint-up(xl) {
            .dashboard-card {
                flex-basis: calc(25% - #{$card-gutter});
            }
        }
    }
}

body.drawer-open-left #region-main.has-blocks {
    .dashboard-card-deck {
        @include media-breakpoint-up(lg) {
            .dashboard-card {
                flex-basis: calc(33.33% - #{$card-gutter});
            }
        }
        @media (min-width: 1400px) {
            .dashboard-card {
                flex-basis: calc(25% - #{$card-gutter});
            }
        }
    }
}

@media (min-width: 1200px) {
    #block-region-side-pre {
        .dashboard-card-deck {
            margin: 0;
            .dashboard-card {
                flex-basis: 100% !important;
                margin-left: 0;
                margin-right: 0;
            }
        }
    }
}

// Show expand collapse with font-awesome.
.block_settings .block_tree [aria-expanded="true"],
.block_settings .block_tree [aria-expanded="true"].emptybranch,
.block_settings .block_tree [aria-expanded="false"],
.block_navigation .block_tree [aria-expanded="true"],
.block_navigation .block_tree [aria-expanded="true"].emptybranch,
.block_navigation .block_tree [aria-expanded="false"] {
    background-image: none;
}
.block_settings .block_tree [aria-expanded="true"]:before,
.block_navigation .block_tree [aria-expanded="true"]:before {
    content: $fa-var-angle-down;
    margin-right: 0;
    font-size: 16px;
    @extend .fa;
    width: 16px;
}

.block_settings .block_tree [aria-expanded="false"]:before,
.block_navigation .block_tree [aria-expanded="false"]:before {
    content: $fa-var-angle-right;
    font-size: 16px;
    margin-right: 0;
    @extend .fa;
    width: 16px;
}
.dir-rtl {
    .block_settings .block_tree [aria-expanded="false"]:before,
    .block_navigation .block_tree [aria-expanded="false"]:before {
        content: $fa-var-angle-left;
    }
}

.block_navigation .block_tree p.hasicon,
.block_settings .block_tree p.hasicon {
    text-indent: -3px;

    .icon {
        margin-right: 2px;
    }
}