From ec5326887ed7aff42d98d8033a493f14309ce58c Mon Sep 17 00:00:00 2001
From: gaelle morin <gmorin.dev@gmail.com>
Date: Wed, 3 Jun 2020 14:37:41 +0200
Subject: [PATCH] update: left-menu - search input: positioning and width on
 small screens

---
 src/styles/base/menu-left.scss | 94 +++++++++++++++++++---------------
 1 file changed, 52 insertions(+), 42 deletions(-)

diff --git a/src/styles/base/menu-left.scss b/src/styles/base/menu-left.scss
index db92211..2dba34a 100644
--- a/src/styles/base/menu-left.scss
+++ b/src/styles/base/menu-left.scss
@@ -124,13 +124,20 @@
       /* End of specific styles of "Projects" tab */
 
       sib-display.nosub>sib-form[fields="name"]>hubl-search-users>input {
-        margin: auto;
+        margin-left: 30px;
+        max-width: 87%;
+        width: 87%;
         display: block;
         background-color: var(--color-secondary);
         color: var(--color-grey-6);
         border: 1px solid var(--color-grey-4);
         border-radius: 3px;
         padding: 4px;
+        
+        @include breakpoint(lg) {
+          margin: auto;
+          width: auto;
+        }
       }
 
       sib-display.nosub>nav {
@@ -256,57 +263,60 @@
   }
 }
 
-/* Styles for hovering */
+/* Styles for hovering (only on large screens) */
 #main__menu sib-router .sub-menu.menu-notification>sib-display>div>sib-display>div>hubl-menu-fix-url-project>sib-display>div:hover,
 #main__menu sib-router .sub-menu.menu-notification>sib-display>div>sib-display>div>hubl-menu-fix-url-circle>sib-display>div:hover,
 #main__menu sib-router .sub-menu.menu-notification>sib-display.nosub>div>sib-display>div:hover {
-  background-color: var(--color-secondary);
-  color: var(--color-white);
-  display: block;
-  box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.26);
-  opacity: 70%;
-  width: 250px;
-  box-sizing: border-box;
-  font-weight: normal;
-
-
-  >hubl-menu-publicprivate {
-    display: none;
-  }
-
-  >hubl-counter {
-    display: none;
-  }
-
-  /* Hover for projects */
-  >sib-set-default[name='project']>.project-customer {
-    width: 250px;
-    white-space: break-spaces;
-    text-align: left;
-    font-weight: normal;
-  }
-
-  sib-set-default[name='project']>.project-name {
-    padding-left: 0;
-    width: 100%;
   
-    &>div {
+  @include breakpoint(lg) {
+    background-color: var(--color-secondary);
+    color: var(--color-white);
+    display: block;
+    box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.26);
+    opacity: 70%;
+    width: 250px;
+    box-sizing: border-box;
+    font-weight: normal;
+
+
+    >hubl-menu-publicprivate {
+      display: none;
+    }
+
+    >hubl-counter {
+      display: none;
+    }
+
+    /* Hover for projects */
+    >sib-set-default[name='project']>.project-customer {
+      width: 250px;
       white-space: break-spaces;
       text-align: left;
+      font-weight: normal;
     }
-  }
 
-  /* Hover for circles */
-  >sib-display-div[name="name"] {
-    padding-left: 0;
-    width: 100%;
-  }
+    sib-set-default[name='project']>.project-name {
+      padding-left: 0;
+      width: 100%;
+    
+      &>div {
+        white-space: break-spaces;
+        text-align: left;
+      }
+    }
 
-  /* Hover for private messages */
-  sib-display-div {
+    /* Hover for circles */
+    >sib-display-div[name="name"] {
+      padding-left: 0;
+      width: 100%;
+    }
 
-    >div[name="name"] {
-      white-space: normal;
+    /* Hover for private messages */
+    sib-display-div {
+
+      >div[name="name"] {
+        white-space: normal;
+      }
     }
   }
 }