theme/bootstrapbase/less/moodle/forms.less

   1 /**
   2  * Moodle forms HTML isn't changeable via renderers (yet?) so this
   3  * .less file imports styles from the bootstrap @variables file and
   4  * adds them to the existing Moodle form CSS ids and classes.
   5  *
   6  */
   7
   8 form {
   9     margin: 0;
  10 }
  11 .mform fieldset .advancedbutton {
  12     text-align: right;
  13 }
  14 .jsenabled .mform .containsadvancedelements .advanced {
  15     display: none;
  16 }
  17 .mform .containsadvancedelements .advanced.show {
  18     display: block;
  19 }
  20 .mform fieldset.group {
  21     margin-bottom: 0;
  22 }
  23 .mform fieldset.error {
  24     border: 1px solid @errorText;
  25 }
  26 .mform span.error,
  27 #adminsettings span.error {
  28     display: inline-block;
  29     border: 1px solid @errorBorder;
  30     border-radius: 4px;
  31     background-color: @errorBackground;
  32     padding: 4px;
  33     margin-bottom: 4px;
  34 }
  35 .mform fieldset.collapsible legend a.fheader {
  36     padding: 0 5px 0 20px;
  37     margin-left: -20px;
  38     background: url([[pix:t/expanded]]) left center no-repeat;
  39 }
  40 .mform fieldset.collapsed legend a.fheader {
  41     /*rtl:raw:
  42     background-image: url([[pix:t/collapsed_rtl]]);
  43     */
  44     /*rtl:remove*/
  45     background-image: url([[pix:t/collapsed]]);
  46 }
  47 .jsenabled .mform .collapsed .fcontainer {
  48     display: none;
  49 }
  50
  51 .mform .fitem .fitemtitle div {
  52     display: inline;
  53 }
  54 #adminsettings .error,
  55 .loginpanel .error,
  56 .mform .error {
  57     color: @errorText;
  58 }
  59 .mform .fdescription.required {
  60     margin-left: @horizontalComponentOffset;
  61     & > .icon {
  62         width: 8px;
  63         height: 12px;
  64     }
  65 }
  66 .mform .fpassword .unmask {
  67     display: inline-block;
  68     margin-left: 0.5em;
  69     & > input {
  70         margin: 0;
  71     }
  72     & > label {
  73         display: inline-block;
  74     }
  75 }
  76 .mform label {
  77     display: inline-block;
  78 }
  79
  80 .mform .iconhelp {
  81     margin-left: 4px;
  82 }
  83 .mform .ftextarea #id_alltext {
  84     width: 100%;
  85 }
  86 .mform ul.file-list {
  87     padding: 0;
  88     margin: 0;
  89     list-style: none;
  90 }
  91 .mform label .req,
  92 .mform label .adv {
  93     cursor: help;
  94     & > .icon {
  95         width: 8px;
  96         height: 12px;
  97         margin-left: 3px;
  98     }
  99 }
 100 .mform .fcheckbox input {
 101     margin-left: 0;
 102 }
 103 .mform .fcheckbox > span,
 104 .mform .fradio > span,
 105 .mform .fgroup > span,
 106 .mform .fadvcheckbox > span {
 107     display: inline-block;
 108     margin-top: 5px;
 109 }
 110 .mform .fitem fieldset.fgroup label,
 111 .mform fieldset.fdate_selector label {
 112     display: inline;
 113     float: none;
 114 }
 115 .mform .helplink img {
 116     margin: 0 .45em;
 117     padding: 0;
 118 }
 119 .mform legend .helplink img {
 120     margin: 0 .2em;
 121 }
 122 .singleselect label {
 123     margin-right: .3em;
 124 }
 125
 126 .custom-select {
 127     max-width: 100%;
 128 }
 129
 130 // Make the submit button align with the .custom-select element.
 131 .custom-select + input[type="submit"] {
 132     margin: 0 0 0 5px;
 133 }
 134
 135 #portfolio-add-button {
 136     display: inline;
 137 }
 138
 139 // Copying in Bootstrap styles.
 140 .form-item,
 141 .mform .fitem {
 142     .form-horizontal .control-group;
 143     margin-bottom: 10px;
 144     // Theres's a mysterious extra 10px inside this item,
 145     // so reduce margin by 10px from 20px standard to compensate.
 146 }
 147 .form-item .form-label,
 148 .mform .fitem div.fitemtitle {
 149     .form-horizontal .control-label
 150 }
 151 .form-defaultinfo,
 152 .form-label .form-shortname {
 153     .muted;
 154 }
 155 .form-label .form-shortname {
 156     font-size: @fontSizeMini;
 157     display: block;
 158 }
 159 .form-item .form-setting,
 160 .form-item .form-description,
 161 .mform .fitem .felement,
 162 #page-mod-forum-search .c1 {
 163     .form-horizontal .controls
 164 }
 165 .form-inline label:not(.sr-only):not(.accesshide) + select {
 166     margin-left: 0.5rem;
 167 }
 168
 169 .formsettingheading {
 170     .form-horizontal .help-block
 171 }
 172 // Moodle doesn't differentiate between what Bootstrap calls
 173 // .uneditable-inputs and form help text. Styling them both as
 174 // uneditable looks ugly, styling both as form help is fairly
 175 // subtle in it's impact. Going for the latter as the best option.
 176 .form-item .form-description,
 177 .felement.fstatic {
 178     .help-block;
 179     padding-top: 5px;
 180 }
 181 .form-item .form-description {
 182     padding-top: 0;
 183 }
 184 .fitem .fstaticlabel {
 185     font-weight: bold;
 186 }
 187
 188 // Pale grey container for submit buttons.
 189 table#form td.submit,
 190 .form-buttons,
 191 .path-admin .buttons,
 192 #fitem_id_submitbutton,
 193 .fp-content-center form + div,
 194 div.backup-section + form,
 195 #fgroup_id_buttonar {
 196     .form-actions;
 197     padding-left: 0;
 198 }
 199 .path-admin .buttons,
 200 .form-buttons { // Add back the padding it would usually get from being inside a .form-horizontal.
 201     padding-left: @horizontalComponentOffset;
 202 }
 203 .form-item .form-setting .form-checkbox.defaultsnext {
 204     // Need to specify .defaultsnext and the .form-checkbox class
 205     // is somewhat randomly re-used on various actual checkboxes
 206     // throughout the admin forms, instead of on the wrapper div.
 207     margin-top: 5px; // Push down checkboxes to align.
 208     display: inline-block; // So above style sticks.
 209 }
 210
 211 #adminsettings h3 {
 212     // Copied from bootstrap/forms.less tag legend.
 213     display: block;
 214     width: 100%;
 215     padding: 0;
 216     margin-bottom: @baseLineHeight;
 217     font-size: @baseFontSize * 1.5;
 218     line-height: @baseLineHeight * 2;
 219     color: @grayDark;
 220     border: 0;
 221     border-bottom: 1px solid #e5e5e5;
 222 }
 223 .mform legend a,
 224 .mform legend a:hover {
 225     color: @textColor;
 226     text-decoration: none;
 227 }
 228
 229 #page-grade-edit-outcome-course .courseoutcomes {
 230     margin-left: auto;
 231     margin-right: auto;
 232     width: 100%;
 233 }
 234 #page-grade-edit-outcome-course .courseoutcomes td {
 235     text-align: center;
 236 }
 237
 238 .mdl-right > label {
 239     // Workaround for repository pop-up because the : are outside the label,
 240     // can/should be fixed in filemanager renderers.
 241     display: inline-block;
 242 }
 243
 244 // Checkbox labels. Bootstrap puts the associated checkbox inside the label.
 245 // Moodle puts it beside the label, so we need to make it inline-block
 246 // to keep it on the same horizontal level.
 247 input[type="radio"] + label,
 248 input[type="checkbox"] + label {
 249     display: inline;
 250     padding-left: 0.2em;
 251 }
 252 input[type="radio"],
 253 input[type="checkbox"] {
 254     margin-top: -4px; // Dodgy hack, must be better way.
 255     margin-right: 7px;
 256 }
 257 .singleselect {
 258     display: inline-block;
 259     form,
 260     select {
 261         margin: 0;
 262     }
 263 }
 264 .form-item .form-label label {
 265     margin-bottom: 0;
 266 }
 267 .felement.ffilepicker {
 268     margin-top: 5px;
 269 }
 270 div#dateselector-calendar-panel {
 271     z-index: 3100; /* Set higher than the z-index of the filemanager - see MDL-39047. */
 272 }
 273
 274 fieldset.coursesearchbox label {
 275     display: inline;
 276 }
 277
 278 /**
 279  * Show the labels above text editors and file managers except on wide screens.
 280  */
 281 #region-main .mform:not(.unresponsive) .fitem .fitemtitle label {
 282     font-weight: bold;
 283 }
 284 .makeFormsVertical() {
 285     &:not(.unresponsive) {
 286         .fitem {
 287             .fitemtitle {
 288                 display: block;
 289                 margin-top: 4px;
 290                 margin-bottom: 4px;
 291                 text-align: left;
 292                 width: 100%;
 293             }
 294             .felement {
 295                 margin-left: 0;
 296                 width: 100%;
 297                 float: left;
 298                 padding-left: 0;
 299                 padding-right: 0;
 300             }
 301             .fstatic:empty {
 302                 display: none;
 303             }
 304             .fcheckbox > span,
 305             .fradio > span,
 306             .fgroup > span {
 307                 margin-top: 4px;
 308             }
 309
 310         }
 311         .femptylabel {
 312             .fitemtitle {
 313                 display: inline-block;
 314                 width: auto;
 315                 margin-right: 8px;
 316             }
 317             .felement {
 318                 display: inline-block;
 319                 margin-top: 4px;
 320                 padding-top: 5px;
 321             }
 322         }
 323         .fitem_fcheckbox {
 324             .fitemtitle,
 325             .felement {
 326                 display: inline-block;
 327                 width: auto;
 328             }
 329             .felement {
 330                 padding: 6px;
 331             }
 332         }
 333     }
 334 }
 335
 336 /**
 337  * Forms marked as vertical always display this way;
 338  */
 339 .mform.full-width-labels {
 340     .makeFormsVertical;
 341 }
 342
 343 /**
 344  * Make forms vertical when the screen is less than 1200px;
 345  */
 346 @media (max-width: 1199px) {
 347     body #region-main .mform {
 348         .makeFormsVertical;
 349     }
 350 }
 351
 352
 353 /**
 354  * Make forms vertical when the screen is less than 1474px AND both side-pre and side-post contain blocks.
 355  * This is an extra special media rule.
 356  * It causes forms to show vertically when the screen size is calculated as:
 357  * 1199px + (1199px * 23%)
 358  * Where 23% is the width of span3
 359  * Full calculation is:
 360  *   @maxWidthForVerticalForms: 1199px * (unit(((@fluidGridColumnWidth1200 * 3) +
 361  *    (@fluidGridGutterWidth * (3 - 1)))) / 100) + 1199px;
 362  */
 363 @maxWidthForVerticalForms: 1474px;
 364
 365 @media (max-width: @maxWidthForVerticalForms) {
 366     .used-region-side-pre.used-region-side-post #region-main .mform {
 367         .makeFormsVertical;
 368     }
 369 }
 370
 371 /* Section and module editing forms contain special JS components for the
 372    availability system (if enabled). */
 373 #id_availabilityconditionsjson[aria-hidden=true],
 374 .availability-field [aria-hidden=true] {
 375     display: none;
 376 }
 377 .availability-eye,
 378 .availability-delete {
 379     margin-right: 8px;
 380 }
 381 /* Eye icons in front of child lists are aligned specially. */
 382 .availability-list > .availability-eye img {
 383     vertical-align: top;
 384     margin-top: 12px;
 385 }
 386 .availability-plugincontrols {
 387     min-height: 40px;
 388     padding: 2px 0 0 4px;
 389     background: none repeat scroll 0% 0% @wellBackground;
 390     border: 1px solid @grayLighter;
 391     border-radius: 4px;
 392     display: inline-block;
 393     margin-right: 8px;
 394     select {
 395         width: auto;
 396         max-width: 200px;
 397     }
 398 }
 399 .availability-field .availability-plugincontrols .availability-group select {
 400     max-width: 12rem;
 401 }
 402 /* Nested section is grey. */
 403 .availability-childlist > .availability-inner {
 404     display: inline-block;
 405     background: @wellBackground;
 406     border: 1px solid @grayLighter;
 407     border-radius: 4px;
 408     padding: 6px;
 409     margin-bottom: 6px;
 410 }
 411 /* Second (and more) levels of nested sections are white. */
 412 .availability-childlist .availability-childlist > .availability-inner {
 413     background: white;
 414 }
 415 /* Default form styling colours all text red. With availability conditions
 416    this looks excessive as we show 'Invalid' markers in specific places. */
 417 .mform .error .availability-field {
 418     color: @textColor;
 419 }
 420
 421 /* This dialogue is used to add an availability condition. */
 422 .availability-dialogue {
 423     .moodle-dialogue .moodle-dialogue-bd {
 424         padding-left: 0;
 425         padding-right: 0;
 426         padding-bottom: 2px;
 427     }
 428     ul {
 429         display: block;
 430         margin: 0;
 431     }
 432     li {
 433         display: block;
 434         list-style-type: none;
 435         padding: 0 0 4px;
 436         clear: both;
 437         border-bottom: 1px solid @grayLighter;
 438         margin-bottom: 4px;
 439     }
 440     ul button {
 441         float: left;
 442         margin-left: 1em;
 443         min-width: 140px;
 444         margin-top: 4px;
 445     }
 446     label {
 447         margin-left: 170px;
 448         margin-right: 1em;
 449         margin-bottom: 0;
 450     }
 451     .availability-buttons button {
 452         margin-left: 1em;
 453         margin-right: 1em;
 454         margin-top: 4px;
 455     }
 456 }
 457
 458 /* Revert to the non-fixed width where a textarea has the number of columns
 459    specified, or an input has it's size specified. */
 460 textarea[cols],
 461 input[size] {
 462     width: auto;
 463 }
 464
 465 /* Custom styles for autocomplete form element */
 466
 467 [data-fieldtype=autocomplete] select,
 468 [data-fieldtype=tags] select,
 469 select.form-autocomplete-original-select {
 470     visibility: hidden;
 471     overflow: hidden;
 472     width: 15rem;
 473     height: 3 * @baseLineHeight + @baseFontSize / 2;
 474     margin: 0;
 475     margin-bottom: 0.2em;
 476     padding: 0;
 477     border: 0;
 478     vertical-align: top;
 479 }
 480 .form-autocomplete-container {
 481     display: inline-block;
 482     min-height: 4.2rem;
 483 }
 484 .form-autocomplete-selection {
 485     margin: 0.2em;
 486     min-height: @baseLineHeight + @baseFontSize / 2;
 487 }
 488 .form-autocomplete-multiple [role=listitem] {
 489     cursor: pointer;
 490 }
 491
 492 .form-autocomplete-suggestions {
 493     position: absolute;
 494     background-color: white;
 495     border: 2px solid @grayLighter;
 496     border-radius: 3px;
 497     min-width: 206px;
 498     max-height: 20em;
 499     overflow: auto;
 500     margin: 0;
 501     padding: 0;
 502     margin-top: -0.2em;
 503     z-index: 1;
 504 }
 505 .form-autocomplete-suggestions li {
 506     list-style-type: none;
 507     padding: 0.2em;
 508     margin: 0;
 509     cursor: pointer;
 510     color: @textColor;
 511 }
 512 .form-autocomplete-suggestions li:hover {
 513     background-color: lighten(@dropdownLinkBackgroundActive, 15%);
 514     color: @dropdownLinkColorActive;
 515 }
 516 .form-autocomplete-suggestions li[aria-selected=true] {
 517     background-color: darken(@navbarBackground, 5%);
 518     color: @gray;
 519 }
 520
 521 .form-autocomplete-downarrow {
 522     color: @textColor;
 523     position: relative;
 524     top: -0.3em;
 525     left: -1.5em;
 526     cursor: pointer;
 527 }
 528
 529 .form-autocomplete-selection:focus {
 530     outline: none;
 531 }
 532 .form-autocomplete-selection [data-active-selection=true] {
 533     padding: 0.5em;
 534     font-size: large;
 535 }
 536
 537 textarea[data-auto-rows] {
 538     overflow-x: hidden;
 539 }
 540
 541 div[data-passwordunmask="wrapper"] {
 542     height: 30px;
 543     line-height: 30px;
 544     margin-bottom: 10px;
 545 }
 546
 547 // Styles for the JS file types browser provided by the "filetypes" element.
 548 [data-filetypesbrowserbody] {
 549     [aria-expanded="false"] > [role="group"],
 550     [aria-expanded="false"] [data-filetypesbrowserfeature="hideifcollapsed"],
 551     [aria-expanded="true"] [data-filetypesbrowserfeature="hideifexpanded"] {
 552         display: none;
 553     }
 554 }