Use BEM naming consistently for dropdown menu elements

Dropdown menus were using BEM element naming in some
places and tag name selectors in others.

This updates the styling to use BEM element naming
consistently.

h/static/styles/app.scss

@@ -106,6 +106,7 @@ $group-list-width: 270px;
   .group-item {
     display: flex;
     flex-direction: row;
+    flex-grow: 1;
 
     padding: 10px;
     cursor: pointer;

h/static/styles/common.scss

@@ -178,26 +178,6 @@ html {
   position: absolute;
   z-index: 2;
 
-  li:not(.ng-hide) {
-    text-align: left;
-
-    &.inactive {
-      font-weight: 400;
-      color: $gray-lighter;
-      cursor: default;
-      &:hover {
-        color: $gray-lighter;
-      }
-      & * {
-        cursor: default;
-      }
-    }
-
-    & + li {
-      border-top: dotted 1px $gray-lighter;
-    }
-  }
-
   &__link {
     color: inherit;
 
@@ -332,10 +312,20 @@ html {
   display: flex;
   flex-direction: row;
   align-items: center;
-  height: 40px;
   padding-left: 8px;
   padding-right: 16px;
+
+  min-height: 40px;
   min-width: 120px;
+
+  &:not(:first-child) {
+    border-top: dotted 1px $gray-lighter;
+  }
+}
+
+.dropdown-menu__row--unpadded {
+  padding-left: 0px;
+  padding-right: 0px;
 }
 
 // Radio button in a dropdown menu

h/templates/client/group_list.html

@@ -13,7 +13,8 @@
   </span>
   <div class="dropdown-menu__top-arrow"></div>
   <ul class="dropdown-menu pull-none" role="menu">
-    <li ng-repeat="group in groups.all()">
+    <li class="dropdown-menu__row dropdown-menu__row--unpadded "
+        ng-repeat="group in groups.all()">
       <div ng-class="{'group-item': true, selected: group.id == groups.focused().id}"
            ng-click="groups.focus(group.id)">
         <!-- the group icon !-->
@@ -57,7 +58,7 @@
         </div>
       </div>
     </li>
-    <li class="new-group-btn">
+    <li class="dropdown-menu__row dropdown-menu__row--unpadded new-group-btn">
       <div class="group-item" ng-click="createNewGroup()">
         <div class="group-icon-container"><i class="h-icon-add"></i></div>
         <div class="group-details">

h/templates/client/publish_annotation_btn.html

@@ -9,7 +9,7 @@
   </dropdown-menu-btn>
   <div class="publish-annotation-btn__dropdown-container">
     <ul class="dropdown-menu pull-center group-list publish-annotation-btn__dropdown-menu" role="menu">
-      <li ng-click="vm.setPrivacy('shared')">
+      <li class="dropdown-menu__row" ng-click="vm.setPrivacy('shared')">
         <div class="group-item">
           <div class="group-icon-container">
             <i class="small" ng-class="'h-icon-' + vm.group.type"></i>
@@ -21,7 +21,7 @@
           </div>
         </div>
       </li>
-      <li ng-click="vm.setPrivacy('private')">
+      <li class="dropdown-menu__row" ng-click="vm.setPrivacy('private')">
         <div class="group-item">
           <div class="group-icon-container">
             <i class="small h-icon-lock"></i>