theme/boost/scss/moodle/forms.scss

   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 .jsenabled .mform .containsadvancedelements .advanced {
   9     display: none;
  10 }
  11
  12 .mform .containsadvancedelements .advanced.show {
  13     display: flex;
  14 }
  15
  16 #adminsettings span.error {
  17     display: inline-block;
  18     border: 1px solid $state-danger-border;
  19     border-radius: 4px;
  20     background-color: $state-danger-bg;
  21     padding: 4px;
  22     margin-bottom: 4px;
  23 }
  24
  25 .mform .form-inline {
  26     .form-control,
  27     .custom-select {
  28         max-width: 100%;
  29     }
  30     .form-group {
  31         margin: 0.1rem 0.25rem 0.1rem 0;
  32     }
  33     br + label {
  34         justify-content: flex-start;
  35         width: 100%;
  36     }
  37 }
  38
  39 .unresponsive.mform .form-inline,
  40 .unresponsive.mform .form-inline label {
  41     display: inline-flex;
  42 }
  43
  44 #jump-to-activity.custom-select {
  45     width: 100%;
  46 }
  47
  48 .mform fieldset {
  49     margin-bottom: $spacer / 2;
  50     border-bottom: $border-width solid $table-border-color;
  51 }
  52
  53 @include media-breakpoint-up(sm) {
  54     .mform > .form-group {
  55         margin-left: $spacer * 1.5;
  56     }
  57 }
  58
  59 .editor_atto_content.form-control {
  60     width: 100%;
  61 }
  62
  63 #adminsettings .form-control[size] {
  64     width: auto;
  65 }
  66
  67 .jsenabled .mform .collapsed .fcontainer {
  68     display: none;
  69 }
  70
  71 #adminsettings .error {
  72     color: $danger;
  73 }
  74
  75 .mform ul.file-list {
  76     padding: 0;
  77     margin: 0;
  78     list-style: none;
  79 }
  80
  81 .mform label .req,
  82 .mform label .adv {
  83     cursor: help;
  84 }
  85 /*rtl:ignore*/
  86 input#id_externalurl {
  87     direction: ltr;
  88 }
  89
  90 #portfolio-add-button {
  91     display: inline;
  92 }
  93
  94 .form-defaultinfo,
  95 .form-label .form-shortname {
  96     color: $text-muted;
  97 }
  98
  99 .form-label .form-shortname {
 100     font-size: $font-size-xs;
 101     display: block;
 102 }
 103
 104 .form-item .form-inline {
 105     display: inline;
 106 }
 107
 108 .form-inline label:not(.sr-only):not(.accesshide) + select {
 109     margin-left: 0.5rem;
 110 }
 111
 112 .formsettingheading .form-horizontal {
 113     color: $text-muted;
 114 }
 115
 116 // Moodle doesn't differentiate between what Bootstrap calls
 117 // .uneditable-inputs and form help text. Styling them both as
 118 // uneditable looks ugly, styling both as form help is fairly
 119 // subtle in it's impact. Going for the latter as the best option.
 120 .no-felement.fstatic {
 121     color: $text-muted;
 122     padding-top: 5px;
 123 }
 124
 125 .no-fitem .fstaticlabel {
 126     font-weight: bold;
 127 }
 128
 129 .form-item .form-setting .defaultsnext > input {
 130     display: inline-block;
 131 }
 132
 133 .form-item .form-setting .form-checkbox.defaultsnext {
 134     // Need to specify .defaultsnext and the .form-checkbox class
 135     // is somewhat randomly re-used on various actual checkboxes
 136     // throughout the admin forms, instead of on the wrapper div.
 137     margin-top: 5px; // Push down checkboxes to align.
 138     display: inline-block; // So above style sticks.
 139 }
 140
 141 #adminsettings h3 {
 142     // Copied from bootstrap/forms.less tag legend.
 143     display: block;
 144     width: 100%;
 145     padding: 0;
 146     margin-bottom: $line-height-base;
 147     font-size: $font-size-lg;
 148     line-height: $line-height-base * 2;
 149     border: 0;
 150     border-bottom: 1px solid #e5e5e5;
 151 }
 152
 153 // I think this could be avoided (or at least tidied up) ifr
 154 // we used HTML5 input types like url, phone, email, number etc.
 155 /* rtl:ignore */
 156 .mform .fitem .felement input[name="email"],
 157 .mform .fitem .felement input[name="email2"],
 158 .mform .fitem .felement input[name="url"],
 159 .mform .fitem .felement input[name="idnumber"],
 160 .mform .fitem .felement input[name="phone1"],
 161 .mform .fitem .felement input[name="phone2"] {
 162     text-align: left;
 163     direction: ltr;
 164 }
 165
 166 // Reduce the mediaplugin width when using inside forms.
 167 .que.match .mediaplugin {
 168     width: 50vw;
 169 }
 170
 171 /* rtl:ignore */
 172 #page-admin-grade-edit-scale-edit .error input#id_name {
 173     margin-right: 170px;
 174 }
 175
 176 #page-grade-edit-outcome-course .courseoutcomes {
 177     margin-left: auto;
 178     margin-right: auto;
 179     width: 100%;
 180 }
 181
 182 #page-grade-edit-outcome-course .courseoutcomes td {
 183     text-align: center;
 184 }
 185 /* Install Process' text fields Forms, should always be justified to the left */
 186 /* rtl:ignore */
 187 #installform #id_wwwroot,
 188 #installform #id_dirroot,
 189 #installform #id_dataroot,
 190 #installform #id_dbhost,
 191 #installform #id_dbname,
 192 #installform #id_dbuser,
 193 #installform #id_dbpass,
 194 #installform #id_prefix {
 195     direction: ltr;
 196 }
 197
 198 .mdl-right > label {
 199     // Workaround for repository pop-up because the : are outside the label,
 200     // can/should be fixed in filemanager renderers.
 201     display: inline-block;
 202 }
 203
 204 .singleselect {
 205     max-width: 100%;
 206 }
 207
 208 .form-item .form-label label {
 209     margin-bottom: 0;
 210 }
 211
 212 div#dateselector-calendar-panel {
 213     z-index: 3100; /* Set higher than the z-index of the filemanager - see MDL-39047. */
 214 }
 215
 216 fieldset.coursesearchbox label {
 217     display: inline;
 218 }
 219
 220 /**
 221  * Show the labels above text editors and file managers except on wide screens.
 222  */
 223
 224
 225 /* Section and module editing forms contain special JS components for the
 226    availability system (if enabled). */
 227 #id_availabilityconditionsjson[aria-hidden=true],
 228 .availability-field [aria-hidden=true] {
 229     display: none;
 230 }
 231
 232 .availability-field {
 233     label {
 234         display: inline-flex;
 235     }
 236     .availability-group label {
 237         vertical-align: top;
 238     }
 239 }
 240
 241 .availability-eye {
 242     clear: left;
 243     float: left;
 244 }
 245 .availability-inner,
 246 .availability-plugincontrols {
 247     float: left;
 248     @include border-radius($card-border-radius);
 249     border: $card-border-width solid $card-border-color;
 250     padding: 1rem;
 251     margin-top: 0.5rem;
 252 }
 253 .availability-plugincontrols,
 254 .availability-childlist .availability-inner {
 255     margin-left: .625rem;
 256 }
 257 .availability-field .availability-plugincontrols .availability-group select {
 258     max-width: 12rem;
 259 }
 260
 261 /* Custom styles for autocomplete form element */
 262 /* These styles reserve a standard amount of space in the DOM to avoid flicker when the original select element is replaced */
 263 [data-fieldtype=autocomplete] select,
 264 [data-fieldtype=tags] select,
 265 .form-autocomplete-original-select {
 266     visibility: hidden;
 267     overflow: hidden;
 268     width: 15rem;
 269     height: 44px;
 270     margin: 0;
 271     padding: 0;
 272     border: 0;
 273     margin-top: $font-size-base * $line-height-base + $input-padding-y-sm;
 274     vertical-align: bottom;
 275 }
 276 .form-autocomplete-selection {
 277     margin: $input-padding-y-sm;
 278     // Padding top and bottom, plus mb-1 and the 100% lineheight.
 279     min-height: 2 * $input-padding-y-sm + 2 * $font-size-base;
 280 }
 281
 282 .form-autocomplete-selection [role=listitem] {
 283     cursor: pointer;
 284     white-space: inherit;
 285     word-break: break-word;
 286     line-height: 1.4;
 287     text-align: left;
 288 }
 289
 290 .form-autocomplete-suggestions {
 291     position: absolute;
 292     background-color: white;
 293     border: 2px solid $gray-300;
 294     border-radius: 3px;
 295     min-width: 206px;
 296     max-height: 20em;
 297     overflow: auto;
 298     margin: 0;
 299     padding: 0;
 300     margin-top: 0.4em;
 301     z-index: 1;
 302 }
 303
 304 .form-autocomplete-suggestions li {
 305     list-style-type: none;
 306     padding: 0.2em;
 307     margin: 0;
 308     cursor: pointer;
 309     color: $body-color;
 310 }
 311
 312 .form-autocomplete-suggestions li:hover {
 313     background-color: lighten($dropdown-link-active-bg, 15%);
 314     color: $dropdown-link-active-color;
 315 }
 316
 317 .form-autocomplete-suggestions li[aria-selected=true] {
 318     background-color: darken($dropdown-bg, 5%);
 319     color: $gray-700;
 320 }
 321
 322 .form-autocomplete-downarrow {
 323     color: $body-color;
 324     top: 0.2rem;
 325     right: 0.5rem;
 326     cursor: pointer;
 327     .loading-icon {
 328         position: absolute;
 329         top: 0;
 330         left: 0;
 331         background-color: $white;
 332     }
 333 }
 334
 335 .form-autocomplete-selection:focus {
 336     outline: none;
 337 }
 338 /** Undo some bootstrap things */
 339 .form-autocomplete-selection + input.form-control {
 340     width: auto;
 341     display: inline-block;
 342     vertical-align: middle;
 343 }
 344
 345 .form-autocomplete-selection [data-active-selection=true] {
 346     padding: 0.5em;
 347     font-size: large;
 348 }
 349
 350 /* Non-bootstrap selects with a size show their contents outside of the element.
 351  * Remove when we update to stable bootstrap 4. (MDL-56511) */
 352 select[size],
 353 select[multiple] {
 354     overflow: auto;
 355 }
 356
 357 select[size="1"] {
 358     overflow: visible;
 359 }
 360
 361 textarea[data-auto-rows] {
 362     overflow-x: hidden;
 363     resize: none;
 364 }
 365
 366 /** Display elements under labels in vertical forms regardless of the screen size. */
 367 .mform.full-width-labels {
 368     .fitem.row {
 369         margin-left: 0;
 370         margin-right: 0;
 371         & > .col-md-3,
 372         & > .col-md-9 {
 373             float: none;
 374             width: inherit;
 375             padding-right: 0;
 376             padding-left: 0;
 377         }
 378         &.femptylabel > .col-md-3 {
 379             display: none;
 380         }
 381     }
 382 }
 383
 384 /** Allow wrapping an mform in a div with the form-inline class to have an inline, responsive form. */
 385 .form-inline {
 386     @include media-breakpoint-up(md) {
 387         .col-md-9,
 388         .col-md-3 {
 389             label {
 390                 margin-left: 1rem;
 391             }
 392             margin-bottom: 1rem;
 393             width: auto;
 394         }
 395     }
 396 }
 397
 398 [data-fieldtype="modgrade"] .form-group {
 399     padding-bottom: $input-padding-y;
 400 }
 401
 402 // We dont' use the mixin because it's expensive.
 403 [data-fieldtype="modgrade"] {
 404     background-color: $card-bg;
 405     @include border-radius($card-border-radius);
 406     border: $card-border-width solid $card-border-color;
 407     padding: $card-spacer-x;
 408     margin-left: $grid-gutter-width / 2;
 409     max-width: 30rem;
 410 }
 411
 412 /** Atto fields do not have form-control because that would break the layout of the editor.
 413     So they need these extra styles to highlight the editor when there is a validation error. */
 414 /* stylelint-disable function-url-scheme-blacklist */
 415 $form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23d9534f' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E") !default;
 416 /* stylelint-enable function-url-scheme-blacklist */
 417 .has-danger .editor_atto_content.form-control,
 418 .has-danger .editor_atto_content.form-control-danger {
 419     background-image: $form-icon-danger;
 420     padding-right: ($input-padding-x * 3);
 421     background-repeat: no-repeat;
 422     background-position: center right 1rem;
 423     background-size: 1.5rem;
 424 }
 425
 426 // Styles for the JS file types browser provided by the "filetypes" element.
 427 [data-filetypesbrowserbody] {
 428     [aria-expanded="false"] > [role="group"],
 429     [aria-expanded="false"] [data-filetypesbrowserfeature="hideifcollapsed"],
 430     [aria-expanded="true"] [data-filetypesbrowserfeature="hideifexpanded"] {
 431         display: none;
 432     }
 433 }
 434
 435 // The autocomplete popup needs a display:block container to correctly position to popup.
 436 .form-inline[data-fieldtype="autocomplete"],
 437 .form-inline[data-fieldtype="tags"] {
 438     display: block;
 439 }
 440
 441 // Show editor at 100% width by default.
 442 [data-fieldtype="editor"] > div {
 443     flex-grow: 1;
 444 }
 445
 446 @include media-breakpoint-up(sm) {
 447     .mform fieldset {
 448         margin-left: $spacer * 1.5;
 449     }
 450     .mform fieldset.collapsible legend a.fheader {
 451         padding: 0 5px 0 ($spacer * 1.5);
 452         margin-left: -($spacer * 1.5);
 453         background: url([[pix:t/expanded]]) 0 center no-repeat;
 454     }
 455
 456     .mform fieldset.collapsed legend a.fheader {
 457         /*rtl:raw:
 458         background-image: url([[pix:t/collapsed_rtl]]);
 459         */
 460         /*rtl:remove*/
 461         background-image: url([[pix:t/collapsed]]);
 462     }
 463
 464     .mform {
 465         .form-inline {
 466             .fdefaultcustom {
 467                 label {
 468                     justify-content: initial;
 469                 }
 470             }
 471         }
 472     }
 473 }
 474
 475 // Form inset on the left/right.
 476 // Used to display an icon/button within the form control.
 477 .input-group {
 478     &.form-inset {
 479         .form-inset-item {
 480             position: absolute;
 481             padding-top: calc(#{$input-padding-y} + #{$input-border-width});
 482             z-index: 3;
 483         }
 484
 485         &.form-inset-left {
 486             .form-control {
 487                 padding-left: $spacer * 1.5;
 488             }
 489         }
 490
 491         &.form-inset-right {
 492             .form-control {
 493                 padding-right: $spacer * 1.5;
 494             }
 495             .form-inset-item {
 496                 right: 0;
 497             }
 498         }
 499     }
 500 }