From af50bda3d687fd1e971e8fdced30c8c82857cca9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mikel=20Mart=C3=ADn?= <mikel@moodle.com>
Date: Wed, 31 Jan 2024 16:25:29 +0100
Subject: [PATCH] MDL-80620 theme_boost: Change expand/collapse buttons style

---
 theme/boost/scss/moodle/buttons.scss | 9 +++++++++
 theme/boost/style/moodle.css         | 8 ++++++++
 theme/classic/style/moodle.css       | 8 ++++++++
 3 files changed, 25 insertions(+)

diff --git a/theme/boost/scss/moodle/buttons.scss b/theme/boost/scss/moodle/buttons.scss
index c03e10c98f5..649fc752fc7 100644
--- a/theme/boost/scss/moodle/buttons.scss
+++ b/theme/boost/scss/moodle/buttons.scss
@@ -61,6 +61,15 @@ p.arrow_button {
     }
 }
 
+// Specific styles for the collapse/expand buttons.
+.btn.btn-icon.icons-collapse-expand {
+    color: $primary;
+    background-color: $primary-light-background;
+    &:hover {
+        outline: 2px solid $primary;
+    }
+}
+
 @mixin button-focus($background, $innershadow) {
     &:focus,
     &.focus {
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index 06cbfe8dccf..e86b6ee8ff2 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -35229,6 +35229,14 @@ p.arrow_button {
   line-height: 48px !important; /* stylelint-disable-line declaration-no-important */
 }
 
+.btn.btn-icon.icons-collapse-expand {
+  color: #0f6cbf;
+  background-color: #f5f9fc;
+}
+.btn.btn-icon.icons-collapse-expand:hover {
+  outline: 2px solid #0f6cbf;
+}
+
 .btn-primary:focus, .btn-primary.focus {
   outline: 0.2rem solid #000102;
   box-shadow: inset 0 0 0 2px #fff;
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index d6adb76f1e5..4f2914f1cea 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -35229,6 +35229,14 @@ p.arrow_button {
   line-height: 48px !important; /* stylelint-disable-line declaration-no-important */
 }
 
+.btn.btn-icon.icons-collapse-expand {
+  color: #0f6cbf;
+  background-color: #f5f9fc;
+}
+.btn.btn-icon.icons-collapse-expand:hover {
+  outline: 2px solid #0f6cbf;
+}
+
 .btn-primary:focus, .btn-primary.focus {
   outline: 0.2rem solid #000102;
   box-shadow: inset 0 0 0 2px #fff;