MDL-55452 stylelint: prevent use of !important
[moodle.git] / theme / bootstrapbase / less / moodle / undo.less
CommitLineData
8903b17b
BB
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 {
d3a93557
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;
8903b17b
BB
21}
22.file-picker td.label {
d3a93557
DP
23 display: table-cell;
24 text-align: right;
8903b17b
BB
25}
26
27// Some of this dialog is sized in ems so a different font size
28// effects the whole layout.
29.choosercontainer #chooseform .option label {
30 font-size: 12px;
31}
32
33/* block.invisible vs .invisible
34 * block.hidden vs .invisible
35 *
36 * uses .invisible where the rest of Moodle uses .dimmed
37 * fixible in block renderer?
38 *
39 * There's seems to be even more naming confusion here since,
40 * blocks can be actually 'visible' (or not) to students,
41 * marked 'visible' but really just dimmed to indicate to editors
42 * that students can't see them or 'visible' to the user who
43 * collapses them, 'visible' if you have the right role and in
44 * different circumstances different sections of a block can
45 * be 'visible' or not.
46 *
47 * currently worked around in renderers.php function block{}
48 * by rewriting the class name "invisible" to "dimmed",
49 * though the blocks don't look particularly different apart
50 * from their contents disappearing. Maybe try .muted? or
51 * dimming all the edit icons apart from unhide, might be a
52 * nice effect, though they'd still be active. Maybe reverse
53 * it to white?
54 */
55
56li.section.hidden,
57.block.hidden,
58.block.invisible {
d3a93557
DP
59 visibility: visible;
60 display: block;
8903b17b
BB
61}
62
63
64/* .row vs .row
65 *
66 * very tricky to track down this when it goes wrong,
67 * since the styles are applied to generated content
68 *
69 * basically if you see things shifted left or right compared
70 * with where they should be check for a .row
71 */
8903b17b
BB
72#turnitintool_style .row,
73.forumpost .row {
eb695207 74 margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
d3a93557 75 // not sure if this needs !important
8903b17b
BB
76}
77#turnitintool_style .row:before,
78#turnitintool_style .row:after,
79.forumpost .row:before,
80.forumpost .row:after {
d3a93557 81 content: none;
8903b17b
BB
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
103
104/* .controls vs .controls
105 *
106 * in expanding course list, can be fixed in renderer though
107 */
108
109
110/* .btn vs .btn
111 *
112 * links, inputs and buttons are commonly styled with .btn in
113 * bootstrap but it seems that some buttons in Moodle are
114 * wrapped in div.btn e.g. the login block's "login" button
115 */
116
117div.c1.btn {
118 display: block;
119 padding: 0;
120 margin-bottom: 0;
121 font-size: inherit;
122 line-height: inherit;
123 text-align: inherit;
124 vertical-align: inherit;
125 cursor: default;
126 color: inherit;
127 text-shadow: inherit;
128 background-color: inherit;
129 background-image: none;
c44ec0d6 130 background-repeat: no-repeat;
8903b17b 131 border: none;
c44ec0d6 132 border-radius: 0;
8903b17b
BB
133 box-shadow: none;
134}
135/* .container vs .container
136 *
137 * bootstrap uses .container to set the width of the layout at 960px or so, Moodle uses it
138 * in the Quiz to contain the questions to add. If you don't overule the Bootstrap code,
139 * it becomes near unuseable.
140 */
141
142#questionbank + .container {
143 width: auto;
144}
145// In Moodle .hide is the eye icon
146// In Bootstrap it hides things
147img.hide {
148 display: inherit;
149}
150
151// Bootstrap adds a background sprite to anything with classname starting "icon-".
152// we only want to load it if we use them in content.
153.icon-bar,
154img.icon-post,
155img.icon-info,
156img.icon-warn,
157img.icon-pre {
158 background-image: none;
159}
160
8903b17b
BB
161// Weird big margins on login page
162.loginbox.twocolumns,
163.loginbox.twocolumns {
164 .signuppanel,
165 .loginpanel {
166 padding: 0px;
167 margin: 0px;
168 }
169}
170
8903b17b
BB
171//Bootstrap needs tooltips to be specified. Moodle does not use this
172.tooltip {
173 .opacity(100);
174 display: inline;
175}
ddfc16c8 176
2ea3e433
SH
177// Allow the custom menu to expand/collapse when the user hovers over it with JS disabled.
178body:not(.jsenabled) .dropdown:hover > .dropdown-menu {
179 display: block;
180 margin-top: -6px; // We need to move it up to counter the arrows as they introduce hover bugs.
181}
182
ddfc16c8 183// Extends bootstrapbase/less/bootstrap/navbar.less
ce655785 184// to enable scroll in the language menu.
2ea3e433 185body:not(.jsenabled) .langmenu:hover > .dropdown-menu,
ce655785 186.langmenu.open > .dropdown-menu {
ddfc16c8 187 display: block;
ce655785 188 max-height: 150px;
ddfc16c8 189 overflow-y: auto;
b3f82770
ME
190}
191
192// Extends bootstrapbase/less/bootstrap/type.less
193// to enable ol lists to use a larger number set.
194
195ol {
196 margin: 0 0 @baseLineHeight / 2 2.5em;
197}
198
199.dir-rtl {
200 ol {
201 margin: 0 2.5em @baseLineHeight / 2 0;
202 }
d3a93557 203}