61 lines
1.6 KiB
Vue
61 lines
1.6 KiB
Vue
<template>
|
|
<div>
|
|
<span class="bold">Légende</span>
|
|
<ol>
|
|
<!-- <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>
|
|
</ol>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
ol {
|
|
margin: 0;
|
|
position: relative;
|
|
}
|
|
ol li::before {
|
|
content: "";
|
|
|
|
border: 0 solid;
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
width: 16px;
|
|
height: 16px;
|
|
|
|
position: absolute;
|
|
left: -22px;
|
|
}
|
|
|
|
ol li+li {
|
|
border-top: 1px solid #E8E8E8;
|
|
}
|
|
|
|
ol li {
|
|
line-height: 16px;
|
|
padding: $xxx_small 0;
|
|
list-style-position: inside;
|
|
}
|
|
|
|
.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>
|