L-electron-Rare/moodle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

MDL-84954 theme_boost: Fix activity icons sizing styles

Browse Source
This commit is contained in:
Mikel Martín
2025-05-12 15:21:08 +02:00
committed by ferran
parent 68dc80bd74
commit e44195b5eb
6 changed files with 170 additions and 180 deletions
Download Patch File Download Diff File Expand all files Collapse all files
blocks/timeline/templates/event-list-item.mustache
+1 -1
View File
@@ -55,7 +55,7 @@
{{#userdate}} {{timesort}}, {{#str}} strftimetime24, core_langconfig {{/str}} {{/userdate}}
</small>
<div
class="small courseicon align-self-top align-self-center mx-3 mb-1 mb-sm-0 text-nowrap {{!
class="small courseicon align-self-top align-self-center mx-2 mb-1 mb-sm-0 text-nowrap {{!
}} activityiconcontainer {{#purpose}}{{purpose}}{{/purpose}}"
>
{{#icon}}
calendar/templates/upcoming_mini.mustache
+1 -1
View File
@@ -45,7 +45,7 @@
}} data-region="event-item"{{!
}}>
<div
class="activityiconcontainer small courseicon me-3 {{!
class="activityiconcontainer small courseicon me-2 {{!
}}{{#purpose}}{{purpose}}{{/purpose}}"
>
{{#icon}}
theme/boost/classes/output/core_renderer.php
+1 -1
View File
@@ -201,7 +201,7 @@ class core_renderer extends \core_renderer {
];
$imagedata = html_writer::img($iconurl->out(false), '', $iconattrs);
$purposeclass = plugin_supports('mod', $this->page->activityname, FEATURE_MOD_PURPOSE);
$purposeclass .= ' activityiconcontainer icon-size-6';
$purposeclass .= ' activityiconcontainer me-2';
$purposeclass .= ' modicon_' . $this->page->activityname;
$isbranded = component_callback('mod_' . $this->page->activityname, 'is_branded', [], false);
$imagedata = html_writer::tag('div', $imagedata, ['class' => $purposeclass . ($isbranded ? ' isbranded' : '')]);
theme/boost/scss/moodle/icons.scss
+45 -49
View File
@@ -192,55 +192,6 @@ img.icon {
}
}
// Revisit these styles when MDL-78284 lands with new icons.
// Icon container will be removed and icons will be used directly.
.activityiconcontainer {
display: inline-flex;
justify-content: center;
align-items: center;
border-radius: 4px;
.activityicon,
.icon {
margin: 0;
font-size: $icon-medium-height;
height: $icon-medium-height;
width: $icon-medium-width;
max-height: $icon-medium-height;
max-width: $icon-medium-width;
}
&.small {
width: $activity-iconcontainer-width - 10px;
height: $activity-iconcontainer-height - 10px;
max-width: $activity-iconcontainer-width - 10px;
max-height: $activity-iconcontainer-height - 10px;
}
&.smaller {
width: $activity-iconcontainer-width - 20px;
height: $activity-iconcontainer-height - 20px;
max-width: $activity-iconcontainer-width - 20px;
max-height: $activity-iconcontainer-height - 20px;
.activityicon {
width: $icon-medium-width;
height: $icon-medium-height;
max-width: $icon-medium-width;
max-height: $icon-medium-height;
}
}
}
@each $type, $value in $activity-icon-colors {
.activityiconcontainer.#{$type} {
&:not(.isbranded) {
.activityicon,
.icon {
&:not(.nofilter) {
@include recolor-icon($value, 1);
}
}
}
}
}
.icon-box {
width: $icon-box-width;
height: $icon-box-height;
@@ -280,6 +231,51 @@ img.icon {
}
}
/*
* Activity icons
*/
.activityiconcontainer {
width: $activity-iconcontainer-width;
height: $activity-iconcontainer-height;
max-width: $activity-iconcontainer-width;
max-height: $activity-iconcontainer-height;
&.small {
width: $activity-iconcontainer-width - 10px;
height: $activity-iconcontainer-height - 10px;
max-width: $activity-iconcontainer-width - 10px;
max-height: $activity-iconcontainer-height - 10px;
}
&.smaller {
width: $activity-iconcontainer-width - 20px;
height: $activity-iconcontainer-height - 20px;
max-width: $activity-iconcontainer-width - 20px;
max-height: $activity-iconcontainer-height - 20px;
}
.activityicon,
.icon {
margin: 0;
font-size: inherit;
width: inherit;
height: inherit;
max-width: inherit;
max-height: inherit;
}
}
@each $type, $value in $activity-icon-colors {
.activityiconcontainer.#{$type} {
&:not(.isbranded) {
.activityicon,
.icon {
&:not(.nofilter) {
@include recolor-icon($value, 1);
}
}
}
}
}
// Make activtity colours available for custom modules.
:root {
@each $type, $value in $activity-icon-colors {
theme/boost/style/moodle.css
+61 -64
View File
@@ -28836,70 +28836,6 @@ img.icon {
align-items: center;
}
.activityiconcontainer {
display: inline-flex;
justify-content: center;
align-items: center;
border-radius: 4px;
}
.activityiconcontainer .activityicon,
.activityiconcontainer .icon {
margin: 0;
font-size: 32px;
height: 32px;
width: 40px;
max-height: 32px;
max-width: 40px;
}
.activityiconcontainer.small {
width: 42px;
height: 42px;
max-width: 42px;
max-height: 42px;
}
.activityiconcontainer.smaller {
width: 32px;
height: 32px;
max-width: 32px;
max-height: 32px;
}
.activityiconcontainer.smaller .activityicon {
width: 40px;
height: 32px;
max-width: 40px;
max-height: 32px;
}
.activityiconcontainer.administration:not(.isbranded) .activityicon:not(.nofilter),
.activityiconcontainer.administration:not(.isbranded) .icon:not(.nofilter) {
filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0 0 0 0 0.8549019608 0 0 0 0 0.3450980392 0 0 0 0 0.937254902 0 0 0 1 0 "/></filter></svg>#recolor');
}
.activityiconcontainer.assessment:not(.isbranded) .activityicon:not(.nofilter),
.activityiconcontainer.assessment:not(.isbranded) .icon:not(.nofilter) {
filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0 0 0 0 0.9764705882 0 0 0 0 0 0 0 0 0 0.5254901961 0 0 0 1 0 "/></filter></svg>#recolor');
}
.activityiconcontainer.collaboration:not(.isbranded) .activityicon:not(.nofilter),
.activityiconcontainer.collaboration:not(.isbranded) .icon:not(.nofilter) {
filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0 0 0 0 0.3568627451 0 0 0 0 0.2509803922 0 0 0 0 1 0 0 0 1 0 "/></filter></svg>#recolor');
}
.activityiconcontainer.communication:not(.isbranded) .activityicon:not(.nofilter),
.activityiconcontainer.communication:not(.isbranded) .icon:not(.nofilter) {
filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0 0 0 0 0.9215686275 0 0 0 0 0.3843137255 0 0 0 0 0 0 0 0 1 0 "/></filter></svg>#recolor');
}
.activityiconcontainer.content:not(.isbranded) .activityicon:not(.nofilter),
.activityiconcontainer.content:not(.isbranded) .icon:not(.nofilter) {
filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.6 0 0 0 0 0.6784313725 0 0 0 1 0 "/></filter></svg>#recolor');
}
.activityiconcontainer.interactivecontent:not(.isbranded) .activityicon:not(.nofilter),
.activityiconcontainer.interactivecontent:not(.isbranded) .icon:not(.nofilter) {
filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0 0 0 0 0.5529411765 0 0 0 0 0.2392156863 0 0 0 0 0.1058823529 0 0 0 1 0 "/></filter></svg>#recolor');
}
.icon-box {
width: 60px;
height: 48px;
@@ -28936,6 +28872,67 @@ img.icon {
color: #fff;
}
/*
* Activity icons
*/
.activityiconcontainer {
width: 52px;
height: 52px;
max-width: 52px;
max-height: 52px;
}
.activityiconcontainer.small {
width: 42px;
height: 42px;
max-width: 42px;
max-height: 42px;
}
.activityiconcontainer.smaller {
width: 32px;
height: 32px;
max-width: 32px;
max-height: 32px;
}
.activityiconcontainer .activityicon,
.activityiconcontainer .icon {
margin: 0;
font-size: inherit;
width: inherit;
height: inherit;
max-width: inherit;
max-height: inherit;
}
.activityiconcontainer.administration:not(.isbranded) .activityicon:not(.nofilter),
.activityiconcontainer.administration:not(.isbranded) .icon:not(.nofilter) {
filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0 0 0 0 0.8549019608 0 0 0 0 0.3450980392 0 0 0 0 0.937254902 0 0 0 1 0 "/></filter></svg>#recolor');
}
.activityiconcontainer.assessment:not(.isbranded) .activityicon:not(.nofilter),
.activityiconcontainer.assessment:not(.isbranded) .icon:not(.nofilter) {
filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0 0 0 0 0.9764705882 0 0 0 0 0 0 0 0 0 0.5254901961 0 0 0 1 0 "/></filter></svg>#recolor');
}
.activityiconcontainer.collaboration:not(.isbranded) .activityicon:not(.nofilter),
.activityiconcontainer.collaboration:not(.isbranded) .icon:not(.nofilter) {
filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0 0 0 0 0.3568627451 0 0 0 0 0.2509803922 0 0 0 0 1 0 0 0 1 0 "/></filter></svg>#recolor');
}
.activityiconcontainer.communication:not(.isbranded) .activityicon:not(.nofilter),
.activityiconcontainer.communication:not(.isbranded) .icon:not(.nofilter) {
filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0 0 0 0 0.9215686275 0 0 0 0 0.3843137255 0 0 0 0 0 0 0 0 1 0 "/></filter></svg>#recolor');
}
.activityiconcontainer.content:not(.isbranded) .activityicon:not(.nofilter),
.activityiconcontainer.content:not(.isbranded) .icon:not(.nofilter) {
filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.6 0 0 0 0 0.6784313725 0 0 0 1 0 "/></filter></svg>#recolor');
}
.activityiconcontainer.interactivecontent:not(.isbranded) .activityicon:not(.nofilter),
.activityiconcontainer.interactivecontent:not(.isbranded) .icon:not(.nofilter) {
filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0 0 0 0 0.5529411765 0 0 0 0 0.2392156863 0 0 0 0 0.1058823529 0 0 0 1 0 "/></filter></svg>#recolor');
}
:root {
--activityadministration: #da58ef;
--activityassessment: #f90086;
theme/classic/style/moodle.css
+61 -64
View File
@@ -28836,70 +28836,6 @@ img.icon {
align-items: center;
}
.activityiconcontainer {
display: inline-flex;
justify-content: center;
align-items: center;
border-radius: 4px;
}
.activityiconcontainer .activityicon,
.activityiconcontainer .icon {
margin: 0;
font-size: 32px;
height: 32px;
width: 40px;
max-height: 32px;
max-width: 40px;
}
.activityiconcontainer.small {
width: 42px;
height: 42px;
max-width: 42px;
max-height: 42px;
}
.activityiconcontainer.smaller {
width: 32px;
height: 32px;
max-width: 32px;
max-height: 32px;
}
.activityiconcontainer.smaller .activityicon {
width: 40px;
height: 32px;
max-width: 40px;
max-height: 32px;
}
.activityiconcontainer.administration:not(.isbranded) .activityicon:not(.nofilter),
.activityiconcontainer.administration:not(.isbranded) .icon:not(.nofilter) {
filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0 0 0 0 0.8549019608 0 0 0 0 0.3450980392 0 0 0 0 0.937254902 0 0 0 1 0 "/></filter></svg>#recolor');
}
.activityiconcontainer.assessment:not(.isbranded) .activityicon:not(.nofilter),
.activityiconcontainer.assessment:not(.isbranded) .icon:not(.nofilter) {
filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0 0 0 0 0.9764705882 0 0 0 0 0 0 0 0 0 0.5254901961 0 0 0 1 0 "/></filter></svg>#recolor');
}
.activityiconcontainer.collaboration:not(.isbranded) .activityicon:not(.nofilter),
.activityiconcontainer.collaboration:not(.isbranded) .icon:not(.nofilter) {
filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0 0 0 0 0.3568627451 0 0 0 0 0.2509803922 0 0 0 0 1 0 0 0 1 0 "/></filter></svg>#recolor');
}
.activityiconcontainer.communication:not(.isbranded) .activityicon:not(.nofilter),
.activityiconcontainer.communication:not(.isbranded) .icon:not(.nofilter) {
filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0 0 0 0 0.9215686275 0 0 0 0 0.3843137255 0 0 0 0 0 0 0 0 1 0 "/></filter></svg>#recolor');
}
.activityiconcontainer.content:not(.isbranded) .activityicon:not(.nofilter),
.activityiconcontainer.content:not(.isbranded) .icon:not(.nofilter) {
filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.6 0 0 0 0 0.6784313725 0 0 0 1 0 "/></filter></svg>#recolor');
}
.activityiconcontainer.interactivecontent:not(.isbranded) .activityicon:not(.nofilter),
.activityiconcontainer.interactivecontent:not(.isbranded) .icon:not(.nofilter) {
filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0 0 0 0 0.5529411765 0 0 0 0 0.2392156863 0 0 0 0 0.1058823529 0 0 0 1 0 "/></filter></svg>#recolor');
}
.icon-box {
width: 60px;
height: 48px;
@@ -28936,6 +28872,67 @@ img.icon {
color: #fff;
}
/*
* Activity icons
*/
.activityiconcontainer {
width: 52px;
height: 52px;
max-width: 52px;
max-height: 52px;
}
.activityiconcontainer.small {
width: 42px;
height: 42px;
max-width: 42px;
max-height: 42px;
}
.activityiconcontainer.smaller {
width: 32px;
height: 32px;
max-width: 32px;
max-height: 32px;
}
.activityiconcontainer .activityicon,
.activityiconcontainer .icon {
margin: 0;
font-size: inherit;
width: inherit;
height: inherit;
max-width: inherit;
max-height: inherit;
}
.activityiconcontainer.administration:not(.isbranded) .activityicon:not(.nofilter),
.activityiconcontainer.administration:not(.isbranded) .icon:not(.nofilter) {
filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0 0 0 0 0.8549019608 0 0 0 0 0.3450980392 0 0 0 0 0.937254902 0 0 0 1 0 "/></filter></svg>#recolor');
}
.activityiconcontainer.assessment:not(.isbranded) .activityicon:not(.nofilter),
.activityiconcontainer.assessment:not(.isbranded) .icon:not(.nofilter) {
filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0 0 0 0 0.9764705882 0 0 0 0 0 0 0 0 0 0.5254901961 0 0 0 1 0 "/></filter></svg>#recolor');
}
.activityiconcontainer.collaboration:not(.isbranded) .activityicon:not(.nofilter),
.activityiconcontainer.collaboration:not(.isbranded) .icon:not(.nofilter) {
filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0 0 0 0 0.3568627451 0 0 0 0 0.2509803922 0 0 0 0 1 0 0 0 1 0 "/></filter></svg>#recolor');
}
.activityiconcontainer.communication:not(.isbranded) .activityicon:not(.nofilter),
.activityiconcontainer.communication:not(.isbranded) .icon:not(.nofilter) {
filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0 0 0 0 0.9215686275 0 0 0 0 0.3843137255 0 0 0 0 0 0 0 0 1 0 "/></filter></svg>#recolor');
}
.activityiconcontainer.content:not(.isbranded) .activityicon:not(.nofilter),
.activityiconcontainer.content:not(.isbranded) .icon:not(.nofilter) {
filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.6 0 0 0 0 0.6784313725 0 0 0 1 0 "/></filter></svg>#recolor');
}
.activityiconcontainer.interactivecontent:not(.isbranded) .activityicon:not(.nofilter),
.activityiconcontainer.interactivecontent:not(.isbranded) .icon:not(.nofilter) {
filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0 0 0 0 0.5529411765 0 0 0 0 0.2392156863 0 0 0 0 0.1058823529 0 0 0 1 0 "/></filter></svg>#recolor');
}
:root {
--activityadministration: #da58ef;
--activityassessment: #f90086;