#wip(scss): Montada la iconificación y visualización de las opciones de los mapas.

Public/css/Mapeate.iconos.css

@@ -8,4 +8,8 @@
 .mapeate [data-icon=dificultad]::before{content : "\f886"; font-family : "FA5FS";}
 .mapeate [data-icon=descripcion]::before{content : "\f036"; font-family : "FA5FS";}
 .mapeate [data-icon=objetivos]::before{content : "\f140"; font-family : "FA5FS";}
-.mapeate [data-icon=buscar]::before{content : "\f002"; font-family : "FA5FS";}
+.mapeate [data-icon=buscar]::before{content : "\f002"; font-family : "FA5FS";}
+.mapeate [data-icon=nivel_0]::before{content : "\f31e"; font-family : "FA5FS";}
+.mapeate [data-icon=nivel_1]::before{content : "\f422"; font-family : "FA5FS";}
+.mapeate [data-icon=nivel_2]::before{content : "\f111"; font-family : "FA5FR";}
+.mapeate [data-icon=nivel_3]::before{content : "\f192"; font-family : "FA5FR";}

Public/ecma/Mapeate.Base.ecma.js

@@ -99,10 +99,7 @@ Mapeate.Base = function(mapeate, entradas){
         return [evento.clientX - box.x, evento.clientY - box.y];
     };
 
-    this.capturar_cursor = (elemento, evento) => {
+    this.capturar_cursor = (elemento, evento) => [posicion_de_raton.x, posicion_de_raton.y] = self.coger_posicion_del_cursor(evento);
-        [posicion_de_raton.x, posicion_de_raton.y] = self.coger_posicion_del_cursor(evento);
-        // console.log(posicion_de_raton);
-    };
 
     this.coger_posicion_del_raton = () => ({...posicion_de_raton});
  

Public/scss/Mapeate.base.scss

@@ -403,6 +403,36 @@
         }
     }
 
+    .niveles{
+        label{
+            display : inline-block;
+            margin : .1em .2em;
+            padding : .2em .2em;
+            cursor : pointer;
+            color : $color-delante;
+            border : .1em solid $color-gris;
+            border-radius : .4em;
+            opacity : .5;
+            box-shadow : 0em 0em .4em inset $color-gris;
+            transition-property : border-color,box-shadow,opacity;
+            transition-duration : $transicion-salida;
+            &:hover{
+                transition-duration : $transicion-entrada;
+                box-shadow : 0em 0em .4em inset $color-delante;
+            }
+            &[data-seleccionado=true]{
+                // border-color : $color-primario;
+                opacity : 1;
+                // box-shadow : 0em 0em .4em inset $color-primario;
+            }
+        }
+        label [data-i18n],[type=checkbox],.nivel{display : none;}
+        .elementos>span+span{
+            &:before{content : "[";}
+            &:after{content : "]";}
+        }
+    }
+
     // [data-posicion=arriba_izquierda]{
     //     top : 0em;
     //     left : 0em;

Public/scss/Mapeate.css

@@ -336,6 +336,29 @@
         color: #070;
         border-color: #070;
         box-shadow: 0em 0em 0.4em inset #070; }
+  .mapeate .niveles label {
+    display: inline-block;
+    margin: .1em .2em;
+    padding: .2em .2em;
+    cursor: pointer;
+    color: #222;
+    border: 0.1em solid #898989;
+    border-radius: .4em;
+    opacity: .5;
+    box-shadow: 0em 0em 0.4em inset #898989;
+    transition-property: border-color,box-shadow,opacity;
+    transition-duration: 1s; }
+    .mapeate .niveles label:hover {
+      transition-duration: 0.2s;
+      box-shadow: 0em 0em 0.4em inset #222; }
+    .mapeate .niveles label[data-seleccionado=true] {
+      opacity: 1; }
+  .mapeate .niveles label [data-i18n], .mapeate .niveles [type=checkbox], .mapeate .niveles .nivel {
+    display: none; }
+  .mapeate .niveles .elementos > span + span:before {
+    content: "["; }
+  .mapeate .niveles .elementos > span + span:after {
+    content: "]"; }
 
 [data-clase=global] {
   /*

version

@@ -1 +1 @@
-0.0.17
+0.0.18