started map: drawing concernement with entities and contours

src/components/block/LoginBlock.vue

@@ -54,13 +54,52 @@ export default {
 </script>
 
 <template>
-  <form action="" @submit.prevent="onSubmitLogin">
-    <input type="email" placeholder="email" name="email" v-model="mail">
-    <input type="password" placeholder="mot de passe" name="passwd" v-model="passwd">
-    <input type="submit" value="se connecter">
-    <p v-if="loginMessage">{{ loginMessage }}</p>
-  </form>
+  <div id="login-block">
+    <span>connexion</span>
+    <form action="" @submit.prevent="onSubmitLogin">
+      <input type="email" placeholder="email" name="email" v-model="mail">
+      <input type="password" placeholder="mot de passe" name="passwd" v-model="passwd">
+      <input type="submit" value="se connecter">
+      <p v-if="loginMessage">{{ loginMessage }}</p>
+    </form>
+  </div>
 </template>
 
-<style lang="css" scoped>
+<style lang="scss" scoped>
+  $pad: 1em;
+  #login-block{
+    position: relative;
+
+    span{
+      display: inline-block;
+      @include btn();
+    }
+    form{
+      background-color: #fff;
+      border-radius: 5px;
+      padding: 0 $pad;
+      position: absolute;
+      bottom: 100%;
+      left: -$pad;
+      >*{
+        margin: 0 0 0.5em 0;
+      }
+      overflow: hidden;
+      max-height:1px;
+      opacity: 0;
+      $delay: 4s;
+      transition: opacity 0.3s ease-out $delay,max-height 0.3s ease-out $delay, padding 0.3s ease-out $delay + 0.1s;
+    }
+    &:hover{
+      form{
+        box-shadow: 0 0 5px $btns_back;
+        padding: $pad;
+        max-height: 100px;
+        opacity: 1;
+        transition: opacity 0.3s ease-out,max-height 0.3s ease-out, padding 0.3s ease-out 0.1s;
+      }
+    }
+  }
+  
+
 </style>