Reuse dropdown SCSS

Author: nlhkabu

warehouse/static/sass/blocks/_dropdown.scss

@@ -28,14 +28,6 @@
   position: relative;
   display: inline-block;
 
-  // Remove form styling
-  form,
-  button {
-    border: 0;
-    background-color: transparent;
-    padding: 0;
-  }
-
   &__trigger {
     cursor: pointer;
   }
@@ -49,11 +41,10 @@
   &__content {
     position: absolute;
     right: 0;
-    border: 1px solid $header-border-color;
+    margin-bottom: -4px;
     box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.05);
     z-index: index($z-index-scale, "dropdown");
-    border: 1px solid rgba(255, 255, 255, 0.25);
-    border-top: 1px solid $header-border-color;
+    border: 1px solid $border-color;
     display: none;
   }
 
@@ -68,11 +59,11 @@
   &__link,
   button.dropdown__link {
     display: block;
-    padding: 15px 15px 15px 45px;
-    border-bottom: 1px solid $header-border-color;
-    background-color: $header-background-color;
+    padding: 15px 15px 15px 15px;
+    border-bottom: 1px solid $border-color;
+    background-color: $white;
     min-width: 175px;
-    color: $white;
+    color: $text-color;
     cursor: pointer;
     text-align: left;
     position: relative;
@@ -82,8 +73,8 @@
     }
 
     &:hover {
-      background-color: darken($header-background-color, 1.5);
-      color: $white;
+      background-color: mix($border-color, #fff, 50);;
+      color: $text-color;
       text-decoration: underline;
     }
 
@@ -94,4 +85,38 @@
       top: 20px;
     }
   }
+
+  &--on-menu {
+    // Remove form styling
+    form,
+    button {
+      border: 0;
+      background-color: transparent;
+      padding: 0;
+    }
+
+    .dropdown__content {
+      border-color: $header-border-color;
+      margin-bottom: 0;
+    }
+
+    .dropdown__link,
+    button.dropdown__link {
+      border-bottom-color: $header-border-color;
+      background-color: $header-background-color;
+      color: $white;
+
+      &:hover {
+        background-color: darken($header-background-color, 1.5);
+        color: $white;
+      }
+    }
+  }
+
+  &--with-icons {
+    .dropdown__link,
+    button.dropdown__link {
+      padding: 15px 15px 15px 45px;
+    }
+  }
 }

warehouse/templates/includes/current-user-indicator.html

@@ -14,7 +14,7 @@
 
   {% if request.user %}
   <div id="user-indicator" class="horizontal-menu horizontal-menu--light horizontal-menu--tall">
-    <div class="dropdown">
+    <div class="dropdown dropdown--on-menu dropdown--with-icons">
       <button class="horizontal-menu__link dropdown__trigger">
         Welcome back, {{ request.user.username }}
         <span class="dropdown__trigger-caret">

warehouse/templates/manage/project.html

@@ -46,7 +46,7 @@ <h3 class="sidebar-section__title"><a href="{{ request.route_path('manage.projec
             <div class="package-snippet">
               <h1>{{ project.name }}</h1>
               <div class="dropdown">
-                <button class="dropdown__trigger">
+                <button class="dropdown__trigger button">
                   <i class="fa fa-cog" aria-hidden="true"></i>
                   Project Options
                   <span class="dropdown__trigger-caret">
@@ -56,7 +56,7 @@ <h1>{{ project.name }}</h1>
                 </button>
                 <div class="dropdown__content">
                   <a href="{{ request.route_path('packaging.project', name=project.normalized_name) }}" class="dropdown__link">Preview Project</a>
-                  <a href="#" class="dropdown__link">View Latest Package Info</a>
+                  <a href="#" class="dropdown__link">View Package Info</a>
                   <a href="" class="dropdown__link">Delete Project</a>
                   <a href="{{ request.route_path('help')}}#updating-projects" class="dropdown__link">Update Project (help)</a><!-- TODO: add help content -->
                 </div>
@@ -86,7 +86,7 @@ <h2>Releases ({{ project.releases|length }})</h2>
                           </td>
                         <td>
                           <div class="dropdown">
-                            <button class="dropdown__trigger">
+                            <button class="dropdown__trigger button">
                               Options
                               <span class="dropdown__trigger-caret">
                                 <i class="fa fa-caret-down" aria-hidden="true"></i>