Merge branch 'MDL-63102-master' of git://github.com/peterRd/moodle
authorEloy Lafuente (stronk7) <stronk7@moodle.org>
Mon, 15 Oct 2018 21:34:45 +0000 (23:34 +0200)
committerEloy Lafuente (stronk7) <stronk7@moodle.org>
Mon, 15 Oct 2018 21:34:45 +0000 (23:34 +0200)
1  2 
theme/boost/scss/moodle/blocks.scss
theme/boost/scss/moodle/core.scss
theme/boost/style/moodle.css

@@@ -63,6 -63,9 +63,9 @@@ $blocks-plus-gutter: $blocks-column-wid
      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;
      }
  }
  
      }
  }
  
 -$chart-size: 70px;
 -$doughnut-border-size: 15px;
 -$doughnut-dasharray: 173;
 -$doughnut-empty-colour: $gray-lighter;
 -$doughnut-fill-colour: $brand-warning;
 -
 -.progress-chart-container {
 -    height: $chart-size;
 -    width: $chart-size;
 -
 -    .progress-doughnut {
 -        position: relative;
 -        height: $chart-size;
 -        width: $chart-size;
 -        background-clip: padding-box;
 -        border: $doughnut-border-size solid $doughnut-empty-colour;
 -        border-radius: 50%;
 -        box-sizing: border-box;
 -
 -        .progress-text {
 -            position: absolute;
 -            top: 50%;
 -            /*rtl:ignore*/
 -            left: 50%;
 -            transform: translate(-50%, -50%);
 -            color: $doughnut-empty-colour;
 -
 -            &.has-percent {
 -                color: $doughnut-fill-colour;
 -            }
 -        }
 +$card-gutter : $card-deck-margin * 2;
  
 -        .progress-indicator {
 -            position: absolute;
 -            top: ($doughnut-border-size * -1);
 -            left: ($doughnut-border-size * -1);
 -            height: $chart-size;
 -            width: $chart-size;
 -
 -            svg {
 -                position: relative;
 -                height: 100%;
 -                width: 100%;
 -
 -                .circle {
 -                    stroke-width: $doughnut-border-size;
 -                    stroke: $doughnut-fill-colour;
 -                    fill: none;
 -                    stroke-dasharray: $doughnut-dasharray;
 -                    stroke-dashoffset: $doughnut-dasharray;
 -                    transform: rotate(-90deg);
 -                    transform-origin: center center;
 -
 -                    @for $i from 1 through 100 {
 -                        &.percent-#{$i} {
 -                            stroke-dashoffset: $doughnut-dasharray - ($i / 100 * $doughnut-dasharray);
 -                        }
 -                    }
 -                }
 -            }
 +.block_myoverview {
 +    .empty-placeholder-image-lg {
 +        height: 125px;
 +    }
 +    .course-card {
 +        margin-bottom: $card-gutter;
 +        flex-basis: 100%;
 +    }
 +    .course-info-container {
 +        padding: 0.8rem;
 +    }
 +    .course-card-footer {
 +        padding: 0.8rem;
 +    }
 +    .progress {
 +        height: 0.5rem;
 +    }
 +    .myoverviewimg {
 +        height: 7rem;
 +        background-position: center;
 +        background-size: cover;
 +    }
 +    .course-summaryitem {
 +        border: $border-width solid $border-color;
 +        background-color: $body-bg;
 +    }
 +    .summary img {
 +        max-width: 100%;
 +    }
 +    @include media-breakpoint-down(sm) {
 +        .summaryimage {
 +            max-height: 7rem;
          }
      }
 +}
  
 -    .no-progress {
 -        height: $chart-size;
 -        width: $chart-size;
 -        background-color: $doughnut-empty-colour;
 -        border-radius: 50%;
 -        position: relative;
 -
 -        .icon {
 -            position: absolute;
 -            top: 50%;
 -            /*rtl:ignore*/
 -            left: 50%;
 -            margin: 0;
 -            transform: translate(-63%, -50%);
 -            color: #fff;
 -            height: ($chart-size / 2) + 10px;
 -            width: ($chart-size / 2) + 10px;
 -            font-size: ($chart-size / 2) + 10px;
 +#region-main {
 +    .block_myoverview {
 +        .course-card {
 +            flex-grow: 0;
 +            flex-shrink: 0;
 +            flex-basis: calc(50% - #{$card-gutter});
 +        }
 +        @include media-breakpoint-up(sm) {
 +            .course-card {
 +                flex-basis: calc(50% - #{$card-gutter});
 +            }
 +        }
 +        @include media-breakpoint-up(md) {
 +            .course-card {
 +                flex-basis: calc(33.33% - #{$card-gutter});
 +            }
 +        }
 +        @include media-breakpoint-up(lg) {
 +            .course-card {
 +                flex-basis: calc(25% - #{$card-gutter});
 +            }
 +        }
 +        @include media-breakpoint-up(xl) {
 +            .course-card {
 +                flex-basis: calc(20% - #{$card-gutter});
 +            }
          }
      }
  }
  
 -.block_myoverview {
 -    .empty-placeholder-image-sm {
 -        height: 50px;
 +#region-main.has-blocks .block_myoverview {
 +    @include media-breakpoint-up(lg) {
 +        .course-card {
 +            flex-basis: calc(33.33% - #{$card-gutter});
 +        }
      }
 -
 -    .empty-placeholder-image-lg {
 -        height: 125px;
 +    @include media-breakpoint-up(xl) {
 +        .course-card {
 +            flex-basis: calc(25% - #{$card-gutter});
 +        }
      }
  }
  
 -.card-deck {
 -    .card {
 -        $card-gutter : $card-deck-margin * 2;
 -        flex-grow: 0;
 -        flex-shrink: 0;
 +body.drawer-open-left #region-main.has-blocks .block_myoverview {
 +    .course-card {
          flex-basis: calc(50% - #{$card-gutter});
      }
 -    .myoverviewimg {
 -        height: 150px;
 -        &.courseimage {
 -            background-position: center;
 -            background-size: cover;
 +    @include media-breakpoint-up(lg) {
 +        .course-card {
 +            flex-basis: calc(33.33% - #{$card-gutter});
          }
      }
  }
@@@ -148,13 -148,6 +148,13 @@@ a.autolink.glossary:hover 
      cursor: pointer;
  }
  
 +.pagelayout-mydashboard #region-main {
 +    border: 0;
 +    padding: 0;
 +    background-color: transparent;
 +    margin-top: -1px;
 +}
 +
  .collapsibleregioncaption img {
      vertical-align: middle;
  }
@@@ -2077,7 -2070,6 +2077,7 @@@ $footer-link-color: $bg-inverse-link-co
  
  [data-drag-type="move"] {
      cursor: move;
 +    touch-action: none;
  }
  
  .clickable {
@@@ -2148,4 -2140,4 +2148,4 @@@ div.editor_atto_toolbar button .icon 
      .dir-ltr-hide {
          display: none;
      }
- }
+ }
@@@ -5576,25 -5576,25 +5576,25 @@@ tbody.collapse.show 
    display: flex;
    flex-direction: column; }
    .card-deck .card, .card-deck #page-enrol-users #filterform, #page-enrol-users .card-deck #filterform, .card-deck .que .history, .que .card-deck .history, .card-deck .userprofile .profile_tree section, .userprofile .profile_tree .card-deck section, .card-deck .groupinfobox, .card-deck .well {
 -    margin-bottom: 15px; }
 +    margin-bottom: 0.25rem; }
    @media (min-width: 576px) {
      .card-deck {
        flex-flow: row wrap;
 -      margin-right: -15px;
 -      margin-left: -15px; }
 +      margin-right: -0.25rem;
 +      margin-left: -0.25rem; }
        .card-deck .card, .card-deck #page-enrol-users #filterform, #page-enrol-users .card-deck #filterform, .card-deck .que .history, .que .card-deck .history, .card-deck .userprofile .profile_tree section, .userprofile .profile_tree .card-deck section, .card-deck .groupinfobox, .card-deck .well {
          display: flex;
          flex: 1 0 0%;
          flex-direction: column;
 -        margin-right: 15px;
 +        margin-right: 0.25rem;
          margin-bottom: 0;
 -        margin-left: 15px; } }
 +        margin-left: 0.25rem; } }
  
  .card-group {
    display: flex;
    flex-direction: column; }
    .card-group > .card, #page-enrol-users .card-group > #filterform, .que .card-group > .history, .userprofile .profile_tree .card-group > section, .card-group > .groupinfobox, .card-group > .well {
 -    margin-bottom: 15px; }
 +    margin-bottom: 0.25rem; }
    @media (min-width: 576px) {
      .card-group {
        flex-flow: row wrap; }
@@@ -8882,12 -8882,6 +8882,12 @@@ a.autolink.glossary:hover 
  .pagelayout-mydashboard.jsenabled .collapsibleregioncaption {
    cursor: pointer; }
  
 +.pagelayout-mydashboard #region-main {
 +  border: 0;
 +  padding: 0;
 +  background-color: transparent;
 +  margin-top: -1px; }
 +
  .collapsibleregioncaption img {
    vertical-align: middle; }
  
@@@ -10392,8 -10386,7 +10392,8 @@@ ul 
    top: 0; }
  
  [data-drag-type="move"] {
 -  cursor: move; }
 +  cursor: move;
 +  touch-action: none; }
  
  .clickable {
    cursor: pointer; }
@@@ -11125,79 -11118,287 +11125,82 @@@ div.editor_atto_toolbar button .icon 
    @media (max-width: 1199.98px) {
      #region-main-settings-menu.has-blocks,
      #region-main.has-blocks {
-       width: 100%; } }
+       width: 100%;
+       /* MDL-63102 - Remove extra space at bottom.
+         If modifying make sure block-region is horizontally stacked when in full screen */
+       display: block; } }
  
  @media (max-width: 1199.98px) {
    [data-region="blocks-column"] {
      width: 100%; } }
  
 -.progress-chart-container {
 -  height: 70px;
 -  width: 70px; }
 -  .progress-chart-container .progress-doughnut {
 -    position: relative;
 -    height: 70px;
 -    width: 70px;
 -    background-clip: padding-box;
 -    border: 15px solid #dee2e6;
 -    border-radius: 50%;
 -    box-sizing: border-box; }
 -    .progress-chart-container .progress-doughnut .progress-text {
 -      position: absolute;
 -      top: 50%;
 -      /*rtl:ignore*/
 -      left: 50%;
 -      transform: translate(-50%, -50%);
 -      color: #dee2e6; }
 -      .progress-chart-container .progress-doughnut .progress-text.has-percent {
 -        color: #ff7518; }
 -    .progress-chart-container .progress-doughnut .progress-indicator {
 -      position: absolute;
 -      top: -15px;
 -      left: -15px;
 -      height: 70px;
 -      width: 70px; }
 -      .progress-chart-container .progress-doughnut .progress-indicator svg {
 -        position: relative;
 -        height: 100%;
 -        width: 100%; }
 -        .progress-chart-container .progress-doughnut .progress-indicator svg .circle {
 -          stroke-width: 15px;
 -          stroke: #ff7518;
 -          fill: none;
 -          stroke-dasharray: 173;
 -          stroke-dashoffset: 173;
 -          transform: rotate(-90deg);
 -          transform-origin: center center; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-1 {
 -            stroke-dashoffset: 171.27; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-2 {
 -            stroke-dashoffset: 169.54; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-3 {
 -            stroke-dashoffset: 167.81; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-4 {
 -            stroke-dashoffset: 166.08; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-5 {
 -            stroke-dashoffset: 164.35; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-6 {
 -            stroke-dashoffset: 162.62; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-7 {
 -            stroke-dashoffset: 160.89; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-8 {
 -            stroke-dashoffset: 159.16; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-9 {
 -            stroke-dashoffset: 157.43; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-10 {
 -            stroke-dashoffset: 155.7; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-11 {
 -            stroke-dashoffset: 153.97; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-12 {
 -            stroke-dashoffset: 152.24; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-13 {
 -            stroke-dashoffset: 150.51; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-14 {
 -            stroke-dashoffset: 148.78; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-15 {
 -            stroke-dashoffset: 147.05; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-16 {
 -            stroke-dashoffset: 145.32; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-17 {
 -            stroke-dashoffset: 143.59; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-18 {
 -            stroke-dashoffset: 141.86; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-19 {
 -            stroke-dashoffset: 140.13; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-20 {
 -            stroke-dashoffset: 138.4; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-21 {
 -            stroke-dashoffset: 136.67; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-22 {
 -            stroke-dashoffset: 134.94; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-23 {
 -            stroke-dashoffset: 133.21; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-24 {
 -            stroke-dashoffset: 131.48; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-25 {
 -            stroke-dashoffset: 129.75; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-26 {
 -            stroke-dashoffset: 128.02; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-27 {
 -            stroke-dashoffset: 126.29; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-28 {
 -            stroke-dashoffset: 124.56; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-29 {
 -            stroke-dashoffset: 122.83; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-30 {
 -            stroke-dashoffset: 121.1; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-31 {
 -            stroke-dashoffset: 119.37; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-32 {
 -            stroke-dashoffset: 117.64; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-33 {
 -            stroke-dashoffset: 115.91; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-34 {
 -            stroke-dashoffset: 114.18; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-35 {
 -            stroke-dashoffset: 112.45; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-36 {
 -            stroke-dashoffset: 110.72; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-37 {
 -            stroke-dashoffset: 108.99; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-38 {
 -            stroke-dashoffset: 107.26; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-39 {
 -            stroke-dashoffset: 105.53; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-40 {
 -            stroke-dashoffset: 103.8; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-41 {
 -            stroke-dashoffset: 102.07; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-42 {
 -            stroke-dashoffset: 100.34; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-43 {
 -            stroke-dashoffset: 98.61; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-44 {
 -            stroke-dashoffset: 96.88; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-45 {
 -            stroke-dashoffset: 95.15; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-46 {
 -            stroke-dashoffset: 93.42; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-47 {
 -            stroke-dashoffset: 91.69; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-48 {
 -            stroke-dashoffset: 89.96; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-49 {
 -            stroke-dashoffset: 88.23; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-50 {
 -            stroke-dashoffset: 86.5; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-51 {
 -            stroke-dashoffset: 84.77; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-52 {
 -            stroke-dashoffset: 83.04; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-53 {
 -            stroke-dashoffset: 81.31; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-54 {
 -            stroke-dashoffset: 79.58; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-55 {
 -            stroke-dashoffset: 77.85; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-56 {
 -            stroke-dashoffset: 76.12; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-57 {
 -            stroke-dashoffset: 74.39; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-58 {
 -            stroke-dashoffset: 72.66; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-59 {
 -            stroke-dashoffset: 70.93; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-60 {
 -            stroke-dashoffset: 69.2; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-61 {
 -            stroke-dashoffset: 67.47; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-62 {
 -            stroke-dashoffset: 65.74; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-63 {
 -            stroke-dashoffset: 64.01; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-64 {
 -            stroke-dashoffset: 62.28; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-65 {
 -            stroke-dashoffset: 60.55; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-66 {
 -            stroke-dashoffset: 58.82; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-67 {
 -            stroke-dashoffset: 57.09; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-68 {
 -            stroke-dashoffset: 55.36; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-69 {
 -            stroke-dashoffset: 53.63; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-70 {
 -            stroke-dashoffset: 51.9; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-71 {
 -            stroke-dashoffset: 50.17; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-72 {
 -            stroke-dashoffset: 48.44; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-73 {
 -            stroke-dashoffset: 46.71; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-74 {
 -            stroke-dashoffset: 44.98; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-75 {
 -            stroke-dashoffset: 43.25; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-76 {
 -            stroke-dashoffset: 41.52; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-77 {
 -            stroke-dashoffset: 39.79; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-78 {
 -            stroke-dashoffset: 38.06; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-79 {
 -            stroke-dashoffset: 36.33; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-80 {
 -            stroke-dashoffset: 34.6; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-81 {
 -            stroke-dashoffset: 32.87; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-82 {
 -            stroke-dashoffset: 31.14; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-83 {
 -            stroke-dashoffset: 29.41; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-84 {
 -            stroke-dashoffset: 27.68; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-85 {
 -            stroke-dashoffset: 25.95; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-86 {
 -            stroke-dashoffset: 24.22; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-87 {
 -            stroke-dashoffset: 22.49; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-88 {
 -            stroke-dashoffset: 20.76; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-89 {
 -            stroke-dashoffset: 19.03; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-90 {
 -            stroke-dashoffset: 17.3; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-91 {
 -            stroke-dashoffset: 15.57; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-92 {
 -            stroke-dashoffset: 13.84; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-93 {
 -            stroke-dashoffset: 12.11; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-94 {
 -            stroke-dashoffset: 10.38; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-95 {
 -            stroke-dashoffset: 8.65; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-96 {
 -            stroke-dashoffset: 6.92; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-97 {
 -            stroke-dashoffset: 5.19; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-98 {
 -            stroke-dashoffset: 3.46; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-99 {
 -            stroke-dashoffset: 1.73; }
 -          .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-100 {
 -            stroke-dashoffset: 0; }
 -  .progress-chart-container .no-progress {
 -    height: 70px;
 -    width: 70px;
 -    background-color: #dee2e6;
 -    border-radius: 50%;
 -    position: relative; }
 -    .progress-chart-container .no-progress .icon {
 -      position: absolute;
 -      top: 50%;
 -      /*rtl:ignore*/
 -      left: 50%;
 -      margin: 0;
 -      transform: translate(-63%, -50%);
 -      color: #fff;
 -      height: 45px;
 -      width: 45px;
 -      font-size: 45px; }
 -
 -.block_myoverview .empty-placeholder-image-sm {
 -  height: 50px; }
 -
  .block_myoverview .empty-placeholder-image-lg {
    height: 125px; }
  
 -.card-deck .card, .card-deck #page-enrol-users #filterform, #page-enrol-users .card-deck #filterform, .card-deck .que .history, .que .card-deck .history, .card-deck .userprofile .profile_tree section, .userprofile .profile_tree .card-deck section, .card-deck .groupinfobox, .card-deck .well {
 +.block_myoverview .course-card {
 +  margin-bottom: 0.5rem;
 +  flex-basis: 100%; }
 +
 +.block_myoverview .course-info-container {
 +  padding: 0.8rem; }
 +
 +.block_myoverview .course-card-footer {
 +  padding: 0.8rem; }
 +
 +.block_myoverview .progress {
 +  height: 0.5rem; }
 +
 +.block_myoverview .myoverviewimg {
 +  height: 7rem;
 +  background-position: center;
 +  background-size: cover; }
 +
 +.block_myoverview .course-summaryitem {
 +  border: 1px solid #dee2e6;
 +  background-color: #fff; }
 +
 +.block_myoverview .summary img {
 +  max-width: 100%; }
 +
 +@media (max-width: 767.98px) {
 +  .block_myoverview .summaryimage {
 +    max-height: 7rem; } }
 +
 +#region-main .block_myoverview .course-card {
    flex-grow: 0;
    flex-shrink: 0;
 -  flex-basis: calc(50% - 30px); }
 +  flex-basis: calc(50% - 0.5rem); }
  
 -.card-deck .myoverviewimg {
 -  height: 150px; }
 -  .card-deck .myoverviewimg.courseimage {
 -    background-position: center;
 -    background-size: cover; }
 +@media (min-width: 576px) {
 +  #region-main .block_myoverview .course-card {
 +    flex-basis: calc(50% - 0.5rem); } }
 +
 +@media (min-width: 768px) {
 +  #region-main .block_myoverview .course-card {
 +    flex-basis: calc(33.33% - 0.5rem); } }
 +
 +@media (min-width: 992px) {
 +  #region-main .block_myoverview .course-card {
 +    flex-basis: calc(25% - 0.5rem); } }
 +
 +@media (min-width: 1200px) {
 +  #region-main .block_myoverview .course-card {
 +    flex-basis: calc(20% - 0.5rem); } }
 +
 +@media (min-width: 992px) {
 +  #region-main.has-blocks .block_myoverview .course-card {
 +    flex-basis: calc(33.33% - 0.5rem); } }
 +
 +@media (min-width: 1200px) {
 +  #region-main.has-blocks .block_myoverview .course-card {
 +    flex-basis: calc(25% - 0.5rem); } }
 +
 +body.drawer-open-left #region-main.has-blocks .block_myoverview .course-card {
 +  flex-basis: calc(50% - 0.5rem); }
 +
 +@media (min-width: 992px) {
 +  body.drawer-open-left #region-main.has-blocks .block_myoverview .course-card {
 +    flex-basis: calc(33.33% - 0.5rem); } }
  
  .block_settings .block_tree [aria-expanded="true"],
  .block_settings .block_tree [aria-expanded="true"].emptybranch,