MDL-67470 theme_boost: settings_menu_proxy correct background
[moodle.git] / theme / boost / scss / moodle / blocks.scss
1 .blockmovetarget .accesshide {
2     position: relative;
3     left: initial;
4 }
6 .block:target {
7     padding-top: 0 !important; /* stylelint-disable declaration-no-important */
8     margin-top: 0 !important;
9 }
11 .block_search_forums .searchform {
12     /* Override plugin's default. */
13     text-align: left;
14 }
16 .block.block_navigation .block_tree ul,
17 .block_settings .block_tree ul {
18     margin-left: 0;
19 }
21 .block .block-controls {
22     .dropdown-toggle {
23         /* So that the caret takes the colour of the icon. */
24         color: $body-color;
25     }
26 }
28 $blocks-column-width: 360px !default;
30 [data-region="blocks-column"] {
31     width: $blocks-column-width;
32     float: right;
33 }
35 $blocks-plus-gutter: $blocks-column-width + ( $grid-gutter-width / 2 );
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 }
49 .region_main_settings_menu_proxy {
50     width: 4rem;
51     height: 2rem;
52     background-color: $body-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 }
59 // Required for IE11 to prevent blocks being pushed under the content.
60 #region-main-settings-menu.has-blocks,
61 #region-main.has-blocks {
62     display: inline-block;
63     width: calc(100% - #{$blocks-plus-gutter});
64     @include media-breakpoint-down(lg) {
65         width: 100%;
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;
69     }
70 }
72 .header-action {
73     #region-main-settings-menu {
74         position: unset;
75         float: none;
76         width: auto;
78         & > div {
79             position: unset;
80             right: auto;
81             margin: 0;
82         }
83     }
84 }
86 [data-region="blocks-column"] {
87     @include media-breakpoint-down(lg) {
88         width: 100%;
89     }
90 }
92 $card-gutter : $card-deck-margin * 2;
94 .block .empty-placeholder-image-lg {
95     height: 5rem;
96 }
98 .block .block-cards {
99     .course-info-container {
100         padding: 0.8rem;
101     }
102     .progress {
103         height: 0.5rem;
104     }
105     .course-summaryitem {
106         border: $border-width solid $border-color;
107         background-color: $body-bg;
108     }
109     .icon {
110         margin-right: 0;
111     }
112     .card .coursemenubtn {
113         margin-top: -0.5rem;
114     }
115     a.coursename,
116     span.categoryname,
117     .btn-link {
118         color: inherit;
119     }
120     .multiline {
121         white-space: normal;
122     }
123     .btn.btn-link.btn-icon {
124         height: 36px;
125         width: 36px;
126         padding: 0;
127         border-radius: 50%;
129         @include hover-focus {
130             background-color: $gray-200;
131         }
132     }
135 .dashboard-card-deck.one-row {
136     flex-flow: nowrap;
137     overflow-x: scroll;
140 .summaryimage {
141     height: 5rem;
142     width: 5rem;
143     background-position: center;
144     background-size: cover;
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         }
162     }
164     &.fixed-width-cards {
165         .dashboard-card {
166             width: 300px;
167         }
168     }
171 .dashboard-card-deck:not(.fixed-width-cards) {
172     @media (min-width: 576px) {
173         .dashboard-card {
174             width: calc(50% - #{$card-gutter});
175         }
176     }
177     @media (min-width: 840px) {
178         .dashboard-card {
179             width: calc(33.33% - #{$card-gutter});
180         }
181     }
182     @media (min-width: 1100px) {
183         .dashboard-card {
184             width: calc(25% - #{$card-gutter});
185         }
186     }
187     @media (min-width: 1360px) {
188         .dashboard-card {
189             width: calc(20% - #{$card-gutter});
190         }
191     }
194 #region-main.has-blocks {
195     .dashboard-card-deck:not(.fixed-width-cards) {
196         @media (min-width: 1200px) {
197             .dashboard-card {
198                 width: calc(33.33% - #{$card-gutter});
199             }
200         }
201         @media (min-width: 1470px) {
202             .dashboard-card {
203                 width: calc(25% - #{$card-gutter});
204             }
205         }
206     }
209 body.drawer-open-left {
210     .dashboard-card-deck:not(.fixed-width-cards) {
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) {
222             .dashboard-card {
223                 width: calc(33.33% - #{$card-gutter});
224             }
225         }
226         @media (min-width: 1381px) {
227             .dashboard-card {
228                 width: calc(25% - #{$card-gutter});
229             }
230         }
231     }
234 body.drawer-open-left #region-main.has-blocks {
235     .dashboard-card-deck:not(.fixed-width-cards) {
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     }
254 @media (min-width: 1200px) {
255     #block-region-side-pre {
256         .dashboard-card-deck:not(.fixed-width-cards) {
257             margin-left: 0;
258             margin-right: 0;
259             .dashboard-card {
260                 width: calc(100% - #{$card-gutter}) !important;
261             }
262         }
263     }
266 .block_recentlyaccessedcourses {
267     .paging-bar-container {
268         margin-top: -2.4rem;
269         justify-content: flex-end;
270     }
272     @include media-breakpoint-down(xs) {
273         .paging-bar-container {
274             margin-top: 0;
275         }
276     }
279 #block-region-side-pre {
280     .block_recentlyaccessedcourses {
281         .paging-bar-container {
282             margin-top: 0;
283         }
284     }
287 .block_recentlyaccesseditems {
288     img.icon {
289         height: auto;
290         width: auto;
291         margin-right: 6px;
292     }
295 .block_myoverview {
296     .content {
297         min-height: 19.35rem;
298     }
299     .paged-content-page-container {
300         min-height: 13rem;
301     }
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;
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;
317     @include fa-icon();
318     font-size: 16px;
319     width: 16px;
322 .block_settings .block_tree [aria-expanded="false"]:before,
323 .block_navigation .block_tree [aria-expanded="false"]:before {
324     content: $fa-var-angle-right;
325     margin-right: 0;
326     @include fa-icon();
327     font-size: 16px;
328     width: 16px;
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     }
337 .block_navigation .block_tree p.hasicon,
338 .block_settings .block_tree p.hasicon {
339     text-indent: -3px;
341     .icon {
342         margin-right: 2px;
343     }
346 .block.invisibleblock .card-title {
347     color: $text-muted;