weekly release 4.0dev
[moodle.git] / theme / boost / scss / moodle / undo.scss
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     text-align: inherit;
22 }
24 .file-picker td.label {
25     display: table-cell;
26     text-align: right;
27 }
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 }
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  */
58 li.section.hidden,
59 .block.hidden,
60 .block.invisible {
61     visibility: visible;
62     display: block;
63 }
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  */
75 .forumpost .row {
76     margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
77 }
79 .forumpost .row:before,
80 .forumpost .row:after {
81     content: none;
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  */
98 fieldset.hidden {
99     display: inherit;
100     visibility: inherit;
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  */
110 #questionbank + .container {
111     width: auto;
114 // Allow the custom menu to expand/collapse when the user hovers over it with JS disabled.
115 body: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.
120 // Enable scroll in the language menu.
121 body:not(.jsenabled) .langmenu:hover > .dropdown-menu,
122 .langmenu.open > .dropdown-menu {
123     display: block;
124     max-height: 150px;
125     overflow-y: auto;
128 // Set menus in the fixed header to scroll vertically when they are longer than the page.
129 .navbar.fixed-top .dropdown .dropdown-menu {
130     max-height: calc(100vh - #{$navbar-height});
131     overflow-y: auto;
134 // Dont allow z-index creep anywhere.
135 .page-item {
136     &.active .page-link {
137         @include plain-hover-focus {
138             z-index: inherit;
139         }
140     }
142 /* Force positioning of popover arrows.
143  *
144  * The Css prefixer used in Moodle does not support complex calc statements used
145  * in Bootstrap 4 CSS. For example:
146  * calc((0.5rem + 1px) * -1); is stripped out by lib/php-css-parser/Parser.php.
147  * See MDL-61879. For now the arrow positions of popovers are fixed until this is resolved.
148  */
149 .bs-popover-right .arrow,
150 .bs-popover-auto[x-placement^="right"] .arrow {
151     left: -9px;
153 .bs-popover-left .arrow,
154 .bs-popover-auto[x-placement^="left"] .arrow {
155     right: -9px;
157 .bs-popover-top .arrow,
158 .bs-popover-auto[x-placement^="top"] .arrow {
159     bottom: -9px;
161 .bs-popover-bottom .arrow,
162 .bs-popover-auto[x-placement^="bottom"] .arrow {
163     top: -9px;
166 // Fixes an issue on Safari when the .custom-select is inside a .card class.
167 .custom-select {
168     word-wrap: normal;
171 /* Add commented out carousel transistions back in.
172  *
173  * The Css prefixer used in Moodle breaks on @supports syntax, See MDL-61515.
174  */
175 .carousel-item-next.carousel-item-left,
176 .carousel-item-prev.carousel-item-right {
177     transform: translateX(0);
179 .carousel-item-next,
180 .active.carousel-item-right {
181     transform: translateX(100%);
183 .carousel-item-prev,
184 .active.carousel-item-left {
185     transform: translateX(-100%);
188 /**
189  * Reset all of the forced style on the page.
190  * - Remove borders on header and content.
191  * - Remove most of the vertical padding.
192  * - Make the content region flex grow so it pushes things like the
193  *   next activity selector to the bottom of the page.
194  */
195 $allow-reset-style: true !default;
197 @if $allow-reset-style {
198     body.reset-style {
199         #page-header {
200             .card {
201                 border: none;
203                 .page-header-headings {
204                     h1 {
205                         margin-bottom: 0;
206                     }
207                 }
209                 .card-body {
210                     @include media-breakpoint-down(sm) {
211                         padding-left: 0;
212                         padding-right: 0;
213                     }
214                 }
215             }
217             & > div {
218                 padding-top: 0 !important;  /* stylelint-disable-line declaration-no-important */
219                 padding-bottom: 0 !important;  /* stylelint-disable-line declaration-no-important */
220             }
221         }
223         #page-content {
224             padding-bottom: 0 !important;  /* stylelint-disable-line declaration-no-important */
226             #region-main-box {
227                 #region-main {
228                     border: none;
229                     display: inline-flex;
230                     flex-direction: column;
231                     padding: 0;
232                     height: 100%;
233                     width: 100%;
234                     padding-left: $card-spacer-x;
235                     padding-right: $card-spacer-x;
236                     vertical-align: top;
238                     div[role="main"] {
239                         flex: 1 0 auto;
240                     }
242                     .activity-navigation {
243                         overflow: hidden;
244                     }
246                     &.has-blocks {
247                         width: calc(100% - #{$blocks-plus-gutter});
249                         @include media-breakpoint-down(lg) {
250                             width: 100%;
251                         }
252                     }
254                     @include media-breakpoint-down(sm) {
255                         padding-left: 0;
256                         padding-right: 0;
257                     }
258                 }
260                 [data-region="blocks-column"] {
261                     margin-left: auto;
262                 }
264                 @include media-breakpoint-down(lg) {
265                     display: flex;
266                     flex-direction: column;
267                 }
268             }
269         }
271         select,
272         input,
273         textarea,
274         .btn:not(.btn-icon) {
275             border-radius: $border-radius-lg;
276         }
277     }