on-demand release 3.9dev+
[moodle.git] / theme / boost / scss / moodle / blocks.scss
CommitLineData
d7fbf722 1.blockmovetarget .accesshide {
536f0460 2 position: relative;
d7fbf722 3 left: initial;
536f0460 4}
270dd871 5
54ff9a4b
SL
6.block:target {
7 padding-top: 0 !important; /* stylelint-disable declaration-no-important */
8 margin-top: 0 !important;
9}
10
270dd871
FM
11.block_search_forums .searchform {
12 /* Override plugin's default. */
13 text-align: left;
14}
400274bc
DW
15
16.block.block_navigation .block_tree ul,
17.block_settings .block_tree ul {
18 margin-left: 0;
19}
1149c235
FM
20
21.block .block-controls {
22 .dropdown-toggle {
23 /* So that the caret takes the colour of the icon. */
9d67a408 24 color: $body-color;
1149c235
FM
25 }
26}
99061152 27
63d0d9b4 28$blocks-column-width: 360px !default;
99061152 29
0a58ec24
DW
30[data-region="blocks-column"] {
31 width: $blocks-column-width;
32 float: right;
99061152
DW
33}
34
3ec69c2e 35$blocks-plus-gutter: $blocks-column-width + ( $grid-gutter-width / 2 );
0a58ec24 36
11774d90
DW
37/* We put an absolutely positioned div in a relatively positioned div so it takes up no space */
38#region-main-settings-menu {
39 position: relative;
40 float: left;
41 width: 100%;
42}
43#region-main-settings-menu > div {
44 position: absolute;
45 right: 0;
46 z-index: 100;
47 margin: 1rem;
48}
d8cfd611
DW
49.region_main_settings_menu_proxy {
50 width: 4rem;
51 height: 2rem;
6dadb71b 52 background-color: $body-bg;
d8cfd611
DW
53 margin-left: $card-spacer-x / 2;
54 margin-bottom: $card-spacer-x / 2;
55 border-bottom-left-radius: 0.5rem;
56 float: right;
57}
4682f17c
DW
58
59// Required for IE11 to prevent blocks being pushed under the content.
11774d90 60#region-main-settings-menu.has-blocks,
0a58ec24
DW
61#region-main.has-blocks {
62 display: inline-block;
63 width: calc(100% - #{$blocks-plus-gutter});
42654589 64 @include media-breakpoint-down(lg) {
0a58ec24 65 width: 100%;
970bb713
P
66 /* MDL-63102 - Remove extra space at bottom.
67 If modifying make sure block-region is horizontally stacked when in full screen */
68 display: block;
99061152
DW
69 }
70}
a0bdffbd 71
c77d1ae4
RW
72.header-action {
73 #region-main-settings-menu {
74 position: unset;
75 float: none;
76 width: auto;
77
78 & > div {
79 position: unset;
80 right: auto;
81 margin: 0;
82 }
83 }
84}
85
a0bdffbd 86[data-region="blocks-column"] {
42654589 87 @include media-breakpoint-down(lg) {
a0bdffbd
DW
88 width: 100%;
89 }
90}
cab053f7 91
e4b4b9e7 92$card-gutter : $card-deck-margin * 2;
cab053f7 93
0ec60261 94.block .empty-placeholder-image-lg {
356bfb69 95 height: 5rem;
0ec60261
BB
96}
97
44b54926 98.block .block-cards {
e4b4b9e7
BB
99 .course-info-container {
100 padding: 0.8rem;
101 }
e4b4b9e7
BB
102 .progress {
103 height: 0.5rem;
104 }
e4b4b9e7
BB
105 .course-summaryitem {
106 border: $border-width solid $border-color;
107 background-color: $body-bg;
108 }
3cfff885
BB
109 .icon {
110 margin-right: 0;
111 }
1a972542
BB
112 .card .coursemenubtn {
113 margin-top: -0.5rem;
3cfff885 114 }
97593c37 115 a.coursename,
72bb9784 116 span.categoryname,
3cfff885
BB
117 .btn-link {
118 color: inherit;
119 }
f87181fd
BB
120 .multiline {
121 white-space: normal;
122 }
3cfff885 123 .btn.btn-link.btn-icon {
4fd6b770
BB
124 height: 36px;
125 width: 36px;
3cfff885
BB
126 padding: 0;
127 border-radius: 50%;
3cfff885
BB
128
129 @include hover-focus {
130 background-color: $gray-200;
131 }
3cfff885 132 }
fe149a99
LB
133}
134
44b54926
BB
135.dashboard-card-deck.one-row {
136 flex-flow: nowrap;
a6501e96 137 overflow-x: scroll;
0ec60261
BB
138}
139
fe149a99 140.summaryimage {
eecff277
BB
141 height: 5rem;
142 width: 5rem;
fe149a99
LB
143 background-position: center;
144 background-size: cover;
e4b4b9e7 145}
cab053f7 146
8c890dd5
RW
147.dashboard-card-deck {
148 .dashboard-card {
149 margin-bottom: $card-gutter;
150 flex-basis: auto;
151 width: 100%;
152 flex-grow: 0;
153 flex-shrink: 0;
154 .dashboard-card-img {
155 height: 7rem;
156 background-position: center;
157 background-size: cover;
158 }
159 .dashboard-card-footer {
160 padding: 0.8rem;
161 }
4fd6b770 162 }
8c890dd5
RW
163
164 &.fixed-width-cards {
165 .dashboard-card {
166 width: 300px;
167 }
4fd6b770
BB
168 }
169}
170
8c890dd5 171.dashboard-card-deck:not(.fixed-width-cards) {
c412ddc8 172 @media (min-width: 576px) {
4fd6b770 173 .dashboard-card {
4f42ca11 174 width: calc(50% - #{$card-gutter});
e4b4b9e7 175 }
4fd6b770 176 }
c412ddc8 177 @media (min-width: 840px) {
4fd6b770 178 .dashboard-card {
4f42ca11 179 width: calc(33.33% - #{$card-gutter});
e4b4b9e7 180 }
4fd6b770 181 }
c412ddc8 182 @media (min-width: 1100px) {
4fd6b770 183 .dashboard-card {
4f42ca11 184 width: calc(25% - #{$card-gutter});
e4b4b9e7 185 }
4fd6b770 186 }
c412ddc8 187 @media (min-width: 1360px) {
4fd6b770 188 .dashboard-card {
4f42ca11 189 width: calc(20% - #{$card-gutter});
4fd6b770
BB
190 }
191 }
192}
193
194#region-main.has-blocks {
8c890dd5 195 .dashboard-card-deck:not(.fixed-width-cards) {
c412ddc8 196 @media (min-width: 1200px) {
4fd6b770 197 .dashboard-card {
4f42ca11 198 width: calc(33.33% - #{$card-gutter});
e4b4b9e7
BB
199 }
200 }
c412ddc8 201 @media (min-width: 1470px) {
4fd6b770 202 .dashboard-card {
4f42ca11 203 width: calc(25% - #{$card-gutter});
e4b4b9e7 204 }
cab053f7
RW
205 }
206 }
207}
0eb85562 208
c412ddc8 209body.drawer-open-left {
8c890dd5 210 .dashboard-card-deck:not(.fixed-width-cards) {
c412ddc8
BB
211 @media (min-width: 768px) {
212 .dashboard-card {
213 width: calc(100% - #{$card-gutter});
214 }
215 }
216 @media (min-width: 861px) {
217 .dashboard-card {
218 width: calc(50% - #{$card-gutter});
219 }
220 }
221 @media (min-width: 1122px) {
4fd6b770 222 .dashboard-card {
4f42ca11 223 width: calc(33.33% - #{$card-gutter});
4fd6b770 224 }
e4b4b9e7 225 }
c412ddc8 226 @media (min-width: 1381px) {
4fd6b770 227 .dashboard-card {
4f42ca11 228 width: calc(25% - #{$card-gutter});
4fd6b770 229 }
e4b4b9e7 230 }
cbd3c4fe 231 }
7243eef9 232}
57ea73d0 233
c412ddc8 234body.drawer-open-left #region-main.has-blocks {
8c890dd5 235 .dashboard-card-deck:not(.fixed-width-cards) {
c412ddc8
BB
236 @media (min-width: 1200px) {
237 .dashboard-card {
238 width: calc(100% - #{$card-gutter});
239 }
240 }
241 @media (min-width: 1236px) {
242 .dashboard-card {
243 width: calc(50% - #{$card-gutter});
244 }
245 }
246 @media (min-width: 1497px) {
247 .dashboard-card {
248 width: calc(33.33% - #{$card-gutter});
249 }
250 }
251 }
252}
253
4fd6b770
BB
254@media (min-width: 1200px) {
255 #block-region-side-pre {
8c890dd5 256 .dashboard-card-deck:not(.fixed-width-cards) {
c412ddc8
BB
257 margin-left: 0;
258 margin-right: 0;
4fd6b770 259 .dashboard-card {
c412ddc8 260 width: calc(100% - #{$card-gutter}) !important;
4fd6b770 261 }
3cfff885
BB
262 }
263 }
c8cc25ca
BB
264}
265
3edde4fb
RW
266.block_recentlyaccessedcourses {
267 .paging-bar-container {
268 margin-top: -2.4rem;
269 justify-content: flex-end;
270 }
271
272 @include media-breakpoint-down(xs) {
273 .paging-bar-container {
274 margin-top: 0;
275 }
276 }
277}
278
279#block-region-side-pre {
280 .block_recentlyaccessedcourses {
281 .paging-bar-container {
282 margin-top: 0;
283 }
284 }
285}
286
44b54926
BB
287.block_recentlyaccesseditems {
288 img.icon {
289 height: auto;
290 width: auto;
291 margin-right: 6px;
292 }
293}
294
356bfb69
BB
295.block_myoverview {
296 .content {
297 min-height: 19.35rem;
298 }
299 .paged-content-page-container {
300 min-height: 13rem;
301 }
302}
303
57ea73d0
DW
304// Show expand collapse with font-awesome.
305.block_settings .block_tree [aria-expanded="true"],
306.block_settings .block_tree [aria-expanded="true"].emptybranch,
307.block_settings .block_tree [aria-expanded="false"],
308.block_navigation .block_tree [aria-expanded="true"],
309.block_navigation .block_tree [aria-expanded="true"].emptybranch,
310.block_navigation .block_tree [aria-expanded="false"] {
311 background-image: none;
312}
313.block_settings .block_tree [aria-expanded="true"]:before,
314.block_navigation .block_tree [aria-expanded="true"]:before {
315 content: $fa-var-angle-down;
316 margin-right: 0;
da26d7b6 317 @include fa-icon();
57ea73d0 318 font-size: 16px;
57ea73d0
DW
319 width: 16px;
320}
321
322.block_settings .block_tree [aria-expanded="false"]:before,
323.block_navigation .block_tree [aria-expanded="false"]:before {
324 content: $fa-var-angle-right;
57ea73d0 325 margin-right: 0;
da26d7b6
BB
326 @include fa-icon();
327 font-size: 16px;
57ea73d0
DW
328 width: 16px;
329}
330.dir-rtl {
331 .block_settings .block_tree [aria-expanded="false"]:before,
332 .block_navigation .block_tree [aria-expanded="false"]:before {
333 content: $fa-var-angle-left;
334 }
335}
336
337.block_navigation .block_tree p.hasicon,
338.block_settings .block_tree p.hasicon {
339 text-indent: -3px;
340
341 .icon {
342 margin-right: 2px;
343 }
8c890dd5 344}
c906aed8
BB
345
346.block.invisibleblock .card-title {
347 color: $text-muted;
348}