3f7caf8edd978c8319c452ba2968e5f0d9fff3aa
[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: $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 }
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 [data-region="blocks-column"] {
73     @include media-breakpoint-down(lg) {
74         width: 100%;
75     }
76 }
78 $card-gutter : $card-deck-margin * 2;
80 .block .empty-placeholder-image-lg {
81     height: 125px;
82 }
84 .block .block-cards {
85     .course-info-container {
86         padding: 0.8rem;
87     }
88     .progress {
89         height: 0.5rem;
90     }
91     .course-summaryitem {
92         border: $border-width solid $border-color;
93         background-color: $body-bg;
94     }
95     .icon {
96         margin-right: 0;
97         &.fa-star {
98             color: $blue;
99         }
100     }
101     .card .coursemenubtn {
102         margin-top: -0.5rem;
103     }
104     a.coursename,
105     .btn-link {
106         color: inherit;
107     }
108     .btn.btn-link.btn-icon {
109         height: 36px;
110         width: 36px;
111         padding: 0;
112         border-radius: 50%;
114         @include hover-focus {
115             background-color: $gray-200;
116         }
117     }
120 .dashboard-card-deck.one-row {
121     flex-flow: nowrap;
122     overflow-x: scroll;
125 .summaryimage {
126     height: 7rem;
127     width: 7rem;
128     background-position: center;
129     background-size: cover;
132 .dashboard-card-deck .dashboard-card {
133     margin-bottom: $card-gutter;
134     flex-basis: auto;
135     width: 100%;
136     flex-grow: 0;
137     flex-shrink: 0;
138     .dashboard-card-img {
139         height: 7rem;
140         background-position: center;
141         background-size: cover;
142     }
143     .dashboard-card-footer {
144         padding: 0.8rem;
145     }
148 .dashboard-card-deck {
149     @media (min-width: 576px) {
150         .dashboard-card {
151             width: calc(50% - #{$card-gutter});
152         }
153     }
154     @media (min-width: 840px) {
155         .dashboard-card {
156             width: calc(33.33% - #{$card-gutter});
157         }
158     }
159     @media (min-width: 1100px) {
160         .dashboard-card {
161             width: calc(25% - #{$card-gutter});
162         }
163     }
164     @media (min-width: 1360px) {
165         .dashboard-card {
166             width: calc(20% - #{$card-gutter});
167         }
168     }
171 #region-main.has-blocks {
172     .dashboard-card-deck {
173         @media (min-width: 1200px) {
174             .dashboard-card {
175                 width: calc(33.33% - #{$card-gutter});
176             }
177         }
178         @media (min-width: 1470px) {
179             .dashboard-card {
180                 width: calc(25% - #{$card-gutter});
181             }
182         }
183     }
186 body.drawer-open-left {
187     .dashboard-card-deck {
188         @media (min-width: 768px) {
189             .dashboard-card {
190                 width: calc(100% - #{$card-gutter});
191             }
192         }
193         @media (min-width: 861px) {
194             .dashboard-card {
195                 width: calc(50% - #{$card-gutter});
196             }
197         }
198         @media (min-width: 1122px) {
199             .dashboard-card {
200                 width: calc(33.33% - #{$card-gutter});
201             }
202         }
203         @media (min-width: 1381px) {
204             .dashboard-card {
205                 width: calc(25% - #{$card-gutter});
206             }
207         }
208     }
211 body.drawer-open-left #region-main.has-blocks {
212     .dashboard-card-deck {
213         @media (min-width: 1200px) {
214             .dashboard-card {
215                 width: calc(100% - #{$card-gutter});
216             }
217         }
218         @media (min-width: 1236px) {
219             .dashboard-card {
220                 width: calc(50% - #{$card-gutter});
221             }
222         }
223         @media (min-width: 1497px) {
224             .dashboard-card {
225                 width: calc(33.33% - #{$card-gutter});
226             }
227         }
228     }
231 @media (min-width: 1200px) {
232     #block-region-side-pre {
233         .dashboard-card-deck {
234             margin-left: 0;
235             margin-right: 0;
236             .dashboard-card {
237                 width: calc(100% - #{$card-gutter}) !important;
238             }
239         }
240     }
243 .block_recentlyaccesseditems {
244     img.icon {
245         height: auto;
246         width: auto;
247         margin-right: 6px;
248     }
251 // Show expand collapse with font-awesome.
252 .block_settings .block_tree [aria-expanded="true"],
253 .block_settings .block_tree [aria-expanded="true"].emptybranch,
254 .block_settings .block_tree [aria-expanded="false"],
255 .block_navigation .block_tree [aria-expanded="true"],
256 .block_navigation .block_tree [aria-expanded="true"].emptybranch,
257 .block_navigation .block_tree [aria-expanded="false"] {
258     background-image: none;
260 .block_settings .block_tree [aria-expanded="true"]:before,
261 .block_navigation .block_tree [aria-expanded="true"]:before {
262     content: $fa-var-angle-down;
263     margin-right: 0;
264     font-size: 16px;
265     @extend .fa;
266     width: 16px;
269 .block_settings .block_tree [aria-expanded="false"]:before,
270 .block_navigation .block_tree [aria-expanded="false"]:before {
271     content: $fa-var-angle-right;
272     font-size: 16px;
273     margin-right: 0;
274     @extend .fa;
275     width: 16px;
277 .dir-rtl {
278     .block_settings .block_tree [aria-expanded="false"]:before,
279     .block_navigation .block_tree [aria-expanded="false"]:before {
280         content: $fa-var-angle-left;
281     }
284 .block_navigation .block_tree p.hasicon,
285 .block_settings .block_tree p.hasicon {
286     text-indent: -3px;
288     .icon {
289         margin-right: 2px;
290     }