patch: left-menu - refactoring + styles on widget to remove a contact

src/styles/left-nav/_index.scss

@@ -9,6 +9,15 @@ nav#main__menu {
     font-weight: bolder;
   }
 
+  .badge {
+    float: right;
+    margin-right: 2px;
+  }
+
+  .icon {
+    padding: 3px;
+  }
+
   .menu-search {
 
     form {
@@ -52,68 +61,64 @@ nav#main__menu {
     button {
       background: transparent;
     }
-
-    input:focus ~ button {
-      background-color: red !important;
-    }
   }
 
   .menu-header {
 
+    /* Chevron animation */
+    .transform-up {
+      transform: rotateX(180deg);
+    }
+
+    .badge {
+      padding-top: 2px;
+      margin-right: 5px;
+    }
+
+    /* For the icon and the small sub-sub-menu*/
     &:not(:hover) .menu-options,
     &:not(:hover) .menu-admin {
       display: none;
     }
-  }
 
-  .transform-up {
-    transform: rotateX(180deg);
-  }
+    .menu-options {
+      float: right;
+    }
 
-  .badge {
-    padding-top: 2px;
-    margin-right: 5px;
-  }
-
-  .icon {
-    padding: 3px;
-  }
-
-  .menu-admin {
-    position: absolute;
-    z-index: 3016;
-    left: 48px;
-    bottom: 37px;
-
-    @media (max-width: 768px) {
-      width: 100%;
-      left: 0;
-      height: 9vh;
-      top: 0;
+    .menu-admin {
+      position: absolute;
+      z-index: 3016;
+      left: 48px;
+      bottom: 37px;
+  
+      @media (max-width: 768px) {
+        width: 100%;
+        left: 0;
+        height: 9vh;
+        top: 0;
+      }
     }
   }
 
-  /* Styles for the small icon */
-  .sub-menu-icon {
-    margin-left: 3px;
-    opacity: 0.8;
-    width: 12px;
-    >div {
-      line-height: 19px;
+  .sub-menu {
+
+    /* Styles for the small icon */
+    .sub-menu-icon {
+      margin-left: 3px;
+      opacity: 0.8;
+      width: 12px;
+      >div {
+        line-height: 19px;
+      }
+    }
+
+    .sub-menu-name {
+      margin-right: 15px;
+      margin-left: 3px;
+      vertical-align: middle;
     }
   }
 
-  .sub-menu-name {
-    margin-right: 15px;
-    margin-left: 3px;
-    vertical-align: middle;
-  }
-
-  .menu-options {
-    float: right;
-  }
-
-
   /* Ellipsis */
   .ellipsis {
 
@@ -137,16 +142,11 @@ nav#main__menu {
     }
   }
 
-  .menu-header>div:not(.transform-up)~.badge {
-    display: none;
-  }
-
-  .menu-header>div.transform-up~.badge {
-    display: block;
-  }
-
-  .badge {
-    float: right;
+  .empty {
+    display: flex;
+    flex-wrap: wrap;
+    padding-left: 13px;
+    width: 87%;
   }
 
   .divider {
@@ -155,13 +155,75 @@ nav#main__menu {
     opacity: 0.2;
   }
 
-  .empty {
-    display: flex;
-    flex-wrap: wrap;
-    padding-left: 13px;
-    width: 87%;
+
+  /* Header's general counter appear or disappear on click (JS animation) */
+  .menu-header>div:not(.transform-up)~.badge {
+    display: none;
   }
 
+  .menu-header>div.transform-up~.badge {
+    display: block;
+  }
+  /* End */
+
+  /* The little cross icon on contacts' name appears or disapear + hover + styles */
+  .sub-menu__contacts>div>solid-display {
+
+    hubl-menu-contact-removed {
+      display: none;
+    }
+  }
+
+  .sub-menu__contacts>div>solid-display {
+
+    &:hover {
+      display: flex;
+
+      hubl-menu-fix-url-contact {
+        width: 100%;
+        background: #202B3C;
+      }
+
+      hubl-menu-contact-removed {
+        display: block;
+        background: #202B3C;
+        padding-top: 5px;
+        margin-left: auto;
+        padding-right: 10px;
+
+        .button-remove button::before {
+          font-size: 18px;
+          color: white;
+        }
+      }
+    }
+  }
+  /* End */
+
+  /* Modal to keep/remove a contact */
+  hubl-menu-contact-removed dialog {
+    border: none;
+    padding: 60px 30px;
+    text-align: center;
+
+    @media (max-width: 768px) {
+      width: 100vw;
+    }
+
+    p {
+      margin-bottom: 30px;
+      font-size: 16px;
+    }
+
+    &::before,
+    p::before,
+    div::before,
+    button::before {
+      display: none;
+    }
+  }
+  /* End */
+
   &.jsLeftMenu {
     display: inline-block;