MDL-56156 theme_boost: enrol_users filter form styles

Allow wrapping any mform in a "form-inline" div to make it a responsive inline form.
Use this for the enrol users filter for and get rid of a good chunk of custom styles.

enrol/renderer.php

@@ -56,7 +56,9 @@ class core_enrol_renderer extends plugin_renderer_base {
         if (!empty($buttonhtml)) {
             $content .= $buttonhtml;
         }
+        $content .= html_writer::start_tag('div', array('class' => 'form-inline'));
         $content .= $mform->render();
+        $content .= html_writer::end_tag('div');
 
         $content .= $this->output->render($table->get_paging_bar());
 
@@ -104,7 +106,8 @@ class core_enrol_renderer extends plugin_renderer_base {
         $attributes = array('type'     => 'submit',
                             'value'    => $button->label,
                             'disabled' => $button->disabled ? 'disabled' : null,
-                            'title'    => $button->tooltip);
+                            'title'    => $button->tooltip,
+                            'class'    => 'btn btn-secondary m-y-1');
 
         if ($button->actions) {
             $id = html_writer::random_id('single_button');

theme/boost/scss/moodle/core.scss

@@ -1056,58 +1056,13 @@ tr.flagged-tag a {
 
 #page-enrol-users {
     .enrol_user_buttons {
-        float: right;
+        text-align: right;
 
-        .enrolusersbutton {
-            display: inline;
-
-            div,
-            form {
-                display: inline;
-                margin-right: 0;
-            }
-        }
     }
 
     #filterform {
         @extend .card;
-        display: inline-block;
-
-        .fitem {
-            display: inline-block;
-            line-height: $line-height-base * 2;
-            margin-right: .3em;
-            white-space: nowrap;
-
-            label {
-                display: inline;
-                line-height: $line-height-base;
-                padding-right: .3em;
-            }
-
-            :before,
-            :after {
-                display: inline;
-            }
-        }
-
-        div,
-        fieldset {
-            display: inline-block;
-            clear: none;
-            width: auto;
-            margin: 0;
-        }
-
-        select,
-        .ftext input {
-            width: 7em;
-        }
-
-        input,
-        select {
-            margin-bottom: 0;
-        }
+        @extend .card-block;
     }
 
     .user-enroller-panel .uep-search-results .user .details {

theme/boost/scss/moodle/forms.scss

@@ -397,3 +397,17 @@ select[multiple] {
 textarea[data-auto-rows] {
     overflow-x: hidden;
 }
+
+/** Allow wrapping an mform in a div with the form-inline class to have an inline, responsive form. */
+.form-inline {
+    @include media-breakpoint-up(md) {
+        .col-md-9,
+        .col-md-3 {
+            label {
+                margin-left: 1rem;
+            }
+            margin-bottom: 1rem;
+            width: auto;
+        }
+    }
+}