More popover stuff

dist/ratchet.css

@@ -475,12 +475,13 @@ strong {
 
 .popover .table-view {
   width: auto;
-  max-height: 250px;
+  max-height: 300px;
   margin-right: 0;
   margin-bottom: 0;
   margin-left: 0;
   overflow: auto;
   background-color: #fff;
+  border-radius: 12px;
   -webkit-overflow-scrolling: touch;
 }
 
@@ -933,11 +934,6 @@ input[type="button"] {
   transform: translate3d(0, 0, 0);
 }
 
-.popover-content {
-  overflow: hidden;
-  border-radius: 12px;
-}
-
 .backdrop {
   position: fixed;
   top: 0;

docs/index.html

@@ -959,18 +959,16 @@ 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>
+              <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>
 
@@ -985,19 +983,16 @@ 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;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;
 </pre>
 

examples/components/classic/index.html

@@ -45,21 +45,19 @@
         Filter
       </a>
     </header>
-    <div class="popover-content">
-      <ul class="table-view">
-        <li>Item1</li>
-        <li>Item2</li>
-        <li>Item3</li>
-        <li class="table-view-divider">With counts</li>
-        <li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="count">1</span></li>
-        <li>Item2 <span class="count">1</span></li>
-        <li>Item3 <span class="count">1</span></li>
-        <li class="table-view-divider">With chevrons</li>
-        <li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span></li>
-        <li>Item2 <span class="chevron"></span></li>
-        <li>Item3 <span class="chevron"></span></li>
-      </ul>
-    </div>
+    <ul class="table-view">
+      <li>Item1</li>
+      <li>Item2</li>
+      <li>Item3</li>
+      <li class="table-view-divider">With counts</li>
+      <li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="count">1</span></li>
+      <li>Item2 <span class="count">1</span></li>
+      <li>Item3 <span class="count">1</span></li>
+      <li class="table-view-divider">With chevrons</li>
+      <li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span></li>
+      <li>Item2 <span class="chevron"></span></li>
+      <li>Item3 <span class="chevron"></span></li>
+    </ul>
   </div>
 
   <div class="content">

examples/components/default/index.html

@@ -45,21 +45,19 @@
         Filter
       </a>
     </header>
-    <div class="popover-content">
-      <ul class="table-view">
-        <li>Item1</li>
-        <li>Item2</li>
-        <li>Item3</li>
-        <li class="table-view-divider">With counts</li>
-        <li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="count">1</span></li>
-        <li>Item2 <span class="count">1</span></li>
-        <li>Item3 <span class="count">1</span></li>
-        <li class="table-view-divider">With chevrons</li>
-        <li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span></li>
-        <li>Item2 <span class="chevron"></span></li>
-        <li>Item3 <span class="chevron"></span></li>
-      </ul>
-    </div>
+    <ul class="table-view">
+      <li>Item1</li>
+      <li>Item2</li>
+      <li>Item3</li>
+      <li class="table-view-divider">With counts</li>
+      <li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="count">1</span></li>
+      <li>Item2 <span class="count">1</span></li>
+      <li>Item3 <span class="count">1</span></li>
+      <li class="table-view-divider">With chevrons</li>
+      <li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span></li>
+      <li>Item2 <span class="chevron"></span></li>
+      <li>Item3 <span class="chevron"></span></li>
+    </ul>
   </div>
 
   <div class="content">

lib/sass/popovers.scss

@@ -43,11 +43,6 @@
   }
 }
 
-.popover-content {
-  overflow: hidden;
-  border-radius: 12px;
-}
-
 // Backdrop (used as invisible touch escape)
 // --------------------------------------------------
 

lib/sass/table-views.scss

@@ -124,11 +124,12 @@
 
 .popover .table-view {
   width: auto;
-  max-height: 250px;
+  max-height: 300px;
   margin-right: 0;
   margin-bottom: 0;
   margin-left: 0;
   overflow: auto;
   background-color: #fff;
+  border-radius: 12px;
   -webkit-overflow-scrolling: touch;
 }