theme/boost/scss/moodle/blocks.scss

   1 .blockmovetarget .accesshide {
   2     position: relative;
   3     left: initial;
   4 }
   5
   6 .block_search_forums .searchform {
   7     /* Override plugin's default. */
   8     text-align: left;
   9 }
  10
  11 .block.block_navigation .block_tree ul,
  12 .block_settings .block_tree ul {
  13     margin-left: 0;
  14 }
  15
  16 .block .block-controls {
  17     .dropdown-toggle {
  18         /* So that the caret takes the colour of the icon. */
  19         color: $body-color;
  20     }
  21 }
  22
  23 $blocks-column-width: 250px !default;
  24
  25 [data-region="blocks-column"] {
  26     width: $blocks-column-width;
  27     float: right;
  28 }
  29
  30 $blocks-plus-gutter: $blocks-column-width + $grid-gutter-width;
  31
  32 /* We put an absolutely positioned div in a relatively positioned div so it takes up no space */
  33 #region-main-settings-menu {
  34     position: relative;
  35     float: left;
  36     width: 100%;
  37 }
  38 #region-main-settings-menu > div {
  39     position: absolute;
  40     right: 0;
  41     z-index: 100;
  42     margin: 1rem;
  43 }
  44 .region_main_settings_menu_proxy {
  45     width: 4rem;
  46     height: 2rem;
  47     background-color: $card-bg;
  48     margin-left: $card-spacer-x / 2;
  49     margin-bottom: $card-spacer-x / 2;
  50     border-bottom-left-radius: 0.5rem;
  51     float: right;
  52 }
  53
  54 // Required for IE11 to prevent blocks being pushed under the content.
  55 #region-main {
  56     float: left;
  57     width: 100%;
  58 }
  59 #region-main-settings-menu.has-blocks,
  60 #region-main.has-blocks {
  61     display: inline-block;
  62     width: calc(100% - #{$blocks-plus-gutter});
  63     @include media-breakpoint-down(lg) {
  64         width: 100%;
  65     }
  66 }
  67
  68 [data-region="blocks-column"] {
  69     @include media-breakpoint-down(lg) {
  70         width: 100%;
  71     }
  72 }
  73
  74 $chart-size: 70px;
  75 $doughnut-border-size: 15px;
  76 $doughnut-dasharray: 173;
  77 $doughnut-empty-colour: $gray-lighter;
  78 $doughnut-fill-colour: $brand-warning;
  79
  80 .progress-chart-container {
  81     height: $chart-size;
  82     width: $chart-size;
  83
  84     .progress-doughnut {
  85         position: relative;
  86         height: $chart-size;
  87         width: $chart-size;
  88         background-clip: padding-box;
  89         border: $doughnut-border-size solid $doughnut-empty-colour;
  90         border-radius: 50%;
  91         box-sizing: border-box;
  92
  93         .progress-text {
  94             position: absolute;
  95             top: 50%;
  96             /*rtl:ignore*/
  97             left: 50%;
  98             transform: translate(-50%, -50%);
  99             color: $doughnut-empty-colour;
 100
 101             &.has-percent {
 102                 color: $doughnut-fill-colour;
 103             }
 104         }
 105
 106         .progress-indicator {
 107             position: absolute;
 108             top: ($doughnut-border-size * -1);
 109             left: ($doughnut-border-size * -1);
 110             height: $chart-size;
 111             width: $chart-size;
 112
 113             svg {
 114                 position: relative;
 115                 height: 100%;
 116                 width: 100%;
 117
 118                 .circle {
 119                     stroke-width: $doughnut-border-size;
 120                     stroke: $doughnut-fill-colour;
 121                     fill: none;
 122                     stroke-dasharray: $doughnut-dasharray;
 123                     stroke-dashoffset: $doughnut-dasharray;
 124                     transform: rotate(-90deg);
 125                     transform-origin: center center;
 126
 127                     @for $i from 1 through 100 {
 128                         &.percent-#{$i} {
 129                             stroke-dashoffset: $doughnut-dasharray - ($i / 100 * $doughnut-dasharray);
 130                         }
 131                     }
 132                 }
 133             }
 134         }
 135     }
 136
 137     .no-progress {
 138         height: $chart-size;
 139         width: $chart-size;
 140         background-color: $doughnut-empty-colour;
 141         border-radius: 50%;
 142         position: relative;
 143
 144         .icon {
 145             position: absolute;
 146             top: 50%;
 147             /*rtl:ignore*/
 148             left: 50%;
 149             margin: 0;
 150             transform: translate(-45%, -45%);
 151             color: #fff;
 152             height: ($chart-size / 2) + 10px;
 153             width: ($chart-size / 2) + 10px;
 154             font-size: ($chart-size / 2) + 10px;
 155         }
 156     }
 157 }
 158
 159 .block_myoverview {
 160     .event-list-item {
 161         .event-icon {
 162             vertical-align: middle;
 163
 164             &::before {
 165                 content: '';
 166                 display: inline-block;
 167                 height: 100%;
 168                 vertical-align: middle;
 169             }
 170         }
 171
 172         .event-name-container {
 173             vertical-align: middle;
 174             max-width: calc(100% - 50px);
 175
 176             .event-name {
 177                 display: block;
 178             }
 179         }
 180     }
 181
 182     .empty-placeholder-image-sm {
 183         height: 70px;
 184         width: 85px;
 185     }
 186
 187     .empty-placeholder-image-lg {
 188         height: 125px;
 189         width: 145px;
 190     }
 191
 192     .courses-view-course-item {
 193         height: 220px;
 194         overflow-y: hidden;
 195     }
 196 }