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
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;
78c06a66
BB
97 &.fa-star {
98 color: $blue;
99 }
3cfff885 100 }
1a972542
BB
101 .card .coursemenubtn {
102 margin-top: -0.5rem;
3cfff885 103 }
97593c37 104 a.coursename,
3cfff885
BB
105 .btn-link {
106 color: inherit;
107 }
108 .btn.btn-link.btn-icon {
4fd6b770
BB
109 height: 36px;
110 width: 36px;
3cfff885
BB
111 padding: 0;
112 border-radius: 50%;
3cfff885
BB
113
114 @include hover-focus {
115 background-color: $gray-200;
116 }
3cfff885 117 }
fe149a99
LB
118}
119
44b54926
BB
120.dashboard-card-deck.one-row {
121 flex-flow: nowrap;
122 overflow-y: scroll;
0ec60261
BB
123}
124
fe149a99
LB
125.summaryimage {
126 height: 7rem;
f1b1f380 127 width: 7rem;
fe149a99
LB
128 background-position: center;
129 background-size: cover;
e4b4b9e7 130}
cab053f7 131
4fd6b770
BB
132.dashboard-card-deck .dashboard-card {
133 margin-bottom: $card-gutter;
4f42ca11
BB
134 flex-basis: auto;
135 width: 100%;
4fd6b770 136 flex-grow: 0;
4f42ca11 137 flex-shrink: 0;
4fd6b770
BB
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 }
146}
147
148.dashboard-card-deck {
149 @include media-breakpoint-up(sm) {
150 .dashboard-card {
4f42ca11 151 width: calc(50% - #{$card-gutter});
e4b4b9e7 152 }
4fd6b770
BB
153 }
154 @include media-breakpoint-up(md) {
155 .dashboard-card {
4f42ca11 156 width: calc(33.33% - #{$card-gutter});
e4b4b9e7 157 }
4fd6b770
BB
158 }
159 @include media-breakpoint-up(lg) {
160 .dashboard-card {
4f42ca11 161 width: calc(25% - #{$card-gutter});
e4b4b9e7 162 }
4fd6b770
BB
163 }
164 @include media-breakpoint-up(xl) {
165 .dashboard-card {
4f42ca11 166 width: calc(20% - #{$card-gutter});
4fd6b770
BB
167 }
168 }
169}
170
171#region-main.has-blocks {
172 .dashboard-card-deck {
e4b4b9e7 173 @include media-breakpoint-up(lg) {
4fd6b770 174 .dashboard-card {
4f42ca11 175 width: calc(33.33% - #{$card-gutter});
e4b4b9e7
BB
176 }
177 }
178 @include media-breakpoint-up(xl) {
4fd6b770 179 .dashboard-card {
4f42ca11 180 width: calc(25% - #{$card-gutter});
e4b4b9e7 181 }
cab053f7
RW
182 }
183 }
184}
0eb85562 185
4fd6b770
BB
186body.drawer-open-left #region-main.has-blocks {
187 .dashboard-card-deck {
188 @include media-breakpoint-up(lg) {
189 .dashboard-card {
4f42ca11 190 width: calc(33.33% - #{$card-gutter});
4fd6b770 191 }
e4b4b9e7 192 }
4fd6b770
BB
193 @media (min-width: 1400px) {
194 .dashboard-card {
4f42ca11 195 width: calc(25% - #{$card-gutter});
4fd6b770 196 }
e4b4b9e7 197 }
cbd3c4fe 198 }
7243eef9 199}
57ea73d0 200
4fd6b770
BB
201@media (min-width: 1200px) {
202 #block-region-side-pre {
203 .dashboard-card-deck {
204 margin: 0;
205 .dashboard-card {
4f42ca11 206 width: 100% !important;
4fd6b770
BB
207 margin-left: 0;
208 margin-right: 0;
209 }
3cfff885
BB
210 }
211 }
c8cc25ca
BB
212}
213
44b54926
BB
214.block_recentlyaccesseditems {
215 img.icon {
216 height: auto;
217 width: auto;
218 margin-right: 6px;
219 }
220}
221
57ea73d0
DW
222// Show expand collapse with font-awesome.
223.block_settings .block_tree [aria-expanded="true"],
224.block_settings .block_tree [aria-expanded="true"].emptybranch,
225.block_settings .block_tree [aria-expanded="false"],
226.block_navigation .block_tree [aria-expanded="true"],
227.block_navigation .block_tree [aria-expanded="true"].emptybranch,
228.block_navigation .block_tree [aria-expanded="false"] {
229 background-image: none;
230}
231.block_settings .block_tree [aria-expanded="true"]:before,
232.block_navigation .block_tree [aria-expanded="true"]:before {
233 content: $fa-var-angle-down;
234 margin-right: 0;
235 font-size: 16px;
236 @extend .fa;
237 width: 16px;
238}
239
240.block_settings .block_tree [aria-expanded="false"]:before,
241.block_navigation .block_tree [aria-expanded="false"]:before {
242 content: $fa-var-angle-right;
243 font-size: 16px;
244 margin-right: 0;
245 @extend .fa;
246 width: 16px;
247}
248.dir-rtl {
249 .block_settings .block_tree [aria-expanded="false"]:before,
250 .block_navigation .block_tree [aria-expanded="false"]:before {
251 content: $fa-var-angle-left;
252 }
253}
254
255.block_navigation .block_tree p.hasicon,
256.block_settings .block_tree p.hasicon {
257 text-indent: -3px;
258
259 .icon {
260 margin-right: 2px;
261 }
41f61293 262}