From b2ed67eb43d0834a66b5baef44da30e9366cd7e1 Mon Sep 17 00:00:00 2001
From: David Woloszyn <david.woloszyn@moodle.com>
Date: Mon, 4 Mar 2024 15:50:35 +1100
Subject: [PATCH] MDL-79920 theme: Introduced new icon circle css class

---
 theme/boost/scss/moodle/core.scss  |  5 +++++
 theme/boost/scss/moodle/icons.scss | 22 ++++++++++++++++++++++
 theme/boost/style/moodle.css       | 25 +++++++++++++++++++++++++
 theme/classic/style/moodle.css     | 25 +++++++++++++++++++++++++
 4 files changed, 77 insertions(+)

diff --git a/theme/boost/scss/moodle/core.scss b/theme/boost/scss/moodle/core.scss
index 250b73bb607..fba267b83e8 100644
--- a/theme/boost/scss/moodle/core.scss
+++ b/theme/boost/scss/moodle/core.scss
@@ -3154,3 +3154,8 @@ blockquote {
         vertical-align: middle;
     }
 }
+
+/* General card customisations. */
+.card.active {
+    border-color: $gray-500;
+}
diff --git a/theme/boost/scss/moodle/icons.scss b/theme/boost/scss/moodle/icons.scss
index 53827c914b6..7b68061612a 100644
--- a/theme/boost/scss/moodle/icons.scss
+++ b/theme/boost/scss/moodle/icons.scss
@@ -204,6 +204,28 @@ $iconsizes: map-merge((
     }
 }
 
+.icon-circle {
+    display: inline-block;
+    background-color: darken($gray-400, 4%);
+    border-radius: 50%;
+    padding: 1.3rem;
+
+    .icon {
+        margin: 0;
+        text-align: center;
+        max-width: unset;
+        max-height: unset;
+        color: $black;
+    }
+
+    &.reversed {
+        background-color: darken($gray-400, 8%);
+        .icon {
+            color: $white;
+        }
+    }
+}
+
 // Make activtity colours available for custom modules.
 :root {
     @each $type, $value in $activity-icon-colors {
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index 9a190efab09..9fae37c70fc 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -26060,6 +26060,11 @@ blockquote {
   vertical-align: middle;
 }
 
+/* General card customisations. */
+.card.active {
+  border-color: #8f959e;
+}
+
 .action-menu .dropdown-toggle {
   text-decoration: none;
   display: inline-block;
@@ -26367,6 +26372,26 @@ body.behat-site .action-menu .dropdown-subpanel-content.show {
   width: 32px;
 }
 
+.icon-circle {
+  display: inline-block;
+  background-color: #c2cad1;
+  border-radius: 50%;
+  padding: 1.3rem;
+}
+.icon-circle .icon {
+  margin: 0;
+  text-align: center;
+  max-width: unset;
+  max-height: unset;
+  color: #000;
+}
+.icon-circle.reversed {
+  background-color: #b7c0c8;
+}
+.icon-circle.reversed .icon {
+  color: #fff;
+}
+
 :root {
   --activityadministration: invert(45%) sepia(46%) saturate(3819%) hue-rotate(260deg) brightness(101%) contrast(87%);
   --activityassessment: invert(36%) sepia(98%) saturate(6969%) hue-rotate(315deg) brightness(90%) contrast(119%);
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index 2ce2cd99c84..fedb95382b6 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -26060,6 +26060,11 @@ blockquote {
   vertical-align: middle;
 }
 
+/* General card customisations. */
+.card.active {
+  border-color: #8f959e;
+}
+
 .action-menu .dropdown-toggle {
   text-decoration: none;
   display: inline-block;
@@ -26367,6 +26372,26 @@ body.behat-site .action-menu .dropdown-subpanel-content.show {
   width: 32px;
 }
 
+.icon-circle {
+  display: inline-block;
+  background-color: #c2cad1;
+  border-radius: 50%;
+  padding: 1.3rem;
+}
+.icon-circle .icon {
+  margin: 0;
+  text-align: center;
+  max-width: unset;
+  max-height: unset;
+  color: #000;
+}
+.icon-circle.reversed {
+  background-color: #b7c0c8;
+}
+.icon-circle.reversed .icon {
+  color: #fff;
+}
+
 :root {
   --activityadministration: invert(45%) sepia(46%) saturate(3819%) hue-rotate(260deg) brightness(101%) contrast(87%);
   --activityassessment: invert(36%) sepia(98%) saturate(6969%) hue-rotate(315deg) brightness(90%) contrast(119%);