Fix icon color in documentation
- Add StatusIcon to ehnaceApp and use the component imported into the
the documentation's component/app-imports directory to resolve fill
rendering bug in the Alert component
- Remove the scoped attribute to make the changes work for alerts in
documentation
- Update StatusIcon component to match changes to application component
Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: I4090d58f78a1d10d9745ee592424ca0c0c91c610
diff --git a/docs/.vuepress/components/app-imports/StatusIcon.vue b/docs/.vuepress/components/app-imports/StatusIcon.vue
index 954e477..ef2afb7 100644
--- a/docs/.vuepress/components/app-imports/StatusIcon.vue
+++ b/docs/.vuepress/components/app-imports/StatusIcon.vue
@@ -33,29 +33,33 @@
};
</script>
-<style lang="scss" scoped>
+<style lang="scss">
@import "src/assets/styles/bmc/helpers";
@import "src/assets/styles/bootstrap/helpers";
.status-icon {
vertical-align: text-bottom;
&.info {
- fill: theme-color('info');
+ color: theme-color('info');
}
&.success {
- fill: theme-color('success');
+ color: theme-color('success');
}
&.danger {
- fill: theme-color('danger');
+ color: theme-color('danger');
}
&.secondary {
- fill: gray('600');
+ color: gray('600');
svg {
transform: rotate(-45deg);
}
}
&.warning {
- fill: theme-color('warning');
+ color: theme-color('warning');
+ }
+
+ svg {
+ fill: currentColor;
}
}
</style>