on-demand release 3.6dev+
[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
BB
80.block .empty-placeholder-image-lg {
81 height: 125px;
82}
83
f6c6f215
BB
84.block_myoverview,
85.block_starredcourses {
e4b4b9e7
BB
86 .course-info-container {
87 padding: 0.8rem;
88 }
e4b4b9e7
BB
89 .progress {
90 height: 0.5rem;
91 }
e4b4b9e7
BB
92 .course-summaryitem {
93 border: $border-width solid $border-color;
94 background-color: $body-bg;
95 }
3cfff885
BB
96 .icon {
97 margin-right: 0;
98 }
99 a,
100 .btn-link {
101 color: inherit;
102 }
103 .btn.btn-link.btn-icon {
4fd6b770
BB
104 height: 36px;
105 width: 36px;
3cfff885
BB
106 padding: 0;
107 border-radius: 50%;
3cfff885
BB
108
109 @include hover-focus {
110 background-color: $gray-200;
111 }
3cfff885 112 }
fe149a99
LB
113}
114
0ec60261
BB
115.block_starredcourses {
116 .dashboard-card-deck {
117 flex-flow: nowrap;
118 overflow-y: scroll;
119 }
120}
121
fe149a99
LB
122.summaryimage {
123 height: 7rem;
124 background-position: center;
125 background-size: cover;
e4b4b9e7 126}
cab053f7 127
78e07cbc
VDF
128[data-region="blocks-column"] {
129 .block_recentlyaccesseditems {
c3e419e4
DW
130 @include media-breakpoint-up(xl) {
131 .dashboard-card-deck {
132 height: unset;
133 }
78e07cbc
VDF
134 }
135 }
136}
137
138.block_recentlyaccesseditems {
139 [data-region="recentlyaccesseditems-view-content"] {
140 overflow-x: hidden;
141 }
142 .dashboard-card {
143 height: 75px;
144 }
145 .dashboard-card-deck {
146 @include media-breakpoint-up(sm) {
147 height: 75px;
148 overflow: hidden;
149 }
150 }
151 .course-info-container {
152 padding: 0.8rem;
153 }
154 .empty-placeholder-image-lg {
155 height: 125px;
156 }
157 a,
158 a:hover {
159 text-decoration: none;
160 color: unset;
161 }
162 .block-controls ~ .content {
163 margin-top: 2rem !important;
164 }
165}
166
4fd6b770
BB
167.dashboard-card-deck .dashboard-card {
168 margin-bottom: $card-gutter;
169 flex-basis: 100%;
170 flex-grow: 0;
171 .dashboard-card-img {
172 height: 7rem;
173 background-position: center;
174 background-size: cover;
175 }
176 .dashboard-card-footer {
177 padding: 0.8rem;
178 }
179}
180
181.dashboard-card-deck {
182 @include media-breakpoint-up(sm) {
183 .dashboard-card {
e4b4b9e7
BB
184 flex-basis: calc(50% - #{$card-gutter});
185 }
4fd6b770
BB
186 }
187 @include media-breakpoint-up(md) {
188 .dashboard-card {
189 flex-basis: calc(33.33% - #{$card-gutter});
e4b4b9e7 190 }
4fd6b770
BB
191 }
192 @include media-breakpoint-up(lg) {
193 .dashboard-card {
194 flex-basis: calc(25% - #{$card-gutter});
e4b4b9e7 195 }
4fd6b770
BB
196 }
197 @include media-breakpoint-up(xl) {
198 .dashboard-card {
199 flex-basis: calc(20% - #{$card-gutter});
200 }
201 }
202}
203
204#region-main.has-blocks {
205 .dashboard-card-deck {
e4b4b9e7 206 @include media-breakpoint-up(lg) {
4fd6b770
BB
207 .dashboard-card {
208 flex-basis: calc(33.33% - #{$card-gutter});
e4b4b9e7
BB
209 }
210 }
211 @include media-breakpoint-up(xl) {
4fd6b770
BB
212 .dashboard-card {
213 flex-basis: calc(25% - #{$card-gutter});
e4b4b9e7 214 }
cab053f7
RW
215 }
216 }
217}
0eb85562 218
4fd6b770
BB
219body.drawer-open-left #region-main.has-blocks {
220 .dashboard-card-deck {
221 @include media-breakpoint-up(lg) {
222 .dashboard-card {
223 flex-basis: calc(33.33% - #{$card-gutter});
224 }
e4b4b9e7 225 }
4fd6b770
BB
226 @media (min-width: 1400px) {
227 .dashboard-card {
228 flex-basis: calc(25% - #{$card-gutter});
229 }
e4b4b9e7 230 }
cbd3c4fe 231 }
7243eef9 232}
57ea73d0 233
4fd6b770
BB
234@media (min-width: 1200px) {
235 #block-region-side-pre {
236 .dashboard-card-deck {
237 margin: 0;
238 .dashboard-card {
239 flex-basis: 100% !important;
240 margin-left: 0;
241 margin-right: 0;
242 }
3cfff885
BB
243 }
244 }
c8cc25ca
BB
245}
246
57ea73d0
DW
247// Show expand collapse with font-awesome.
248.block_settings .block_tree [aria-expanded="true"],
249.block_settings .block_tree [aria-expanded="true"].emptybranch,
250.block_settings .block_tree [aria-expanded="false"],
251.block_navigation .block_tree [aria-expanded="true"],
252.block_navigation .block_tree [aria-expanded="true"].emptybranch,
253.block_navigation .block_tree [aria-expanded="false"] {
254 background-image: none;
255}
256.block_settings .block_tree [aria-expanded="true"]:before,
257.block_navigation .block_tree [aria-expanded="true"]:before {
258 content: $fa-var-angle-down;
259 margin-right: 0;
260 font-size: 16px;
261 @extend .fa;
262 width: 16px;
263}
264
265.block_settings .block_tree [aria-expanded="false"]:before,
266.block_navigation .block_tree [aria-expanded="false"]:before {
267 content: $fa-var-angle-right;
268 font-size: 16px;
269 margin-right: 0;
270 @extend .fa;
271 width: 16px;
272}
273.dir-rtl {
274 .block_settings .block_tree [aria-expanded="false"]:before,
275 .block_navigation .block_tree [aria-expanded="false"]:before {
276 content: $fa-var-angle-left;
277 }
278}
279
280.block_navigation .block_tree p.hasicon,
281.block_settings .block_tree p.hasicon {
282 text-indent: -3px;
283
284 .icon {
285 margin-right: 2px;
286 }
287}