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: 250px !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 #region-main-settings-menu {
  39     position: relative;
  40     float: left;
  41     width: 100%;
  42 }
  43 #region-main-settings-menu > div {
  44     position: absolute;
  45     right: 0;
  46     z-index: 100;
  47     margin: 1rem;
  48 }
  49 .region_main_settings_menu_proxy {
  50     width: 4rem;
  51     height: 2rem;
  52     background-color: $card-bg;
  53     margin-left: $card-spacer-x / 2;
  54     margin-bottom: $card-spacer-x / 2;
  55     border-bottom-left-radius: 0.5rem;
  56     float: right;
  57 }
  58
  59 // Required for IE11 to prevent blocks being pushed under the content.
  60 #region-main-settings-menu.has-blocks,
  61 #region-main.has-blocks {
  62     display: inline-block;
  63     width: calc(100% - #{$blocks-plus-gutter});
  64     @include media-breakpoint-down(lg) {
  65         width: 100%;
  66         /* MDL-63102 - Remove extra space at bottom.
  67         If modifying make sure block-region is horizontally stacked when in full screen */
  68         display: block;
  69     }
  70 }
  71
  72 [data-region="blocks-column"] {
  73     @include media-breakpoint-down(lg) {
  74         width: 100%;
  75     }
  76 }
  77
  78 $card-gutter : $card-deck-margin * 2;
  79
  80 .block_myoverview {
  81     .empty-placeholder-image-lg {
  82         height: 125px;
  83     }
  84     .course-info-container {
  85         padding: 0.8rem;
  86     }
  87     .progress {
  88         height: 0.5rem;
  89     }
  90     .course-summaryitem {
  91         border: $border-width solid $border-color;
  92         background-color: $body-bg;
  93     }
  94     .icon {
  95         margin-right: 0;
  96     }
  97     a,
  98     .btn-link {
  99         color: inherit;
 100     }
 101     .btn.btn-link.btn-icon {
 102         height: 36px;
 103         width: 36px;
 104         padding: 0;
 105         border-radius: 50%;
 106
 107         @include hover-focus {
 108             background-color: $gray-200;
 109         }
 110     }
 111 }
 112
 113 .summaryimage {
 114     height: 7rem;
 115     background-position: center;
 116     background-size: cover;
 117 }
 118
 119 .dashboard-card-deck .dashboard-card {
 120     margin-bottom: $card-gutter;
 121     flex-basis: 100%;
 122     flex-grow: 0;
 123     .dashboard-card-img {
 124         height: 7rem;
 125         background-position: center;
 126         background-size: cover;
 127     }
 128     .dashboard-card-footer {
 129         padding: 0.8rem;
 130     }
 131 }
 132
 133 .dashboard-card-deck {
 134     @include media-breakpoint-up(sm) {
 135         .dashboard-card {
 136             flex-basis: calc(50% - #{$card-gutter});
 137         }
 138     }
 139     @include media-breakpoint-up(md) {
 140         .dashboard-card {
 141             flex-basis: calc(33.33% - #{$card-gutter});
 142         }
 143     }
 144     @include media-breakpoint-up(lg) {
 145         .dashboard-card {
 146             flex-basis: calc(25% - #{$card-gutter});
 147         }
 148     }
 149     @include media-breakpoint-up(xl) {
 150         .dashboard-card {
 151             flex-basis: calc(20% - #{$card-gutter});
 152         }
 153     }
 154 }
 155
 156 #region-main.has-blocks {
 157     .dashboard-card-deck {
 158         @include media-breakpoint-up(lg) {
 159             .dashboard-card {
 160                 flex-basis: calc(33.33% - #{$card-gutter});
 161             }
 162         }
 163         @include media-breakpoint-up(xl) {
 164             .dashboard-card {
 165                 flex-basis: calc(25% - #{$card-gutter});
 166             }
 167         }
 168     }
 169 }
 170
 171 body.drawer-open-left #region-main.has-blocks {
 172     .dashboard-card-deck {
 173         @include media-breakpoint-up(lg) {
 174             .dashboard-card {
 175                 flex-basis: calc(33.33% - #{$card-gutter});
 176             }
 177         }
 178         @media (min-width: 1400px) {
 179             .dashboard-card {
 180                 flex-basis: calc(25% - #{$card-gutter});
 181             }
 182         }
 183     }
 184 }
 185
 186 @media (min-width: 1200px) {
 187     #block-region-side-pre {
 188         .dashboard-card-deck {
 189             margin: 0;
 190             .dashboard-card {
 191                 flex-basis: 100% !important;
 192                 margin-left: 0;
 193                 margin-right: 0;
 194             }
 195         }
 196     }
 197 }
 198
 199 // Show expand collapse with font-awesome.
 200 .block_settings .block_tree [aria-expanded="true"],
 201 .block_settings .block_tree [aria-expanded="true"].emptybranch,
 202 .block_settings .block_tree [aria-expanded="false"],
 203 .block_navigation .block_tree [aria-expanded="true"],
 204 .block_navigation .block_tree [aria-expanded="true"].emptybranch,
 205 .block_navigation .block_tree [aria-expanded="false"] {
 206     background-image: none;
 207 }
 208 .block_settings .block_tree [aria-expanded="true"]:before,
 209 .block_navigation .block_tree [aria-expanded="true"]:before {
 210     content: $fa-var-angle-down;
 211     margin-right: 0;
 212     font-size: 16px;
 213     @extend .fa;
 214     width: 16px;
 215 }
 216
 217 .block_settings .block_tree [aria-expanded="false"]:before,
 218 .block_navigation .block_tree [aria-expanded="false"]:before {
 219     content: $fa-var-angle-right;
 220     font-size: 16px;
 221     margin-right: 0;
 222     @extend .fa;
 223     width: 16px;
 224 }
 225 .dir-rtl {
 226     .block_settings .block_tree [aria-expanded="false"]:before,
 227     .block_navigation .block_tree [aria-expanded="false"]:before {
 228         content: $fa-var-angle-left;
 229     }
 230 }
 231
 232 .block_navigation .block_tree p.hasicon,
 233 .block_settings .block_tree p.hasicon {
 234     text-indent: -3px;
 235
 236     .icon {
 237         margin-right: 2px;
 238     }
 239 }