diff --git a/packages/frontend/src/components/MkInfo.vue b/packages/frontend/src/components/MkInfo.vue index 7aaf2c5bcb..dc7344d707 100644 --- a/packages/frontend/src/components/MkInfo.vue +++ b/packages/frontend/src/components/MkInfo.vue @@ -1,7 +1,7 @@ <template> -<div class="fpezltsf" :class="{ warn }"> - <i v-if="warn" class="ti ti-alert-triangle"></i> - <i v-else class="ti ti-info-circle"></i> +<div :class="[$style.root, { [$style.warn]: warn }]"> + <i v-if="warn" class="ti ti-alert-triangle" :class="$style.i"></i> + <i v-else class="ti ti-info-circle" :class="$style.i"></i> <slot></slot> </div> </template> @@ -14,8 +14,8 @@ const props = defineProps<{ }>(); </script> -<style lang="scss" scoped> -.fpezltsf { +<style lang="scss" module> +.root { padding: 12px 14px; font-size: 90%; background: var(--infoBg); @@ -26,9 +26,9 @@ const props = defineProps<{ background: var(--infoWarnBg); color: var(--infoWarnFg); } +} - > i { - margin-right: 4px; - } +.i { + margin-right: 4px; } </style>