MDL-77105 core: Conditionally apply icon filter
* Apply the filter CSS property only to activity icons that don't have the ".nofilter" class. This will allow activities with non-SVG icons to be rendered as they are.
This commit is contained in:
@@ -151,7 +151,9 @@ $iconsizes: map-merge((
|
||||
background-color: $value;
|
||||
.activityicon,
|
||||
.icon {
|
||||
filter: brightness(0) invert(1);
|
||||
&:not(.nofilter) {
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -12506,38 +12506,38 @@ blockquote {
|
||||
|
||||
.activityiconcontainer.administration {
|
||||
background-color: #5d63f6; }
|
||||
.activityiconcontainer.administration .activityicon,
|
||||
.activityiconcontainer.administration .icon {
|
||||
.activityiconcontainer.administration .activityicon:not(.nofilter),
|
||||
.activityiconcontainer.administration .icon:not(.nofilter) {
|
||||
filter: brightness(0) invert(1); }
|
||||
|
||||
.activityiconcontainer.assessment {
|
||||
background-color: #eb66a2; }
|
||||
.activityiconcontainer.assessment .activityicon,
|
||||
.activityiconcontainer.assessment .icon {
|
||||
.activityiconcontainer.assessment .activityicon:not(.nofilter),
|
||||
.activityiconcontainer.assessment .icon:not(.nofilter) {
|
||||
filter: brightness(0) invert(1); }
|
||||
|
||||
.activityiconcontainer.collaboration {
|
||||
background-color: #f7634d; }
|
||||
.activityiconcontainer.collaboration .activityicon,
|
||||
.activityiconcontainer.collaboration .icon {
|
||||
.activityiconcontainer.collaboration .activityicon:not(.nofilter),
|
||||
.activityiconcontainer.collaboration .icon:not(.nofilter) {
|
||||
filter: brightness(0) invert(1); }
|
||||
|
||||
.activityiconcontainer.communication {
|
||||
background-color: #11a676; }
|
||||
.activityiconcontainer.communication .activityicon,
|
||||
.activityiconcontainer.communication .icon {
|
||||
.activityiconcontainer.communication .activityicon:not(.nofilter),
|
||||
.activityiconcontainer.communication .icon:not(.nofilter) {
|
||||
filter: brightness(0) invert(1); }
|
||||
|
||||
.activityiconcontainer.content {
|
||||
background-color: #399be2; }
|
||||
.activityiconcontainer.content .activityicon,
|
||||
.activityiconcontainer.content .icon {
|
||||
.activityiconcontainer.content .activityicon:not(.nofilter),
|
||||
.activityiconcontainer.content .icon:not(.nofilter) {
|
||||
filter: brightness(0) invert(1); }
|
||||
|
||||
.activityiconcontainer.interface {
|
||||
background-color: #a378ff; }
|
||||
.activityiconcontainer.interface .activityicon,
|
||||
.activityiconcontainer.interface .icon {
|
||||
.activityiconcontainer.interface .activityicon:not(.nofilter),
|
||||
.activityiconcontainer.interface .icon:not(.nofilter) {
|
||||
filter: brightness(0) invert(1); }
|
||||
|
||||
:root {
|
||||
|
||||
@@ -12506,38 +12506,38 @@ blockquote {
|
||||
|
||||
.activityiconcontainer.administration {
|
||||
background-color: #5d63f6; }
|
||||
.activityiconcontainer.administration .activityicon,
|
||||
.activityiconcontainer.administration .icon {
|
||||
.activityiconcontainer.administration .activityicon:not(.nofilter),
|
||||
.activityiconcontainer.administration .icon:not(.nofilter) {
|
||||
filter: brightness(0) invert(1); }
|
||||
|
||||
.activityiconcontainer.assessment {
|
||||
background-color: #eb66a2; }
|
||||
.activityiconcontainer.assessment .activityicon,
|
||||
.activityiconcontainer.assessment .icon {
|
||||
.activityiconcontainer.assessment .activityicon:not(.nofilter),
|
||||
.activityiconcontainer.assessment .icon:not(.nofilter) {
|
||||
filter: brightness(0) invert(1); }
|
||||
|
||||
.activityiconcontainer.collaboration {
|
||||
background-color: #f7634d; }
|
||||
.activityiconcontainer.collaboration .activityicon,
|
||||
.activityiconcontainer.collaboration .icon {
|
||||
.activityiconcontainer.collaboration .activityicon:not(.nofilter),
|
||||
.activityiconcontainer.collaboration .icon:not(.nofilter) {
|
||||
filter: brightness(0) invert(1); }
|
||||
|
||||
.activityiconcontainer.communication {
|
||||
background-color: #11a676; }
|
||||
.activityiconcontainer.communication .activityicon,
|
||||
.activityiconcontainer.communication .icon {
|
||||
.activityiconcontainer.communication .activityicon:not(.nofilter),
|
||||
.activityiconcontainer.communication .icon:not(.nofilter) {
|
||||
filter: brightness(0) invert(1); }
|
||||
|
||||
.activityiconcontainer.content {
|
||||
background-color: #399be2; }
|
||||
.activityiconcontainer.content .activityicon,
|
||||
.activityiconcontainer.content .icon {
|
||||
.activityiconcontainer.content .activityicon:not(.nofilter),
|
||||
.activityiconcontainer.content .icon:not(.nofilter) {
|
||||
filter: brightness(0) invert(1); }
|
||||
|
||||
.activityiconcontainer.interface {
|
||||
background-color: #a378ff; }
|
||||
.activityiconcontainer.interface .activityicon,
|
||||
.activityiconcontainer.interface .icon {
|
||||
.activityiconcontainer.interface .activityicon:not(.nofilter),
|
||||
.activityiconcontainer.interface .icon:not(.nofilter) {
|
||||
filter: brightness(0) invert(1); }
|
||||
|
||||
:root {
|
||||
|
||||
Reference in New Issue
Block a user