MDL-81819 theme_boost: Refactor .close usages for BS5

- Add .btn-close to the Boostratp 5 bridge SCSS file
- Replace .close occurrences with .btn-close
- Fix styles using .close

admin/tool/componentlibrary/content/library/moodle-javascript.md

@@ -19,7 +19,7 @@ In order for this to work you need to use the JavaScript syntax used in core Mus
     <img src="http://placekitten.com/50/50" class="rounded mr-2" alt="PlaceKitten">
     <strong class="mr-auto">Bootstrap</strong>
     <small>11 mins ago</small>
-    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
+    <button type="button" class="ml-2 mb-1 btn-close" data-dismiss="toast" aria-label="Close">
       <span aria-hidden="true">&times;</span>
     </button>
   </div>

admin/tool/componentlibrary/content/moodle/components/notifications.md

@@ -18,7 +18,7 @@ Notifications are coupled with actions and provide instant feedback to the actio
 
 {{< example show_markup="false">}}
 <div class="alert alert-info alert-block fade in foo bar" role="alert" data-aria-autofocus="true" id="yui_3_17_2_1_1599746674354_24">
-    <button type="button" class="close" data-dismiss="alert">×</button>
+    <button type="button" class="btn-close" data-dismiss="alert">×</button>
     Hello
 </div>
 {{< /example >}}

enrol/yui/rolemanager/rolemanager.js

@@ -362,7 +362,7 @@ YUI.add('moodle-enrol-rolemanager', function(Y) {
             var i, m = this.get(MANIPULATOR);
             var element = Y.Node.create('<div class="popover popover-bottom"><div class="arrow"></div>' +
                                         '<div class="header popover-title">' +
-                                        '<div role="button" class="close" aria-label="' +
+                                        '<div role="button" class="btn-close" aria-label="' +
                                         M.util.get_string('closebuttontitle', 'moodle') + '">' +
                                         '<span aria-hidden="true">&times;</span></div>' +
                                         '<h3>'+M.util.get_string('assignroles', 'role')+'</h3>' +
@@ -381,7 +381,7 @@ YUI.add('moodle-enrol-rolemanager', function(Y) {
             Y.one(document.body).append(element);
             this.set('elementNode', element);
             this.set('contentNode', content);
-            element.one('.header .close').on('click', this.hide, this);
+            element.one('.header .btn-close').on('click', this.hide, this);
         },
         display : function(user) {
             var currentroles = user.get(CURRENTROLES), node = null;

lib/templates/local/process_monitor/monitor.mustache

@@ -41,7 +41,7 @@
         </h5>
         <button
             type="button"
-            class="close"
+            class="btn-close"
             data-action="hide"
             aria-label="{{#str}}closebuttontitle, core{{/str}}"
         >

lib/templates/local/process_monitor/process.mustache

@@ -38,7 +38,7 @@
             <progress value="{{percentage}}" max="100"></progress>
             <button
                 type="button"
-                class="d-none close"
+                class="d-none btn-close"
                 data-action="closeProcess"
                 aria-label="{{#str}}closebuttontitle, core{{/str}}"
             >

lib/templates/local/toast/message.mustache

@@ -46,7 +46,7 @@
     <div class="toast-body d-flex">
         <div class="toast-message px-1">{{{message}}}</div>
         {{#closeButton}}
-        <button type="button" class="ml-auto align-self-baseline close" data-dismiss="toast" aria-label="{{#str}}dismissnotification, core{{/str}}">
+        <button type="button" class="ml-auto align-self-baseline btn-close" data-dismiss="toast" aria-label="{{#str}}dismissnotification, core{{/str}}">
             <span aria-hidden="true">&times;</span>
         </button>
         {{/closeButton}}

lib/templates/modal.mustache

@@ -48,7 +48,7 @@
                 {{$header}}
                     <h5 id="{{uniqid}}-modal-title" class="modal-title" data-region="title">{{$title}}{{title}}{{/title}}</h5>
                 {{/header}}
-                <button type="button" class="close" data-action="hide" aria-label="{{#cleanstr}}closebuttontitle{{/cleanstr}}">
+                <button type="button" class="btn-close" data-action="hide" aria-label="{{#cleanstr}}closebuttontitle{{/cleanstr}}">
                   <span aria-hidden="true">&times;</span>
                 </button>
             </div>

lib/templates/moodlenet/send_activity_modal_base.mustache

@@ -33,7 +33,7 @@
                         <span class="moodlenet-title">{{#str}} moodlenet:sharetomoodlenet, moodle {{/str}}</span>
                     </div>
                 </div>
-                <button type="button" class="close" data-action="hide" aria-label="{{#cleanstr}}closebuttontitle{{/cleanstr}}">
+                <button type="button" class="btn-close" data-action="hide" aria-label="{{#cleanstr}}closebuttontitle{{/cleanstr}}">
                     <span aria-hidden="true">&times;</span>
                 </button>
             </div>

lib/templates/notification_base.mustache

@@ -45,7 +45,7 @@
         }}{{# announce }} role="alert" data-aria-autofocus="true"{{/ announce }}>
     {{{ message }}}
     {{# closebutton }}{{!
-    }}<button type="button" class="close" data-dismiss="alert">
+    }}<button type="button" class="btn-close" data-dismiss="alert">
         <span aria-hidden="true">&times;</span>
         <span class="sr-only">{{#str}}dismissnotification, core{{/str}}</span>
     </button>{{!

message/templates/message_drawer_view_conversation_header_edit_mode.mustache

@@ -38,7 +38,7 @@
 <div class="d-flex p-2 align-items-center">
     {{#str}} messagesselected:, core_message {{/str}}
     <span class="ml-1" data-region="message-selected-court">1</span>
-    <button type="button" class="ml-auto close" aria-label="{{#str}} cancelselection, core_message {{/str}}"
+    <button type="button" class="ml-auto btn-close" aria-label="{{#str}} cancelselection, core_message {{/str}}"
         data-action="cancel-edit-mode">
             <span aria-hidden="true">&times;</span>
     </button>

theme/boost/scss/moodle/bs5-bridge.scss

@@ -5,3 +5,7 @@
 .g-0 {
     @extend .no-gutters;
 }
+
+.btn-close {
+    @extend .close;
+}

theme/boost/scss/moodle/core.scss

@@ -148,7 +148,7 @@ input[type="image"],
 .sr-only-focusable,
 a.dropdown-toggle,
 .moodle-dialogue-base .closebutton,
-button.close,
+button.btn-close,
 .form-autocomplete-selection,
 [role="treeitem"]:not([aria-expanded="true"]) {
     &.focus,
@@ -2612,7 +2612,7 @@ $picker-emojis-per-row: 7 !default;
             color: darken(theme-color-level($color, $alert-color-level), 10%);
         }
         // Darken the close button text colour inside notification alerts for better contrast.
-        .close {
+        .btn-close {
             color: darken(theme-color-level($color, $alert-color-level), 20%);
             opacity: 0.6;
         }

theme/boost/scss/moodle/modal.scss

@@ -17,7 +17,7 @@
     }
 
     // Override Bootstrap .close for better accessibility.
-    .close {
+    .btn-close {
         // Adjust the margins so the focus outline does not look clipped.
         margin: -0.8rem -0.8rem -0.8rem auto;
 

theme/boost/scss/moodle/search.scss

@@ -39,6 +39,9 @@
     }
     .btn-close {
         right: 2.2rem;
+        opacity: inherit;
+        font-size: inherit;
+        line-height: inherit;
     }
     .btn-submit {
         background-color: $gray-100;

theme/boost/scss/moodle/toasts.scss

@@ -43,7 +43,7 @@
         }
     }
 
-    .close {
+    .btn-close {
         color: inherit;
     }
 }

theme/boost/style/moodle.css

@@ -18092,7 +18092,7 @@ a.badge-dark:focus, a.badge-dark.focus {
 .alert-dismissible {
   padding-right: 3.90625rem;
 }
-.alert-dismissible .close {
+.alert-dismissible .close, .alert-dismissible .btn-close {
   position: absolute;
   top: 0;
   right: 0;
@@ -18554,7 +18554,7 @@ a.badge-dark:focus, a.badge-dark.focus {
   border-color: #1b1e21;
 }
 
-.close {
+.close, .btn-close {
   float: right;
   font-size: 1.40625rem;
   font-weight: 700;
@@ -18564,25 +18564,25 @@ a.badge-dark:focus, a.badge-dark.focus {
   opacity: 0.5;
 }
 @media (max-width: 1200px) {
-  .close {
+  .close, .btn-close {
     font-size: calc(0.950625rem + 0.6075vw);
   }
 }
-.close:hover {
+.close:hover, .btn-close:hover {
   color: #000;
   text-decoration: none;
 }
-.close:not(:disabled):not(.disabled):hover, .close:not(:disabled):not(.disabled):focus {
+.close:not(:disabled):not(.disabled):hover, .btn-close:not(:disabled):not(.disabled):hover, .close:not(:disabled):not(.disabled):focus, .btn-close:not(:disabled):not(.disabled):focus {
   opacity: 0.75;
 }
 
-button.close {
+button.close, button.btn-close {
   padding: 0;
   background-color: transparent;
   border: 0;
 }
 
-a.close.disabled {
+a.close.disabled, a.disabled.btn-close {
   pointer-events: none;
 }
 
@@ -18747,7 +18747,7 @@ a.close.disabled {
   border-top-left-radius: calc(0.6rem - 1px);
   border-top-right-radius: calc(0.6rem - 1px);
 }
-.modal-header .close {
+.modal-header .close, .modal-header .btn-close {
   padding: 1rem 1rem;
   margin: -1rem -1rem -1rem auto;
 }
@@ -23147,8 +23147,8 @@ a.dropdown-toggle.focus,
 a.dropdown-toggle:focus,
 .moodle-dialogue-base .closebutton.focus,
 .moodle-dialogue-base .closebutton:focus,
-button.close.focus,
-button.close:focus,
+button.btn-close.focus,
+button.btn-close:focus,
 .form-autocomplete-selection.focus,
 .form-autocomplete-selection:focus,
 [role=treeitem]:not([aria-expanded=true]).focus,
@@ -23170,7 +23170,7 @@ input[type=image]:focus:hover,
 .sr-only-focusable:focus:hover,
 a.dropdown-toggle:focus:hover,
 .moodle-dialogue-base .closebutton:focus:hover,
-button.close:focus:hover,
+button.btn-close:focus:hover,
 .form-autocomplete-selection:focus:hover,
 [role=treeitem]:not([aria-expanded=true]):focus:hover {
   text-decoration: none;
@@ -25581,7 +25581,7 @@ input[disabled] {
 .alert-primary a {
   color: #041d34;
 }
-.alert-primary .close {
+.alert-primary .btn-close {
   color: #000305;
   opacity: 0.6;
 }
@@ -25589,7 +25589,7 @@ input[disabled] {
 .alert-secondary a {
   color: #525557;
 }
-.alert-secondary .close {
+.alert-secondary .btn-close {
   color: #393b3d;
   opacity: 0.6;
 }
@@ -25597,7 +25597,7 @@ input[disabled] {
 .alert-success a, .environmenttable .ok a {
   color: #0c1b0b;
 }
-.alert-success .close, .environmenttable .ok .close {
+.alert-success .btn-close, .environmenttable .ok .btn-close {
   color: black;
   opacity: 0.6;
 }
@@ -25605,7 +25605,7 @@ input[disabled] {
 .alert-info a {
   color: #00171b;
 }
-.alert-info .close {
+.alert-info .btn-close {
   color: black;
   opacity: 0.6;
 }
@@ -25613,7 +25613,7 @@ input[disabled] {
 .alert-warning a, .environmenttable .warn a {
   color: #573e1c;
 }
-.alert-warning .close, .environmenttable .warn .close {
+.alert-warning .btn-close, .environmenttable .warn .btn-close {
   color: #302310;
   opacity: 0.6;
 }
@@ -25621,7 +25621,7 @@ input[disabled] {
 .alert-danger a, .environmenttable .error a {
   color: #3d0f0a;
 }
-.alert-danger .close, .environmenttable .error .close {
+.alert-danger .btn-close, .environmenttable .error .btn-close {
   color: #110403;
   opacity: 0.6;
 }
@@ -25629,7 +25629,7 @@ input[disabled] {
 .alert-light a {
   color: #686868;
 }
-.alert-light .close {
+.alert-light .btn-close {
   color: #4e4e4f;
   opacity: 0.6;
 }
@@ -25637,7 +25637,7 @@ input[disabled] {
 .alert-dark a {
   color: #040505;
 }
-.alert-dark .close {
+.alert-dark .btn-close {
   color: black;
   opacity: 0.6;
 }
@@ -32895,6 +32895,9 @@ body.path-question-type .mform fieldset.hidden {
 }
 .simplesearchform .btn-close {
   right: 2.2rem;
+  opacity: inherit;
+  font-size: inherit;
+  line-height: inherit;
 }
 .simplesearchform .btn-submit {
   background-color: #f8f9fa;
@@ -37009,10 +37012,10 @@ span[data-flexitour=container][x-placement=right] div[data-role=arrow]:after, sp
   left: 50%;
   transform: translate(-50%, -50%);
 }
-.modal .close {
+.modal .btn-close {
   margin: -0.8rem -0.8rem -0.8rem auto;
 }
-.modal .close:not(:disabled):not(.disabled):hover, .modal .close:not(:disabled):not(.disabled):focus {
+.modal .btn-close:not(:disabled):not(.disabled):hover, .modal .btn-close:not(:disabled):not(.disabled):focus {
   opacity: inherit;
 }
 
@@ -37763,7 +37766,7 @@ div.editor_atto_toolbar button .icon {
   margin: 2px 5px 0 0;
   content: "\f06a";
 }
-.toast .close {
+.toast .btn-close {
   color: inherit;
 }
 

theme/classic/style/moodle.css

@@ -18092,7 +18092,7 @@ a.badge-dark:focus, a.badge-dark.focus {
 .alert-dismissible {
   padding-right: 3.90625rem;
 }
-.alert-dismissible .close {
+.alert-dismissible .close, .alert-dismissible .btn-close {
   position: absolute;
   top: 0;
   right: 0;
@@ -18554,7 +18554,7 @@ a.badge-dark:focus, a.badge-dark.focus {
   border-color: #1b1e21;
 }
 
-.close {
+.close, .btn-close {
   float: right;
   font-size: 1.40625rem;
   font-weight: 700;
@@ -18564,25 +18564,25 @@ a.badge-dark:focus, a.badge-dark.focus {
   opacity: 0.5;
 }
 @media (max-width: 1200px) {
-  .close {
+  .close, .btn-close {
     font-size: calc(0.950625rem + 0.6075vw);
   }
 }
-.close:hover {
+.close:hover, .btn-close:hover {
   color: #000;
   text-decoration: none;
 }
-.close:not(:disabled):not(.disabled):hover, .close:not(:disabled):not(.disabled):focus {
+.close:not(:disabled):not(.disabled):hover, .btn-close:not(:disabled):not(.disabled):hover, .close:not(:disabled):not(.disabled):focus, .btn-close:not(:disabled):not(.disabled):focus {
   opacity: 0.75;
 }
 
-button.close {
+button.close, button.btn-close {
   padding: 0;
   background-color: transparent;
   border: 0;
 }
 
-a.close.disabled {
+a.close.disabled, a.disabled.btn-close {
   pointer-events: none;
 }
 
@@ -18747,7 +18747,7 @@ a.close.disabled {
   border-top-left-radius: calc(0.3rem - 1px);
   border-top-right-radius: calc(0.3rem - 1px);
 }
-.modal-header .close {
+.modal-header .close, .modal-header .btn-close {
   padding: 1rem 1rem;
   margin: -1rem -1rem -1rem auto;
 }
@@ -23147,8 +23147,8 @@ a.dropdown-toggle.focus,
 a.dropdown-toggle:focus,
 .moodle-dialogue-base .closebutton.focus,
 .moodle-dialogue-base .closebutton:focus,
-button.close.focus,
-button.close:focus,
+button.btn-close.focus,
+button.btn-close:focus,
 .form-autocomplete-selection.focus,
 .form-autocomplete-selection:focus,
 [role=treeitem]:not([aria-expanded=true]).focus,
@@ -23170,7 +23170,7 @@ input[type=image]:focus:hover,
 .sr-only-focusable:focus:hover,
 a.dropdown-toggle:focus:hover,
 .moodle-dialogue-base .closebutton:focus:hover,
-button.close:focus:hover,
+button.btn-close:focus:hover,
 .form-autocomplete-selection:focus:hover,
 [role=treeitem]:not([aria-expanded=true]):focus:hover {
   text-decoration: none;
@@ -25581,7 +25581,7 @@ input[disabled] {
 .alert-primary a {
   color: #041d34;
 }
-.alert-primary .close {
+.alert-primary .btn-close {
   color: #000305;
   opacity: 0.6;
 }
@@ -25589,7 +25589,7 @@ input[disabled] {
 .alert-secondary a {
   color: #525557;
 }
-.alert-secondary .close {
+.alert-secondary .btn-close {
   color: #393b3d;
   opacity: 0.6;
 }
@@ -25597,7 +25597,7 @@ input[disabled] {
 .alert-success a, .environmenttable .ok a {
   color: #0c1b0b;
 }
-.alert-success .close, .environmenttable .ok .close {
+.alert-success .btn-close, .environmenttable .ok .btn-close {
   color: black;
   opacity: 0.6;
 }
@@ -25605,7 +25605,7 @@ input[disabled] {
 .alert-info a {
   color: #00171b;
 }
-.alert-info .close {
+.alert-info .btn-close {
   color: black;
   opacity: 0.6;
 }
@@ -25613,7 +25613,7 @@ input[disabled] {
 .alert-warning a, .environmenttable .warn a {
   color: #573e1c;
 }
-.alert-warning .close, .environmenttable .warn .close {
+.alert-warning .btn-close, .environmenttable .warn .btn-close {
   color: #302310;
   opacity: 0.6;
 }
@@ -25621,7 +25621,7 @@ input[disabled] {
 .alert-danger a, .environmenttable .error a {
   color: #3d0f0a;
 }
-.alert-danger .close, .environmenttable .error .close {
+.alert-danger .btn-close, .environmenttable .error .btn-close {
   color: #110403;
   opacity: 0.6;
 }
@@ -25629,7 +25629,7 @@ input[disabled] {
 .alert-light a {
   color: #686868;
 }
-.alert-light .close {
+.alert-light .btn-close {
   color: #4e4e4f;
   opacity: 0.6;
 }
@@ -25637,7 +25637,7 @@ input[disabled] {
 .alert-dark a {
   color: #040505;
 }
-.alert-dark .close {
+.alert-dark .btn-close {
   color: black;
   opacity: 0.6;
 }
@@ -32895,6 +32895,9 @@ body.path-question-type .mform fieldset.hidden {
 }
 .simplesearchform .btn-close {
   right: 2.2rem;
+  opacity: inherit;
+  font-size: inherit;
+  line-height: inherit;
 }
 .simplesearchform .btn-submit {
   background-color: #f8f9fa;
@@ -36943,10 +36946,10 @@ span[data-flexitour=container][x-placement=right] div[data-role=arrow]:after, sp
   left: 50%;
   transform: translate(-50%, -50%);
 }
-.modal .close {
+.modal .btn-close {
   margin: -0.8rem -0.8rem -0.8rem auto;
 }
-.modal .close:not(:disabled):not(.disabled):hover, .modal .close:not(:disabled):not(.disabled):focus {
+.modal .btn-close:not(:disabled):not(.disabled):hover, .modal .btn-close:not(:disabled):not(.disabled):focus {
   opacity: inherit;
 }
 
@@ -37697,7 +37700,7 @@ div.editor_atto_toolbar button .icon {
   margin: 2px 5px 0 0;
   content: "\f06a";
 }
-.toast .close {
+.toast .btn-close {
   color: inherit;
 }