[Summary view] [Print] [Text view]

   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]]) 2px center no-repeat;
  39  }
  40  .dir-rtl .mform fieldset.collapsible legend a.fheader {
  41      padding: 0 20px 0 5px;
  42      margin-right: -20px;
  43      margin-left: 0;
  44      background-position: right center;
  45  }
  46  .mform fieldset.collapsed legend a.fheader {
  47      background-image: url([[pix:t/collapsed]]);
  48  }
  49  .dir-rtl .mform fieldset.collapsed legend a.fheader {
  50      background-image: url([[pix:t/collapsed_rtl]]);
  51  }
  52  .jsenabled .mform .collapsed .fcontainer {
  53      display: none;
  54  }
  55  
  56  .mform .fitem .fitemtitle div {
  57      display: inline;
  58  }
  59  #adminsettings .error,
  60  .loginpanel .error,
  61  .mform .error {
  62      color: @errorText;
  63  }
  64  .mform .fdescription.required {
  65      margin-left: @horizontalComponentOffset;
  66  }
  67  .mform .fpassword .unmask {
  68      display: inline-block;
  69      margin-left: 0.5em;
  70      & > input {
  71          margin: 0;
  72      }
  73      & > label {
  74          display: inline-block;
  75      }
  76  }
  77  .mform label {
  78      display: inline-block;
  79  }
  80  
  81  .mform .iconhelp {
  82      margin-left: 4px;
  83  }
  84  .dir-rtl .mform .iconhelp {
  85      margin-right: 4px;
  86  }
  87  .mform .ftextarea #id_alltext {
  88      width: 100%;
  89  }
  90  .mform ul.file-list {
  91      padding: 0;
  92      margin: 0;
  93      list-style: none;
  94  }
  95  .mform label .req,
  96  .mform label .adv {
  97      cursor: help;
  98  }
  99  .mform .fcheckbox input {
 100      margin-left: 0;
 101  }
 102  .mform .fcheckbox > span,
 103  .mform .fradio > span,
 104  .mform .fgroup > span {
 105      display: inline-block;
 106      margin-top: 5px;
 107  }
 108  .mform .fitem fieldset.fgroup label,
 109  .mform fieldset.fdate_selector label {
 110      display: inline;
 111      float: none;
 112      width: auto;
 113  }
 114  .mform .ftags label.accesshide {
 115      display: block;
 116      position: static;
 117  }
 118  .mform .ftags select {
 119      margin-bottom: 0.7em;
 120      min-width: 22em;
 121  }
 122  .mform .helplink img {
 123      margin: 0 .45em;
 124      padding: 0;
 125  }
 126  .mform legend .helplink img {
 127      margin: 0 .2em;
 128  }
 129  .singleselect label {
 130      margin-right: .3em;
 131  }
 132  .dir-rtl .singleselect label {
 133      margin-left: .3em;
 134      margin-right: 0;
 135  }
 136  input#id_externalurl {
 137      direction: ltr;
 138  }
 139  #portfolio-add-button {
 140      display: inline;
 141  }
 142  
 143  // Copying in Bootstrap styles.
 144  .form-item,
 145  .mform .fitem {
 146      .form-horizontal .control-group;
 147      margin-bottom: 10px;
 148      // Theres's a mysterious extra 10px inside this item,
 149      // so reduce margin by 10px from 20px standard to compensate.
 150  }
 151  .form-item .form-label,
 152  .mform .fitem div.fitemtitle {
 153      .form-horizontal .control-label
 154  }
 155  .dir-rtl {
 156      .form-item .form-label,
 157      .mform .fitem div.fitemtitle {
 158          float: right;
 159          text-align: left;
 160      }
 161  }
 162  .form-defaultinfo,
 163  .form-label .form-shortname {
 164      .muted;
 165  }
 166  .form-label .form-shortname {
 167      font-size: @fontSizeMini;
 168      display: block;
 169  }
 170  .dir-rtl .form-label .form-shortname {
 171      text-align: left;
 172  }
 173  .form-item .form-setting,
 174  .form-item .form-description,
 175  .mform .fitem .felement,
 176  #page-mod-forum-search .c1 {
 177      .form-horizontal .controls
 178  }
 179  
 180  
 181  .formsettingheading {
 182      .form-horizontal .help-block
 183  }
 184  // Moodle doesn't differentiate between what Bootstrap calls
 185  // .uneditable-inputs and form help text. Styling them both as
 186  // uneditable looks ugly, styling both as form help is fairly
 187  // subtle in it's impact. Going for the latter as the best option.
 188  .form-item .form-description,
 189  .felement.fstatic {
 190      .help-block;
 191      padding-top: 5px;
 192  }
 193  .form-item .form-description {
 194      padding-top: 0;
 195  }
 196  .fitem .fstaticlabel {
 197      font-weight: bold;
 198  }
 199  
 200  // Pale grey container for submit buttons.
 201  table#form td.submit,
 202  .form-buttons,
 203  .path-admin .buttons,
 204  #fitem_id_submitbutton,
 205  .fp-content-center form + div,
 206  div.backup-section + form,
 207  #fgroup_id_buttonar {
 208      .form-actions;
 209      padding-left: 0;
 210  }
 211  .path-admin .buttons,
 212  .form-buttons { // Add back the padding it would usually get from being inside a .form-horizontal.
 213      padding-left: @horizontalComponentOffset;
 214  }
 215  .dir-rtl {
 216      table#form td.submit,
 217      .form-buttons,
 218      .path-admin .buttons,
 219      #fitem_id_submitbutton,
 220      .fp-content-center form + div,
 221      div.backup-section + form,
 222      #fgroup_id_buttonar {
 223          .form-actions;
 224          padding-right: 0;
 225      }
 226      .path-admin .buttons,
 227      .form-buttons { // Add back the padding it would usually get from being inside a .form-horizontal.
 228          padding-right: @horizontalComponentOffset;
 229      }
 230  }
 231  .form-item .form-setting .form-checkbox.defaultsnext {
 232      // Need to specify .defaultsnext and the .form-checkbox class
 233      // is somewhat randomly re-used on various actual checkboxes
 234      // throughout the admin forms, instead of on the wrapper div.
 235      margin-top: 5px; // Push down checkboxes to align.
 236      display: inline-block; // So above style sticks.
 237  }
 238  
 239  #adminsettings h3 {
 240      // Copied from bootstrap/forms.less tag legend.
 241      display: block;
 242      width: 100%;
 243      padding: 0;
 244      margin-bottom: @baseLineHeight;
 245      font-size: @baseFontSize * 1.5;
 246      line-height: @baseLineHeight * 2;
 247      color: @grayDark;
 248      border: 0;
 249      border-bottom: 1px solid #e5e5e5;
 250  }
 251  .mform legend a,
 252  .mform legend a:hover {
 253      color: @textColor;
 254      text-decoration: none;
 255  }
 256  .dir-rtl .mform .fitem .felement {
 257      margin-right: 30%;
 258      margin-left: auto;
 259      text-align: right;
 260  }
 261  // I think this could be avoided (or at least tidied up) ifr
 262  // we used HTML5 input types like url, phone, email, number etc.
 263  .dir-rtl .mform .fitem .felement input[name=email],
 264  .dir-rtl .mform .fitem .felement input[name=email2],
 265  .dir-rtl .mform .fitem .felement input[name=url],
 266  .dir-rtl .mform .fitem .felement input[name=idnumber],
 267  .dir-rtl .mform .fitem .felement input[name=phone1],
 268  .dir-rtl .mform .fitem .felement input[name=phone2] {
 269      text-align: left;
 270      direction: ltr;
 271  }
 272  .dir-rtl #id_s__pathtodu,
 273  .dir-rtl #id_s__aspellpath,
 274  .dir-rtl #id_s__pathtodot,
 275  .dir-rtl #id_s__supportemail,
 276  .dir-rtl #id_s__supportpage,
 277  .dir-rtl #id_s__sessioncookie,
 278  .dir-rtl #id_s__sessioncookiepath,
 279  .dir-rtl #id_s__sessioncookiedomain,
 280  .dir-rtl #id_s__proxyhost,
 281  .dir-rtl #id_s__proxyuser,
 282  .dir-rtl #id_s__proxypassword,
 283  .dir-rtl #id_s__proxybypass,
 284  .dir-rtl #id_s__jabberhost,
 285  .dir-rtl #id_s__jabberserver,
 286  .dir-rtl #id_s__jabberusername,
 287  .dir-rtl #id_s__jabberpassword,
 288  .dir-rtl #id_s__additionalhtmlhead,
 289  .dir-rtl #id_s__additionalhtmltopofbody,
 290  .dir-rtl #id_s__additionalhtmlfooter,
 291  .dir-rtl #id_s__docroot,
 292  .dir-rtl #id_s__filter_tex_latexpreamble,
 293  .dir-rtl #id_s__filter_tex_latexbackground,
 294  .dir-rtl #id_s__filter_tex_pathlatex,
 295  .dir-rtl #id_s__filter_tex_pathdvips,
 296  .dir-rtl #id_s__filter_tex_pathconvert,
 297  .dir-rtl #id_s__blockedip,
 298  .dir-rtl #id_s__pathtoclam,
 299  .dir-rtl #id_s__quarantinedir,
 300  .dir-rtl #id_s__sitepolicy,
 301  .dir-rtl #id_s__sitepolicyguest,
 302  .dir-rtl #id_s__cronremotepassword,
 303  .dir-rtl #id_s__allowedip,
 304  .dir-rtl #id_s__blockedip,
 305  .dir-rtl #id_s_enrol_meta_nosyncroleids,
 306  .dir-rtl #id_s_enrol_ldap_host_url,
 307  .dir-rtl #id_s_enrol_ldap_ldapencoding,
 308  .dir-rtl #id_s_enrol_ldap_bind_dn,
 309  .dir-rtl #id_s_enrol_ldap_bind_pw,
 310  .dir-rtl #admin-emoticons .form-text,
 311  .dir-rtl #admin-role_mapping input[type=text],
 312  .dir-rtl #id_s_enrol_paypal_paypalbusiness,
 313  .dir-rtl #id_s_enrol_flatfile_location,
 314  #page-admin-setting-enrolsettingsflatfile.dir-rtl input[type=text],
 315  #page-admin-setting-enrolsettingsdatabase.dir-rtl input[type=text],
 316  #page-admin-auth-db.dir-rtl input[type=text] {
 317      direction: ltr;
 318  }
 319  #page-admin-setting-enrolsettingsflatfile.dir-rtl .informationbox {
 320      direction: ltr;
 321      text-align: left;
 322  }
 323  #page-admin-grade-edit-scale-edit.dir-rtl .error input#id_name {
 324      margin-right: 170px;
 325  }
 326  #page-grade-edit-outcome-course .courseoutcomes {
 327      margin-left: auto;
 328      margin-right: auto;
 329      width: 100%;
 330  }
 331  #page-grade-edit-outcome-course .courseoutcomes td {
 332      text-align: center;
 333  }
 334  /* Install Process' text fields Forms, should always be justified to the left */
 335  #installform #id_wwwroot,
 336  #installform #id_dirroot,
 337  #installform #id_dataroot,
 338  #installform #id_dbhost,
 339  #installform #id_dbname,
 340  #installform #id_dbuser,
 341  #installform #id_dbpass,
 342  #installform #id_prefix {
 343      direction: ltr;
 344  }
 345  
 346  .mdl-right > label {
 347      // Workaround for repository pop-up because the : are outside the label,
 348      // can/should be fixed in filemanager renderers.
 349      display: inline-block;
 350  }
 351  
 352  // Checkbox labels. Bootstrap puts the associated checkbox inside the label.
 353  // Moodle puts it beside the label, so we need to make it inline-block
 354  // to keep it on the same horizontal level.
 355  input[type="radio"] + label,
 356  input[type="checkbox"] + label {
 357      display: inline;
 358      padding-left: 0.2em;
 359  }
 360  input[type="radio"],
 361  input[type="checkbox"] {
 362      margin-top: -4px; // Dodgy hack, must be better way.
 363      margin-right: 7px;
 364  }
 365  .dir-rtl {
 366      input[type="radio"],
 367      input[type="checkbox"] {
 368          margin-left: 7px;
 369          margin-right: auto;
 370      }
 371  }
 372  .singleselect {
 373      display: inline-block;
 374      form,
 375      select {
 376          margin: 0;
 377      }
 378  }
 379  .form-item .form-label label {
 380      margin-bottom: 0;
 381  }
 382  .dir-rtl .form-item .form-label label {
 383      text-align: left;
 384  }
 385  .felement.ffilepicker {
 386      margin-top: 5px;
 387  }
 388  div#dateselector-calendar-panel {
 389      z-index: 3100; /* Set higher than the z-index of the filemanager - see MDL-39047. */
 390  }
 391  
 392  fieldset.coursesearchbox label {
 393      display: inline;
 394  }
 395  
 396  /**
 397   * Show the labels above text editors and file managers except on wide screens.
 398   */
 399  #region-main .mform:not(.unresponsive) .fitem .fitemtitle label {
 400      font-weight: bold;
 401  }
 402  .makeFormsVertical() {
 403      #region-main .mform:not(.unresponsive) {
 404          .fitem {
 405              .fitemtitle {
 406                  display: block;
 407                  margin-top: 4px;
 408                  margin-bottom: 4px;
 409                  text-align: left;
 410                  width: 100%;
 411              }
 412              .felement {
 413                  margin-left: 0;
 414                  width: 100%;
 415                  float: left;
 416                  padding-left: 0;
 417                  padding-right: 0;
 418              }
 419              .fstatic:empty {
 420                  display: none;
 421              }
 422              .fcheckbox > span,
 423              .fradio > span,
 424              .fgroup > span {
 425                  margin-top: 4px;
 426              }
 427  
 428          }
 429          .femptylabel {
 430              .fitemtitle {
 431                  display: inline-block;
 432                  width: auto;
 433                  margin-right: 8px;
 434              }
 435              .felement {
 436                  display: inline-block;
 437                  margin-top: 4px;
 438                  padding-top: 5px;
 439                  width: auto;
 440              }
 441          }
 442          .fitem_fcheckbox {
 443              .fitemtitle,
 444              .felement {
 445                  display: inline-block;
 446                  width: auto;
 447              }
 448              .felement {
 449                  padding: 6px;
 450              }
 451          }
 452      }
 453      &.dir-rtl #region-main .mform:not(.unresponsive) {
 454          .femptylabel .fitemtitle {
 455              margin-right: 0px;
 456              margin-left: 8px;
 457          }
 458          .fitem {
 459              .fitemtitle {
 460                  text-align: right;
 461              }
 462              .felement {
 463                  margin-right: 0;
 464                  float: right;
 465                  padding-right: 0;
 466                  padding-left: 0;
 467              }
 468          }
 469          .fitem_fcheckbox .felement {
 470              float: right;
 471          }
 472      }
 473  }
 474  
 475  /**
 476   * Make forms vertical when the screen is less than 1200px;
 477   */
 478  @media (max-width: 1199px) {
 479      body {
 480          .makeFormsVertical;
 481      }
 482  }
 483  
 484  
 485  /**
 486   * Make forms vertical when the screen is less than 1474px AND both side-pre and side-post contain blocks.
 487   * This is an extra special media rule.
 488   * It causes forms to show vertically when the screen size is calculated as:
 489   * 1199px + (1199px * 23%)
 490   * Where 23% is the width of span3
 491   * Full calculation is:
 492   *   @maxWidthForVerticalForms: 1199px * (unit(((@fluidGridColumnWidth1200 * 3) +
 493   *    (@fluidGridGutterWidth * (3 - 1)))) / 100) + 1199px;
 494   */
 495  @maxWidthForVerticalForms: 1474px;
 496  
 497  @media (max-width: @maxWidthForVerticalForms) {
 498      .used-region-side-pre.used-region-side-post {
 499          .makeFormsVertical;
 500      }
 501  }
 502  
 503  /* Section and module editing forms contain special JS components for the
 504     availability system (if enabled). */
 505  #fitem_id_availabilityconditionsjson {
 506      *[aria-hidden=true] {
 507          display: none;
 508      }
 509      select,
 510      input[type=text] {
 511          position: relative;
 512          top: 4px;
 513      }
 514      label {
 515          display: inline;
 516      }
 517      .availability-group {
 518          margin-right: 8px;
 519      }
 520      .availability-item {
 521          margin-bottom: 6px;
 522      }
 523      .availability-none {
 524          margin-left: 20px;
 525          margin-bottom: 4px;
 526      }
 527      .availability-plugincontrols {
 528          padding: 2px 0px 0px 4px;
 529          background: none repeat scroll 0% 0% @wellBackground;
 530          border: 1px solid @grayLighter;
 531          border-radius: 4px;
 532          display: inline-block;
 533          margin-right: 8px;
 534      }
 535      /* Eye icon in front of an item and delete icon after it. */
 536      .availability-eye,
 537      .availability-delete {
 538          margin-right: 8px;
 539      }
 540      /* Hidden eye icon still takes up space. */
 541      .availability-eye[aria-hidden=true] {
 542          display: inline;
 543          visibility: hidden;
 544      }
 545      /* Eye icons in front of child lists are aligned specially. */
 546      .availability-list > .availability-eye img {
 547          vertical-align: top;
 548          margin-top: 12px;
 549      }
 550      /* Add button lines up with child elements. */
 551      .availability-button {
 552          margin-left: 15px;
 553      }
 554      /* Nested section is grey. */
 555      .availability-childlist > .availability-inner {
 556          display: inline-block;
 557          background: @wellBackground;
 558          border: 1px solid @grayLighter;
 559          border-radius: 4px;
 560          padding: 6px;
 561          margin-bottom: 6px;
 562      }
 563      /* Second (and more) levels of nested sections are white. */
 564      .availability-childlist .availability-childlist > .availability-inner {
 565          background: white;
 566      }
 567      /* Connecting text needs to be indented. */
 568      .availability-connector {
 569          margin-left: 20px;
 570          margin-bottom: 6px;
 571      }
 572  }
 573  .dir-rtl #fitem_id_availabilityconditionsjson {
 574      .availability-group {
 575          margin-right: 0;
 576          margin-left: 8px;
 577      }
 578      .availability-none {
 579          margin-right: 20px;
 580          margin-left: 0;
 581      }
 582      .availability-plugincontrols {
 583          padding-right: 4px;
 584          padding-left: 0px;
 585          margin-right: 0;
 586          margin-left: 8px;
 587      }
 588      .availability-eye,
 589      .availability-delete {
 590          margin-left: 8px;
 591          margin-right: 0;
 592      }
 593      .availability-button {
 594          margin-right: 15px;
 595          margin-left: 0;
 596      }
 597      .availability-connector {
 598          margin-right: 20px;
 599          margin-left: 0;
 600      }
 601  }
 602  
 603  /* Default form styling colours all text red. With availability conditions
 604     this looks excessive as we show 'Invalid' markers in specific places. */
 605  .mform .error .availability-field {
 606      color: @textColor;
 607  }
 608  
 609  /* This dialogue is used to add an availability condition. */
 610  .availability-dialogue {
 611      .moodle-dialogue .moodle-dialogue-bd {
 612          padding-left: 0;
 613          padding-right: 0;
 614          padding-bottom: 2px;
 615      }
 616      ul {
 617          display: block;
 618          margin: 0;
 619      }
 620      li {
 621          display: block;
 622          list-style-type: none;
 623          padding: 0 0 4px;
 624          clear: both;
 625          border-bottom: 1px solid @grayLighter;
 626          margin-bottom: 4px;
 627      }
 628      ul button {
 629          float: left;
 630          margin-left: 1em;
 631          min-width: 140px;
 632          margin-top: 4px;
 633      }
 634      label {
 635          margin-left: 170px;
 636          margin-right: 1em;
 637          margin-bottom: 0;
 638      }
 639      .availability-buttons button {
 640          margin-left: 1em;
 641          margin-right: 1em;
 642          margin-top: 4px;
 643      }
 644  }
 645  .dir-rtl .availability-dialogue {
 646      ul button {
 647          float: right;
 648          margin-right: 1em;
 649          margin-left: 0;
 650      }
 651      label {
 652          margin-right: 170px;
 653          margin-left: 1em;
 654      }
 655  }
 656  
 657  /* Revert to the non-fixed width where a textarea has the number of columns
 658     specified, or an input has it's size specified. */
 659  textarea[cols],
 660  input[size] {
 661      width: auto;
 662  }
 663  
 664  /* Custom styles for autocomplete form element */
 665  .form-autocomplete-selection {
 666      margin: 0.2em;
 667      min-height: 21px;
 668  }
 669  .form-autocomplete-multiple [role=listitem] {
 670      cursor: pointer;
 671  }
 672  
 673  .form-autocomplete-suggestions {
 674      position: absolute;
 675      background-color: white;
 676      border: 2px solid @grayLighter;
 677      border-radius: 3px;
 678      min-width: 206px;
 679      max-height: 20em;
 680      overflow: auto;
 681      margin: 0px;
 682      padding: 0px;
 683      margin-top: -0.2em;
 684      z-index: 1;
 685  }
 686  .form-autocomplete-suggestions li {
 687      list-style-type: none;
 688      padding: 0.2em;
 689      margin: 0;
 690      cursor: pointer;
 691      color: @textColor;
 692  }
 693  .form-autocomplete-suggestions li:hover {
 694      background-color: lighten(@dropdownLinkBackgroundActive, 15%);
 695      color: @dropdownLinkColorActive;
 696  }
 697  .form-autocomplete-suggestions li[aria-selected=true] {
 698      background-color: darken(@navbarBackground, 5%);
 699      color: @gray;
 700  }
 701  
 702  .form-autocomplete-downarrow {
 703      color: @textColor;
 704      position: relative;
 705      top: -0.3em;
 706      left: -1.5em;
 707      cursor: pointer;
 708  }
 709  .dir-rtl .form-autocomplete-downarrow {
 710      right: -1.5em;
 711      left: inherit;
 712  }
 713  
 714  .form-autocomplete-selection:focus {
 715      outline: none;
 716  }
 717  .form-autocomplete-selection [data-active-selection=true] {
 718      padding: 0.5em;
 719      font-size: large;
 720  }