framework7rails 0.9.7 → 1.0.0

data/Framework7-0.9.6/kitchen-sink/jade/accordion.jade

@@ -0,0 +1,133 @@
+.navbar
+  .navbar-inner
+    .left.sliding
+      a(href="index.html").back.link
+        i.icon.icon-back 
+        span Back
+    .center.sliding Accordion
+    .right
+      a(href="#").open-panel.link.icon-only
+        i.icon.icon-bars
+.pages.navbar-through
+  .page(data-page="accordion")
+    .page-content
+      .content-block-title List View Accordion
+      .list-block.accordion-list
+        ul
+          li.accordion-item
+            a(href="#").item-link.item-content
+              .item-inner 
+                .item-title Lorem Ipsum
+            .accordion-item-content
+              .content-block
+                p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec commodo. Sed vel justo at turpis laoreet pellentesque quis sed lorem. Integer semper arcu nibh, non mollis arcu tempor vel. Sed pharetra tortor vitae est rhoncus, vel congue dui sollicitudin. Donec eu arcu dignissim felis viverra blandit suscipit eget ipsum.
+          li.accordion-item
+            a(href="#").item-link.item-content
+              .item-inner 
+                .item-title Nested List
+            .accordion-item-content
+              .list-block
+                ul
+                  li
+                    .item-content
+                      .item-media
+                        i.icon.icon-f7
+                      .item-inner 
+                        .item-title Item 1
+                  li
+                    .item-content
+                      .item-media
+                        i.icon.icon-f7
+                      .item-inner 
+                        .item-title Item 2
+                  li
+                    .item-content
+                      .item-media
+                        i.icon.icon-f7
+                      .item-inner 
+                        .item-title Item 3
+                  li
+                    .item-content
+                      .item-media
+                        i.icon.icon-f7
+                      .item-inner 
+                        .item-title Item 4
+          li.accordion-item
+            a(href="#").item-link.item-content
+              .item-inner 
+                .item-title Integer semper
+            .accordion-item-content
+              .content-block
+                p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec commodo. Sed vel justo at turpis laoreet pellentesque quis sed lorem. Integer semper arcu nibh, non mollis arcu tempor vel. Sed pharetra tortor vitae est rhoncus, vel congue dui sollicitudin. Donec eu arcu dignissim felis viverra blandit suscipit eget ipsum.
+      .content-block-title Inset Accordion
+      .list-block.accordion-list.inset
+        ul
+          li.accordion-item
+            a(href="#").item-link.item-content
+              .item-inner 
+                .item-title Lorem Ipsum
+            .accordion-item-content
+              .content-block
+                p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec commodo. Sed vel justo at turpis laoreet pellentesque quis sed lorem. Integer semper arcu nibh, non mollis arcu tempor vel. Sed pharetra tortor vitae est rhoncus, vel congue dui sollicitudin. Donec eu arcu dignissim felis viverra blandit suscipit eget ipsum.
+          li.accordion-item
+            a(href="#").item-link.item-content
+              .item-inner 
+                .item-title Nested List
+            .accordion-item-content
+              .list-block
+                ul
+                  li
+                    .item-content
+                      .item-media
+                        i.icon.icon-f7
+                      .item-inner 
+                        .item-title Item 1
+                  li
+                    .item-content
+                      .item-media
+                        i.icon.icon-f7
+                      .item-inner 
+                        .item-title Item 2
+                  li
+                    .item-content
+                      .item-media
+                        i.icon.icon-f7
+                      .item-inner 
+                        .item-title Item 3
+                  li
+                    .item-content
+                      .item-media
+                        i.icon.icon-f7
+                      .item-inner 
+                        .item-title Item 4
+          li.accordion-item
+            a(href="#").item-link.item-content
+              .item-inner 
+                .item-title Integer semper
+            .accordion-item-content
+              .content-block
+                p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec commodo. Sed vel justo at turpis laoreet pellentesque quis sed lorem. Integer semper arcu nibh, non mollis arcu tempor vel. Sed pharetra tortor vitae est rhoncus, vel congue dui sollicitudin. Donec eu arcu dignissim felis viverra blandit suscipit eget ipsum.
+      .content-block-title Custom Styled Accordion
+      .content-block.accordion-list.custom-accordion
+        .accordion-item
+          .accordion-item-toggle 
+            i.icon.icon-ks-plus +
+            i.icon.icon-ks-minus -
+            span Item 1
+          .accordion-item-content
+            p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec commodo. Sed vel justo at turpis laoreet pellentesque quis sed lorem. Integer semper arcu nibh, non mollis arcu tempor vel. Sed pharetra tortor vitae est rhoncus, vel congue dui sollicitudin. Donec eu arcu dignissim felis viverra blandit suscipit eget ipsum.
+        .accordion-item
+          .accordion-item-toggle 
+            i.icon.icon-ks-plus +
+            i.icon.icon-ks-minus -
+            span Item 2
+          .accordion-item-content
+            p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec commodo. Sed vel justo at turpis laoreet pellentesque quis sed lorem. Integer semper arcu nibh, non mollis arcu tempor vel. Sed pharetra tortor vitae est rhoncus, vel congue dui sollicitudin. Donec eu arcu dignissim felis viverra blandit suscipit eget ipsum.
+        .accordion-item
+          .accordion-item-toggle 
+            i.icon.icon-ks-plus +
+            i.icon.icon-ks-minus -
+            span Item 3
+          .accordion-item-content
+            p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec commodo. Sed vel justo at turpis laoreet pellentesque quis sed lorem. Integer semper arcu nibh, non mollis arcu tempor vel. Sed pharetra tortor vitae est rhoncus, vel congue dui sollicitudin. Donec eu arcu dignissim felis viverra blandit suscipit eget ipsum.
+      

data/Framework7-0.9.6/kitchen-sink/jade/color-themes.jade

@@ -0,0 +1,37 @@
+.navbar
+  .navbar-inner
+    .left.sliding
+      a(href="index.html").back.link
+        i.icon.icon-back 
+        span Back
+    .center.sliding Color Themes
+    .right
+      a(href="#").open-panel.link.icon-only
+        i.icon.icon-bars
+.pages.navbar-through
+  .page(data-page="color-themes")
+    .page-content
+      .content-block 
+        p Framework7 comes with default 10 iOS color themes set and three layout color themes (default, dark and pure white):
+      .content-block-title Choose Layout Theme
+      .content-block
+        .row
+          .col-33.ks-layout-theme.ks-layout-default.active(data-layout="")
+          .col-33.ks-layout-theme.ks-layout-dark(data-theme="dark")
+          .col-33.ks-layout-theme.ks-layout-white(data-theme="white")
+      .content-block-title Choose Color Theme
+      .content-block
+        .row
+          .col-20.ks-color-theme.bg-white(data-theme="white")
+          .col-20.ks-color-theme.bg-black(data-theme="black")
+          .col-20.ks-color-theme.bg-blue(data-theme="blue")
+          .col-20.ks-color-theme.bg-orange(data-theme="orange")
+          .col-20.ks-color-theme.bg-red(data-theme="red")
+        .row
+          .col-20.ks-color-theme.bg-pink(data-theme="pink")
+          .col-20.ks-color-theme.bg-green(data-theme="green")
+          .col-20.ks-color-theme.bg-lightblue(data-theme="lightblue")
+          .col-20.ks-color-theme.bg-yellow(data-theme="yellow")
+          .col-20.ks-color-theme.bg-gray(data-theme="gray")
+        
+      

data/Framework7-0.9.6/kitchen-sink/jade/contacts.jade

@@ -0,0 +1,115 @@
+.navbar
+  .navbar-inner
+    .left.sliding
+      a(href="index.html").back.link
+        i.icon.icon-back 
+        span Back
+    .center.sliding Contacts
+    .right
+      a(href="#").open-panel.link.icon-only
+        i.icon.icon-bars
+.pages.navbar-through
+  .page(data-page="contacts")
+    .page-content.contacts-content
+      .list-block.contacts-block
+        .list-group
+          ul
+            li.list-group-title A
+            li
+              .item-content
+                .item-inner
+                  .item-title Aaron 
+            li
+              .item-content
+                .item-inner
+                  .item-title Abbie
+            li
+              .item-content
+                .item-inner
+                  .item-title Adam
+            li
+              .item-content
+                .item-inner
+                  .item-title Adele
+            li
+              .item-content
+                .item-inner
+                  .item-title Agatha
+            li
+              .item-content
+                .item-inner
+                  .item-title Agnes
+            li
+              .item-content
+                .item-inner
+                  .item-title Albert
+            li
+              .item-content
+                .item-inner
+                  .item-title Alexander
+        .list-group
+          ul
+            li.list-group-title B
+            li
+              .item-content
+                .item-inner
+                  .item-title Bailey
+            li
+              .item-content
+                .item-inner
+                  .item-title Barclay
+            li
+              .item-content
+                .item-inner
+                  .item-title Bartolo
+            li
+              .item-content
+                .item-inner
+                  .item-title Bellamy
+            li
+              .item-content
+                .item-inner
+                  .item-title Belle
+            li
+              .item-content
+                .item-inner
+                  .item-title Benjamin
+        .list-group
+          ul
+            li.list-group-title C
+            li
+              .item-content
+                .item-inner
+                  .item-title Caiden
+            li
+              .item-content
+                .item-inner
+                  .item-title Calvin
+            li
+              .item-content
+                .item-inner
+                  .item-title Candy
+            li
+              .item-content
+                .item-inner
+                  .item-title Carl
+            li
+              .item-content
+                .item-inner
+                  .item-title Cherilyn
+            li
+              .item-content
+                .item-inner
+                  .item-title Chester
+            li
+              .item-content
+                .item-inner
+                  .item-title Chloe
+        .list-group
+          ul
+            li.list-group-title V
+            li
+              .item-content
+                .item-inner
+                  .item-title Vladimir
+          

data/Framework7-0.9.6/kitchen-sink/jade/core-features.jade

@@ -0,0 +1,74 @@
+.navbar
+  .navbar-inner
+    .left.sliding
+      a(href="index.html").back.link
+        i.icon.icon-back 
+        span Back
+    .center.sliding Core Features
+    .right
+      a(href="#").open-panel.link.icon-only
+        i.icon.icon-bars
+.pages.navbar-through
+  .page(data-page="core-features")
+    .page-content
+      .content-block-title Ultra Easy To Use
+      .content-block 
+        .content-block-inner
+          p All you need to make it work is a simple HTML layout and two lines of JavaScript: 
+          p var app = new Framework7();<br>app.addView('.main-view');
+      
+      .content-block-title Custom DOM Library
+      .content-block 
+        .content-block-inner
+          p Framework7 is library agnostic, so you don't need to use any other library (like jQuery, Zepto, Mootols, etc) to make it work. If you need to work with DOM (like jQuery) Framework7 may help you to avoid, it contains custom function to work with DOM. Its syntax is the same as in jQuery with almost the same methods, and also support jQuery-like chaining! The following methods are available with the same syntax and functionality: 
+            b  .addClass()
+            b  .removeClass()
+            b  .hasClass()
+            b  .toggleClass()
+            b  .on()
+            b  .off()
+            b  .attr()
+            b  .transform()
+            b  .transition()
+            b  .transitionEnd()
+            b  .animationEnd()
+            b  .width()
+            b  .offset()
+            b  .html()
+            b  .is()
+            b  .parents()
+            b  .parent()
+            b  .children()
+            b  .append()
+            b  .prepend()
+            b  .find()
+            b  .remove()
+          p This function can be exposed for your usage by calling for example $ =  app.$;
+      .content-block-title XHR + Caching
+      .content-block 
+        .content-block-inner
+          p Framework7 utilizes own methods to load pages via Ajax with internal configurable caching that allows to load pages faster and saves a lot of traffic for your users!
+      .content-block-title History
+      .content-block 
+        .content-block-inner
+          p When you navigate deeper and deeper you may face a problem about how to get back in the same order? Framework7 solves this problem by collecting navigation history. It is epsecially good if your users may come to the same page from different pages. And with Framework7 it is enough just to add "back" class to your link, and it will recognize what page to load.
+      .content-block-title Previous Page Preloading
+      .content-block 
+        .content-block-inner
+          p Framework7 preloads previous page (when available) so your users can always do the nice swipe back gesture to get that page.
+      .content-block-title Multiple Views
+      .content-block 
+        .content-block-inner
+          p Framework7 supports unlimited number of different isolated views, like the main view where you are reading this text and another view in <a href="#" class="open-panel" data-panel="right">right panel</a>. And the fun thing is that you can control one view from another by using "data-view" attribute on links.
+      .content-block-title Performant Animations
+      .content-block 
+        .content-block-inner
+          p It is all about performance and Framework7 uses high performance css animations and 3d transformations to achieve the best result.
+      .content-block-title Easy To Customize
+      .content-block 
+        .content-block-inner
+          p With Framework7 everything is simple, all styles are divided by parts into small .less files, so you can easy, very easy, bring your own custom styles to your app.
+      .content-block-title Ultra Lightweight
+      .content-block 
+        .content-block-inner
+          p Framework7 is a library agnostic and ultra lightweight.

data/Framework7-0.9.6/kitchen-sink/jade/deep-navbar-2.jade

@@ -0,0 +1,15 @@
+.navbar
+  .navbar-inner
+    .left.sliding
+      a(href="index.html").back.link Deep Navbar
+    .center.sliding Deep 2
+    .right.sliding
+      a(href="deep-navbar-3.html").link Deep 3
+.pages.navbar-through
+  .page(data-page="deep-navbar-2")
+    .page-content
+      .content-block
+        p
+          a.button(href="deep-navbar-3.html") Go to page 3
+        p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet rhoncus odio. Suspendisse vel lectus neque. Mauris tincidunt dolor a felis vulputate, at accumsan risus convallis. Sed pulvinar malesuada enim, a consequat felis lobortis a. Morbi faucibus felis in libero lacinia blandit. Pellentesque vitae volutpat metus. In venenatis mauris massa, sed hendrerit augue pulvinar nec. Sed justo magna, lacinia vel tincidunt sed, tristique sit amet est. Nam iaculis dictum laoreet. Donec sed risus sed mauris ultricies aliquam sit amet in enim. Nullam tellus est, imperdiet et adipiscing consequat, consectetur vel nibh. Cras massa nibh, volutpat sit amet velit vel, suscipit tincidunt enim. Curabitur luctus elit id pharetra bibendum. Nulla ut dui eget nulla hendrerit commodo. Pellentesque placerat mi eget dolor rutrum, consectetur mattis mi tincidunt.
+        p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet rhoncus odio. Suspendisse vel lectus neque. Mauris tincidunt dolor a felis vulputate, at accumsan risus convallis. Sed pulvinar malesuada enim, a consequat felis lobortis a. Morbi faucibus felis in libero lacinia blandit. Pellentesque vitae volutpat metus. In venenatis mauris massa, sed hendrerit augue pulvinar nec. Sed justo magna, lacinia vel tincidunt sed, tristique sit amet est. Nam iaculis dictum laoreet. Donec sed risus sed mauris ultricies aliquam sit amet in enim. Nullam tellus est, imperdiet et adipiscing consequat, consectetur vel nibh. Cras massa nibh, volutpat sit amet velit vel, suscipit tincidunt enim. Curabitur luctus elit id pharetra bibendum. Nulla ut dui eget nulla hendrerit commodo. Pellentesque placerat mi eget dolor rutrum, consectetur mattis mi tincidunt.

data/Framework7-0.9.6/kitchen-sink/jade/deep-navbar-3.jade

@@ -0,0 +1,15 @@
+.navbar
+  .navbar-inner
+    .left.sliding
+      a(href="index.html").back.link Deep 2
+    .center.sliding Deep 3
+    .right.sliding
+      a(href="index.html").link Framework7
+.pages.navbar-through
+  .page(data-page="deep-navbar-3")
+    .page-content
+      .content-block
+        p
+          a.button(href="index.html") Go to home page
+        p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet rhoncus odio. Suspendisse vel lectus neque. Mauris tincidunt dolor a felis vulputate, at accumsan risus convallis. Sed pulvinar malesuada enim, a consequat felis lobortis a. Morbi faucibus felis in libero lacinia blandit. Pellentesque vitae volutpat metus. In venenatis mauris massa, sed hendrerit augue pulvinar nec. Sed justo magna, lacinia vel tincidunt sed, tristique sit amet est. Nam iaculis dictum laoreet. Donec sed risus sed mauris ultricies aliquam sit amet in enim. Nullam tellus est, imperdiet et adipiscing consequat, consectetur vel nibh. Cras massa nibh, volutpat sit amet velit vel, suscipit tincidunt enim. Curabitur luctus elit id pharetra bibendum. Nulla ut dui eget nulla hendrerit commodo. Pellentesque placerat mi eget dolor rutrum, consectetur mattis mi tincidunt.
+        p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet rhoncus odio. Suspendisse vel lectus neque. Mauris tincidunt dolor a felis vulputate, at accumsan risus convallis. Sed pulvinar malesuada enim, a consequat felis lobortis a. Morbi faucibus felis in libero lacinia blandit. Pellentesque vitae volutpat metus. In venenatis mauris massa, sed hendrerit augue pulvinar nec. Sed justo magna, lacinia vel tincidunt sed, tristique sit amet est. Nam iaculis dictum laoreet. Donec sed risus sed mauris ultricies aliquam sit amet in enim. Nullam tellus est, imperdiet et adipiscing consequat, consectetur vel nibh. Cras massa nibh, volutpat sit amet velit vel, suscipit tincidunt enim. Curabitur luctus elit id pharetra bibendum. Nulla ut dui eget nulla hendrerit commodo. Pellentesque placerat mi eget dolor rutrum, consectetur mattis mi tincidunt.

data/Framework7-0.9.6/kitchen-sink/jade/deep-navbar.jade

@@ -0,0 +1,15 @@
+.navbar
+  .navbar-inner
+    .left.sliding
+      a(href="index.html").back.link Navbars
+    .center.sliding Deep Navbar
+    .right.sliding
+      a(href="deep-navbar-2.html").link Deep 2
+.pages.navbar-through
+  .page(data-page="deep-navbar")
+    .page-content
+      .content-block
+        p This demo demonstrates Framework7 exclusive behavior of dynamic sliding navigation bars. Just click the button below and look how navbar links will change. And don't forget to try swipe-back gesture on next pages:
+        p
+          a.button(href="deep-navbar-2.html") Go to page 2
+        

data/Framework7-0.9.6/kitchen-sink/jade/forms-buttons.jade

@@ -0,0 +1,71 @@
+.navbar
+  .navbar-inner
+    .left.sliding
+      a(href="forms.html").back.link
+        i.icon.icon-back 
+        span Forms
+    .center.sliding Buttons
+    .right
+      a(href="#").link.open-panel.icon-only
+        i.icon.icon-bars
+.pages.navbar-through
+  .page(data-page="form-buttons")
+    .page-content
+      .content-block-title Usual Buttons
+      .content-block
+        .row
+          .col-33
+            a(href="#").button.active Active
+          .col-33
+            a(href="#").button Button
+          .col-33
+            a(href="#").button.button-round Round
+      .content-block
+        .row
+          .col-50
+            a(href="#").button.active Active
+          .col-50
+            a(href="#").button Button
+      .content-block
+        .buttons-row
+          a(href="#").button Button
+          a(href="#").button Button
+      .content-block
+        .buttons-row
+          a(href="#").button.button-round Button
+          a(href="#").button.button-round Button
+          a(href="#").button.button-round Button
+      .content-block
+        .buttons-row
+          a(href="#").button Button
+          a(href="#").button.active Button
+          a(href="#").button Button
+          a(href="#").button Button
+
+      .content-block-title Big Buttons
+      .content-block
+        .row
+          .col-50
+            a(href="#").button.button-big.active Active
+          .col-50
+            a(href="#").button.button-big Button
+      .content-block-title Themed Fill Buttons
+      .content-block
+        .row
+          .col-50
+            a(href="#").button.button-big.button-fill.color-green Submit
+          .col-50
+            a(href="#").button.button-big.button-fill.color-red Cancel
+      .content-block-title List-Block Buttons
+      .list-block.inset
+        ul
+          li
+            a(href="#").list-button.item-link List Button 1
+          li
+            a(href="#").list-button.item-link List Button 2
+          li
+            a(href="#").list-button.item-link List Button 2
+      .list-block.inset
+        ul
+          li
+            a(href="#").list-button.item-link.color-red Big Red Button

data/Framework7-0.9.6/kitchen-sink/jade/forms-checkboxes.jade

@@ -0,0 +1,152 @@
+.navbar
+  .navbar-inner
+    .left.sliding
+      a(href="forms.html").back.link
+        i.icon.icon-back 
+        span Forms
+    .center.sliding Checkboxes And Radios
+    .right
+      a(href="#").link.open-panel.icon-only
+        i.icon.icon-bars
+.pages.navbar-through
+  .page(data-page="forms-checkboxes")
+    .page-content
+      .content-block-title Checkbox group
+      .list-block
+        ul
+          li
+            label.label-checkbox.item-content
+              input(type="checkbox", name="ks-checkbox", value="Books", checked=true)
+              .item-media
+                i.icon.icon-form-checkbox
+              .item-inner
+                .item-title Books
+          li
+            label.label-checkbox.item-content
+              input(type="checkbox", name="ks-checkbox", value="Movies")
+              .item-media
+                i.icon.icon-form-checkbox
+              .item-inner
+                .item-title Movies
+          li
+            label.label-checkbox.item-content
+              input(type="checkbox", name="ks-checkbox", value="Food")
+              .item-media
+                i.icon.icon-form-checkbox
+              .item-inner
+                .item-title Food
+          li
+            label.label-checkbox.item-content
+              input(type="checkbox", name="ks-checkbox", value="Drinks")
+              .item-media
+                i.icon.icon-form-checkbox
+              .item-inner
+                .item-title Drinks
+      .content-block-title Radio buttons group
+      .list-block
+        ul
+          li
+            label.label-radio.item-content
+              input(type="radio", name="ks-radio", value="Books", checked=true)
+              .item-inner
+                .item-title Books
+          li
+            label.label-radio.item-content
+              input(type="radio", name="ks-radio", value="Movies")
+              .item-inner
+                .item-title Movies
+          li
+            label.label-radio.item-content
+              input(type="radio", name="ks-radio", value="Food")
+              .item-inner
+                .item-title Food
+          li
+            label.label-radio.item-content
+              input(type="radio", name="ks-radio", value="Drinks")
+              .item-inner
+                .item-title Drinks
+      .content-block-title With Media Lists
+      .list-block.media-list
+        ul
+          li
+            label.label-checkbox.item-content
+              input(type="checkbox", name="ks-media-checkbox", value="1")
+              .item-media
+                i.icon.icon-form-checkbox
+              .item-inner
+                .item-title-row
+                  .item-title Facebook
+                  .item-after 17:14
+                .item-subtitle New messages from John Doe
+                .item-text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.
+            
+          li
+            label.label-checkbox.item-content
+              input(type="checkbox", name="ks-media-checkbox", value="2")
+              .item-media
+                i.icon.icon-form-checkbox
+              .item-inner
+                .item-title-row
+                  .item-title John Doe (via Twitter)
+                  .item-after 17:11
+                .item-subtitle John Doe (@_johndoe) mentioned you on Twitter!
+                .item-text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.
+            
+          li
+            label.label-checkbox.item-content
+              input(type="checkbox", name="ks-media-checkbox", value="3")
+              .item-media
+                i.icon.icon-form-checkbox
+              .item-inner
+                .item-title-row
+                  .item-title Facebook
+                  .item-after 16:48
+                .item-subtitle New messages from John Doe
+                .item-text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.
+          li
+            label.label-checkbox.item-content
+              input(type="checkbox", name="ks-media-checkbox", value="4")
+              .item-media
+                i.icon.icon-form-checkbox
+              .item-inner
+                .item-title-row
+                  .item-title John Doe (via Twitter)
+                  .item-after 15:32
+                .item-subtitle John Doe (@_johndoe) mentioned you on Twitter!
+                .item-text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.
+      .content-block-title What is your favourite song?
+      .list-block.media-list
+        ul
+          li
+            label.label-radio.item-content
+              input(type="radio", name="ks-media-radio", value="1", checked=true)
+              .item-media
+                img(src="http://hhhhold.com/160/d/jpg?1", width="80")
+              .item-inner
+                .item-title-row
+                  .item-title Yellow Submarine
+                  .item-after $15
+                .item-subtitle Beatles
+                .item-text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.
+          li
+            label.label-radio.item-content
+              input(type="radio", name="ks-media-radio", value="2")
+              .item-media
+                img(src="http://hhhhold.com/160/d/jpg?2", width="80")
+              .item-inner
+                .item-title-row
+                  .item-title Don't Stop Me Now
+                  .item-after $22
+                .item-subtitle Queen
+                .item-text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.
+          li
+            label.label-radio.item-content
+              input(type="radio", name="ks-media-radio", value="3")
+              .item-media
+                img(src="http://hhhhold.com/160/d/jpg?3", width="80")
+              .item-inner
+                .item-title-row
+                  .item-title Billie Jean
+                  .item-after $16
+                .item-subtitle Michael Jackson
+                .item-text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.