MDL-63855 core_my: no vertical scroll card blocks
[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 }
290 .summary img {
291 max-width: 100%;
82afbfab 292 }
78c06a66
BB
293 img.icon {
294 padding: 0;
295 }
1a972542
BB
296 .card .coursemenubtn {
297 margin-top: -0.5rem;
298 }
97593c37
BB
299 a.coursename {
300 color: @textColor;
24b423fd 301 }
4fd6b770 302}
24b423fd 303
44b54926
BB
304.dashboard-card-deck.one-row {
305 flex-flow: nowrap;
a6501e96 306 overflow-x: scroll;
0ec60261
BB
307}
308
78e07cbc 309.block_recentlyaccesseditems {
44b54926 310 img.icon {
78e07cbc
VDF
311 height: auto;
312 width: auto;
44b54926 313 margin-right: 6px;
78e07cbc
VDF
314 }
315 .ml-1 {
316 margin-left: 10px;
317 }
318 h6 {
319 font-size: .9375rem;
320 margin-bottom: 0;
321 }
322 a,
323 a:hover {
324 text-decoration: none;
325 color: unset;
326 }
327}
328
4fd6b770
BB
329.dashboard-card-deck {
330 box-sizing: border-box;
331 *,
332 *::before,
333 *::after {
334 box-sizing: border-box;
335 }
336 display: flex;
337 flex-flow: row wrap;
338 margin-right: -.25rem;
339 margin-left: -.25rem;
340
341 .dashboard-card {
342 .border-radius(@baseBorderRadius);
343 margin-bottom: 0.5rem;
344 flex-grow: 0;
345 flex-shrink: 0;
346 min-width: 0;
4f42ca11
BB
347 width: 100%;
348 flex-basis: auto;
4fd6b770 349 }
e4b4b9e7 350 @media (min-width: 576px) {
4fd6b770 351 .dashboard-card {
e4b4b9e7
BB
352 display: flex;
353 flex-direction: column;
354 margin-right: 0.25rem;
355 margin-left: 0.25rem;
4f42ca11 356 width: ~"calc(50% - 0.5rem)";
e4b4b9e7 357 }
c8cc25ca 358 }
e4b4b9e7
BB
359
360 @media (min-width: 1200px) {
4fd6b770 361 .dashboard-card {
4f42ca11 362 width: ~"calc(33.333% - 0.5rem)";
c8cc25ca 363 }
24b423fd 364 }
4fd6b770
BB
365}
366
367@media (min-width: 768px) {
78e07cbc
VDF
368 #block-region-side-post .dashboard-card-deck,
369 #block-region-side-pre .dashboard-card-deck {
4fd6b770 370 margin: 0;
78e07cbc 371 height: unset;
4fd6b770 372 .dashboard-card {
4f42ca11 373 width: 100%;
4fd6b770
BB
374 margin-left: 0;
375 margin-right: 0;
376 }
377 }
378}
379
380.dashboard-card-img {
381 height: 7rem;
382 background-position: center;
383 background-size: cover;
384 .border-top-radius(@baseBorderRadius);
9452bdde
LB
385}
386
387.summaryimage {
388 height: 7rem;
f1b1f380
BB
389 width: 7rem;
390 .border-radius(50%);
9452bdde
LB
391 background-position: center;
392 background-size: cover;
393}
394
395.position-absolute {
396 position: absolute;
bbbf9667 397}