MDL-55071 stylelint: Config & grunt task for scss
[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 {
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}
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 @mixin 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 {
59 visibility: visible;
60 display: block;
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 */
72
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 */
98
99fieldset.hidden {
100 display: inherit;
101 visibility: inherit;
102}
103
104
105/* .controls vs .controls
106 *
107 * in expanding course list, can be fixed in renderer though
108 */
109
110
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 */
117
118div.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;
135}
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 */
142
143#questionbank + .container {
144 width: auto;
145}
536f0460
DW
146
147// Allow the custom menu to expand/collapse when the user hovers over it with JS disabled.
148body:not(.jsenabled) .dropdown:hover > .dropdown-menu {
149 display: block;
150 margin-top: -6px; // We need to move it up to counter the arrows as they introduce hover bugs.
151}
152
153// Extends bootstrapbase/less/bootstrap/navbar.less
154// to enable scroll in the language menu.
155body:not(.jsenabled) .langmenu:hover > .dropdown-menu,
156.langmenu.open > .dropdown-menu {
157 display: block;
158 max-height: 150px;
159 overflow-y: auto;
160}
161
162// Extends bootstrapbase/less/bootstrap/type.less
163// to enable ol lists to use a larger number set.
164
165ol {
da92b738 166 margin: 0 0 $line-height-base / 2 2.5em;
072364df 167}