MDL-74869 theme: Moved activity icon color into variables

Moved colors of the activity-icon-colors map into variables
with default value to make them easy to override.
This commit is contained in:
Benjamin Abraham
2023-07-14 09:46:55 +02:00
parent e77452220b
commit c8482f09c6
2 changed files with 20 additions and 15 deletions
@@ -68,17 +68,15 @@ each defined as 'MOD_PURPOSE_X', so Assessment is MOD_PURPOSE_ASSESSMENT.
### Purpose colours
The activity icon colours can be customised using the theme Boost 'Raw initial SCSS' feature. Simply copy this array of scss colours, customise the colours and done! There is no background colour for the 'Other' type purpose, it defaults to ```light-grey: #f8f9fa```.
The activity icon colours can be customised using the theme Boost 'Raw initial SCSS' feature. Simply copy any of these scss variables that you want to customize, change the colour value and done! There is no background colour for the 'Other' type purpose, it defaults to ```light-grey: #f8f9fa```.
{{< highlight scss >}}
$activity-icon-colors: (
"administration": #5d63f6,
"assessment": #eb00a2,
"collaboration": #f7634d,
"communication": #11a676,
"content": #399be2,
"interface": #a378ff
);
$activity-icon-administration-bg: #5d63f6;
$activity-icon-assessment-bg: #eb66a2;
$activity-icon-collaboration-bg: #f7634d;
$activity-icon-communication-bg: #11a676;
$activity-icon-content-bg: #399be2;
$activity-icon-interface-bg: #a378ff;
{{</ highlight >}}
### Custom activity icons
+13 -6
View File
@@ -40,15 +40,22 @@ $primary-light-hover: theme-color-level('primary', -10) !default;
$activity-iconcontainer-height: 50px;
$activity-iconcontainer-width: 50px;
$activity-icon-administration-bg: #5d63f6 !default;
$activity-icon-assessment-bg: #eb66a2 !default;
$activity-icon-collaboration-bg: #f7634d !default;
$activity-icon-communication-bg: #11a676 !default;
$activity-icon-content-bg: #399be2 !default;
$activity-icon-interface-bg: #a378ff !default;
$activity-icon-colors: () !default;
$activity-icon-colors: map-merge(
(
"administration": #5d63f6,
"assessment": #eb66a2,
"collaboration": #f7634d,
"communication": #11a676,
"content": #399be2,
"interface": #a378ff
"administration": $activity-icon-administration-bg,
"assessment": $activity-icon-assessment-bg,
"collaboration": $activity-icon-collaboration-bg,
"communication": $activity-icon-communication-bg,
"content": $activity-icon-content-bg,
"interface": $activity-icon-interface-bg
),
$activity-icon-colors
);