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  */
   7
   8 // .label vs .label
   9
  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 }
  23
  24 .file-picker td.label {
  25     display: table-cell;
  26     text-align: right;
  27 }
  28
  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 }
  34
  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  */
  57
  58 li.section.hidden,
  59 .block.hidden,
  60 .block.invisible {
  61     visibility: visible;
  62     display: block;
  63 }
  64
  65
  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  */
  74
  75 .forumpost .row {
  76     margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
  77 }
  78
  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  */
  97
  98 fieldset.hidden {
  99     display: inherit;
 100     visibility: inherit;
 101 }
 102
 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  */
 109
 110 #questionbank + .container {
 111     width: auto;
 112 }
 113
 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.
 118 }
 119
 120 // Extends bootstrapbase/less/bootstrap/navbar.less
 121 // to enable scroll in the language menu.
 122 body:not(.jsenabled) .langmenu:hover > .dropdown-menu,
 123 .langmenu.open > .dropdown-menu {
 124     display: block;
 125     max-height: 150px;
 126     overflow-y: auto;
 127 }
 128
 129 // Set menus in the fixed header to scroll vertically when they are longer than the page.
 130 .navbar.fixed-top .dropdown .dropdown-menu {
 131     max-height: calc(100vh - #{$navbar-height});
 132     overflow-y: auto;
 133 }
 134
 135 // Dont allow z-index creep anywhere.
 136 .page-item {
 137     &.active .page-link {
 138         @include plain-hover-focus {
 139             z-index: inherit;
 140         }
 141     }
 142 }
 143 /* Force positioning of popover arrows.
 144  *
 145  * The Css prefixer used in Moodle does not support complex calc statements used
 146  * in Bootstrap 4 CSS. For example:
 147  * calc((0.5rem + 1px) * -1); is stripped out by lib/php-css-parser/Parser.php.
 148  * See MDL-61879. For now the arrow positions of popovers are fixed until this is resolved.
 149  */
 150 .bs-popover-right .arrow,
 151 .bs-popover-auto[x-placement^="right"] .arrow {
 152     left: -9px;
 153 }
 154 .bs-popover-left .arrow,
 155 .bs-popover-auto[x-placement^="left"] .arrow {
 156     right: -9px;
 157 }
 158 .bs-popover-top .arrow,
 159 .bs-popover-auto[x-placement^="top"] .arrow {
 160     bottom: -9px;
 161 }
 162 .bs-popover-bottom .arrow,
 163 .bs-popover-auto[x-placement^="bottom"] .arrow {
 164     top: -9px;
 165 }
 166
 167 // Fixes an issue on Safari when the .custom-select is inside a .card class.
 168 .custom-select {
 169     word-wrap: normal;
 170 }
 171
 172 /* Add commented out carousel transistions back in.
 173  *
 174  * The Css prefixer used in Moodle breaks on @supports syntax, See MDL-61515.
 175  */
 176 .carousel-item-next.carousel-item-left,
 177 .carousel-item-prev.carousel-item-right {
 178     transform: translateX(0);
 179 }
 180 .carousel-item-next,
 181 .active.carousel-item-right {
 182     transform: translateX(100%);
 183 }
 184 .carousel-item-prev,
 185 .active.carousel-item-left {
 186     transform: translateX(-100%);
 187 }