[docs] Dev update Bootstrap mixins refactor

This is for documenting changes in https://tracker.moodle.org/browse/MDL-80395.
In BS5 some previously deprecated mixins are dropped. They can be
refactored without waiting for the BS upgrade.

docs/devupdate.md

@@ -68,6 +68,8 @@ shortname,fullname,category,summary,cohort,student,cohort,teacher
 
 Some of the Bootstrap 4 classes will be deprecated or dropped in its version 5. To prepare for this, some of the current Bootstrap 4 classes usages have been replaced with version 5 compatible classes. This will help us to upgrade to Bootstrap 5 in the future.
 
+### Badges
+
 - Badge colour class helpers `.badge-*` have been replaced with background utilities (use `.bg-primary` instead of `.badge-primary`) combined with the corresponding text colour classes (`.text-dark` or `.text-white`) to meet accessibility contrast.
 - The `.badge-pill` class has been replaced with `.rounded-pill`
 
@@ -87,7 +89,9 @@ Some of the Bootstrap 4 classes will be deprecated or dropped in its version 5.
 
 </ValidExample>
 
-- The `.media` component has been replaced with utility classes.
+### Media
+
+The `.media` component has been replaced with utility classes.
 
 <InvalidExample title="Don't">
 
@@ -119,6 +123,51 @@ Some of the Bootstrap 4 classes will be deprecated or dropped in its version 5.
 
 </ValidExample>
 
+### Mixins
+
+The following previously deprecated mixins will be dropped in BS5, so they can be refactored:
+
+- hover, hover-focus, plain-hover-focus and hover-focus-active
+- float-left, float-right and float-none
+- nav-divider
+- img-retina
+- text-hide
+- invisible
+- form-control-focus
+- text-emphasis-variant
+- size
+- make-container-max-widths
+- g-variant and bg-gradient-variant
+
+<InvalidExample title="Don't">
+
+```css
+.collapse-list-item {
+    padding: $collapse-list-item-padding-y $collapse-list-item-padding-x;
+    @include hover-focus() {
+        background-color: $collapse-list-item-hover-bg;
+        border-color: $collapse-list-item-hover-border;
+    }
+}
+```
+
+</InvalidExample>
+
+<ValidExample title="Do">
+
+```css
+.collapse-list-item {
+    padding: $collapse-list-item-padding-y $collapse-list-item-padding-x;
+    &:hover,
+    &:focus {
+        background-color: $collapse-list-item-hover-bg;
+        border-color: $collapse-list-item-hover-border;
+    }
+}
+```
+
+</ValidExample>
+
 ## Previous versions
 
 - [Moodle 4.3 developer update](./4.3/devupdate)