MDL-68864 qtype_multichoice: clearchoice button styles
authorBas Brands <bas@moodle.com>
Tue, 9 Jun 2020 13:56:51 +0000 (15:56 +0200)
committerJun Pataleta <jun@moodle.com>
Wed, 10 Jun 2020 03:10:46 +0000 (11:10 +0800)
- display the clearchoice link as a button to improve the way
it looks when using keyboard focus

question/type/multichoice/renderer.php
theme/boost/scss/moodle/question.scss
theme/boost/style/moodle.css
theme/classic/style/moodle.css

index 8a09a69..966edca 100644 (file)
@@ -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'),
         // 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]);
 
         // Now wrap the radio and label inside a div.
         $result = html_writer::tag('div', $clearchoiceradio, ['id' => $clearchoicefieldname, 'class' => $cssclass]);
index d4d19a0..4ed5c9a 100644 (file)
@@ -305,14 +305,6 @@ body.path-question-type {
 .que.multichoice .answer div.r1 .icon.fa-remove {
     text-indent: 0;
 }
 .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 {
 
 .formulation input[type="text"],
 .formulation select {
index af0ee78..c9fc671 100644 (file)
@@ -15604,13 +15604,6 @@ body.path-question-type {
 .que.multichoice .answer div.r1 .icon.fa-remove {
   text-indent: 0; }
 
 .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;
 .formulation input[type="text"],
 .formulation select {
   width: auto;
index 8227275..7be6184 100644 (file)
@@ -15827,13 +15827,6 @@ body.path-question-type {
 .que.multichoice .answer div.r1 .icon.fa-remove {
   text-indent: 0; }
 
 .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;
 .formulation input[type="text"],
 .formulation select {
   width: auto;