boussole-pluss/frontend/components/Legend.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>

@import "assets/css/color";
@import "assets/css/spacing";

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>