235b190842d0eda30ca2f103f669223e6b2d8f33
[moodle.git] / theme / boost / scss / moodle / blocks.scss
1 .blockmovetarget .accesshide {
2     position: relative;
3     left: initial;
4 }
6 .block:target {
7     padding-top: 0 !important; /* stylelint-disable declaration-no-important */
8     margin-top: 0 !important;
9 }
11 .block_search_forums .searchform {
12     /* Override plugin's default. */
13     text-align: left;
14 }
16 .block.block_navigation .block_tree ul,
17 .block_settings .block_tree ul {
18     margin-left: 0;
19 }
21 .block .block-controls {
22     .dropdown-toggle {
23         /* So that the caret takes the colour of the icon. */
24         color: $body-color;
25     }
26 }
28 $blocks-column-width: 360px !default;
30 [data-region="blocks-column"] {
31     width: $blocks-column-width;
32     float: right;
33 }
35 $blocks-plus-gutter: $blocks-column-width + ( $grid-gutter-width / 2 );
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     }
45     #region-main-settings-menu > div {
46         position: absolute;
47         right: 0;
48         z-index: 100;
49         margin: 1rem;
50     }
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 }
63 @include media-breakpoint-down(sm) {
64     #region-main-settings-menu .menubar {
65         justify-content: flex-end;
66     }
67 }
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 }
82 .header-action {
83     #region-main-settings-menu {
84         position: unset;
85         float: none;
86         width: auto;
88         & > div {
89             position: unset;
90             right: auto;
91             margin: 0;
92         }
93     }
94 }
96 [data-region="blocks-column"] {
97     @include media-breakpoint-down(lg) {
98         width: 100%;
99     }
102 $card-gutter : $card-deck-margin * 2;
104 .block .empty-placeholder-image-lg {
105     height: 5rem;
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%;
139         @include hover-focus {
140             background-color: $gray-200;
141         }
142     }
145 .dashboard-card-deck.one-row {
146     flex-flow: nowrap;
147     overflow-x: scroll;
150 .summaryimage {
151     height: 5rem;
152     width: 5rem;
153     background-position: center;
154     background-size: cover;
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     }
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     }
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     }
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     }
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     }
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     }
278 .block_recentlyaccessedcourses {
279     .paging-bar-container {
280         margin-top: -2.4rem;
281         justify-content: flex-end;
282     }
284     @include media-breakpoint-down(xs) {
285         .paging-bar-container {
286             margin-top: 0;
287         }
288     }
291 #block-region-side-pre {
292     .block_recentlyaccessedcourses {
293         .paging-bar-container {
294             margin-top: 0;
295         }
296     }
299 .block_recentlyaccesseditems {
300     img.icon {
301         height: 24px;
302         width: 24px;
303         margin-right: 6px;
304     }
307 .block_myoverview {
308     .content {
309         min-height: 19.35rem;
310     }
311     .paged-content-page-container {
312         min-height: 13rem;
313     }
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;
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;
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;
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     }
349 .block_navigation .block_tree p.hasicon,
350 .block_settings .block_tree p.hasicon {
351     text-indent: -3px;
353     .icon {
354         margin-right: 2px;
355     }
358 .block.invisibleblock .card-title {
359     color: $text-muted;
362 @include media-breakpoint-down(sm) {
363     .block.card {
364         border-left: 0;
365         border-right: 0;
366     }