MDL-58957 core_block: fix link to site home
[moodle.git] / theme / boost / scss / moodle / blocks.scss
CommitLineData
d7fbf722 1.blockmovetarget .accesshide {
536f0460 2 position: relative;
d7fbf722 3 left: initial;
536f0460 4}
270dd871
FM
5
6.block_search_forums .searchform {
7 /* Override plugin's default. */
8 text-align: left;
9}
400274bc
DW
10
11.block.block_navigation .block_tree ul,
12.block_settings .block_tree ul {
13 margin-left: 0;
14}
1149c235
FM
15
16.block .block-controls {
17 .dropdown-toggle {
18 /* So that the caret takes the colour of the icon. */
9d67a408 19 color: $body-color;
1149c235
FM
20 }
21}
99061152 22
0a58ec24 23$blocks-column-width: 250px !default;
99061152 24
0a58ec24
DW
25[data-region="blocks-column"] {
26 width: $blocks-column-width;
27 float: right;
99061152
DW
28}
29
0a58ec24
DW
30$blocks-plus-gutter: $blocks-column-width + $grid-gutter-width;
31
11774d90
DW
32/* We put an absolutely positioned div in a relatively positioned div so it takes up no space */
33#region-main-settings-menu {
34 position: relative;
35 float: left;
36 width: 100%;
37}
38#region-main-settings-menu > div {
39 position: absolute;
40 right: 0;
41 z-index: 100;
42 margin: 1rem;
43}
d8cfd611
DW
44.region_main_settings_menu_proxy {
45 width: 4rem;
46 height: 2rem;
47 background-color: $card-bg;
48 margin-left: $card-spacer-x / 2;
49 margin-bottom: $card-spacer-x / 2;
50 border-bottom-left-radius: 0.5rem;
51 float: right;
52}
4682f17c
DW
53
54// Required for IE11 to prevent blocks being pushed under the content.
55#region-main {
56 float: left;
57 width: 100%;
58}
11774d90 59#region-main-settings-menu.has-blocks,
0a58ec24
DW
60#region-main.has-blocks {
61 display: inline-block;
62 width: calc(100% - #{$blocks-plus-gutter});
42654589 63 @include media-breakpoint-down(lg) {
0a58ec24 64 width: 100%;
99061152
DW
65 }
66}
a0bdffbd
DW
67
68[data-region="blocks-column"] {
42654589 69 @include media-breakpoint-down(lg) {
a0bdffbd
DW
70 width: 100%;
71 }
72}
cab053f7 73
ff582ae5 74$chart-size: 70px;
cab053f7 75$doughnut-border-size: 15px;
0a2b761c 76$doughnut-dasharray: 173;
cab053f7
RW
77$doughnut-empty-colour: $gray-lighter;
78$doughnut-fill-colour: $brand-warning;
79
80.progress-chart-container {
81 height: $chart-size;
82 width: $chart-size;
83
84 .progress-doughnut {
85 position: relative;
86 height: $chart-size;
87 width: $chart-size;
88 background-clip: padding-box;
89 border: $doughnut-border-size solid $doughnut-empty-colour;
90 border-radius: 50%;
91 box-sizing: border-box;
92
93 .progress-text {
94 position: absolute;
95 top: 50%;
96 /*rtl:ignore*/
97 left: 50%;
98 transform: translate(-50%, -50%);
99 color: $doughnut-empty-colour;
100
101 &.has-percent {
102 color: $doughnut-fill-colour;
103 }
104 }
105
106 .progress-indicator {
107 position: absolute;
108 top: ($doughnut-border-size * -1);
109 left: ($doughnut-border-size * -1);
110 height: $chart-size;
111 width: $chart-size;
112
113 svg {
114 position: relative;
115 height: 100%;
116 width: 100%;
117
118 .circle {
119 stroke-width: $doughnut-border-size;
120 stroke: $doughnut-fill-colour;
121 fill: none;
122 stroke-dasharray: $doughnut-dasharray;
123 stroke-dashoffset: $doughnut-dasharray;
124 transform: rotate(-90deg);
125 transform-origin: center center;
126
127 @for $i from 1 through 100 {
128 &.percent-#{$i} {
129 stroke-dashoffset: $doughnut-dasharray - ($i / 100 * $doughnut-dasharray);
130 }
131 }
132 }
133 }
134 }
135 }
136
137 .no-progress {
138 height: $chart-size;
139 width: $chart-size;
140 background-color: $doughnut-empty-colour;
141 border-radius: 50%;
142 position: relative;
143
144 .icon {
145 position: absolute;
146 top: 50%;
147 /*rtl:ignore*/
148 left: 50%;
149 margin: 0;
d6c25e5c 150 transform: translate(-45%, -45%);
cab053f7 151 color: #fff;
80a1ea55
RW
152 height: ($chart-size / 2) + 10px;
153 width: ($chart-size / 2) + 10px;
154 font-size: ($chart-size / 2) + 10px;
cab053f7
RW
155 }
156 }
157}
0eb85562
RW
158
159.block_myoverview {
160 .event-list-item {
161 .event-icon {
162 vertical-align: middle;
163
164 &::before {
165 content: '';
166 display: inline-block;
167 height: 100%;
168 vertical-align: middle;
169 }
170 }
171
172 .event-name-container {
173 vertical-align: middle;
174 max-width: calc(100% - 50px);
175
176 .event-name {
177 display: block;
178 }
179 }
180 }
cbd3c4fe 181
7243eef9
RW
182 .content-centred {
183 max-width: 900px;
184 margin-left: auto;
185 margin-right: auto;
186 }
187
cbd3c4fe 188 .empty-placeholder-image-sm {
2104e7a5 189 height: 50px;
cbd3c4fe
RW
190 }
191
192 .empty-placeholder-image-lg {
193 height: 125px;
cbd3c4fe 194 }
82afbfab
JP
195
196 .courses-view-course-item {
197 height: 220px;
198 overflow-y: hidden;
199 }
0eb85562 200}
7243eef9
RW
201
202@media (min-width: 1600px) {
203 .block_myoverview {
204 .courses-view-course-item {
205 height: 190px;
206 }
207 }
208}
57ea73d0
DW
209
210// Show expand collapse with font-awesome.
211.block_settings .block_tree [aria-expanded="true"],
212.block_settings .block_tree [aria-expanded="true"].emptybranch,
213.block_settings .block_tree [aria-expanded="false"],
214.block_navigation .block_tree [aria-expanded="true"],
215.block_navigation .block_tree [aria-expanded="true"].emptybranch,
216.block_navigation .block_tree [aria-expanded="false"] {
217 background-image: none;
218}
219.block_settings .block_tree [aria-expanded="true"]:before,
220.block_navigation .block_tree [aria-expanded="true"]:before {
221 content: $fa-var-angle-down;
222 margin-right: 0;
223 font-size: 16px;
224 @extend .fa;
225 width: 16px;
226}
227
228.block_settings .block_tree [aria-expanded="false"]:before,
229.block_navigation .block_tree [aria-expanded="false"]:before {
230 content: $fa-var-angle-right;
231 font-size: 16px;
232 margin-right: 0;
233 @extend .fa;
234 width: 16px;
235}
236.dir-rtl {
237 .block_settings .block_tree [aria-expanded="false"]:before,
238 .block_navigation .block_tree [aria-expanded="false"]:before {
239 content: $fa-var-angle-left;
240 }
241}
242
243.block_navigation .block_tree p.hasicon,
244.block_settings .block_tree p.hasicon {
245 text-indent: -3px;
246
247 .icon {
248 margin-right: 2px;
249 }
250}