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
221body.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
246body.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}