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 fieldset.collapsible legend a.fheader {
  27     padding: 0 5px 0 20px;
  28     margin-left: -20px;
  29     background: url([[pix:t/expanded]]) 2px center no-repeat;
  30 }
  31 .dir-rtl .mform fieldset.collapsible legend a.fheader {
  32     padding: 0 20px 0 5px;
  33     margin-right: -20px;
  34     margin-left: 0;
  35     background-position: right center;
  36 }
  37 .mform fieldset.collapsed legend a.fheader {
  38     background-image: url([[pix:t/collapsed]]);
  39 }
  40 .dir-rtl .mform fieldset.collapsed legend a.fheader {
  41     background-image: url([[pix:t/collapsed_rtl]]);
  42 }
  43 .jsenabled .mform .collapsed .fcontainer {
  44     display: none;
  45 }
  46 .mform .collapsible-actions {
  47     display: none;
  48     text-align: right;
  49 }
  50 .dir-rtl .mform .collapsible-actions {
  51     text-align: left;
  52 }
  53 .jsenabled .mform .collapsible-actions {
  54     display: block;
  55 }
  56 .mform .collapsible-actions .collapseexpand {
  57     padding-left: 20px;
  58     background: url([[pix:t/collapsed]]) 2px center no-repeat;
  59 }
  60 .dir-rtl .mform .collapsible-actions .collapseexpand {
  61     padding-right: 20px;
  62     padding-left: 0;
  63     background: url([[pix:t/collapsed_rtl]]) right center no-repeat;
  64 }
  65 .mform .collapsible-actions .collapse-all,
  66 .dir-rtl .mform .collapsible-actions .collapse-all {
  67     background-image: url([[pix:t/expanded]]);
  68 }
  69
  70 .mform .fitem .fitemtitle div {
  71     display: inline;
  72 }
  73 .loginpanel .error,
  74 .mform .error {
  75     color: @errorText;
  76 }
  77 .mform .fdescription.required {
  78     margin-left: @horizontalComponentOffset;
  79 }
  80 .mform .fpassword .unmask {
  81     display: inline-block;
  82     margin-left: 0.5em;
  83     & > input {
  84         margin: 0;
  85     }
  86     & > label {
  87         display: inline-block;
  88     }
  89 }
  90 .mform .ftextarea #id_alltext {
  91     width: 100%;
  92 }
  93 .mform ul.file-list {
  94     padding: 0;
  95     margin: 0;
  96     list-style: none;
  97 }
  98 .mform label .req,
  99 .mform label .adv {
 100     cursor: help;
 101 }
 102 .mform .fcheckbox input {
 103     margin-left: 0;
 104     margin-top: 5px;
 105 }
 106 .mform .fitem fieldset.fgroup label,
 107 .mform fieldset.fdate_selector label {
 108     display: inline;
 109     float: none;
 110     width: auto;
 111 }
 112 .mform .ftags label.accesshide {
 113     display: block;
 114     position: static;
 115 }
 116 .mform .ftags select {
 117     margin-bottom: 0.7em;
 118     min-width: 22em;
 119 }
 120 .mform .helplink img {
 121     margin: 0 .45em;
 122     padding: 0;
 123 }
 124 .mform legend .helplink img {
 125     margin: 0 .2em;
 126 }
 127 .singleselect label {
 128     margin-right: .3em;
 129 }
 130 .dir-rtl .singleselect label {
 131     margin-left: .3em;
 132     margin-right: 0;
 133 }
 134 input#id_externalurl {
 135     direction: ltr;
 136 }
 137 #portfolio-add-button {
 138     display: inline;
 139 }
 140
 141 // Copying in Bootstrap styles.
 142 .form-item,
 143 .mform .fitem {
 144     .form-horizontal .control-group;
 145     margin-bottom: 10px;
 146     // Theres's a mysterious extra 10px inside this item,
 147     // so reduce margin by 10px from 20px standard to compensate.
 148 }
 149 .form-item .form-label,
 150 .mform .fitem div.fitemtitle {
 151     .form-horizontal .control-label
 152 }
 153 .form-defaultinfo,
 154 .form-label .form-shortname {
 155     .muted;
 156 }
 157 .form-label .form-shortname {
 158     font-size: @fontSizeMini;
 159     display: block;
 160 }
 161 .dir-rtl .form-label .form-shortname {
 162     text-align: left;
 163 }
 164 .form-item .form-setting,
 165 .form-item .form-description,
 166 .mform .fitem .felement,
 167 #page-mod-forum-search .c1 {
 168     .form-horizontal .controls
 169 }
 170
 171
 172 .formsettingheading {
 173     .form-horizontal .help-block
 174 }
 175 // Moodle doesn't differentiate between what Bootstrap calls
 176 // .uneditable-inputs and form help text. Styling them both as
 177 // uneditable looks ugly, styling both as form help is fairly
 178 // subtle in it's impact. Going for the latter as the best option.
 179 .form-item .form-description,
 180 .felement.fstatic {
 181     .help-block;
 182     padding-top: 5px;
 183 }
 184 .form-item .form-description {
 185     padding-top: 0;
 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
 204 .form-item .form-setting .form-checkbox.defaultsnext {
 205     // Need to specify .defaultsnext and the .form-checkbox class
 206     // is somewhat randomly re-used on various actual checkboxes
 207     // throughout the admin forms, instead of on the wrapper div.
 208     margin-top: 5px; // Push down checkboxes to align.
 209     display: inline-block; // So above style sticks.
 210 }
 211
 212 #adminsettings h3.main {
 213     // Copied from bootstrap/forms.less tag legend.
 214     display: block;
 215     width: 100%;
 216     padding: 0;
 217     margin-bottom: @baseLineHeight;
 218     font-size: @baseFontSize * 1.5;
 219     line-height: @baseLineHeight * 2;
 220     color: @grayDark;
 221     border: 0;
 222     border-bottom: 1px solid #e5e5e5;
 223 }
 224 .mform legend a,
 225 .mform legend a:hover {
 226     color: @grayDark;
 227     text-decoration: none;
 228 }
 229 .dir-rtl .mform .fitem .fitemtitle {
 230     float: right;
 231 }
 232
 233 .dir-rtl .mform .fitem .felement {
 234     margin-right: 16%;
 235     margin-left: auto;
 236     text-align: right;
 237 }
 238 // I think this could be avoided (or at least tidied up) ifr
 239 // we used HTML5 input types like url, phone, email, number etc.
 240 .dir-rtl .mform .fitem .felement input[name=email],
 241 .dir-rtl .mform .fitem .felement input[name=email2],
 242 .dir-rtl .mform .fitem .felement input[name=url],
 243 .dir-rtl .mform .fitem .felement input[name=idnumber],
 244 .dir-rtl .mform .fitem .felement input[name=phone1],
 245 .dir-rtl .mform .fitem .felement input[name=phone2] {
 246     text-align: left;
 247     direction: ltr;
 248 }
 249 .dir-rtl #id_s__pathtodu,
 250 .dir-rtl #id_s__aspellpath,
 251 .dir-rtl #id_s__pathtodot,
 252 .dir-rtl #id_s__supportemail,
 253 .dir-rtl #id_s__supportpage,
 254 .dir-rtl #id_s__sessioncookie,
 255 .dir-rtl #id_s__sessioncookiepath,
 256 .dir-rtl #id_s__sessioncookiedomain,
 257 .dir-rtl #id_s__proxyhost,
 258 .dir-rtl #id_s__proxyuser,
 259 .dir-rtl #id_s__proxypassword,
 260 .dir-rtl #id_s__proxybypass,
 261 .dir-rtl #id_s__jabberhost,
 262 .dir-rtl #id_s__jabberserver,
 263 .dir-rtl #id_s__jabberusername,
 264 .dir-rtl #id_s__jabberpassword,
 265 .dir-rtl #id_s__additionalhtmlhead,
 266 .dir-rtl #id_s__additionalhtmltopofbody,
 267 .dir-rtl #id_s__additionalhtmlfooter,
 268 .dir-rtl #id_s__docroot,
 269 .dir-rtl #id_s__filter_tex_latexpreamble,
 270 .dir-rtl #id_s__filter_tex_latexbackground,
 271 .dir-rtl #id_s__filter_tex_pathlatex,
 272 .dir-rtl #id_s__filter_tex_pathdvips,
 273 .dir-rtl #id_s__filter_tex_pathconvert,
 274 .dir-rtl #id_s__blockedip,
 275 .dir-rtl #id_s__pathtoclam,
 276 .dir-rtl #id_s__quarantinedir,
 277 .dir-rtl #id_s__sitepolicy,
 278 .dir-rtl #id_s__sitepolicyguest,
 279 .dir-rtl #id_s__cronremotepassword,
 280 .dir-rtl #id_s__allowedip,
 281 .dir-rtl #id_s__blockedip,
 282 .dir-rtl #id_s_enrol_meta_nosyncroleids,
 283 .dir-rtl #id_s_enrol_ldap_host_url,
 284 .dir-rtl #id_s_enrol_ldap_ldapencoding,
 285 .dir-rtl #id_s_enrol_ldap_bind_dn,
 286 .dir-rtl #id_s_enrol_ldap_bind_pw,
 287 .dir-rtl #admin-emoticons .form-text,
 288 .dir-rtl #admin-role_mapping input[type=text],
 289 .dir-rtl #id_s_enrol_paypal_paypalbusiness,
 290 .dir-rtl #id_s_enrol_flatfile_location,
 291 #page-admin-setting-enrolsettingsflatfile.dir-rtl input[type=text],
 292 #page-admin-setting-enrolsettingsdatabase.dir-rtl input[type=text],
 293 #page-admin-auth-db.dir-rtl input[type=text] {
 294     direction: ltr;
 295 }
 296 #page-admin-setting-enrolsettingsflatfile.dir-rtl .informationbox {
 297     direction: ltr;
 298     text-align: left;
 299 }
 300 #page-admin-grade-edit-scale-edit.dir-rtl .error input#id_name {
 301     margin-right: 170px;
 302 }
 303 /* Install Process' text fields Forms, should always be justified to the left */
 304 #installform #id_wwwroot,
 305 #installform #id_dirroot,
 306 #installform #id_dataroot,
 307 #installform #id_dbhost,
 308 #installform #id_dbname,
 309 #installform #id_dbuser,
 310 #installform #id_dbpass,
 311 #installform #id_prefix {
 312     direction: ltr;
 313 }
 314
 315 .mdl-right > label {
 316     // Workaround for repository pop-up because the : are outside the label,
 317     // can/should be fixed in filemanager renderers.
 318     display: inline-block;
 319 }
 320
 321 // Checkbox labels. Bootstrap puts the associated checkbox inside the label.
 322 // Moodle puts it beside the label, so we need to make it inline-block
 323 // to keep it on the same horizontal level.
 324 input[type="radio"] + label,
 325 input[type="checkbox"] + label {
 326     display: inline;
 327     padding-left: 0.2em;
 328 }
 329 input[type="radio"],
 330 input[type="checkbox"] {
 331     margin-top: -4px; // Dodgy hack, must be better way.
 332     margin-right: 7px;
 333 }
 334 .singleselect {
 335     display: inline-block;
 336     form,
 337     select{
 338         margin: 0;
 339     }
 340 }
 341 .form-item .form-label label {
 342     margin-bottom: 0;
 343 }
 344 .felement.ffilepicker {
 345     margin-top: 5px;
 346 }
 347 div#dateselector-calendar-panel {
 348     z-index: 3100; /* Set higher than the z-index of the filemanager - see MDL-39047. */
 349 }
 350
 351 fieldset.coursesearchbox label {
 352     display: inline;
 353 }