boussole-pluss/frontend/components/Legend.vue

61 lines
1.6 KiB
Vue
Raw Permalink Normal View History

2022-10-07 14:15:53 +00:00
<template>
<div>
<span class="bold">Légende</span>
2023-02-28 16:36:17 +00:00
<ol>
2022-10-07 14:15:53 +00:00
<!-- <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>
2023-02-28 16:36:17 +00:00
</ol>
2022-10-07 14:15:53 +00:00
</div>
</template>
<style lang="scss" scoped>
2023-02-28 16:36:17 +00:00
ol {
2022-10-07 14:15:53 +00:00
margin: 0;
2023-02-28 16:36:17 +00:00
position: relative;
2022-10-07 14:15:53 +00:00
}
2023-02-28 16:36:17 +00:00
ol li::before {
2022-10-07 14:15:53 +00:00
content: "";
border: 0 solid;
border-radius: 50%;
display: inline-block;
width: 16px;
height: 16px;
2023-02-28 16:36:17 +00:00
position: absolute;
left: -22px;
2022-10-07 14:15:53 +00:00
}
2023-02-28 16:36:17 +00:00
ol li+li {
2022-10-07 14:15:53 +00:00
border-top: 1px solid #E8E8E8;
}
2023-02-28 16:36:17 +00:00
ol li {
2022-10-07 14:15:53 +00:00
line-height: 16px;
padding: $xxx_small 0;
2023-02-28 16:36:17 +00:00
list-style-position: inside;
2022-10-07 14:15:53 +00:00
}
.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>