on-demand release 3.5beta+
[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
120// Extends bootstrapbase/less/bootstrap/navbar.less
121// to enable scroll in the language menu.
122body:not(.jsenabled) .langmenu:hover > .dropdown-menu,
123.langmenu.open > .dropdown-menu {
124 display: block;
125 max-height: 150px;
126 overflow-y: auto;
127}
128
129// Extends bootstrapbase/less/bootstrap/type.less
130// to enable ol lists to use a larger number set.
131
132ol {
da92b738 133 margin: 0 0 $line-height-base / 2 2.5em;
072364df 134}
a053229f
DW
135
136// Set menus in the fixed header to scroll vertically when they are longer than the page.
ebdfc3c9 137.navbar.fixed-top .dropdown .dropdown-menu {
a053229f
DW
138 max-height: calc(100vh - #{$navbar-height});
139 overflow-y: auto;
140}
bd6f87ed
DW
141
142// Dont allow z-index creep anywhere.
143.page-item {
bf3d824a
JP
144 &.active .page-link {
145 @include plain-hover-focus {
146 z-index: inherit;
147 }
bd6f87ed 148 }
bd6f87ed 149}
89f0061e
BB
150/* Force positioning of popover arrows.
151 *
152 * The Css prefixer used in Moodle does not support complex calc statements used
153 * in Bootstrap 4 CSS. For example:
154 * calc((0.5rem + 1px) * -1); is stripped out by lib/php-css-parser/Parser.php.
155 * See MDL-61879. For now the arrow positions of popovers are fixed until this is resolved.
156 */
7b87d98d
AN
157.bs-popover-right .arrow,
158.bs-popover-auto[x-placement^="right"] .arrow {
89f0061e 159 left: -9px;
7b87d98d
AN
160}
161.bs-popover-left .arrow,
162.bs-popover-auto[x-placement^="left"] .arrow {
89f0061e 163 right: -9px;
7b87d98d 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}