Merge pull request #8548 from bcbroussard/web-ui-menu

third_party/ui/bower_components/angular-material/angular-material.js

@@ -7709,7 +7709,10 @@ function SelectProvider($$interimElementProvider) {
       var focusedNode = centeredNode || optionNodes[0];
       if (focusedNode) {
         opts.focusedNode = focusedNode;
-        focusedNode.focus();
+        // This is commented out to fix an issue where the first option remains in focus
+        // even after you mouseover to a different option.
+        // It is fixed in the compiled source and is here for reference.
+        // focusedNode.focus();
       }
 
       if (isScrollable) {

third_party/ui/bower_components/angular-material/modules/closure/select/select.js

@@ -543,7 +543,7 @@ function SelectProvider($$interimElementProvider) {
         contentEl: element.find('md-content'),
         backdrop: opts.hasBackdrop && angular.element('<md-backdrop class="md-select-backdrop">')
       });
-    
+
       var optionNodes = [];
 
       configureAria();
@@ -757,7 +757,10 @@ function SelectProvider($$interimElementProvider) {
       var focusedNode = centeredNode || optionNodes[0];
       if (focusedNode) {
         opts.focusedNode = focusedNode;
-        focusedNode.focus();
+        // This is commented out to fix an issue where the first option remains in focus
+        // even after you mouseover to a different option.
+        // It is fixed in the compiled source and is here for reference.
+        // focusedNode.focus();
       }
 
       if (isScrollable) {

www/app/assets/css/app.css

@@ -407,6 +407,17 @@ md-toolbar h1 {
   vertical-align: middle;
   padding: 2px;
 }
+md-select-menu.md-default-theme md-option:focus:not([selected]) {
+  background: #eeeeee;
+}
+md-select-menu md-option {
+  transition: box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), -webkit-transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
+  transition: box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+md-select-menu md-option:not([disabled]):hover,
+md-select-menu md-option:not([disabled]):focus {
+  background-color: rgba(158, 158, 158, 0.2);
+}
 .dashboard .body-wrapper {
   padding: 25px;
 }

www/master/less/app/base.less

@@ -454,3 +454,20 @@ md-toolbar h1 {
   line-height: 40px; vertical-align: middle;
   padding: 2px;
 }
+
+md-select-menu.md-default-theme md-option:focus:not([selected]) {
+  background: rgb(238,238,238);
+}
+md-select-menu {
+  md-option {
+
+    &:not([disabled]):hover, &:not([disabled]):focus {
+      background-color: rgba(158,158,158,0.2);
+      // background: transparent;
+    }
+
+    transition: box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), -webkit-transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
+    transition: box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
+
+  }
+}