abe03cef3f
This commit refactors SCSS to resolve deprecation warnings related to mixed declaration after nested rules. Sass is changing how it processes declarations that appear after nested rules to align with CSS standards. Previously, Sass would hoist declarations to avoid duplicating selectors, However, this behavior will soon change to make declarations apply in the order they appear, as per CSS standards.
119 lines
2.3 KiB
Vue
119 lines
2.3 KiB
Vue
<template>
|
|
<section>
|
|
<p class="privacy-rating">
|
|
Privacy: <CircleRating :rating="privacyRating" />
|
|
</p>
|
|
<hr />
|
|
<p>
|
|
{{ description }}
|
|
</p>
|
|
<p class="recommendation">
|
|
<AppIcon icon="lightbulb" class="icon" />
|
|
<span>{{ recommendation }}</span>
|
|
</p>
|
|
<p
|
|
v-if="includes?.length > 0"
|
|
class="includes"
|
|
>
|
|
<AppIcon icon="square-check" class="icon" />
|
|
<span>
|
|
Includes:
|
|
<ul>
|
|
<li
|
|
v-for="inclusionItem in includes"
|
|
:key="inclusionItem"
|
|
>
|
|
{{ inclusionItem }}
|
|
</li>
|
|
</ul>
|
|
</span>
|
|
</p>
|
|
<p
|
|
v-if="considerations?.length > 0"
|
|
class="considerations"
|
|
>
|
|
<AppIcon icon="triangle-exclamation" class="icon" />
|
|
<span>
|
|
<strong>Considerations:</strong>
|
|
<ul>
|
|
<li
|
|
v-for="considerationItem in considerations"
|
|
:key="considerationItem"
|
|
>
|
|
{{ considerationItem }}
|
|
</li>
|
|
</ul>
|
|
</span>
|
|
</p>
|
|
</section>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { type PropType, defineComponent } from 'vue';
|
|
import AppIcon from '@/presentation/components/Shared/Icon/AppIcon.vue';
|
|
import CircleRating from './Rating/CircleRating.vue';
|
|
|
|
export default defineComponent({
|
|
components: {
|
|
CircleRating,
|
|
AppIcon,
|
|
},
|
|
props: {
|
|
privacyRating: {
|
|
type: Number,
|
|
required: true,
|
|
},
|
|
description: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
recommendation: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
includes: {
|
|
type: Array as PropType<ReadonlyArray<string>>,
|
|
default: () => [],
|
|
},
|
|
considerations: {
|
|
type: Array as PropType<ReadonlyArray<string>>,
|
|
default: () => [],
|
|
},
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@use "@/presentation/assets/styles/main" as *;
|
|
|
|
@mixin horizontal-stack {
|
|
display: flex;
|
|
gap: $spacing-relative-small;
|
|
}
|
|
|
|
@mixin apply-icon-color($color) {
|
|
.icon {
|
|
color: $color;
|
|
}
|
|
}
|
|
|
|
.privacy-rating {
|
|
text-align: center;
|
|
}
|
|
|
|
.includes {
|
|
@include horizontal-stack;
|
|
@include apply-icon-color($color-success);
|
|
}
|
|
.considerations {
|
|
@include horizontal-stack;
|
|
@include apply-icon-color($color-danger);
|
|
}
|
|
.recommendation {
|
|
align-items: center;
|
|
|
|
@include horizontal-stack;
|
|
@include apply-icon-color($color-caution);
|
|
}
|
|
</style>
|