MDL-41504 completion: fixed display of completion icon

This entailed applying a right spacing to the action menu on
the standard theme to accomodate the completion icon when it
is present.
On the clean them I had to apply a trick. The completion icon
is floated right however no other content is floated.
To ensure the completion icon moved in relation to the action
menu I had to reduce its container size to 0 and rely on
natural overflow. I had to counter this my applying spacing
to the activity container in order to accommodate the actual
size of the icon.

theme/base/style/course.css

@@ -27,7 +27,9 @@
 .dir-rtl .sitetopic .section .activity .activityinstance,
 .dir-rtl .course-content .section .activity .activityinstance { padding-right: 0; padding-left: 3em;}
 .sitetopic .section .activity .commands,
-.course-content .section .activity .commands { white-space: nowrap; display: inline-block; }
+.course-content .section .activity .commands { white-space: nowrap; display: inline-block; padding: 0 3em 0 0;}
+.dir-rtl .sitetopic .section .activity .commands,
+.dir-rtl .course-content .section .activity .commands { padding: 0 0 0 3em;}
 .section .activity .moodle-actionmenu .menubar > li > * {display:inline-block;min-height:16px;padding: 0.2em;}
 .section .activity .moodle-actionmenu .menubar > li > img {margin: 0.2em;vertical-align: text-bottom;padding:0 3px 0 0;}
 .section .activity .moodle-actionmenu .iconsmall {vertical-align: baseline;width:16px;height:16px;}

theme/bootstrapbase/less/moodle/course.less

@@ -239,10 +239,21 @@
 .path-site li.activity > div,
 .path-course-view li.activity > div {
     position: relative;
+    padding: 0 16px 0 0; /* to accommodate the floated completion icon with highlighting */
+}
+.dir-rtl.path-site li.activity > div,
+.dir-rtl.path-course-view li.activity > div {
+    position: relative;
+    padding: 0 0 0 16px;
 }
 .path-course-view li.activity span.autocompletion,
 .path-course-view li.activity form.togglecompletion {
     float: right;
+    width: 0; /* Reduce the width of the control to 0 and rely on natural overflow */
+}
+.path-course-view li.activity span.autocompletion img,
+.path-course-view li.activity form.togglecompletion img {
+    max-width: none; /* The width is 0 so ensure we don't end up with a relative max-width */
 }
 .path-course-view li.activity form.togglecompletion .ajaxworking {
     width: 16px;