modififying popovers.

dist/ratchet.css

@@ -380,6 +380,17 @@ strong {
   color: #007aff;
 }
 
+.popover .bar-title {
+  padding-right: 15px;
+  padding-left: 15px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
+  border-radius: 12px 12px 0 0;
+  box-shadow: none;
+}
+.popover .bar-title .title + [class*="button"]:last-child {
+  right: 15px;
+}
+
 .table-view {
   padding: 0;
   margin: 0;
@@ -470,8 +481,6 @@ strong {
   margin-left: 0;
   overflow: auto;
   background-color: #fff;
-  border: 1px solid rgba(0, 0, 0, 0.15);
-  border-radius: 3px;
   -webkit-overflow-scrolling: touch;
 }
 
@@ -896,10 +905,9 @@ input[type="button"] {
   z-index: 20;
   display: none;
   width: 280px;
-  padding: 5px;
   margin-left: -140px;
   background-color: rgba(247, 247, 247, 0.98);
-  border-radius: 6px;
+  border-radius: 12px;
   opacity: 0;
   box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
   -webkit-transform: translate3d(0, -15px, 0);
@@ -925,6 +933,7 @@ input[type="button"] {
   display: box;
   height: 34px;
   margin-bottom: 5px;
+  box-shadow: 0 0 1px rgba(0, 0, 0, 0.85);
 }
 .popover-header .title {
   position: absolute;
@@ -967,6 +976,11 @@ input[type="button"] {
   transform: translate3d(0, 0, 0);
 }
 
+.popover-content {
+  overflow: hidden;
+  border-radius: 12px;
+}
+
 .backdrop {
   position: fixed;
   top: 0;

docs/index.html

@@ -950,7 +950,7 @@ document
 
           <div class="component-example">
             <div id="popover" class="popover">  
-              <header class="popover-header">
+              <header class="bar-title">
                 <a class="button">
                   Left
                 </a>
@@ -959,18 +959,24 @@ document
                   Right
                 </a>
               </header>
+              <div class="popover-content">
                 <ul class="table-view">
                   <li>Item1</li>
                   <li>Item2</li>
                   <li>Item3</li>
                   <li>Item4</li>
+                  <li>Item5</li>
+                  <li>Item6</li>
+                  <li>Item7</li>
+                  <li>Item8</li>
                 </ul>
               </div>
             </div>
+          </div>
 
 <pre class="prettyprint">
 &lt;div id=&quot;myPopover&quot; class=&quot;popover&quot;&gt;
-  &lt;header class=&quot;popover-header&quot;&gt;
+  &lt;header class=&quot;bar-title&quot;&gt;
     &lt;a class=&quot;button&quot; href=&quot;#&quot;&gt;
       Left
     &lt;/a&gt;
@@ -979,13 +985,20 @@ document
       Right
     &lt;/a&gt;
   &lt;/header&gt;
+
+  &lt;div class=&quot;popover-content&quot;&gt;
     &lt;ul class=&quot;table-view&quot;&gt;
       &lt;li&gt;Item1&lt;/li&gt;
       &lt;li&gt;Item2&lt;/li&gt;
       &lt;li&gt;Item3&lt;/li&gt;
       &lt;li&gt;Item4&lt;/li&gt;
+      &lt;li&gt;Item5&lt;/li&gt;
+      &lt;li&gt;Item6&lt;/li&gt;
+      &lt;li&gt;Item7&lt;/li&gt;
+      &lt;li&gt;Item8&lt;/li&gt;
     &lt;/ul&gt;
   &lt;/div&gt;
+&lt;/div&gt;
 </pre>
 
           <p class="component-description">Popovers are designed to only fire from <a href="#bars">title bars</a>. Set the value of the title href to the id of a popover, like so:</p>

lib/sass/bars.scss

@@ -119,3 +119,18 @@
 .tab-item.active .tab-label {
   color: $primary-color;
 }
+
+// Nav bar in popovers
+// --------------------------------------------------
+
+.popover .bar-title {
+  padding-right: 15px;
+  padding-left: 15px;
+  border-bottom: 1px solid rgba(0,0,0,.15);
+  border-radius: 12px 12px 0 0;
+  box-shadow: none;
+
+  .title + [class*="button"]:last-child {
+    right: 15px;
+  }
+}

lib/sass/popovers.scss

@@ -9,10 +9,9 @@
   z-index: 20;
   display: none;
   width: 280px;
-  padding: 5px;
   margin-left: -140px;
   background-color: $chrome-color;
-  border-radius: 6px;
+  border-radius: 12px;
   opacity: 0;
   box-shadow: 0 0 15px rgba(0, 0, 0, .1);
   -webkit-transform: translate3d(0, -15px, 0);
@@ -41,6 +40,7 @@
   display: box;
   height: 34px;
   margin-bottom: 5px;
+  box-shadow: 0 0 1px rgba(0,0,0,.85);
 
   // Centered title for popover
   .title {
@@ -96,6 +96,11 @@
   }
 }
 
+.popover-content {
+  overflow: hidden;
+  border-radius: 12px;
+}
+
 // Backdrop (used as invisible touch escape)
 // --------------------------------------------------
 

lib/sass/table-views.scss

@@ -130,7 +130,5 @@
   margin-left: 0;
   overflow: auto;
   background-color: #fff;
-  border: 1px solid rgba(0, 0, 0, .15);
-  border-radius: 3px;
   -webkit-overflow-scrolling: touch;
 }