remove bootstrap fade from dialog component

This was breaking the fixed positioning of help popovers for form inputs
nested within the dialog so I'm replacing it.

awx/ui/client/lib/components/dialog/_index.less

@@ -1,3 +1,19 @@
+.at-Dialog {
+    display: block;
+    border: none;
+    opacity: 1;
+    background: rgba(0, 0, 0, 0.3);
+    animation-name: at-DialogFadeIn;
+    animation-iteration-count: 1;
+    animation-timing-function: ease-in;
+    animation-duration: 0.3s;
+}
+
+@keyframes at-DialogFadeIn {
+    0%   { opacity: 0; background: rgba(0, 0, 0, 0); }
+    100% { opacity: 1; background: rgba(0, 0, 0, 0.3); }
+}
+
 .at-Dialog-body {
     font-size: @at-font-size;
     padding: @at-padding-panel 0;

awx/ui/client/lib/components/dialog/dialog.component.js

@@ -1,15 +1,20 @@
 const templateUrl = require('~components/dialog/dialog.partial.html');
 
-const overlaySelector = '.at-Dialog';
+const overlayClass = 'at-Dialog';
 
-function DialogController ($element) {
+function DialogController () {
     const vm = this || {};
 
-    vm.$onInit = () => {
-        const [el] = $element;
-        const overlay = el.querySelector(overlaySelector);
-        overlay.style.display = 'block';
-        overlay.style.opacity = 1;
+    vm.handleClick = ({ target }) => {
+        if (!vm.onClose) {
+            return;
+        }
+
+        const targetElement = $(target);
+
+        if (targetElement.hasClass(overlayClass)) {
+            vm.onClose();
+        }
     };
 }
 

awx/ui/client/lib/components/dialog/dialog.partial.html

@@ -1,4 +1,4 @@
-<div class="modal at-Dialog fade" tabindex="-1" role="dialog">
+<div class="modal at-Dialog" ng-click="vm.handleClick($event)" tabindex="-1" role="dialog">
     <div class="modal-dialog" role="document">
         <div class="modal-content at-Dialog-window">
             <div class="Modal-header">