android popovers

dist/android-theme.css

@@ -413,17 +413,28 @@ textarea,
 }
 
 .popover {
-  top: 90px;
+  top: 47px;
+  left: 15px;
+  width: 200px;
+  margin-left: 0;
   border: 1px solid #9b9b9b;
   border-radius: 0;
   box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
-  -webkit-transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
-  -moz-transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
-  transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
+  -webkit-transform: scale(0.75);
+  -ms-transform: scale(0.75);
+  transform: scale(0.75);
+  -webkit-transition: -webkit-transform 0.1s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
+  -moz-transition: -webkit-transform 0.1s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
+  transition: -webkit-transform 0.1s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
 }
 .popover:before {
   display: none;
 }
+.popover.visible {
+  -webkit-transform: scale(1);
+  -ms-transform: scale(1);
+  transform: scale(1);
+}
 
 .popover .bar {
   border-radius: 0;

dist/ratchet.css

@@ -1029,8 +1029,8 @@ select {
   right: 0;
   bottom: 0;
   left: 0;
-  z-index: 10;
-  background-color: rgba(0, 0, 0, 0.3);
+  z-index: 15;
+  background-color: none;
 }
 
 .popover .btn-block {

docs-assets/css/docs.css

@@ -1567,17 +1567,28 @@ hr {
   background-color: #ff4444;
 }
 .platform-android .popover {
-  top: 90px;
+  top: 47px;
+  left: 15px;
+  width: 200px;
+  margin-left: 0;
   border: 1px solid #9b9b9b;
   border-radius: 0;
   box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
-  -webkit-transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
-  -moz-transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
-  transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
+  -webkit-transform: scale(0.75);
+  -ms-transform: scale(0.75);
+  transform: scale(0.75);
+  -webkit-transition: -webkit-transform 0.1s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
+  -moz-transition: -webkit-transform 0.1s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
+  transition: -webkit-transform 0.1s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
 }
 .platform-android .popover:before {
   display: none;
 }
+.platform-android .popover.visible {
+  -webkit-transform: scale(1);
+  -ms-transform: scale(1);
+  transform: scale(1);
+}
 .platform-android .popover .bar {
   border-radius: 0;
 }
@@ -1681,6 +1692,11 @@ hr {
 .platform-android .device .content {
   top: 50px;
 }
+.platform-android .device .popover {
+  -webkit-transform: scale(1);
+  -ms-transform: scale(1);
+  transform: scale(1);
+}
 .platform-android .bar ~ .content {
   padding: 0;
 }

examples/app-android-notes/index.html

@@ -8,7 +8,7 @@
     <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
     <link rel="stylesheet" href="../../dist/ratchet.css">
-    <link rel="stylesheet" href="../../dist/ios-theme.css">
+    <link rel="stylesheet" href="../../dist/android-theme.css">
     <link rel="stylesheet" href="css/app.css">
     <script src="../../dist/ratchet.js"></script>
 

lib/sass/docs.scss

@@ -775,6 +775,9 @@ hr {
     .content {
       top: 50px;
     }
+    .popover {
+      @include transform(scale(1));
+    }
   }
   .bar ~ .content {
     padding: 0;

lib/sass/popovers.scss

@@ -31,7 +31,7 @@
     content: '';
   }
 
-  // Popover animation
+  // Popover transition
   // --------------------------------------------------
 
   &.visible {
@@ -53,8 +53,8 @@
   right: 0;
   bottom: 0;
   left: 0;
-  z-index: 10;
-  background-color: rgba(0,0,0,.3);
+  z-index: 15;
+  background-color: none;
 }
 
 // Block level buttons in popovers

lib/sass/theme-android.scss

@@ -587,15 +587,24 @@ textarea,
 // --------------------------------------------------
 
 .popover {
-  top: 90px;
+  top: 47px;
+  left: 15px;
+  width: 200px;
+  margin-left: 0;
   border: 1px solid #9b9b9b;
   border-radius: 0;
   box-shadow: 0 0 3px rgba(0,0,0,.2);
-  @include transition(-webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out);
+  @include transform(scale(.75));
+  @include transition(-webkit-transform 0.1s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out);
 
   &:before {
     display: none;
   }
+
+
+  &.visible {
+    @include transform(scale(1));
+  }
 }
 
 // Popovers with bars