| 1 |
efrain |
1 |
/* some very targetted corrections to roll back nameclashes between
|
|
|
2 |
* Moodle and Bootstrap like .row, .label, .content, .controls
|
|
|
3 |
*
|
|
|
4 |
* Mostly relies on these styles being more specific than the Bootstrap
|
|
|
5 |
* ones in order to overule them.
|
|
|
6 |
*/
|
|
|
7 |
|
|
|
8 |
// .label vs .label
|
|
|
9 |
|
|
|
10 |
li.activity.label,
|
|
|
11 |
.file-picker td.label {
|
|
|
12 |
background: transparent;
|
|
|
13 |
color: inherit;
|
|
|
14 |
border: inherit;
|
|
|
15 |
text-shadow: none;
|
|
|
16 |
|
|
|
17 |
white-space: normal;
|
|
|
18 |
display: block;
|
|
|
19 |
font-size: inherit;
|
|
|
20 |
line-height: inherit;
|
|
|
21 |
text-align: inherit;
|
|
|
22 |
}
|
|
|
23 |
|
|
|
24 |
.file-picker td.label {
|
|
|
25 |
padding: 8px;
|
|
|
26 |
display: table-cell;
|
|
|
27 |
text-align: right;
|
|
|
28 |
}
|
|
|
29 |
|
|
|
30 |
// Some of this dialog is sized in ems so a different font size
|
|
|
31 |
// effects the whole layout.
|
|
|
32 |
.choosercontainer #chooseform .option label {
|
|
|
33 |
font-size: 12px;
|
|
|
34 |
}
|
|
|
35 |
|
|
|
36 |
/* block.invisible vs .invisible
|
|
|
37 |
* block.hidden vs .invisible
|
|
|
38 |
*
|
|
|
39 |
* uses .invisible where the rest of Moodle uses @mixin dimmed
|
|
|
40 |
* fixible in block renderer?
|
|
|
41 |
*
|
|
|
42 |
* There's seems to be even more naming confusion here since,
|
|
|
43 |
* blocks can be actually 'visible' (or not) to students,
|
|
|
44 |
* marked 'visible' but really just dimmed to indicate to editors
|
|
|
45 |
* that students can't see them or 'visible' to the user who
|
|
|
46 |
* collapses them, 'visible' if you have the right role and in
|
|
|
47 |
* different circumstances different sections of a block can
|
|
|
48 |
* be 'visible' or not.
|
|
|
49 |
*
|
|
|
50 |
* currently worked around in renderers.php function block{}
|
|
|
51 |
* by rewriting the class name "invisible" to "dimmed",
|
|
|
52 |
* though the blocks don't look particularly different apart
|
|
|
53 |
* from their contents disappearing. Maybe try .muted? or
|
|
|
54 |
* dimming all the edit icons apart from unhide, might be a
|
|
|
55 |
* nice effect, though they'd still be active. Maybe reverse
|
|
|
56 |
* it to white?
|
|
|
57 |
*/
|
|
|
58 |
|
|
|
59 |
li.section.hidden,
|
|
|
60 |
.block.hidden,
|
|
|
61 |
.block.invisible {
|
|
|
62 |
visibility: visible;
|
|
|
63 |
display: block;
|
|
|
64 |
}
|
|
|
65 |
|
|
|
66 |
|
|
|
67 |
/* .row vs .row
|
|
|
68 |
*
|
|
|
69 |
* very tricky to track down this when it goes wrong,
|
|
|
70 |
* since the styles are applied to generated content
|
|
|
71 |
*
|
|
|
72 |
* basically if you see things shifted left or right compared
|
|
|
73 |
* with where they should be check for a .row
|
|
|
74 |
*/
|
|
|
75 |
|
|
|
76 |
.forum-post .row {
|
|
|
77 |
margin-left: 0 !important;
|
|
|
78 |
/* stylelint-disable-line declaration-no-important */
|
|
|
79 |
}
|
|
|
80 |
|
|
|
81 |
.forum-post .row:before,
|
|
|
82 |
.forum-post .row:after {
|
|
|
83 |
content: none;
|
|
|
84 |
}
|
|
|
85 |
|
|
|
86 |
/* fieldset.hidden vs .hidden
|
|
|
87 |
*
|
|
|
88 |
* Moodle uses fieldset.hidden for mforms, to signify a collection of
|
|
|
89 |
* form elements that don't have a box drawn round them. Bootstrap
|
|
|
90 |
* uses hidden for stuff that is hidden in various responsive modes.
|
|
|
91 |
*
|
|
|
92 |
* Relatedly, there is also fieldset.invisiblefieldset which hides the
|
|
|
93 |
* border and sets the display to inline.
|
|
|
94 |
*
|
|
|
95 |
* Originally this just set block and visible, but it is used
|
|
|
96 |
* in random question dialogue in Quiz,
|
|
|
97 |
* that dialogue is hidden and shown, so when hidden the
|
|
|
98 |
* above workaround leaves you with a button floating around
|
|
|
99 |
*/
|
|
|
100 |
|
|
|
101 |
fieldset.hidden {
|
|
|
102 |
display: inherit;
|
|
|
103 |
visibility: inherit;
|
|
|
104 |
}
|
|
|
105 |
|
|
|
106 |
/* .container vs .container
|
|
|
107 |
*
|
|
|
108 |
* bootstrap uses .container to set the width of the layout at 960px or so, Moodle uses it
|
|
|
109 |
* in the Quiz to contain the questions to add. If you don't overule the Bootstrap code,
|
|
|
110 |
* it becomes near unuseable.
|
|
|
111 |
*/
|
|
|
112 |
|
|
|
113 |
#questionbank+.container {
|
|
|
114 |
width: auto;
|
|
|
115 |
}
|
|
|
116 |
|
|
|
117 |
// Allow the custom menu to expand/collapse when the user hovers over it with JS disabled.
|
|
|
118 |
body:not(.jsenabled) .dropdown:hover>.dropdown-menu {
|
|
|
119 |
display: block;
|
|
|
120 |
margin-top: -6px; // We need to move it up to counter the arrows as they introduce hover bugs.
|
|
|
121 |
}
|
|
|
122 |
|
|
|
123 |
// Enable scroll in the language menu.
|
|
|
124 |
body:not(.jsenabled) .langmenu:hover>.dropdown-menu,
|
|
|
125 |
.langmenu.open>.dropdown-menu {
|
|
|
126 |
display: block;
|
|
|
127 |
max-height: 150px;
|
|
|
128 |
overflow-y: auto;
|
|
|
129 |
}
|
|
|
130 |
|
|
|
131 |
// Set menus in the fixed header to scroll vertically when they are longer than the page.
|
|
|
132 |
.rui-topbar.fixed-top .dropdown .dropdown-menu {
|
|
|
133 |
max-height: calc(100vh - #{$navbar-height});
|
|
|
134 |
overflow-y: auto;
|
|
|
135 |
}
|
|
|
136 |
|
|
|
137 |
// Dont allow z-index creep anywhere.
|
|
|
138 |
.page-item {
|
|
|
139 |
&.active .page-link {
|
|
|
140 |
@include plain-hover-focus {
|
|
|
141 |
z-index: inherit;
|
|
|
142 |
}
|
|
|
143 |
}
|
|
|
144 |
}
|
|
|
145 |
|
|
|
146 |
/* Force positioning of popover arrows.
|
|
|
147 |
*
|
|
|
148 |
* The Css prefixer used in Moodle does not support complex calc statements used
|
|
|
149 |
* in Bootstrap 4 CSS. For example:
|
|
|
150 |
* calc((0.5rem + 1px) * -1); is stripped out by lib/php-css-parser/Parser.php.
|
|
|
151 |
* See MDL-61879. For now the arrow positions of popovers are fixed until this is resolved.
|
|
|
152 |
*/
|
|
|
153 |
.bs-popover-right .arrow,
|
|
|
154 |
.bs-popover-auto[x-placement^="right"] .arrow {
|
|
|
155 |
left: -9px;
|
|
|
156 |
}
|
|
|
157 |
|
|
|
158 |
.bs-popover-left .arrow,
|
|
|
159 |
.bs-popover-auto[x-placement^="left"] .arrow {
|
|
|
160 |
right: -9px;
|
|
|
161 |
}
|
|
|
162 |
|
|
|
163 |
.bs-popover-top .arrow,
|
|
|
164 |
.bs-popover-auto[x-placement^="top"] .arrow {
|
|
|
165 |
bottom: -9px;
|
|
|
166 |
}
|
|
|
167 |
|
|
|
168 |
.bs-popover-bottom .arrow,
|
|
|
169 |
.bs-popover-auto[x-placement^="bottom"] .arrow {
|
|
|
170 |
top: -9px;
|
|
|
171 |
}
|
|
|
172 |
|
|
|
173 |
// Fixes an issue on Safari when the .custom-select is inside a .card class.
|
|
|
174 |
.custom-select {
|
|
|
175 |
word-wrap: normal;
|
|
|
176 |
}
|
|
|
177 |
|
|
|
178 |
/* Add commented out carousel transistions back in.
|
|
|
179 |
*
|
|
|
180 |
* The Css prefixer used in Moodle breaks on @supports syntax, See MDL-61515.
|
|
|
181 |
*/
|
|
|
182 |
.carousel-item-next.carousel-item-left,
|
|
|
183 |
.carousel-item-prev.carousel-item-right {
|
|
|
184 |
transform: translateX(0);
|
|
|
185 |
}
|
|
|
186 |
.carousel-item-next,
|
|
|
187 |
.active.carousel-item-right {
|
|
|
188 |
transform: translateX(100%);
|
|
|
189 |
}
|
|
|
190 |
.carousel-item-prev,
|
|
|
191 |
.active.carousel-item-left {
|
|
|
192 |
transform: translateX(-100%);
|
|
|
193 |
}
|
|
|
194 |
|
|
|
195 |
/**
|
|
|
196 |
* Reset all of the forced style on the page.
|
|
|
197 |
* - Remove borders on header and content.
|
|
|
198 |
* - Remove most of the vertical padding.
|
|
|
199 |
* - Make the content region flex grow so it pushes things like the
|
|
|
200 |
* next activity selector to the bottom of the page.
|
|
|
201 |
*/
|
|
|
202 |
$allow-reset-style: true !default;
|
|
|
203 |
|
|
|
204 |
@if $allow-reset-style {
|
|
|
205 |
body.reset-style {
|
|
|
206 |
.page-header-content {
|
|
|
207 |
.card {
|
|
|
208 |
border: none;
|
|
|
209 |
|
|
|
210 |
.page-header-headings {
|
|
|
211 |
h1 {
|
|
|
212 |
margin-bottom: 0;
|
|
|
213 |
}
|
|
|
214 |
}
|
|
|
215 |
|
|
|
216 |
.card-body {
|
|
|
217 |
@include media-breakpoint-between(xs,sm) {
|
|
|
218 |
padding-left: 0;
|
|
|
219 |
padding-right: 0;
|
|
|
220 |
}
|
|
|
221 |
}
|
|
|
222 |
}
|
|
|
223 |
|
|
|
224 |
&>div {
|
|
|
225 |
padding-top: 0 !important;
|
|
|
226 |
/* stylelint-disable-line declaration-no-important */
|
|
|
227 |
padding-bottom: 0 !important;
|
|
|
228 |
/* stylelint-disable-line declaration-no-important */
|
|
|
229 |
}
|
|
|
230 |
}
|
|
|
231 |
|
|
|
232 |
#page-content {
|
|
|
233 |
padding-bottom: 0 !important;
|
|
|
234 |
/* stylelint-disable-line declaration-no-important */
|
|
|
235 |
|
|
|
236 |
#region-main-box {
|
|
|
237 |
#region-main {
|
|
|
238 |
border: none;
|
|
|
239 |
display: inline-flex;
|
|
|
240 |
flex-direction: column;
|
|
|
241 |
padding: 0;
|
|
|
242 |
height: 100%;
|
|
|
243 |
width: 100%;
|
|
|
244 |
padding-left: $card-spacer-x;
|
|
|
245 |
padding-right: $card-spacer-x;
|
|
|
246 |
vertical-align: top;
|
|
|
247 |
|
|
|
248 |
div[role="main"] {
|
|
|
249 |
flex: 1 0 auto;
|
|
|
250 |
}
|
|
|
251 |
|
|
|
252 |
.activity-navigation {
|
|
|
253 |
overflow: hidden;
|
|
|
254 |
}
|
|
|
255 |
|
|
|
256 |
&.has-blocks {
|
|
|
257 |
width: calc(100% - #{$blocks-plus-gutter});
|
|
|
258 |
|
|
|
259 |
@include media-breakpoint-down(lg) {
|
|
|
260 |
width: 100%;
|
|
|
261 |
}
|
|
|
262 |
}
|
|
|
263 |
|
|
|
264 |
@include media-breakpoint-between(xs,sm) {
|
|
|
265 |
padding-left: 0;
|
|
|
266 |
padding-right: 0;
|
|
|
267 |
}
|
|
|
268 |
}
|
|
|
269 |
|
|
|
270 |
[data-region="blocks-column"] {
|
|
|
271 |
margin-left: auto;
|
|
|
272 |
}
|
|
|
273 |
|
|
|
274 |
@include media-breakpoint-down(lg) {
|
|
|
275 |
display: flex;
|
|
|
276 |
flex-direction: column;
|
|
|
277 |
}
|
|
|
278 |
}
|
|
|
279 |
}
|
|
|
280 |
|
|
|
281 |
select,
|
|
|
282 |
input,
|
|
|
283 |
textarea,
|
|
|
284 |
.btn:not(.btn-icon) {
|
|
|
285 |
border-radius: $btn-border-radius-lg;
|
|
|
286 |
}
|
|
|
287 |
}
|
|
|
288 |
}
|