Improvement of the fly-out menu's style

ParticipaPY · May 11, 2018 · 2cb8293 · 2cb8293
1 parent 2fcc21c
commit 2cb8293
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 17 deletions.
diff --git a/frontoffice/src/components/Header.vue b/frontoffice/src/components/Header.vue
@@ -10,36 +10,39 @@
     <ul class="nav navbar-nav ml-auto">
       <dropdown size="nav">
         <span slot="button">
-          <img src="static/img/avatars/6.jpg" class="img-avatar" alt="avatar-user">
+          <div style="cursor:pointer">
+            <img src="static/img/avatars/6.jpg" class="img-avatar" alt="avatar-user">
+            <i class="fa fa-caret-down" style="margin-right:10px"></i>
+          </div>
         </span>    
           <div slot="dropdown-menu" class="dropdown-menu dropdown-menu-right">
 
-            <div class="row" style="margin-left: 0px; margin-right: -25px;">
+            <div class="row" style="margin-left: 0px; margin-right: -25px; margin-bottom:10px">
 
               <div class="col-sm-7" >
 
                 <div class="row" style=" margin-left: 0px; margin-right: -25px; margin-top: 15px;">
                   <div style="color:white"><span style="display:block;text-overflow: ellipsis;width: 155px;overflow: hidden; white-space: nowrap;">{{ DisplayName () }}</span></div>
                 </div>
 
-                <div class="row" style="; margin-bottom: 5px; margin-left: 10px; margin-right: -25px;">
+                <div class="row" style="margin-bottom: 5px; margin-left: 10px; margin-right: -25px;">
                   <a style="color:silver  ; font-size: 13px">{{ DisplayUsername () }}</a>
                 </div>
 
               </div>
 
               <div class="col-sm-4" >
-                  <button @click="logout" type="button" class="btn btn-outline-primary" style="margin-top: 20px; margin-left: -10px;color:silver; font-size: 10px"><i class="fa fa-power-off" style="color:rgb(171,12,12); margin-right:5px"></i>LOGOUT</button>
+                <button @click="logout" type="button" class="btn btn-outline-danger" style="margin-top: 20px; margin-left: -10px;font-size: 10px"><i class="icon fa fa-power-off" style="color.hover: white; margin-right:5px"></i>LOGOUT</button>
               </div>
 
             </div>
 
-            <li class="dropdown-divider mb-2"></li>
+            <li class="dropdown-divider"></li>
 
-            <div class="row" style=" margin-left: 0px; margin-right: -25px; margin-top:11px;" >
+            <div class="row">
               <div class="col-lg-12 btn-group-vertical" >
-                  <button type="button" class="btn btn-outline-primary btn-block text-left" @click="openModal('0')" style="margin-left: -12px;font-size: 12px;border-color: transparent;color: silver;">My Profile</button>
-                  <button type="button" class="btn btn-outline-primary btn-block text-left" @click="openModal('1')" style="margin-left: -12px;margin-top: 5px;font-size: 12px;border-color: transparent;color: silver;">Settings</button>
+                  <button type="button" class="nav-item btn btn-outline-primary text-left" @click="openModal('0')" style="font-size: 13px; height:40px">My Profile</button>
+                  <button type="button" class="nav-item btn btn-outline-primary text-left" @click="openModal('1')" style="font-size: 13px; height:40px">Settings</button>
               </div>
             </div>
 

diff --git a/frontoffice/static/css/style.css b/frontoffice/static/css/style.css
@@ -1960,11 +1960,12 @@ fieldset[disabled] a.btn {
     border-color: #f53231; }
 
 .btn-outline-primary {
-  color: #20a8d8;
+  color: #C0C0C0;
   background-color: transparent;
   background-image: none;
-  border-color: #ad0c0c; }
+  border-color: transparent; }
   .btn-outline-primary:hover {
+    text-color: #12ff00;
     color: #fff;
     background-color: #20a8d8;
     border-color: #20a8d8; }
@@ -2060,14 +2061,14 @@ fieldset[disabled] a.btn {
     border-color: #f8cb00; }
 
 .btn-outline-danger {
-  color: #f86c6b;
+  color: #C0C0C0;
   background-color: transparent;
   background-image: none;
-  border-color: #f86c6b; }
+  border-color: #ad0c0c; }
   .btn-outline-danger:hover {
     color: #fff;
-    background-color: #f86c6b;
-    border-color: #f86c6b; }
+    background-color: transparent;
+    border-color: #ad0c0c; }
   .btn-outline-danger:focus, .btn-outline-danger.focus {
     box-shadow: 0 0 0 2px rgba(248, 108, 107, 0.5); }
   .btn-outline-danger.disabled, .btn-outline-danger:disabled {
@@ -2166,7 +2167,7 @@ tbody.collapse.show {
   border-bottom: 0.3em solid; }
 
 .dropdown-menu {
-  height: 163px !important;
+  height: 153.5px !important;
   width: 284px !important;
   position: absolute;
   top: 100%;
@@ -2188,9 +2189,8 @@ tbody.collapse.show {
 
 .dropdown-divider {
   height: 0;
-  margin: 0.5rem 0;
   overflow: hidden;
-  border-top: 1px solid #eceff1; }
+  border-top: 1px solid #C0C0C0; }
 
 .dropdown-item {
   display: block;