Merge branch 'MDL-63725_master' of git://github.com/markn86/moodle
[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             }
114         }
115     }
118 // Hide the block content when the block has been minimised.
119 .jsenabled .block.hidden .content {
120     display: none;
123 // Style the div used as a move target for non-drag+drop block moves.
124 .blockmovetarget {
125     border-width: 2px;
126     border-style: dashed;
127     display: block;
128     height: 1em;
129     margin-bottom: 20px;
132 // Style the div that contains the cancel link for moving a block with JS disabled.
133 .blockannotation {
134     // Blocks have a bottom margin of 20px, to associate this link with the block being moved
135     // we move it up 10px, and then give it a bottom margin of 10px giving it a better visual association
136     position: relative;
137     top: -10px;
138     margin-bottom: 10px;
141 // Styles for the blog menu block.
142 .block_blog_menu #blogsearchquery {
143     max-width: 92%;
146 // Styles for the admin block.
147 .block_settings {
148     #adminsearchquery {
149         max-width: 92%;
150     }
153 // Styles for the search forums block.
154 .block_search_forums {
155     #searchform_search {
156         width: auto;
157         max-width: 92%;
158     }
161 // Styles for the Calendar Upcoming block.
162 .block_calendar_upcoming {
163     .content {
164         .date {
165             padding-left: 22px;
166         }
167         .footer {
168             margin-top: .5em;
169             padding-top: 10px;
170             padding-left: 0;
171         }
172     }
175 // Styles for the RSS client block.
176 .block_rss_client {
177     .content li {
178         margin-bottom: 10px;
179         padding: 5px;
180         border: 1px solid @tableBorder;
181         .border-radius(@baseBorderRadius);
182         .link {
183             font-weight: inherit;
184         }
185     }
186     .list li:first-child {
187         border-top-width: 1px; // undo the style provided by the block's styles.css
188     }
191 // Styles for the news items block.
192 .block_news_items .content {
193     .newlink {
194         padding-bottom: 10px;
195     }
196     ul li {
197         border-top: 1px rgba(0, 0, 0, 0.05) solid;
198         padding: 2px;
199         display: table;
200         width: 100%;
201         .info {
202             display: table-header-group;
203         }
204         .date {
205             font-size: @fontSizeSmall;
206             display: inline;
207         }
208         .name {
209             font-size: @fontSizeSmall;
210             padding-left: 1ex;
211             display: inline;
212         }
213     }
214     .footer {
215         padding-top: 10px;
216         padding-left: 0;
217     }
220 // Overide for login block.
221 .block_login {
222     input#login_username,
223     input#login_password {
224         width: 95%;
225     }
226     .content {
227         margin-left: auto;
228         margin-right: auto;
229         max-width: 280px;
230     }
231     input[type="submit"] {
232         margin: 10px 0;
233     }
236 // Styles for the special "Add block" block shown while editing.
237 .block_adminblock {
238     .content {
239         display: block;
240         margin: 0 10px;
241         padding: 3px 5px;
242         width: auto;
243     }
244     .singleselect {
245         display: block;
246         select.singleselect {
247             display: block;
248             width: 100%;
249         }
250     }
253 @chart-size: 70px;
254 @doughnut-border-size: 15px;
255 @doughnut-dasharray: 173;
256 @doughnut-empty-colour: @grayLighter;
257 @doughnut-fill-colour: @orange;
259 .generate-percents(@i: 1) when (@i =< 100) {
260     &.percent-@{i} {
261         stroke-dashoffset: @doughnut-dasharray - (@i / 100 * @doughnut-dasharray);
262     }
264     .generate-percents((@i + 1));
267 .progress-chart-container {
268     height: @chart-size;
269     width: @chart-size;
271     .progress-doughnut {
272         position: relative;
273         height: @chart-size;
274         width: @chart-size;
275         background-clip: padding-box;
276         border: @doughnut-border-size solid @doughnut-empty-colour;
277         border-radius: 50%;
278         box-sizing: border-box;
280         .progress-text {
281             position: absolute;
282             top: 50%;
283             /*rtl:ignore*/
284             left: 50%;
285             transform: translate(-50%, -50%);
286             color: @doughnut-empty-colour;
288             &.has-percent {
289                 color: @doughnut-fill-colour;
290             }
291         }
293         .progress-indicator {
294             position: absolute;
295             top: (@doughnut-border-size * -1);
296             left: (@doughnut-border-size * -1);
297             height: @chart-size;
298             width: @chart-size;
300             svg {
301                 position: relative;
302                 height: 100%;
303                 width: 100%;
305                 .circle {
306                     stroke-width: @doughnut-border-size;
307                     stroke: @doughnut-fill-colour;
308                     fill: none;
309                     stroke-dasharray: @doughnut-dasharray;
310                     stroke-dashoffset: @doughnut-dasharray;
311                     transform: rotate(-90deg);
312                     transform-origin: center center;
314                     .generate-percents();
315                 }
316             }
317         }
318     }
320     .no-progress {
321         height: @chart-size;
322         width: @chart-size;
323         background-color: @doughnut-empty-colour;
324         border-radius: 50%;
325         position: relative;
327         .icon,
328         .smallicon {
329             position: absolute;
330             top: 50%;
331             /*rtl:ignore*/
332             left: 50%;
333             margin: 0;
334             padding: 0;
335             transform: translate(-45%, -45%);
336             color: #fff;
337             height: (@chart-size / 2);
338             width: (@chart-size / 2);
339         }
340     }
343 .block_starredcourses,
344 .block_myoverview {
346     .empty-placeholder-image-lg {
347         height: 125px;
348     }
349     .course-info-container {
350         flex: 1 1 auto;
351         padding: 0.8rem;
352     }
353     .dashboard-card-footer {
354         padding: 0.8rem;
355         background-color: @wellBackground;
356         border-top: 1px solid darken(@wellBackground, 7%);
357         .border-bottom-radius(@baseBorderRadius);
358     }
359     .progress {
360         height: 0.5rem;
361         margin-bottom: 0;
362     }
363     .list-group {
364         margin: 0;
365     }
366     .course-listitem {
367         display: block;
368         padding: 0.75rem 1.25rem;
369         margin-bottom: 0.5rem;
370         background-color: @white;
371         border: 1px solid @tableBorder;
372         .border-radius(@baseBorderRadius);
373     }
374     .course-summaryitem {
375         padding: 0.5rem;
376         background-color: @white;
377         border: 1px solid @tableBorder;
378         .border-radius(@baseBorderRadius);
379     }
380     .summary img {
381         max-width: 100%;
382     }
384     @media (max-width: 576px) {
385         .summaryimage {
386             max-height: 7rem;
387         }
388     }
391 .block_starredcourses {
392     .dashboard-card-deck {
393         flex-flow: nowrap;
394         overflow-y: scroll;
395     }
398 .dashboard-card-deck {
399     box-sizing: border-box;
400     *,
401     *::before,
402     *::after {
403         box-sizing: border-box;
404     }
405     display: flex;
406     flex-flow: row wrap;
407     margin-right: -.25rem;
408     margin-left: -.25rem;
410     .dashboard-card {
411         .border-radius(@baseBorderRadius);
412         margin-bottom: 0.5rem;
413         flex-grow: 0;
414         flex-shrink: 0;
415         min-width: 0;
416         flex-basis: 100%;
417     }
418     @media (min-width: 576px) {
419         .dashboard-card {
420             display: flex;
421             flex-direction: column;
422             margin-right: 0.25rem;
423             margin-left: 0.25rem;
424             flex-basis: ~"calc(50% - 0.6rem)";
425         }
426     }
428     @media (min-width: 1200px) {
429         .dashboard-card {
430             flex-basis: ~"calc(33.333% - 0.5rem)";
431         }
432     }
435 @media (min-width: 768px) {
436     #block-region-side-post .dashboard-card-deck {
437         margin: 0;
438         .dashboard-card {
439             flex-basis: 100%;
440             margin-left: 0;
441             margin-right: 0;
442         }
443     }
446 .dashboard-card-img {
447     height: 7rem;
448     background-position: center;
449     background-size: cover;
450     .border-top-radius(@baseBorderRadius);
453 .summaryimage {
454     height: 7rem;
455     background-position: center;
456     background-size: cover;
459 .position-absolute {
460     position: absolute;