MDL-64171 block_myoverview: change course summary view image size
[moodle.git] / theme / bootstrapbase / less / moodle / blocks.less
1 // General block styles.
2 .block {
3     .well;
4     padding: 8px 0;
6     .header {
7         h2 {
8             .nav-header;
9             font-size: 1.1em;
10             word-wrap: break-word;
11             margin: 0;
12         }
13         .block_action {
14             padding: 3px 15px;
15             float: right;
16             > * {
17                 margin-left: 3px;
18             }
19             .block-hider-show,
20             .block-hider-hide {
21                 cursor: pointer;
22             }
23             .block-hider-show {
24                 display: none;
25             }
26         }
27     }
28     .content {
29         padding: 4px 14px;
30         word-wrap: break-word;
32         h3 {
33             .nav-header;
34             font-size: 1.1em;
35         }
36         hr {
37             margin: 5px 0;
38         }
39         .userpicture {
40             width: 16px;
41             height: 16px;
42             margin-right: 6px;
43         }
44         .list {
45             li.listentry {
46                 clear: both;
47             }
48             .c0 {
49                 display: inline;
50             }
51             .c1 {
52                 margin-left: 5px;
53                 display: inline;
54             }
55         }
56         p {
57             &.hasicon {
58                 img {
59                     &.icon {
60                         padding-right: 0;
61                     }
62                 }
63             }
64         }
65     }
66     .footer {
67         margin-bottom: 4px;
68         display: block;
69         padding: 3px 5px;
70     }
71     &.beingmoved {
72         border-width: 2px;
73         border-style: dashed;
74     }
75     &.invisible {
76         .header h2 {
77             .opacity(50);
78         }
79     }
81     &.hidden .header .block_action {
82         .block-hider-hide {
83             display: none;
84         }
85         .block-hider-show {
86             display: inline;
87         }
88     }
89     &.list_block .unlist > li > .column {
90         display: inline-block;
91         .ie7-inline-block();
92     }
93 }
94 .editing {
95     .block {
96         .header {
97             .commands {
98                 clear: both;
99                 text-align: right;
100                 display: block;
101                 padding: 3px 15px;
103                 > a {
104                     margin: 0 3px;
105                 }
106                 .icon img {
107                     width: 12px;
108                     height: 12px;
109                 }
110                 img.actionmenu {
111                     width: auto;
112                 }
113                 .toggle-display[role="menuitem"] img.icon {
114                     width: 22px;
115                     vertical-align: middle;
116                 }
117             }
118         }
119     }
122 // Hide the block content when the block has been minimised.
123 .jsenabled .block.hidden .content {
124     display: none;
127 // Style the div used as a move target for non-drag+drop block moves.
128 .blockmovetarget {
129     border-width: 2px;
130     border-style: dashed;
131     display: block;
132     height: 1em;
133     margin-bottom: 20px;
136 // Style the div that contains the cancel link for moving a block with JS disabled.
137 .blockannotation {
138     // Blocks have a bottom margin of 20px, to associate this link with the block being moved
139     // we move it up 10px, and then give it a bottom margin of 10px giving it a better visual association
140     position: relative;
141     top: -10px;
142     margin-bottom: 10px;
145 // Styles for the blog menu block.
146 .block_blog_menu #blogsearchquery {
147     max-width: 92%;
150 // Styles for the admin block.
151 .block_settings {
152     #adminsearchquery {
153         max-width: 92%;
154     }
157 // Styles for the search forums block.
158 .block_search_forums {
159     #searchform_search {
160         width: auto;
161         max-width: 92%;
162     }
165 // Styles for the Calendar Upcoming block.
166 .block_calendar_upcoming {
167     .content {
168         .date {
169             padding-left: 22px;
170         }
171         .footer {
172             margin-top: .5em;
173             padding-top: 10px;
174             padding-left: 0;
175         }
176     }
179 // Styles for the RSS client block.
180 .block_rss_client {
181     .content li {
182         margin-bottom: 10px;
183         padding: 5px;
184         border: 1px solid @tableBorder;
185         .border-radius(@baseBorderRadius);
186         .link {
187             font-weight: inherit;
188         }
189     }
190     .list li:first-child {
191         border-top-width: 1px; // undo the style provided by the block's styles.css
192     }
195 // Styles for the news items block.
196 .block_news_items .content {
197     .newlink {
198         padding-bottom: 10px;
199     }
200     ul li {
201         border-top: 1px rgba(0, 0, 0, 0.05) solid;
202         padding: 2px;
203         display: table;
204         width: 100%;
205         .info {
206             display: table-header-group;
207         }
208         .date {
209             font-size: @fontSizeSmall;
210             display: inline;
211         }
212         .name {
213             font-size: @fontSizeSmall;
214             padding-left: 1ex;
215             display: inline;
216         }
217     }
218     .footer {
219         padding-top: 10px;
220         padding-left: 0;
221     }
224 // Overide for login block.
225 .block_login {
226     input#login_username,
227     input#login_password {
228         width: 95%;
229     }
230     .content {
231         margin-left: auto;
232         margin-right: auto;
233         max-width: 280px;
234     }
235     input[type="submit"] {
236         margin: 10px 0;
237     }
240 // Styles for the special "Add block" block shown while editing.
241 .block_adminblock {
242     .content {
243         display: block;
244         margin: 0 10px;
245         padding: 3px 5px;
246         width: auto;
247     }
248     .singleselect {
249         display: block;
250         select.singleselect {
251             display: block;
252             width: 100%;
253         }
254     }
257 .block .block-cards {
258     .empty-placeholder-image-lg {
259         height: 125px;
260     }
261     .course-info-container {
262         flex: 1 1 auto;
263         padding: 0.8rem;
264     }
265     .dashboard-card-footer {
266         padding: 0.8rem;
267         .border-bottom-radius(@baseBorderRadius);
268     }
269     .progress {
270         height: 0.5rem;
271         margin-bottom: 0;
272     }
273     .list-group {
274         margin: 0;
275     }
276     .course-listitem {
277         display: block;
278         padding: 0.75rem 1.25rem;
279         margin-bottom: 0.5rem;
280         background-color: @white;
281         border: 1px solid @tableBorder;
282         .border-radius(@baseBorderRadius);
283     }
284     .course-summaryitem {
285         padding: 0.5rem;
286         background-color: @white;
287         border: 1px solid @tableBorder;
288         .border-radius(@baseBorderRadius);
289     }
290     .multiline {
291         white-space: normal;
292     }
293     .summary img {
294         max-width: 100%;
295     }
296     img.icon {
297         padding: 0;
298     }
299     .card .coursemenubtn {
300         margin-top: -0.5rem;
301     }
302     a.coursename {
303         color: @textColor;
304     }
305     .h5 {
306         font-size: round(@baseFontSize * 1.15); // ~16px
307     }
310 .dashboard-card-deck.one-row {
311     flex-flow: nowrap;
312     overflow-x: scroll;
315 .block_recentlyaccesseditems {
316     img.icon {
317         height: auto;
318         width: auto;
319         margin-right: 6px;
320     }
321     .ml-1 {
322         margin-left: 10px;
323     }
324     h6 {
325         font-size: .9375rem;
326         margin-bottom: 0;
327     }
328     a,
329     a:hover {
330         text-decoration: none;
331         color: unset;
332     }
335 .block_myoverview {
336     .content {
337         min-height: 19.35rem;
338     }
339     .paged-content-page-container {
340         min-height: 13rem;
341     }
344 .dashboard-card-deck {
345     box-sizing: border-box;
346     *,
347     *::before,
348     *::after {
349         box-sizing: border-box;
350     }
351     display: flex;
352     flex-flow: row wrap;
353     margin-right: -.25rem;
354     margin-left: -.25rem;
356     .dashboard-card {
357         .border-radius(@baseBorderRadius);
358         margin-bottom: 0.5rem;
359         margin-right: 0.25rem;
360         margin-left: 0.25rem;
361         flex-grow: 0;
362         flex-shrink: 0;
363         min-width: 0;
364         width: ~"calc(100% - 0.5rem)";
365         flex-basis: auto;
366     }
367     @media (min-width: 647px) {
368         .dashboard-card {
369             display: flex;
370             flex-direction: column;
372             width: ~"calc(50% - 0.5rem)";
373         }
374     }
375     @media (min-width: 888px) {
376         .dashboard-card {
377             width: ~"calc(33.333% - 0.5rem)";
378         }
379     }
380     @media (min-width: 1147px) {
381         .dashboard-card {
382             width: ~"calc(25% - 0.5rem)";
383         }
384     }
385     @media (min-width: 1407px) {
386         .dashboard-card {
387             width: ~"calc(20% - 0.5rem)";
388         }
389     }
391 body.used-region-side-pre.empty-region-side-post,
392 body.used-region-side-post.empty-region-side-pre {
393     .dashboard-card-deck {
394         @media (min-width: 768px) {
395             .dashboard-card {
396                 width: ~"calc(100% - 0.5rem)";
397             }
398         }
399         @media (min-width: 815px) {
400             .dashboard-card {
401                 width: ~"calc(50% - 0.5rem)";
402             }
403         }
404         @media (min-width: 1163px) {
405             .dashboard-card {
406                 width: ~"calc(33.333% - 0.5rem)";
407             }
408         }
409         @media (min-width: 1514px) {
410             .dashboard-card {
411                 width: ~"calc(25% - 0.5rem)";
412             }
413         }
414     }
416 body.used-region-side-pre.used-region-side-post {
417     .dashboard-card-deck {
418         @media (min-width: 768px) {
419             .dashboard-card {
420                 width: ~"calc(100% - 0.5rem)";
421             }
422         }
423         @media (min-width: 1144px) {
424             .dashboard-card {
425                 width: ~"calc(50% - 0.5rem)";
426             }
427         }
428         @media (min-width: 1680px) {
429             .dashboard-card {
430                 width: ~"calc(33.333% - 0.5rem)";
431             }
432         }
433     }
436 /* stylelint-disable declaration-no-important */
437 @media (min-width: 768px) {
438     #block-region-side-post .dashboard-card-deck,
439     #block-region-side-pre .dashboard-card-deck {
440         .dashboard-card {
441             width: ~"calc(100% - 0.5rem)" !important;
442         }
443     }
445 .block_docked .dashboard-card {
446     width: ~"calc(100% - 0.5rem)" !important;
448 /* stylelint-enable */
450 .dashboard-card-img {
451     height: 7rem;
452     background-position: center;
453     background-size: cover;
454     .border-top-radius(@baseBorderRadius);
457 .summaryimage {
458     height: 5rem;
459     width: 5rem;
460     .border-radius(50%);
461     background-position: center;
462     background-size: cover;
465 .position-absolute {
466     position: absolute;