popovers

dist/android-theme.css

@@ -56,15 +56,18 @@ body {
   text-align: left;
 }
 
-.popover .bar-nav {
-  border-bottom: 1px solid #b1b1b1;
-}
-
 .card {
   border-color: #d9d9d9;
   border-radius: 2px;
 }
 
+.popover .bar {
+  border-radius: 0;
+}
+.popover .bar ~ .table-view {
+  padding-top: 50px;
+}
+
 .table-view .table-view-cell {
   border-bottom: 1px solid #d9d9d9;
 }
@@ -321,10 +324,15 @@ textarea,
 }
 
 .popover {
-  border-radius: 12px;
+  top: 100px;
-}
+  border: 1px solid #9b9b9b;
-.popover:after {
+  border-radius: 0;
-  border-bottom: 15px solid #dddddd;
+  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;
+  transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
+}
+.popover:before {
+  display: none;
 }
 
 .toggle .toggle-handle {

dist/ios-theme.css

@@ -44,13 +44,6 @@ a {
   color: #007aff;
 }
 
-.popover:before {
-  border-bottom: 15px solid rgba(247, 247, 247, 0.98);
-}
-.popover .bar {
-  -webkit-box-shadow: none;
-  box-shadow: none;
-}
 .popover .bar-nav {
   border-bottom: 1px solid rgba(0, 0, 0, 0.15);
 }
@@ -359,9 +352,16 @@ textarea,
   -webkit-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;
 }
-.popover:after {
+.popover:before {
   border-bottom: 15px solid rgba(247, 247, 247, 0.98);
 }
+.popover .bar {
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+.popover .bar-nav {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
+}
 
 .modal {
   -webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);

dist/ratchet.css

@@ -963,7 +963,6 @@ input[type="button"] {
   z-index: 20;
   display: none;
   width: 280px;
-  padding-top: 44px;
   margin-left: -140px;
   background-color: white;
   border-radius: 6px;
@@ -989,6 +988,9 @@ input[type="button"] {
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
 }
+.popover .bar ~ .table-view {
+  padding-top: 44px;
+}
 
 .backdrop {
   position: fixed;

docs-assets/css/docs.css

@@ -828,13 +828,6 @@ hr {
 .platform-ios .tab-item:active .icon {
   color: #007aff;
 }
-.platform-ios .popover:before {
-  border-bottom: 15px solid rgba(247, 247, 247, 0.98);
-}
-.platform-ios .popover .bar {
-  -webkit-box-shadow: none;
-  box-shadow: none;
-}
 .platform-ios .popover .bar-nav {
   border-bottom: 1px solid rgba(0, 0, 0, 0.15);
 }
@@ -1114,9 +1107,16 @@ hr {
   -webkit-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;
 }
-.platform-ios .popover:after {
+.platform-ios .popover:before {
   border-bottom: 15px solid rgba(247, 247, 247, 0.98);
 }
+.platform-ios .popover .bar {
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+.platform-ios .popover .bar-nav {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
+}
 .platform-ios .modal {
   -webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
   transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
@@ -1237,13 +1237,16 @@ hr {
   line-height: 50px;
   text-align: left;
 }
-.platform-android .popover .bar-nav {
-  border-bottom: 1px solid #b1b1b1;
-}
 .platform-android .card {
   border-color: #d9d9d9;
   border-radius: 2px;
 }
+.platform-android .popover .bar {
+  border-radius: 0;
+}
+.platform-android .popover .bar ~ .table-view {
+  padding-top: 50px;
+}
 .platform-android .table-view .table-view-cell {
   border-bottom: 1px solid #d9d9d9;
 }
@@ -1476,10 +1479,15 @@ hr {
   background-color: #33b5e5;
 }
 .platform-android .popover {
-  border-radius: 12px;
+  top: 100px;
+  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;
+  transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
 }
-.platform-android .popover:after {
+.platform-android .popover:before {
-  border-bottom: 15px solid #dddddd;
+  display: none;
 }
 .platform-android .toggle .toggle-handle {
   border: 1px solid #b1b1b1;

lib/sass/popovers.scss

@@ -9,7 +9,6 @@
   z-index: 20;
   display: none;
   width: 280px;
-  padding-top: $bar-base-height;
   margin-left: -140px;
   background-color: $chrome-color;
   border-radius: $border-radius;
@@ -38,6 +37,10 @@
     opacity: 1;
     @include transform(translate3d(0, 0, 0));
   }
+
+  .bar ~ .table-view {
+    padding-top: $bar-base-height;
+  }
 }
 
 // Backdrop (used as invisible touch escape)

lib/sass/theme-android.scss

@@ -94,13 +94,6 @@ body {
 }
 
 
-// Nav bar in popovers
-// --------------------------------------------------
-
-.popover .bar-nav {
-  border-bottom: $border-default;
-}
-
 //
 // Cards
 // --------------------------------------------------
@@ -110,6 +103,16 @@ body {
   border-radius: $border-radius;
 }
 
+// `bar-nav` in popovers
+.popover {
+  .bar {
+    border-radius: 0;
+  }
+  .bar ~ .table-view {
+    padding-top: $bar-base-height;
+  }
+}
+
 // Table views
 // --------------------------------------------------
 
@@ -460,10 +463,14 @@ textarea,
 // --------------------------------------------------
 
 .popover {
-  border-radius: 12px;
+  top: 100px;
-
+  border: 1px solid #9b9b9b;
-  &:after {
+  border-radius: 0;
-    border-bottom: 15px solid $chrome-color;
+  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);
+
+  &:before {
+    display: none;
   }
 }
 

lib/sass/theme-ios.scss

@@ -77,19 +77,9 @@ a {
   }
 }
 
-
+// `bar-nav` in popovers
-// Nav bar in popovers
+.popover .bar-nav {
-// --------------------------------------------------
+  border-bottom: 1px solid rgba(0,0,0,.15);
-.popover {
-  &:before {
-    border-bottom: 15px solid $chrome-color;
-  }
-  .bar {
-    @include box-shadow(none);
-  }
-  .bar-nav {
-    border-bottom: 1px solid rgba(0,0,0,.15);
-  }
 }
 
 
@@ -487,9 +477,15 @@ textarea,
   border-radius: 12px;
   @include transition(-webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out);
 
-  &:after {
+  &:before {
     border-bottom: 15px solid $chrome-color;
   }
+  .bar {
+    @include box-shadow(none);
+  }
+  .bar-nav {
+    border-bottom: 1px solid rgba(0,0,0,.15);
+  }
 }