MDL-68864 qtype_multichoice: clearchoice button styles

- display the clearchoice link as a button to improve the way
it looks when using keyboard focus

diff --git a/question/type/multichoice/renderer.php b/question/type/multichoice/renderer.php
index 8a09a69..966edca 100644 (file)
--- a/question/type/multichoice/renderer.php
+++ b/question/type/multichoice/renderer.php
@@ -307,7 +307,8 @@ class qtype_multichoice_single_renderer extends qtype_multichoice_renderer_base
         // Adds an hidden radio that will be checked to give the impression the choice has been cleared.
         $clearchoiceradio = html_writer::empty_tag('input', $clearchoiceradioattrs);
         $clearchoiceradio .= html_writer::link('', get_string('clearchoice', 'qtype_multichoice'),
-            ['for' => $clearchoiceid, 'role' => 'button', 'tabindex' => $linktabindex]);
+            ['for' => $clearchoiceid, 'role' => 'button', 'tabindex' => $linktabindex,
+            'class' => 'btn btn-link ml-4 pl-1 mt-2']);
 
         // Now wrap the radio and label inside a div.
         $result = html_writer::tag('div', $clearchoiceradio, ['id' => $clearchoicefieldname, 'class' => $cssclass]);

diff --git a/theme/boost/scss/moodle/question.scss b/theme/boost/scss/moodle/question.scss
index d4d19a0..4ed5c9a 100644 (file)
--- a/theme/boost/scss/moodle/question.scss
+++ b/theme/boost/scss/moodle/question.scss
@@ -305,14 +305,6 @@ body.path-question-type {
 .que.multichoice .answer div.r1 .icon.fa-remove {
     text-indent: 0;
 }
-.qtype_multichoice_clearchoice {
-    padding-top: 10px;
-    a {
-        cursor: pointer;
-        text-decoration: underline;
-        padding-left: 30px;
-    }
-}
 
 .formulation input[type="text"],
 .formulation select {

diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index af0ee78..c9fc671 100644 (file)
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -15604,13 +15604,6 @@ body.path-question-type {
 .que.multichoice .answer div.r1 .icon.fa-remove {
   text-indent: 0; }
 
-.qtype_multichoice_clearchoice {
-  padding-top: 10px; }
-  .qtype_multichoice_clearchoice a {
-    cursor: pointer;
-    text-decoration: underline;
-    padding-left: 30px; }
-
 .formulation input[type="text"],
 .formulation select {
   width: auto;

diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index 8227275..7be6184 100644 (file)
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -15827,13 +15827,6 @@ body.path-question-type {
 .que.multichoice .answer div.r1 .icon.fa-remove {
   text-indent: 0; }
 
-.qtype_multichoice_clearchoice {
-  padding-top: 10px; }
-  .qtype_multichoice_clearchoice a {
-    cursor: pointer;
-    text-decoration: underline;
-    padding-left: 30px; }
-
 .formulation input[type="text"],
 .formulation select {
   width: auto;