You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

141 lines
4.0 KiB

/* some very targetted corrections to roll back nameclashes between
* Moodle and Bootstrap like .row, .label, .content, .controls
*
* Mostly relies on these styles being more specific than the Bootstrap
* ones in order to overule them.
*/
// .label vs .label
li.activity.label,
.file-picker td.label {
background: inherit;
color: inherit;
border: inherit;
text-shadow: none;
padding: 8px;
white-space: normal;
display: block;
font-size: inherit;
line-height: inherit;
text-align: inherit;
}
.file-picker td.label {
display: table-cell;
text-align: right;
}
// Some of this dialog is sized in ems so a different font size
// effects the whole layout.
.choosercontainer #chooseform .option label {
font-size: 12px;
}
/* block.invisible vs .invisible
* block.hidden vs .invisible
*
* uses .invisible where the rest of Moodle uses @mixin dimmed
* fixible in block renderer?
*
* There's seems to be even more naming confusion here since,
* blocks can be actually 'visible' (or not) to students,
* marked 'visible' but really just dimmed to indicate to editors
* that students can't see them or 'visible' to the user who
* collapses them, 'visible' if you have the right role and in
* different circumstances different sections of a block can
* be 'visible' or not.
*
* currently worked around in renderers.php function block{}
* by rewriting the class name "invisible" to "dimmed",
* though the blocks don't look particularly different apart
* from their contents disappearing. Maybe try .muted? or
* dimming all the edit icons apart from unhide, might be a
* nice effect, though they'd still be active. Maybe reverse
* it to white?
*/
li.section.hidden,
.block.hidden,
.block.invisible {
visibility: visible;
display: block;
}
/* .row vs .row
*
* very tricky to track down this when it goes wrong,
* since the styles are applied to generated content
*
* basically if you see things shifted left or right compared
* with where they should be check for a .row
*/
.forumpost .row {
margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
}
.forumpost .row:before,
.forumpost .row:after {
content: none;
}
/* fieldset.hidden vs .hidden
*
* Moodle uses fieldset.hidden for mforms, to signify a collection of
* form elements that don't have a box drawn round them. Bootstrap
* uses hidden for stuff that is hidden in various responsive modes.
*
* Relatedly, there is also fieldset.invisiblefieldset which hides the
* border and sets the display to inline.
*
* Originally this just set block and visible, but it is used
* in random question dialogue in Quiz,
* that dialogue is hidden and shown, so when hidden the
* above workaround leaves you with a button floating around
*/
fieldset.hidden {
display: inherit;
visibility: inherit;
}
/* .container vs .container
*
* bootstrap uses .container to set the width of the layout at 960px or so, Moodle uses it
* in the Quiz to contain the questions to add. If you don't overule the Bootstrap code,
* it becomes near unuseable.
*/
#questionbank + .container {
width: auto;
}
// Allow the custom menu to expand/collapse when the user hovers over it with JS disabled.
body:not(.jsenabled) .dropdown:hover > .dropdown-menu {
display: block;
margin-top: -6px; // We need to move it up to counter the arrows as they introduce hover bugs.
}
// Extends bootstrapbase/less/bootstrap/navbar.less
// to enable scroll in the language menu.
body:not(.jsenabled) .langmenu:hover > .dropdown-menu,
.langmenu.open > .dropdown-menu {
display: block;
max-height: 150px;
overflow-y: auto;
}
// Extends bootstrapbase/less/bootstrap/type.less
// to enable ol lists to use a larger number set.
ol {
margin: 0 0 $line-height-base / 2 2.5em;
}
// Set menus in the fixed header to scroll vertically when they are longer than the page.
.navbar-static-top .dropdown .dropdown-menu {
max-height: calc(100vh - #{$navbar-height});
overflow-y: auto;
}