.has-header required in <main>

example/alerts.html

@@ -17,7 +17,7 @@
         <h1 class="title">Alerts</h1>
       </header>
 
-      <main class="content-padded">
+      <main class="content-padded has-header">
 
         <p class="alert">
           <strong>Warning!</strong> Best check yo self, you're not looking too good.

example/button-groups.html

@@ -17,7 +17,7 @@
         <h1 class="title">Button Group</h1>
       </header>
 
-      <main class="content-padded">
+      <main class="content-padded has-header">
         <p>
           <div class="button-group">
             <a class="button button-primary" href="index.html">Success</a>

example/buttons.html

@@ -23,7 +23,7 @@
         <h1 class="title">Buttons</h1>
       </header>
 
-      <main class="content-padded">
+      <main class="content-padded has-header">
         <p>
           <a class="button button-default" href="grid.html">Default</a>
           <a class="button button-secondary" href="index.html">Secondary</a>

example/footers.html

@@ -17,7 +17,7 @@
         <h1 class="title">Footers</h1>
       </header>
 
-      <main class="content-padded has-footer">
+      <main class="content-padded has-header has-footer">
         <p>Footer should always stay at the bottom of the screen, and on top of the main content.
         <ul>
           <li>asdf

example/image-swipe.html

@@ -17,7 +17,7 @@
         <h1 class="title">Image Swipe</h1>
       </header>
 
-      <main>
+      <main class="has-header">
         
       </main>
 

example/index.html

@@ -23,7 +23,7 @@
         <h1 class="title">Framework!!</h1>
       </header>
 
-      <main class="content-padded">
+      <main class="content-padded has-header">
         <p><a class="button button-default" href="alerts.html">Alerts</a></p>
         <p><a class="button button-default" href="buttons.html">Buttons</a></p>
         <p><a class="button button-default" href="button-groups.html">Button Groups</a></p>

example/input-slider.html

@@ -17,7 +17,7 @@
         <h1 class="title">Input: Slider</h1>
       </header>
 
-      <main>
+      <main class="has-header">
         
       </main>
 

example/input-text.html

@@ -17,7 +17,7 @@
         <h1 class="title">Input: Text</h1>
       </header>
 
-      <main>
+      <main class="has-header">
         
       </main>
 

example/input-toggle.html

@@ -17,7 +17,7 @@
         <h1 class="title">Input: Toggle</h1>
       </header>
 
-      <main>
+      <main class="has-header">
         
       </main>
 

example/lists.html

@@ -23,7 +23,7 @@
         <h1 class="title">Customers</h1>
       </header>
 
-      <main>
+      <main class="has-header">
         <ul class="list">
           <a href="#" class="list-item">
             Sasafras

example/modals.html

@@ -17,7 +17,7 @@
         <h1 class="title">Modals</h1>
       </header>
 
-      <main>
+      <main class="has-header">
         
       </main>
 

example/panels.html

@@ -17,11 +17,15 @@
         <h1 class="title">Panels</h1>
       </header>
 
-      <main>
+      <main class="has-header">
-        
+        <p>A whole bunch of content</p>
       </main>
 
     </section>
 
+    <section class="panel-content">
+      Panel!
+    </section>
+
   </body>
 </html>

example/popovers.html

@@ -17,7 +17,7 @@
         <h1 class="title">Popovers</h1>
       </header>
 
-      <main>
+      <main class="has-header">
         
       </main>
 

example/pull-to-refresh.html

@@ -17,7 +17,7 @@
         <h1 class="title">Pull To Refresh</h1>
       </header>
 
-      <main class="ptr-capable">
+      <main class="ptr-capable has-header">
         <p>Pull the content down to refresh.</p>
       </main>
 

example/tab-bars.html

@@ -17,7 +17,7 @@
         <h1 class="title">Tab Bars</h1>
       </header>
 
-      <main>
+      <main class="has-header">
         
       </main>
 

scss/framework/structure/_bar.scss

@@ -77,7 +77,7 @@
 
 /* Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab.
    Note: For these to work, content must come after both bars in the markup */
-.bar-header ~ main, .has-header {
+.has-header {
   top: $barHeight;
 }