80 lines
2.0 KiB
Vue
80 lines
2.0 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<span class="bold">Légende</span>
|
||
|
|
<ul>
|
||
|
|
<!-- <li v-for="axe in axes" :key="axe.identifier" :class="'axe-'+axe.identifier">{{ axe.shortTitle }}</li>-->
|
||
|
|
<li class="axe-1">Pouvoir d'agir</li>
|
||
|
|
<li class="axe-2">Multi-secteur</li>
|
||
|
|
<li class="axe-3">Local global</li>
|
||
|
|
<li class="axe-4">Utilité (sociale et écologique)</li>
|
||
|
|
<li class="axe-5">Communs</li>
|
||
|
|
<li class="axe-6">Démocratie</li>
|
||
|
|
<li class="axe-7">Coopération</li>
|
||
|
|
<li class="axe-8">Finances</li>
|
||
|
|
<li class="axe-9">Moyens de production</li>
|
||
|
|
<li class="axe-10">Travail</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<!--<script lang="ts">-->
|
||
|
|
<!--import { Component, Vue} from "nuxt-property-decorator";-->
|
||
|
|
<!--import {axeStore} from "~/utils/store-accessor";-->
|
||
|
|
<!--import {Axe} from "~/repositories/models/axe.model";-->
|
||
|
|
|
||
|
|
<!--@Component-->
|
||
|
|
<!--export default class Legend extends Vue {-->
|
||
|
|
|
||
|
|
<!-- async created() {-->
|
||
|
|
<!-- await axeStore.getAxes();-->
|
||
|
|
<!-- }-->
|
||
|
|
|
||
|
|
<!-- get axes(): Axe[] {-->
|
||
|
|
<!-- return axeStore.axes;-->
|
||
|
|
<!-- }-->
|
||
|
|
<!--}-->
|
||
|
|
<!--</script>-->
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
|
||
|
|
@import "assets/css/color";
|
||
|
|
@import "assets/css/spacing";
|
||
|
|
|
||
|
|
ul {
|
||
|
|
list-style: none;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
ul li::before {
|
||
|
|
content: "";
|
||
|
|
|
||
|
|
border: 0 solid;
|
||
|
|
border-radius: 50%;
|
||
|
|
display: inline-block;
|
||
|
|
width: 16px;
|
||
|
|
height: 16px;
|
||
|
|
|
||
|
|
margin-right: $xxx_small;
|
||
|
|
}
|
||
|
|
|
||
|
|
ul li+li {
|
||
|
|
border-top: 1px solid #E8E8E8;
|
||
|
|
}
|
||
|
|
|
||
|
|
ul li {
|
||
|
|
line-height: 16px;
|
||
|
|
padding: $xxx_small 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.axe-1::before { color: #CA8AE8; background: #CA8AE8 }
|
||
|
|
.axe-2::before { color: #22B9A6; background: #22B9A6}
|
||
|
|
.axe-3::before { color: #E7E145; background: #E7E145}
|
||
|
|
.axe-4::before { color: #F39345; background: #F39345}
|
||
|
|
.axe-5::before { color: #9FCC8B; background: #9FCC8B}
|
||
|
|
.axe-6::before { color: #FDA6C5; background: #FDA6C5}
|
||
|
|
.axe-7::before { color: #7E91F1; background: #7E91F1}
|
||
|
|
.axe-8::before { color: #F37665; background: #F37665}
|
||
|
|
.axe-9::before { color: #E9D280; background: #E9D280}
|
||
|
|
.axe-10::before { color: #7BD1F5; background: #7BD1F5}
|
||
|
|
|
||
|
|
</style>
|