MDL-62171 Theme boost: modal accessibility focus
[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 // Reset the outline on a focussed modal for accessibility.
34 .modal:focus {
35     outline: rgb(94, 158, 215) auto 5px;
36 }
38 /* block.invisible vs .invisible
39  * block.hidden vs .invisible
40  *
41  * uses .invisible where the rest of Moodle uses .dimmed
42  * fixible in block renderer?
43  *
44  * There's seems to be even more naming confusion here since,
45  * blocks can be actually 'visible' (or not) to students,
46  * marked 'visible' but really just dimmed to indicate to editors
47  * that students can't see them or  'visible' to the user who
48  * collapses them, 'visible' if you have the right role and in
49  * different circumstances different sections of a block can
50  * be 'visible' or not.
51  *
52  * currently worked around in renderers.php function block{}
53  * by rewriting the class name "invisible" to "dimmed",
54  * though the blocks don't look particularly different apart
55  * from their contents disappearing. Maybe try .muted? or
56  * dimming all the edit icons apart from unhide, might be a
57  * nice effect, though they'd still be active. Maybe reverse
58  * it to white?
59  */
61 li.section.hidden,
62 .block.hidden,
63 .block.invisible {
64     visibility: visible;
65     display: block;
66 }
69 /* .row vs .row
70  *
71  * very tricky to track down this when it goes wrong,
72  * since the styles are applied to generated content
73  *
74  * basically if you see things shifted left or right compared
75  * with where they should be check for a .row
76  */
77 #turnitintool_style .row,
78 .forumpost .row {
79     margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
80     // not sure if this needs !important
81 }
82 #turnitintool_style .row:before,
83 #turnitintool_style .row:after,
84 .forumpost .row:before,
85 .forumpost .row:after {
86     content: none;
87 }
88 /* fieldset.hidden vs .hidden
89  *
90  * Moodle uses fieldset.hidden for mforms, to signify a collection of
91  * form elements that don't have a box drawn round them. Bootstrap
92  * uses hidden for stuff that is hidden in various responsive modes.
93  *
94  * Relatedly, there is also fieldset.invisiblefieldset which hides the
95  * border and sets the display to inline.
96  *
97  * Originally this just set block and visible, but it is used
98  * in random question dialogue in Quiz,
99  * that dialogue is hidden and shown, so when hidden the
100  * above workaround leaves you with a button floating around
101  */
103 fieldset.hidden {
104     display: inherit;
105     visibility: inherit;
108 /* .container vs .container
109  *
110  * bootstrap uses .container to set the width of the layout at 960px or so, Moodle uses it
111  * in the Quiz to contain the questions to add. If you don't overule the Bootstrap code,
112  * it becomes near unuseable.
113  */
115 #questionbank + .container {
116     width: auto;
118 // In Moodle .hide is the eye icon
119 // In Bootstrap it hides things
120 img.hide {
121     display: inherit;
124 // Bootstrap adds a background sprite to anything with classname starting "icon-".
125 // we only want to load it if we use them in content.
126 .icon-bar,
127 img.icon-post,
128 img.icon-info,
129 img.icon-warn,
130 img.icon-pre {
131     background-image: none;
134 // Weird big margins on login page
135 .loginbox.twocolumns,
136 .loginbox.twocolumns {
137     .signuppanel,
138     .loginpanel {
139         padding: 0;
140         margin: 0;
141     }
144 //Bootstrap needs tooltips to be specified. Moodle does not use this
145 .tooltip {
146     .opacity(100);
147     display: inline;
150 // Allow the custom menu to expand/collapse when the user hovers over it with JS disabled.
151 body:not(.jsenabled) .dropdown:hover > .dropdown-menu {
152     display: block;
153     margin-top: -6px; // We need to move it up to counter the arrows as they introduce hover bugs.
156 // Extends bootstrapbase/less/bootstrap/navbar.less
157 // to enable scroll in the language menu.
158 body:not(.jsenabled) .langmenu:hover > .dropdown-menu,
159 .langmenu.open > .dropdown-menu {
160     display: block;
161     max-height: 150px;
162     overflow-y: auto;
165 // Extends bootstrapbase/less/bootstrap/type.less
166 // to enable ol lists to use a larger number set.
168 ol {
169     margin: 0 0 @baseLineHeight / 2 2.5em;