diff --git a/blocks/timeline/templates/event-list-item.mustache b/blocks/timeline/templates/event-list-item.mustache index e512ec35254..e8b71a7da64 100644 --- a/blocks/timeline/templates/event-list-item.mustache +++ b/blocks/timeline/templates/event-list-item.mustache @@ -55,7 +55,7 @@ {{#userdate}} {{timesort}}, {{#str}} strftimetime24, core_langconfig {{/str}} {{/userdate}}
{{#icon}} diff --git a/calendar/templates/upcoming_mini.mustache b/calendar/templates/upcoming_mini.mustache index 93efd1eb554..4405c34c295 100644 --- a/calendar/templates/upcoming_mini.mustache +++ b/calendar/templates/upcoming_mini.mustache @@ -45,7 +45,7 @@ }} data-region="event-item"{{! }}>
{{#icon}} diff --git a/theme/boost/classes/output/core_renderer.php b/theme/boost/classes/output/core_renderer.php index 3fbe94b55c7..526bcc1c001 100644 --- a/theme/boost/classes/output/core_renderer.php +++ b/theme/boost/classes/output/core_renderer.php @@ -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' : '')]); diff --git a/theme/boost/scss/moodle/icons.scss b/theme/boost/scss/moodle/icons.scss index 58215e7d223..dd767df90cb 100644 --- a/theme/boost/scss/moodle/icons.scss +++ b/theme/boost/scss/moodle/icons.scss @@ -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 { diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css index 1b70790e7b2..3a2fa762238 100644 --- a/theme/boost/style/moodle.css +++ b/theme/boost/style/moodle.css @@ -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,#recolor'); -} - -.activityiconcontainer.assessment:not(.isbranded) .activityicon:not(.nofilter), -.activityiconcontainer.assessment:not(.isbranded) .icon:not(.nofilter) { - filter: url('data:image/svg+xml;utf8,#recolor'); -} - -.activityiconcontainer.collaboration:not(.isbranded) .activityicon:not(.nofilter), -.activityiconcontainer.collaboration:not(.isbranded) .icon:not(.nofilter) { - filter: url('data:image/svg+xml;utf8,#recolor'); -} - -.activityiconcontainer.communication:not(.isbranded) .activityicon:not(.nofilter), -.activityiconcontainer.communication:not(.isbranded) .icon:not(.nofilter) { - filter: url('data:image/svg+xml;utf8,#recolor'); -} - -.activityiconcontainer.content:not(.isbranded) .activityicon:not(.nofilter), -.activityiconcontainer.content:not(.isbranded) .icon:not(.nofilter) { - filter: url('data:image/svg+xml;utf8,#recolor'); -} - -.activityiconcontainer.interactivecontent:not(.isbranded) .activityicon:not(.nofilter), -.activityiconcontainer.interactivecontent:not(.isbranded) .icon:not(.nofilter) { - filter: url('data:image/svg+xml;utf8,#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,#recolor'); +} + +.activityiconcontainer.assessment:not(.isbranded) .activityicon:not(.nofilter), +.activityiconcontainer.assessment:not(.isbranded) .icon:not(.nofilter) { + filter: url('data:image/svg+xml;utf8,#recolor'); +} + +.activityiconcontainer.collaboration:not(.isbranded) .activityicon:not(.nofilter), +.activityiconcontainer.collaboration:not(.isbranded) .icon:not(.nofilter) { + filter: url('data:image/svg+xml;utf8,#recolor'); +} + +.activityiconcontainer.communication:not(.isbranded) .activityicon:not(.nofilter), +.activityiconcontainer.communication:not(.isbranded) .icon:not(.nofilter) { + filter: url('data:image/svg+xml;utf8,#recolor'); +} + +.activityiconcontainer.content:not(.isbranded) .activityicon:not(.nofilter), +.activityiconcontainer.content:not(.isbranded) .icon:not(.nofilter) { + filter: url('data:image/svg+xml;utf8,#recolor'); +} + +.activityiconcontainer.interactivecontent:not(.isbranded) .activityicon:not(.nofilter), +.activityiconcontainer.interactivecontent:not(.isbranded) .icon:not(.nofilter) { + filter: url('data:image/svg+xml;utf8,#recolor'); +} + :root { --activityadministration: #da58ef; --activityassessment: #f90086; diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css index f461e1c1d6c..edf49f89265 100644 --- a/theme/classic/style/moodle.css +++ b/theme/classic/style/moodle.css @@ -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,#recolor'); -} - -.activityiconcontainer.assessment:not(.isbranded) .activityicon:not(.nofilter), -.activityiconcontainer.assessment:not(.isbranded) .icon:not(.nofilter) { - filter: url('data:image/svg+xml;utf8,#recolor'); -} - -.activityiconcontainer.collaboration:not(.isbranded) .activityicon:not(.nofilter), -.activityiconcontainer.collaboration:not(.isbranded) .icon:not(.nofilter) { - filter: url('data:image/svg+xml;utf8,#recolor'); -} - -.activityiconcontainer.communication:not(.isbranded) .activityicon:not(.nofilter), -.activityiconcontainer.communication:not(.isbranded) .icon:not(.nofilter) { - filter: url('data:image/svg+xml;utf8,#recolor'); -} - -.activityiconcontainer.content:not(.isbranded) .activityicon:not(.nofilter), -.activityiconcontainer.content:not(.isbranded) .icon:not(.nofilter) { - filter: url('data:image/svg+xml;utf8,#recolor'); -} - -.activityiconcontainer.interactivecontent:not(.isbranded) .activityicon:not(.nofilter), -.activityiconcontainer.interactivecontent:not(.isbranded) .icon:not(.nofilter) { - filter: url('data:image/svg+xml;utf8,#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,#recolor'); +} + +.activityiconcontainer.assessment:not(.isbranded) .activityicon:not(.nofilter), +.activityiconcontainer.assessment:not(.isbranded) .icon:not(.nofilter) { + filter: url('data:image/svg+xml;utf8,#recolor'); +} + +.activityiconcontainer.collaboration:not(.isbranded) .activityicon:not(.nofilter), +.activityiconcontainer.collaboration:not(.isbranded) .icon:not(.nofilter) { + filter: url('data:image/svg+xml;utf8,#recolor'); +} + +.activityiconcontainer.communication:not(.isbranded) .activityicon:not(.nofilter), +.activityiconcontainer.communication:not(.isbranded) .icon:not(.nofilter) { + filter: url('data:image/svg+xml;utf8,#recolor'); +} + +.activityiconcontainer.content:not(.isbranded) .activityicon:not(.nofilter), +.activityiconcontainer.content:not(.isbranded) .icon:not(.nofilter) { + filter: url('data:image/svg+xml;utf8,#recolor'); +} + +.activityiconcontainer.interactivecontent:not(.isbranded) .activityicon:not(.nofilter), +.activityiconcontainer.interactivecontent:not(.isbranded) .icon:not(.nofilter) { + filter: url('data:image/svg+xml;utf8,#recolor'); +} + :root { --activityadministration: #da58ef; --activityassessment: #f90086;