highlighted icons on mapnav active item #2244

src/assets/common.scss

@@ -11,12 +11,13 @@ $pad_btn: 0.5em;
 
 span.icon{
   background-repeat: no-repeat;
-  background-position: middle center;
-  background-size: contain;
+  background-position: center;
+  background-size: 85%;
   display: inline-block;
   vertical-align:bottom;
   width: 1.5em;
   height:1.5em;
+  border-radius: 0.75em;
   &.terraindevie{
     background-image: url('./icons/terraindevie.svg');
   }

src/assets/main.scss

@@ -100,7 +100,14 @@ body{
         a{
           @include btn();
           display: block;
-          line-height: 2.1;
+          // line-height: 2.1;
+          line-height: 1.7;
+          &.active{
+            // color: red;
+            span.icon{
+              background-color: rgba(255, 255, 255, 0.6);
+            }
+          }
           &.disabled{
             pointer-events: none;
             opacity: 0.4;
@@ -123,6 +130,7 @@ body{
       }
     }
   }
+
   $cartouch_width : 450px;
   #content{
     display: flex;

src/components/MapConcernements.vue

@@ -1308,48 +1308,49 @@ export default {
       <li>
         <a 
           title="terrain de vie" href="#terraindevie" @click="setMapMode('terraindevie')"
+          :class="{active: map_mode === 'terraindevie'}"
         >
-          <span class="icon terraindevie"></span> <span class="label"> terrain de vie</span>
+          <span class="icon terraindevie"/> <span class="label"> terrain de vie</span>
         </a>
       </li>
       <li>
         <a 
           title="proximite" href="#proximite" @click="setMapMode('proximite')"
-          :class="{ disabled: opened_concernement && !opened_concernement.has_proximite }"
+          :class="{ disabled: opened_concernement && !opened_concernement.has_proximite, active: map_mode === 'proximité'}"
         >
-          <span class="icon proximite"></span> <span class="label"> proximité</span>
+          <span class="icon proximite"/> <span class="label"> proximité</span>
         </a>
       </li>
       <li>
         <a 
           title="superposition" href="#superposition" @click="setMapMode('superposition')"
-          :class="{ disabled: opened_concernement && !opened_concernement.has_superpositions }"
+          :class="{ disabled: opened_concernement && !opened_concernement.has_superpositions, active: map_mode === 'superposition'}"
         >
-          <span class="icon superposition"></span> <span class="label"> superposition</span>
+          <span class="icon superposition"/> <span class="label"> superposition</span>
         </a>
       </li>
       <li>
         <a 
           title="puissance d'agir" href="#puissancedagir" @click="setMapMode('puissancedagir')"
-          :class="{ disabled: opened_concernement && !opened_concernement.has_puissancedagir }"
+          :class="{ disabled: opened_concernement && !opened_concernement.has_puissancedagir, active: map_mode === 'puissancedagir'}"
         >
-          <span class="icon puissancedagir"></span> <span class="label"> puissance d'agir</span>
+          <span class="icon puissancedagir"/> <span class="label"> puissance d'agir</span>
         </a>
       </li>
       <li>
         <a 
           title="action" href="#action" @click="setMapMode('action')"
-          :class="{ disabled: opened_concernement && !opened_concernement.has_agissantes }"
+          :class="{ disabled: opened_concernement && !opened_concernement.has_agissantes, active: map_mode === 'action'}"
         >
-          <span class="icon action"></span> <span class="label"> action</span>
+          <span class="icon action"/> <span class="label"> action</span>
         </a>
       </li>
       <li>
         <a 
           title="cercle politique" href="#doleancer" @click="setMapMode('doleancer')"
-          :class="{ disabled: opened_concernement && !opened_concernement.has_doleance }"
+          :class="{ disabled: opened_concernement && !opened_concernement.has_doleance, active: map_mode === 'doleancer'}"
         >
-          <span class="icon doleancer"></span> <span class="label"> cercle politique</span>
+          <span class="icon doleancer"/> <span class="label"> cercle politique</span>
         </a>
       </li>
     </ul>