theme/boost/scss/moodle/blocks.scss

   1 .blockmovetarget .accesshide {
   2     position: relative;
   3     left: initial;
   4 }
   5
   6 .block:target {
   7     padding-top: 0 !important; /* stylelint-disable declaration-no-important */
   8     margin-top: 0 !important;
   9 }
  10
  11 .block_search_forums .searchform {
  12     /* Override plugin's default. */
  13     text-align: left;
  14 }
  15
  16 .block.block_navigation .block_tree ul,
  17 .block_settings .block_tree ul {
  18     margin-left: 0;
  19 }
  20
  21 .block .block-controls {
  22     .dropdown-toggle {
  23         /* So that the caret takes the colour of the icon. */
  24         color: $body-color;
  25     }
  26 }
  27
  28 $blocks-column-width: 360px !default;
  29
  30 [data-region="blocks-column"] {
  31     width: $blocks-column-width;
  32     float: right;
  33 }
  34
  35 $blocks-plus-gutter: $blocks-column-width + ( $grid-gutter-width / 2 );
  36
  37 /* We put an absolutely positioned div in a relatively positioned div so it takes up no space */
  38 @include media-breakpoint-up(sm) {
  39     #region-main-settings-menu {
  40         position: relative;
  41         float: left;
  42         width: 100%;
  43     }
  44
  45     #region-main-settings-menu > div {
  46         position: absolute;
  47         right: 0;
  48         z-index: 100;
  49         margin: 1rem;
  50     }
  51
  52     .region_main_settings_menu_proxy {
  53         width: 4rem;
  54         height: 2rem;
  55         background-color: $body-bg;
  56         margin-left: $card-spacer-x / 2;
  57         margin-bottom: $card-spacer-x / 2;
  58         border-bottom-left-radius: 0.5rem;
  59         float: right;
  60     }
  61 }
  62
  63 @include media-breakpoint-down(sm) {
  64     #region-main-settings-menu .menubar {
  65         justify-content: flex-end;
  66     }
  67 }
  68
  69 // Required for IE11 to prevent blocks being pushed under the content.
  70 #region-main-settings-menu.has-blocks,
  71 #region-main.has-blocks {
  72     display: inline-block;
  73     width: calc(100% - #{$blocks-plus-gutter});
  74     @include media-breakpoint-down(lg) {
  75         width: 100%;
  76         /* MDL-63102 - Remove extra space at bottom.
  77         If modifying make sure block-region is horizontally stacked when in full screen */
  78         display: block;
  79     }
  80 }
  81
  82 .header-action {
  83     #region-main-settings-menu {
  84         position: unset;
  85         float: none;
  86         width: auto;
  87
  88         & > div {
  89             position: unset;
  90             right: auto;
  91             margin: 0;
  92         }
  93     }
  94 }
  95
  96 [data-region="blocks-column"] {
  97     @include media-breakpoint-down(lg) {
  98         width: 100%;
  99     }
 100 }
 101
 102 $card-gutter : $card-deck-margin * 2;
 103
 104 .block .empty-placeholder-image-lg {
 105     height: 5rem;
 106 }
 107
 108 .block .block-cards {
 109     .course-info-container {
 110         padding: 0.8rem;
 111     }
 112     .progress {
 113         height: 0.5rem;
 114     }
 115     .course-summaryitem {
 116         border: $border-width solid $border-color;
 117         background-color: $body-bg;
 118     }
 119     .icon {
 120         margin-right: 0;
 121     }
 122     .card .coursemenubtn {
 123         margin-top: -0.5rem;
 124     }
 125     a.coursename,
 126     span.categoryname,
 127     .btn-link {
 128         color: inherit;
 129     }
 130     .multiline {
 131         white-space: normal;
 132     }
 133     .btn.btn-link.btn-icon {
 134         height: 36px;
 135         width: 36px;
 136         padding: 0;
 137         border-radius: 50%;
 138
 139         @include hover-focus {
 140             background-color: $gray-200;
 141         }
 142     }
 143 }
 144
 145 .dashboard-card-deck.one-row {
 146     flex-flow: nowrap;
 147     overflow-x: scroll;
 148 }
 149
 150 .summaryimage {
 151     height: 5rem;
 152     width: 5rem;
 153     background-position: center;
 154     background-size: cover;
 155 }
 156
 157 .dashboard-card-deck {
 158     .dashboard-card {
 159         margin-bottom: $card-gutter;
 160         flex-basis: auto;
 161         width: 100%;
 162         flex-grow: 0;
 163         flex-shrink: 0;
 164         .dashboard-card-img {
 165             height: 7rem;
 166             background-position: center;
 167             background-size: cover;
 168         }
 169         .dashboard-card-footer {
 170             padding: 0.8rem;
 171         }
 172     }
 173     @include media-breakpoint-up(sm) {
 174         &.fixed-width-cards {
 175             .dashboard-card {
 176                 width: 300px;
 177                 max-width: 100%;
 178             }
 179         }
 180     }
 181 }
 182
 183 .dashboard-card-deck:not(.fixed-width-cards) {
 184     @media (min-width: 576px) {
 185         .dashboard-card {
 186             width: calc(50% - #{$card-gutter});
 187         }
 188     }
 189     @media (min-width: 840px) {
 190         .dashboard-card {
 191             width: calc(33.33% - #{$card-gutter});
 192         }
 193     }
 194     @media (min-width: 1100px) {
 195         .dashboard-card {
 196             width: calc(25% - #{$card-gutter});
 197         }
 198     }
 199     @media (min-width: 1360px) {
 200         .dashboard-card {
 201             width: calc(20% - #{$card-gutter});
 202         }
 203     }
 204 }
 205
 206 #region-main.has-blocks {
 207     .dashboard-card-deck:not(.fixed-width-cards) {
 208         @media (min-width: 1200px) {
 209             .dashboard-card {
 210                 width: calc(33.33% - #{$card-gutter});
 211             }
 212         }
 213         @media (min-width: 1470px) {
 214             .dashboard-card {
 215                 width: calc(25% - #{$card-gutter});
 216             }
 217         }
 218     }
 219 }
 220
 221 body.drawer-open-left {
 222     .dashboard-card-deck:not(.fixed-width-cards) {
 223         @media (min-width: 768px) {
 224             .dashboard-card {
 225                 width: calc(100% - #{$card-gutter});
 226             }
 227         }
 228         @media (min-width: 861px) {
 229             .dashboard-card {
 230                 width: calc(50% - #{$card-gutter});
 231             }
 232         }
 233         @media (min-width: 1122px) {
 234             .dashboard-card {
 235                 width: calc(33.33% - #{$card-gutter});
 236             }
 237         }
 238         @media (min-width: 1381px) {
 239             .dashboard-card {
 240                 width: calc(25% - #{$card-gutter});
 241             }
 242         }
 243     }
 244 }
 245
 246 body.drawer-open-left #region-main.has-blocks {
 247     .dashboard-card-deck:not(.fixed-width-cards) {
 248         @media (min-width: 1200px) {
 249             .dashboard-card {
 250                 width: calc(100% - #{$card-gutter});
 251             }
 252         }
 253         @media (min-width: 1236px) {
 254             .dashboard-card {
 255                 width: calc(50% - #{$card-gutter});
 256             }
 257         }
 258         @media (min-width: 1497px) {
 259             .dashboard-card {
 260                 width: calc(33.33% - #{$card-gutter});
 261             }
 262         }
 263     }
 264 }
 265
 266 @media (min-width: 1200px) {
 267     #block-region-side-pre {
 268         .dashboard-card-deck:not(.fixed-width-cards) {
 269             margin-left: 0;
 270             margin-right: 0;
 271             .dashboard-card {
 272                 width: calc(100% - #{$card-gutter}) !important;
 273             }
 274         }
 275     }
 276 }
 277
 278 .block_recentlyaccessedcourses {
 279     .paging-bar-container {
 280         margin-top: -2.4rem;
 281         justify-content: flex-end;
 282     }
 283
 284     @include media-breakpoint-down(xs) {
 285         .paging-bar-container {
 286             margin-top: 0;
 287         }
 288     }
 289 }
 290
 291 #block-region-side-pre {
 292     .block_recentlyaccessedcourses {
 293         .paging-bar-container {
 294             margin-top: 0;
 295         }
 296     }
 297 }
 298
 299 .block_recentlyaccesseditems {
 300     img.icon {
 301         height: 24px;
 302         width: 24px;
 303         margin-right: 6px;
 304     }
 305 }
 306
 307 .block_myoverview {
 308     .content {
 309         min-height: 19.35rem;
 310     }
 311     .paged-content-page-container {
 312         min-height: 13rem;
 313     }
 314 }
 315
 316 // Show expand collapse with font-awesome.
 317 .block_settings .block_tree [aria-expanded="true"],
 318 .block_settings .block_tree [aria-expanded="true"].emptybranch,
 319 .block_settings .block_tree [aria-expanded="false"],
 320 .block_navigation .block_tree [aria-expanded="true"],
 321 .block_navigation .block_tree [aria-expanded="true"].emptybranch,
 322 .block_navigation .block_tree [aria-expanded="false"] {
 323     background-image: none;
 324 }
 325 .block_settings .block_tree [aria-expanded="true"]:before,
 326 .block_navigation .block_tree [aria-expanded="true"]:before {
 327     content: $fa-var-angle-down;
 328     margin-right: 0;
 329     @include fa-icon();
 330     font-size: 16px;
 331     width: 16px;
 332 }
 333
 334 .block_settings .block_tree [aria-expanded="false"]:before,
 335 .block_navigation .block_tree [aria-expanded="false"]:before {
 336     content: $fa-var-angle-right;
 337     margin-right: 0;
 338     @include fa-icon();
 339     font-size: 16px;
 340     width: 16px;
 341 }
 342 .dir-rtl {
 343     .block_settings .block_tree [aria-expanded="false"]:before,
 344     .block_navigation .block_tree [aria-expanded="false"]:before {
 345         content: $fa-var-angle-left;
 346     }
 347 }
 348
 349 .block_navigation .block_tree p.hasicon,
 350 .block_settings .block_tree p.hasicon {
 351     text-indent: -3px;
 352
 353     .icon {
 354         margin-right: 2px;
 355     }
 356 }
 357
 358 .block.invisibleblock .card-title {
 359     color: $text-muted;
 360 }
 361
 362 @include media-breakpoint-down(sm) {
 363     .block.card {
 364         border-left: 0;
 365         border-right: 0;
 366     }
 367 }
 368
 369 .block_social_activities li a.movehere,
 370 .block_site_main_menu li a.movehere {
 371     display: block;
 372     width: 100%;
 373     height: 2rem;
 374     border: 2px dashed $gray-800;
 375     margin: 4px 0;
 376 }
 377
 378 .pagelayout-embedded {
 379     .has-fake-blocks {
 380         padding: 1rem;
 381         display: flex;
 382     }
 383
 384     .has-fake-blocks .embedded-main {
 385         order: 0;
 386         width: calc(100% - #{$blocks-column-width});
 387         margin-right: 1rem;
 388     }
 389
 390     .embedded-blocks {
 391         order: 1;
 392         width: $blocks-column-width;
 393     }
 394
 395     @media (max-width: 767.98px) {
 396         .has-fake-blocks {
 397             display: block;
 398         }
 399         .has-fake-blocks .embedded-main {
 400             width: 100%;
 401         }
 402         .embedded-blocks {
 403             width: 100%;
 404         }
 405     }
 406 }