Moodle release 3.7beta
[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;
52 background-color: $card-bg;
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
DW
71
72[data-region="blocks-column"] {
42654589 73 @include media-breakpoint-down(lg) {
a0bdffbd
DW
74 width: 100%;
75 }
76}
cab053f7 77
e4b4b9e7 78$card-gutter : $card-deck-margin * 2;
cab053f7 79
0ec60261 80.block .empty-placeholder-image-lg {
356bfb69 81 height: 5rem;
0ec60261
BB
82}
83
44b54926 84.block .block-cards {
e4b4b9e7
BB
85 .course-info-container {
86 padding: 0.8rem;
87 }
e4b4b9e7
BB
88 .progress {
89 height: 0.5rem;
90 }
e4b4b9e7
BB
91 .course-summaryitem {
92 border: $border-width solid $border-color;
93 background-color: $body-bg;
94 }
3cfff885
BB
95 .icon {
96 margin-right: 0;
97 }
1a972542
BB
98 .card .coursemenubtn {
99 margin-top: -0.5rem;
3cfff885 100 }
97593c37 101 a.coursename,
72bb9784 102 span.categoryname,
3cfff885
BB
103 .btn-link {
104 color: inherit;
105 }
f87181fd
BB
106 .multiline {
107 white-space: normal;
108 }
3cfff885 109 .btn.btn-link.btn-icon {
4fd6b770
BB
110 height: 36px;
111 width: 36px;
3cfff885
BB
112 padding: 0;
113 border-radius: 50%;
3cfff885
BB
114
115 @include hover-focus {
116 background-color: $gray-200;
117 }
3cfff885 118 }
fe149a99
LB
119}
120
44b54926
BB
121.dashboard-card-deck.one-row {
122 flex-flow: nowrap;
a6501e96 123 overflow-x: scroll;
0ec60261
BB
124}
125
fe149a99 126.summaryimage {
eecff277
BB
127 height: 5rem;
128 width: 5rem;
fe149a99
LB
129 background-position: center;
130 background-size: cover;
e4b4b9e7 131}
cab053f7 132
8c890dd5
RW
133.dashboard-card-deck {
134 .dashboard-card {
135 margin-bottom: $card-gutter;
136 flex-basis: auto;
137 width: 100%;
138 flex-grow: 0;
139 flex-shrink: 0;
140 .dashboard-card-img {
141 height: 7rem;
142 background-position: center;
143 background-size: cover;
144 }
145 .dashboard-card-footer {
146 padding: 0.8rem;
147 }
4fd6b770 148 }
8c890dd5
RW
149
150 &.fixed-width-cards {
151 .dashboard-card {
152 width: 300px;
153 }
4fd6b770
BB
154 }
155}
156
8c890dd5 157.dashboard-card-deck:not(.fixed-width-cards) {
c412ddc8 158 @media (min-width: 576px) {
4fd6b770 159 .dashboard-card {
4f42ca11 160 width: calc(50% - #{$card-gutter});
e4b4b9e7 161 }
4fd6b770 162 }
c412ddc8 163 @media (min-width: 840px) {
4fd6b770 164 .dashboard-card {
4f42ca11 165 width: calc(33.33% - #{$card-gutter});
e4b4b9e7 166 }
4fd6b770 167 }
c412ddc8 168 @media (min-width: 1100px) {
4fd6b770 169 .dashboard-card {
4f42ca11 170 width: calc(25% - #{$card-gutter});
e4b4b9e7 171 }
4fd6b770 172 }
c412ddc8 173 @media (min-width: 1360px) {
4fd6b770 174 .dashboard-card {
4f42ca11 175 width: calc(20% - #{$card-gutter});
4fd6b770
BB
176 }
177 }
178}
179
180#region-main.has-blocks {
8c890dd5 181 .dashboard-card-deck:not(.fixed-width-cards) {
c412ddc8 182 @media (min-width: 1200px) {
4fd6b770 183 .dashboard-card {
4f42ca11 184 width: calc(33.33% - #{$card-gutter});
e4b4b9e7
BB
185 }
186 }
c412ddc8 187 @media (min-width: 1470px) {
4fd6b770 188 .dashboard-card {
4f42ca11 189 width: calc(25% - #{$card-gutter});
e4b4b9e7 190 }
cab053f7
RW
191 }
192 }
193}
0eb85562 194
c412ddc8 195body.drawer-open-left {
8c890dd5 196 .dashboard-card-deck:not(.fixed-width-cards) {
c412ddc8
BB
197 @media (min-width: 768px) {
198 .dashboard-card {
199 width: calc(100% - #{$card-gutter});
200 }
201 }
202 @media (min-width: 861px) {
203 .dashboard-card {
204 width: calc(50% - #{$card-gutter});
205 }
206 }
207 @media (min-width: 1122px) {
4fd6b770 208 .dashboard-card {
4f42ca11 209 width: calc(33.33% - #{$card-gutter});
4fd6b770 210 }
e4b4b9e7 211 }
c412ddc8 212 @media (min-width: 1381px) {
4fd6b770 213 .dashboard-card {
4f42ca11 214 width: calc(25% - #{$card-gutter});
4fd6b770 215 }
e4b4b9e7 216 }
cbd3c4fe 217 }
7243eef9 218}
57ea73d0 219
c412ddc8 220body.drawer-open-left #region-main.has-blocks {
8c890dd5 221 .dashboard-card-deck:not(.fixed-width-cards) {
c412ddc8
BB
222 @media (min-width: 1200px) {
223 .dashboard-card {
224 width: calc(100% - #{$card-gutter});
225 }
226 }
227 @media (min-width: 1236px) {
228 .dashboard-card {
229 width: calc(50% - #{$card-gutter});
230 }
231 }
232 @media (min-width: 1497px) {
233 .dashboard-card {
234 width: calc(33.33% - #{$card-gutter});
235 }
236 }
237 }
238}
239
4fd6b770
BB
240@media (min-width: 1200px) {
241 #block-region-side-pre {
8c890dd5 242 .dashboard-card-deck:not(.fixed-width-cards) {
c412ddc8
BB
243 margin-left: 0;
244 margin-right: 0;
4fd6b770 245 .dashboard-card {
c412ddc8 246 width: calc(100% - #{$card-gutter}) !important;
4fd6b770 247 }
3cfff885
BB
248 }
249 }
c8cc25ca
BB
250}
251
3edde4fb
RW
252.block_recentlyaccessedcourses {
253 .paging-bar-container {
254 margin-top: -2.4rem;
255 justify-content: flex-end;
256 }
257
258 @include media-breakpoint-down(xs) {
259 .paging-bar-container {
260 margin-top: 0;
261 }
262 }
263}
264
265#block-region-side-pre {
266 .block_recentlyaccessedcourses {
267 .paging-bar-container {
268 margin-top: 0;
269 }
270 }
271}
272
44b54926
BB
273.block_recentlyaccesseditems {
274 img.icon {
275 height: auto;
276 width: auto;
277 margin-right: 6px;
278 }
279}
280
356bfb69
BB
281.block_myoverview {
282 .content {
283 min-height: 19.35rem;
284 }
285 .paged-content-page-container {
286 min-height: 13rem;
287 }
288}
289
57ea73d0
DW
290// Show expand collapse with font-awesome.
291.block_settings .block_tree [aria-expanded="true"],
292.block_settings .block_tree [aria-expanded="true"].emptybranch,
293.block_settings .block_tree [aria-expanded="false"],
294.block_navigation .block_tree [aria-expanded="true"],
295.block_navigation .block_tree [aria-expanded="true"].emptybranch,
296.block_navigation .block_tree [aria-expanded="false"] {
297 background-image: none;
298}
299.block_settings .block_tree [aria-expanded="true"]:before,
300.block_navigation .block_tree [aria-expanded="true"]:before {
301 content: $fa-var-angle-down;
302 margin-right: 0;
303 font-size: 16px;
304 @extend .fa;
305 width: 16px;
306}
307
308.block_settings .block_tree [aria-expanded="false"]:before,
309.block_navigation .block_tree [aria-expanded="false"]:before {
310 content: $fa-var-angle-right;
311 font-size: 16px;
312 margin-right: 0;
313 @extend .fa;
314 width: 16px;
315}
316.dir-rtl {
317 .block_settings .block_tree [aria-expanded="false"]:before,
318 .block_navigation .block_tree [aria-expanded="false"]:before {
319 content: $fa-var-angle-left;
320 }
321}
322
323.block_navigation .block_tree p.hasicon,
324.block_settings .block_tree p.hasicon {
325 text-indent: -3px;
326
327 .icon {
328 margin-right: 2px;
329 }
8c890dd5 330}