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