MDL-64171 block_myoverview: change course summary view image size
[moodle.git] / theme / bootstrapbase / less / moodle / blocks.less
CommitLineData
496e46b1 1// General block styles.
8903b17b
BB
2.block {
3 .well;
4 padding: 8px 0;
8903b17b 5
496e46b1
SH
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 > * {
418b9328 17 margin-left: 3px;
496e46b1
SH
18 }
19 .block-hider-show,
20 .block-hider-hide {
21 cursor: pointer;
22 }
23 .block-hider-show {
24 display: none;
25 }
26 }
ee749e50 27 }
f802fe7d
FM
28 .content {
29 padding: 4px 14px;
30 word-wrap: break-word;
496e46b1
SH
31
32 h3 {
33 .nav-header;
34 font-size: 1.1em;
35 }
f802fe7d
FM
36 hr {
37 margin: 5px 0;
38 }
496e46b1
SH
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 }
fc684bce
LB
56 p {
57 &.hasicon {
58 img {
59 &.icon {
60 padding-right: 0;
61 }
62 }
63 }
64 }
496e46b1
SH
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 {
c855ced7
FM
76 .header h2 {
77 .opacity(50);
78 }
496e46b1
SH
79 }
80
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();
f802fe7d 92 }
68ce3896 93}
b0b18f49 94.editing {
95 .block {
96 .header {
97 .commands {
98 clear: both;
99 text-align: right;
100 display: block;
101 padding: 3px 15px;
102
103 > a {
104 margin: 0 3px;
105 }
106 .icon img {
107 width: 12px;
108 height: 12px;
109 }
110 img.actionmenu {
111 width: auto;
112 }
181b12a6
LB
113 .toggle-display[role="menuitem"] img.icon {
114 width: 22px;
115 vertical-align: middle;
116 }
b0b18f49 117 }
118 }
119 }
120}
8903b17b 121
496e46b1 122// Hide the block content when the block has been minimised.
2fad76eb 123.jsenabled .block.hidden .content {
8903b17b
BB
124 display: none;
125}
126
496e46b1
SH
127// Style the div used as a move target for non-drag+drop block moves.
128.blockmovetarget {
8903b17b
BB
129 border-width: 2px;
130 border-style: dashed;
8903b17b
BB
131 display: block;
132 height: 1em;
496e46b1 133 margin-bottom: 20px;
8903b17b
BB
134}
135
496e46b1
SH
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;
8903b17b
BB
143}
144
496e46b1
SH
145// Styles for the blog menu block.
146.block_blog_menu #blogsearchquery {
147 max-width: 92%;
8903b17b 148}
496e46b1
SH
149
150// Styles for the admin block.
151.block_settings {
152 #adminsearchquery {
153 max-width: 92%;
154 }
8903b17b 155}
496e46b1
SH
156
157// Styles for the search forums block.
158.block_search_forums {
159 #searchform_search {
160 width: auto;
161 max-width: 92%;
162 }
8903b17b
BB
163}
164
496e46b1 165// Styles for the Calendar Upcoming block.
ef7810de 166.block_calendar_upcoming {
ef7810de
AB
167 .content {
168 .date {
169 padding-left: 22px;
170 }
171 .footer {
496e46b1 172 margin-top: .5em;
ef7810de 173 padding-top: 10px;
65f9a71f 174 padding-left: 0;
ef7810de
AB
175 }
176 }
8903b17b 177}
ef7810de 178
496e46b1 179// Styles for the RSS client block.
fa5a1365 180.block_rss_client {
24b65a44
DM
181 .content li {
182 margin-bottom: 10px;
183 padding: 5px;
e514c722 184 border: 1px solid @tableBorder;
24b65a44
DM
185 .border-radius(@baseBorderRadius);
186 .link {
187 font-weight: inherit;
188 }
fa5a1365 189 }
24b65a44
DM
190 .list li:first-child {
191 border-top-width: 1px; // undo the style provided by the block's styles.css
fa5a1365 192 }
33f9a601 193}
8903b17b 194
496e46b1 195// Styles for the news items block.
cd578aa0
AB
196.block_news_items .content {
197 .newlink {
198 padding-bottom: 10px;
199 }
200 ul li {
418b9328 201 border-top: 1px rgba(0, 0, 0, 0.05) solid;
cd578aa0
AB
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;
65f9a71f 220 padding-left: 0;
cd578aa0 221 }
33f9a601 222}
8903b17b 223
97080d53
ME
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 }
238}
239
496e46b1
SH
240// Styles for the special "Add block" block shown while editing.
241.block_adminblock {
242 .content {
243 display: block;
42bbb05f 244 margin: 0 10px;
496e46b1 245 padding: 3px 5px;
42bbb05f 246 width: auto;
8903b17b 247 }
42bbb05f 248 .singleselect {
249 display: block;
250 select.singleselect {
251 display: block;
252 width: 100%;
253 }
8903b17b 254 }
496e46b1 255}
cab053f7 256
44b54926 257.block .block-cards {
cbd3c4fe
RW
258 .empty-placeholder-image-lg {
259 height: 125px;
cbd3c4fe 260 }
e4b4b9e7
BB
261 .course-info-container {
262 flex: 1 1 auto;
263 padding: 0.8rem;
264 }
4fd6b770 265 .dashboard-card-footer {
e4b4b9e7 266 padding: 0.8rem;
e4b4b9e7
BB
267 .border-bottom-radius(@baseBorderRadius);
268 }
269 .progress {
270 height: 0.5rem;
271 margin-bottom: 0;
272 }
e4b4b9e7
BB
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 }
f87181fd
BB
290 .multiline {
291 white-space: normal;
292 }
e4b4b9e7
BB
293 .summary img {
294 max-width: 100%;
82afbfab 295 }
78c06a66
BB
296 img.icon {
297 padding: 0;
298 }
1a972542
BB
299 .card .coursemenubtn {
300 margin-top: -0.5rem;
301 }
97593c37
BB
302 a.coursename {
303 color: @textColor;
24b423fd 304 }
d996eb94
BB
305 .h5 {
306 font-size: round(@baseFontSize * 1.15); // ~16px
307 }
4fd6b770 308}
24b423fd 309
44b54926
BB
310.dashboard-card-deck.one-row {
311 flex-flow: nowrap;
a6501e96 312 overflow-x: scroll;
0ec60261
BB
313}
314
78e07cbc 315.block_recentlyaccesseditems {
44b54926 316 img.icon {
78e07cbc
VDF
317 height: auto;
318 width: auto;
44b54926 319 margin-right: 6px;
78e07cbc
VDF
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 }
333}
334
356bfb69
BB
335.block_myoverview {
336 .content {
337 min-height: 19.35rem;
338 }
339 .paged-content-page-container {
340 min-height: 13rem;
341 }
342}
343
4fd6b770
BB
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;
355
356 .dashboard-card {
357 .border-radius(@baseBorderRadius);
358 margin-bottom: 0.5rem;
c412ddc8
BB
359 margin-right: 0.25rem;
360 margin-left: 0.25rem;
4fd6b770
BB
361 flex-grow: 0;
362 flex-shrink: 0;
363 min-width: 0;
c412ddc8 364 width: ~"calc(100% - 0.5rem)";
4f42ca11 365 flex-basis: auto;
4fd6b770 366 }
c412ddc8 367 @media (min-width: 647px) {
4fd6b770 368 .dashboard-card {
e4b4b9e7
BB
369 display: flex;
370 flex-direction: column;
c412ddc8 371
4f42ca11 372 width: ~"calc(50% - 0.5rem)";
e4b4b9e7 373 }
c8cc25ca 374 }
c412ddc8 375 @media (min-width: 888px) {
4fd6b770 376 .dashboard-card {
4f42ca11 377 width: ~"calc(33.333% - 0.5rem)";
c8cc25ca 378 }
24b423fd 379 }
c412ddc8
BB
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 }
390}
391body.used-region-side-pre.empty-region-side-post,
392body.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 }
415}
416body.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 }
4fd6b770
BB
434}
435
c412ddc8 436/* stylelint-disable declaration-no-important */
4fd6b770 437@media (min-width: 768px) {
78e07cbc
VDF
438 #block-region-side-post .dashboard-card-deck,
439 #block-region-side-pre .dashboard-card-deck {
4fd6b770 440 .dashboard-card {
c412ddc8 441 width: ~"calc(100% - 0.5rem)" !important;
4fd6b770
BB
442 }
443 }
444}
c412ddc8
BB
445.block_docked .dashboard-card {
446 width: ~"calc(100% - 0.5rem)" !important;
447}
448/* stylelint-enable */
4fd6b770
BB
449
450.dashboard-card-img {
451 height: 7rem;
452 background-position: center;
453 background-size: cover;
454 .border-top-radius(@baseBorderRadius);
9452bdde
LB
455}
456
457.summaryimage {
eecff277
BB
458 height: 5rem;
459 width: 5rem;
f1b1f380 460 .border-radius(50%);
9452bdde
LB
461 background-position: center;
462 background-size: cover;
463}
464
465.position-absolute {
466 position: absolute;
bbbf9667 467}