From 1c56ccd89bb312dda6e1b473a7c9eb64c8d5bb72 Mon Sep 17 00:00:00 2001
From: Bas Brands <bas@moodle.com>
Date: Tue, 27 Apr 2021 16:47:27 +0200
Subject: [PATCH] MDL-70491 theme_boost: improve form autocomplete badge styles

---
 lib/templates/form_autocomplete_selection_items.mustache | 4 ++--
 theme/boost/scss/moodle/core.scss                        | 3 +++
 theme/boost/scss/moodle/forms.scss                       | 5 ++---
 theme/boost/style/moodle.css                             | 9 +++++----
 theme/classic/style/moodle.css                           | 9 +++++----
 5 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/lib/templates/form_autocomplete_selection_items.mustache b/lib/templates/form_autocomplete_selection_items.mustache
index bb9f16c2f46..bb09959abef 100644
--- a/lib/templates/form_autocomplete_selection_items.mustache
+++ b/lib/templates/form_autocomplete_selection_items.mustache
@@ -38,10 +38,10 @@
     ], "noSelectionString": "No selection" }
 }}
 {{#items}}
-    <span role="option" data-value="{{value}}" aria-selected="true" class="badge badge-info mb-3 mr-1" style="font-size: 100%">
+    <span role="option" data-value="{{value}}" aria-selected="true" class="badge badge-secondary m-1" style="font-size: 100%">
         <span aria-hidden="true">× </span>{{{label}}}
     </span>
 {{/items}}
 {{^items}}
-    <span class="mb-3 mr-1">{{noSelectionString}}</span>
+    <span class="m-1 h-5">{{noSelectionString}}</span>
 {{/items}}
diff --git a/theme/boost/scss/moodle/core.scss b/theme/boost/scss/moodle/core.scss
index f65d4779984..98c72a7b99d 100644
--- a/theme/boost/scss/moodle/core.scss
+++ b/theme/boost/scss/moodle/core.scss
@@ -2126,6 +2126,9 @@ dd:after {
                 width: 330px;
                 vertical-align: text-bottom;
                 margin-bottom: 0;
+                &[role="combobox"] {
+                    width: auto;
+                }
             }
         }
 
diff --git a/theme/boost/scss/moodle/forms.scss b/theme/boost/scss/moodle/forms.scss
index 857c558ff07..8b3f3155af5 100644
--- a/theme/boost/scss/moodle/forms.scss
+++ b/theme/boost/scss/moodle/forms.scss
@@ -264,7 +264,7 @@ fieldset.coursesearchbox label {
     vertical-align: bottom;
 }
 .form-autocomplete-selection {
-    margin: $input-padding-y-sm;
+    margin: $input-padding-y-sm 0;
     // Padding top and bottom, plus mb-1 and the 100% lineheight.
     min-height: 2 * $input-padding-y-sm + 2 * $font-size-base;
 }
@@ -327,8 +327,7 @@ fieldset.coursesearchbox label {
 }
 
 .form-autocomplete-selection [data-active-selection=true] {
-    padding: 0.5em;
-    font-size: large;
+    box-shadow: $input-btn-focus-box-shadow;
 }
 
 select.form-control {
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index 54578ef8e03..91bb5449d65 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -11586,7 +11586,9 @@ dd:after {
     .inplaceeditable.inplaceeditingon input {
       width: 330px;
       vertical-align: text-bottom;
-      margin-bottom: 0; } }
+      margin-bottom: 0; }
+      .inplaceeditable.inplaceeditingon input[role="combobox"] {
+        width: auto; } }
   .inplaceeditable.inplaceeditingon select {
     margin-bottom: 0; }
 
@@ -17595,7 +17597,7 @@ fieldset.coursesearchbox label {
   vertical-align: bottom; }
 
 .form-autocomplete-selection {
-  margin: 0.25rem;
+  margin: 0.25rem 0;
   min-height: 2.375rem; }
 
 .form-autocomplete-selection [role=option] {
@@ -17646,8 +17648,7 @@ fieldset.coursesearchbox label {
   vertical-align: middle; }
 
 .form-autocomplete-selection [data-active-selection=true] {
-  padding: 0.5em;
-  font-size: large; }
+  box-shadow: 0 0 0 0.2rem rgba(15, 108, 191, 0.75); }
 
 select.form-control[size], select.form-control[multiple] {
   padding-right: 0; }
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index e8f7ab505dc..d7ce946e8e0 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -11586,7 +11586,9 @@ dd:after {
     .inplaceeditable.inplaceeditingon input {
       width: 330px;
       vertical-align: text-bottom;
-      margin-bottom: 0; } }
+      margin-bottom: 0; }
+      .inplaceeditable.inplaceeditingon input[role="combobox"] {
+        width: auto; } }
   .inplaceeditable.inplaceeditingon select {
     margin-bottom: 0; }
 
@@ -17595,7 +17597,7 @@ fieldset.coursesearchbox label {
   vertical-align: bottom; }
 
 .form-autocomplete-selection {
-  margin: 0.25rem;
+  margin: 0.25rem 0;
   min-height: 2.375rem; }
 
 .form-autocomplete-selection [role=option] {
@@ -17646,8 +17648,7 @@ fieldset.coursesearchbox label {
   vertical-align: middle; }
 
 .form-autocomplete-selection [data-active-selection=true] {
-  padding: 0.5em;
-  font-size: large; }
+  box-shadow: 0 0 0 0.2rem rgba(15, 108, 191, 0.75); }
 
 select.form-control[size], select.form-control[multiple] {
   padding-right: 0; }