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 #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 .empty-placeholder-image-lg {
  81     height: 125px;
  82 }
  83
  84 .block_myoverview,
  85 .block_starredcourses,
  86 .block_recentlyaccesseditems,
  87 .block_recentlyaccessedcourses {
  88     .course-info-container {
  89         padding: 0.8rem;
  90     }
  91     .progress {
  92         height: 0.5rem;
  93     }
  94     .course-summaryitem {
  95         border: $border-width solid $border-color;
  96         background-color: $body-bg;
  97     }
  98     .icon {
  99         margin-right: 0;
 100     }
 101     a,
 102     .btn-link {
 103         color: inherit;
 104     }
 105     .btn.btn-link.btn-icon {
 106         height: 36px;
 107         width: 36px;
 108         padding: 0;
 109         border-radius: 50%;
 110
 111         @include hover-focus {
 112             background-color: $gray-200;
 113         }
 114     }
 115 }
 116
 117 .block_starredcourses,
 118 .block_recentlyaccesseditems,
 119 .block_recentlyaccessedcourses {
 120     .dashboard-card-deck {
 121         flex-flow: nowrap;
 122         overflow-y: scroll;
 123     }
 124 }
 125
 126 .summaryimage {
 127     height: 7rem;
 128     background-position: center;
 129     background-size: cover;
 130 }
 131
 132 .dashboard-card-deck .dashboard-card {
 133     margin-bottom: $card-gutter;
 134     flex-basis: auto;
 135     width: 100%;
 136     flex-grow: 0;
 137     flex-shrink: 0;
 138     .dashboard-card-img {
 139         height: 7rem;
 140         background-position: center;
 141         background-size: cover;
 142     }
 143     .dashboard-card-footer {
 144         padding: 0.8rem;
 145     }
 146 }
 147
 148 .dashboard-card-deck {
 149     @include media-breakpoint-up(sm) {
 150         .dashboard-card {
 151             width: calc(50% - #{$card-gutter});
 152         }
 153     }
 154     @include media-breakpoint-up(md) {
 155         .dashboard-card {
 156             width: calc(33.33% - #{$card-gutter});
 157         }
 158     }
 159     @include media-breakpoint-up(lg) {
 160         .dashboard-card {
 161             width: calc(25% - #{$card-gutter});
 162         }
 163     }
 164     @include media-breakpoint-up(xl) {
 165         .dashboard-card {
 166             width: calc(20% - #{$card-gutter});
 167         }
 168     }
 169 }
 170
 171 #region-main.has-blocks {
 172     .dashboard-card-deck {
 173         @include media-breakpoint-up(lg) {
 174             .dashboard-card {
 175                 width: calc(33.33% - #{$card-gutter});
 176             }
 177         }
 178         @include media-breakpoint-up(xl) {
 179             .dashboard-card {
 180                 width: calc(25% - #{$card-gutter});
 181             }
 182         }
 183     }
 184 }
 185
 186 body.drawer-open-left #region-main.has-blocks {
 187     .dashboard-card-deck {
 188         @include media-breakpoint-up(lg) {
 189             .dashboard-card {
 190                 width: calc(33.33% - #{$card-gutter});
 191             }
 192         }
 193         @media (min-width: 1400px) {
 194             .dashboard-card {
 195                 width: calc(25% - #{$card-gutter});
 196             }
 197         }
 198     }
 199 }
 200
 201 @media (min-width: 1200px) {
 202     #block-region-side-pre {
 203         .dashboard-card-deck {
 204             margin: 0;
 205             .dashboard-card {
 206                 width: 100% !important;
 207                 margin-left: 0;
 208                 margin-right: 0;
 209             }
 210         }
 211     }
 212 }
 213
 214 // Show expand collapse with font-awesome.
 215 .block_settings .block_tree [aria-expanded="true"],
 216 .block_settings .block_tree [aria-expanded="true"].emptybranch,
 217 .block_settings .block_tree [aria-expanded="false"],
 218 .block_navigation .block_tree [aria-expanded="true"],
 219 .block_navigation .block_tree [aria-expanded="true"].emptybranch,
 220 .block_navigation .block_tree [aria-expanded="false"] {
 221     background-image: none;
 222 }
 223 .block_settings .block_tree [aria-expanded="true"]:before,
 224 .block_navigation .block_tree [aria-expanded="true"]:before {
 225     content: $fa-var-angle-down;
 226     margin-right: 0;
 227     font-size: 16px;
 228     @extend .fa;
 229     width: 16px;
 230 }
 231
 232 .block_settings .block_tree [aria-expanded="false"]:before,
 233 .block_navigation .block_tree [aria-expanded="false"]:before {
 234     content: $fa-var-angle-right;
 235     font-size: 16px;
 236     margin-right: 0;
 237     @extend .fa;
 238     width: 16px;
 239 }
 240 .dir-rtl {
 241     .block_settings .block_tree [aria-expanded="false"]:before,
 242     .block_navigation .block_tree [aria-expanded="false"]:before {
 243         content: $fa-var-angle-left;
 244     }
 245 }
 246
 247 .block_navigation .block_tree p.hasicon,
 248 .block_settings .block_tree p.hasicon {
 249     text-indent: -3px;
 250
 251     .icon {
 252         margin-right: 2px;
 253     }
 254 }