18726b1988dfc5fce77b05f988d5bb046743a363
[moodle.git] / theme / bootstrapbase / less / moodle / undo.less
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  */
8 // .label vs .label
10 li.activity.label,
11 .file-picker td.label {
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;
21 }
22 .file-picker td.label {
23     display: table-cell;
24     text-align: right;
25 }
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 }
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  */
56 li.section.hidden,
57 .block.hidden,
58 .block.invisible {
59     visibility: visible;
60     display: block;
61 }
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  */
73 #turnitintool_style .row,
74 .forumpost .row {
75     margin-left: 0 !important;
76     // not sure if this needs !important
77 }
78 #turnitintool_style .row:before,
79 #turnitintool_style .row:after,
80 .forumpost .row:before,
81 .forumpost .row:after {
82     content: none;
83 }
84 /* fieldset.hidden vs .hidden
85  *
86  * Moodle uses fieldset.hidden for mforms, to signify a collection of
87  * form elements that don't have a box drawn round them. Bootstrap
88  * uses hidden for stuff that is hidden in various responsive modes.
89  *
90  * Relatedly, there is also fieldset.invisiblefieldset which hides the
91  * border and sets the display to inline.
92  *
93  * Originally this just set block and visible, but it is used
94  * in random question dialogue in Quiz,
95  * that dialogue is hidden and shown, so when hidden the
96  * above workaround leaves you with a button floating around
97  */
99 fieldset.hidden {
100     display: inherit;
101     visibility: inherit;
105 /* .controls vs .controls
106  *
107  * in expanding course list, can be fixed in renderer though
108  */
111 /* .btn vs .btn
112  *
113  * links, inputs and buttons are commonly styled with .btn in
114  * bootstrap but it seems that some buttons in Moodle are
115  * wrapped in div.btn e.g. the login block's "login" button
116  */
118 div.c1.btn {
119     display: block;
120     padding: 0;
121     margin-bottom: 0;
122     font-size: inherit;
123     line-height: inherit;
124     text-align: inherit;
125     vertical-align: inherit;
126     cursor: default;
127     color: inherit;
128     text-shadow: inherit;
129     background-color: inherit;
130     background-image: none;
131     background-repeat: no-repeat;
132     border: none;
133     border-radius: 0;
134     box-shadow: none;
136 /* .container vs .container
137  *
138  * bootstrap uses .container to set the width of the layout at 960px or so, Moodle uses it
139  * in the Quiz to contain the questions to add. If you don't overule the Bootstrap code,
140  * it becomes near unuseable.
141  */
143 #questionbank + .container {
144     width: auto;
146 // In Moodle .hide is the eye icon
147 // In Bootstrap it hides things
148 img.hide {
149     display: inherit;
152 // Bootstrap adds a background sprite to anything with classname starting "icon-".
153 // we only want to load it if we use them in content.
154 .icon-bar,
155 img.icon-post,
156 img.icon-info,
157 img.icon-warn,
158 img.icon-pre {
159     background-image: none;
162 // Weird big margins on login page
163 .loginbox.twocolumns,
164 .loginbox.twocolumns {
165     .signuppanel,
166     .loginpanel {
167         padding: 0px;
168         margin: 0px;
169     }
172 //Bootstrap needs tooltips to be specified. Moodle does not use this
173 .tooltip {
174     .opacity(100);
175     display: inline;
178 // Allow the custom menu to expand/collapse when the user hovers over it with JS disabled.
179 body:not(.jsenabled) .dropdown:hover > .dropdown-menu {
180     display: block;
181     margin-top: -6px; // We need to move it up to counter the arrows as they introduce hover bugs.
184 // Extends bootstrapbase/less/bootstrap/navbar.less
185 // to enable scroll in the language menu.
186 body:not(.jsenabled) .langmenu:hover > .dropdown-menu,
187 .langmenu.open > .dropdown-menu {
188     display: block;
189     max-height: 150px;
190     overflow-y: auto;
193 // Extends bootstrapbase/less/bootstrap/type.less
194 // to enable ol lists to use a larger number set.
196 ol {
197     margin: 0 0 @baseLineHeight / 2 2.5em;
200 .dir-rtl {
201     ol {
202         margin: 0 2.5em @baseLineHeight / 2 0;
203     }