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