MDL-63855 core_my: no vertical scroll card blocks
[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     .summary img {
291         max-width: 100%;
292     }
293     img.icon {
294         padding: 0;
295     }
296     .card .coursemenubtn {
297         margin-top: -0.5rem;
298     }
299     a.coursename {
300         color: @textColor;
301     }
304 .dashboard-card-deck.one-row {
305     flex-flow: nowrap;
306     overflow-x: scroll;
309 .block_recentlyaccesseditems {
310     img.icon {
311         height: auto;
312         width: auto;
313         margin-right: 6px;
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     }
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;
341     .dashboard-card {
342         .border-radius(@baseBorderRadius);
343         margin-bottom: 0.5rem;
344         flex-grow: 0;
345         flex-shrink: 0;
346         min-width: 0;
347         width: 100%;
348         flex-basis: auto;
349     }
350     @media (min-width: 576px) {
351         .dashboard-card {
352             display: flex;
353             flex-direction: column;
354             margin-right: 0.25rem;
355             margin-left: 0.25rem;
356             width: ~"calc(50% - 0.5rem)";
357         }
358     }
360     @media (min-width: 1200px) {
361         .dashboard-card {
362             width: ~"calc(33.333% - 0.5rem)";
363         }
364     }
367 @media (min-width: 768px) {
368     #block-region-side-post .dashboard-card-deck,
369     #block-region-side-pre .dashboard-card-deck {
370         margin: 0;
371         height: unset;
372         .dashboard-card {
373             width: 100%;
374             margin-left: 0;
375             margin-right: 0;
376         }
377     }
380 .dashboard-card-img {
381     height: 7rem;
382     background-position: center;
383     background-size: cover;
384     .border-top-radius(@baseBorderRadius);
387 .summaryimage {
388     height: 7rem;
389     width: 7rem;
390     .border-radius(50%);
391     background-position: center;
392     background-size: cover;
395 .position-absolute {
396     position: absolute;