AWV-3: Adding CSS3 animations to the CINE dialog

Packages/viewerbase/client/components/viewer/layoutChooser/layoutChooser.html

@@ -1,5 +1,5 @@
 <template name="layoutChooser">
-    <div id="layoutChooser" class="layoutChooser pull-left dropdown-menu" role="menu">
+    <div id="layoutChooser" class="layoutChooser">
         <table>
             <tr>
                 <td></td>
@@ -27,4 +27,4 @@
             </tr>
         </table>
     </div>
-</template>
+</template>

Packages/viewerbase/client/components/viewer/layoutChooser/layoutChooser.styl

@@ -3,18 +3,16 @@
 $borderColor = rgba(77, 99, 110, 0.81)
 
 .layoutChooser
-  theme('background', '$uiGrayDarkest')
-  width: 92px
-  height: 92px
-  min-width: 92px // to override bootstrap's dropdown-menu class
-  min-height: 92px
-  // theme('background-color', '$primaryBackgroundColor')
-  opacity: 0.95
-  border-radius: 8px
+  theme('background', '$uiGrayDarkest', 0.95)
   border: 1px solid $borderColor;
-
-  &.open
-    display: block
+  border-radius: 8px
+  height: 92px
+  min-height: 92px
+  min-width: 92px // to override bootstrap's dropdown-menu class
+  padding: 5px 0;
+  position: absolute;
+  width: 92px
+  z-index: 5000
 
   table
     margin: 0 auto