framework7rails 3.0.0 → 4.0.0

data/Framework7-0.9.6/kitchen-sink/less/kitchen-sink.less

@@ -1,245 +0,0 @@
-.panel {
-    background: #222;
-    color: #dddddd;
-}
-
-.popover {
-    width: 240px;
-}
-
-.ks-grid {
-    div[class*="col-"] {
-        background: #fff;
-        text-align: center;
-        color: #000;
-        border: 1px solid #ddd;
-        padding: 5px;
-        margin-bottom: 15px;
-    }
-}
-.ks-preloaders {
-    text-align: center;
-}
-.ks-preloader-big {
-    width: 42px;
-    height: 42px;
-}
-.statusbar-overlay {
-    background: #000;
-}
-.statusbar-overlay.with-panel-left {
-    background: #222;
-}
-.statusbar-overlay.with-panel-right {
-    background: #000;
-}
-// Demo tab bars
-.page[data-page="tabbar"], .page[data-page="tabbar-labels"] {
-    .tabbar {
-        -webkit-transform: none;
-        -moz-transform: none;
-        -ms-transform: none;
-        -o-transform: none;
-        transform: none;
-    }
-}
-.page[data-page="tabbar-labels"] {
-    .page-content {
-        padding-bottom: 50px;
-        @media all and (min-width:768px) {
-            padding-bottom: 56px;
-        }
-    }
-}
-i.ks-tabbar-icon-1 {
-    width: 30px;
-    height: 30px;
-    background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='%23929292'><g><circle cx='15.2' cy='8.8' r='1.5'/><polygon points='16.7,12.3 16.7,11.7 16.7,11.3 13.7,11.3 13.7,12.3 14.7,12.3 14.7,20.3 13.7,20.3 13.7,21.3 17.7,21.3 17.7,20.3 16.7,20.3'/><path d='M15.2,2.3C8.3,2.3,2.7,7.9,2.7,14.8s5.6,12.5,12.5,12.5c6.9,0,12.5-5.6,12.5-12.5S22.1,2.3,15.2,2.3z M15.2,26.3 c-6.3,0-11.5-5.2-11.5-11.5S8.8,3.3,15.2,3.3s11.5,5.2,11.5,11.5S21.5,26.3,15.2,26.3z'/></g></svg>");
-    .active & {
-        background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 30 30' fill='%23007aff'><path d='M15,2.6C8.1,2.6,2.5,8.2,2.5,15.1C2.5,22,8.1,27.6,15,27.6S27.5,22,27.5,15.1C27.5,8.2,21.9,2.6,15,2.6z M15,7.6 c0.8,0,1.5,0.7,1.5,1.5c0,0.8-0.7,1.5-1.5,1.5c-0.8,0-1.5-0.7-1.5-1.5C13.5,8.3,14.2,7.6,15,7.6z M17.5,21.6h-4v-1h1v-8h-1v-1h3V12 v0.6v8h1V21.6z'/></svg>");
-    }
-}
-i.ks-tabbar-icon-2 {
-    width: 25px;
-    height: 30px;
-    background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 25 17' fill='%23929292'><path d='M19.5,0h-14L0,6v11h25V6L19.5,0z M5.9,1h13.2l4.5,5H16c0,1.9-1.6,3.4-3.5,3.4C10.6,9.4,9,7.9,9,6H1.4L5.9,1z M24,16H1V7h7.1 c0.5,1.9,2.3,3.4,4.4,3.4s3.9-1.5,4.4-3.4H24V16z'/></svg>");
-    .active & {
-        background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 25 17' fill='%23007aff'><path d='M19.5,0h-14L0,6v11h25V6L19.5,0z M5.9,1h13.2l4.5,5H16c0,1.9-1.6,3.4-3.5,3.4C10.6,9.4,9,7.9,9,6H1.3L5.9,1z'/></svg>");
-    }
-}
-i.ks-tabbar-icon-3 {
-    width: 30px;
-    height: 30px;
-    background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 30 19' fill='%23929292'><path d='M16.8,1c3.7,0,6.8,3,6.8,6.8l0,0.1c0,0,0,0.1,0,0.1l0,1l1,0C27,9,29,11,29,13.5c0,2.5-2,4.5-4.5,4.5H6c-2.8,0-5-2.2-5-5 c0-2.1,1.4-4,3.4-4.7L5,8.1l0.1-0.6C5.3,6,6.5,5,8,5c0.4,0,0.9,0.1,1.3,0.3l0.9,0.5l0.4-0.9C11.8,2.5,14.2,1,16.8,1 M16.8,0 c-3.1,0-5.7,1.8-7,4.4C9.2,4.2,8.6,4,8,4C6,4,4.4,5.4,4.1,7.3C1.7,8.1,0,10.4,0,13c0,3.3,2.7,6,6,6h18.5v0c3,0,5.5-2.5,5.5-5.5 c0-3-2.5-5.5-5.5-5.5c0-0.1,0-0.2,0-0.2C24.5,3.5,21.1,0,16.8,0L16.8,0z'/></svg>");
-    .active & {
-        background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 30 19' fill='%23007aff'><path d='M24.5,8c0-0.1,0-0.2,0-0.2C24.5,3.5,21,0,16.8,0c-3.1,0-5.7,1.8-7,4.4C9.2,4.2,8.6,4,8,4C6,4,4.4,5.4,4,7.3 C1.7,8.1,0,10.4,0,13c0,3.3,2.7,6,6,6h18.5v0c3,0,5.5-2.5,5.5-5.5C30,10.5,27.5,8,24.5,8z'/></svg>");
-    }
-}
-i.ks-tabbar-icon-4 {
-    width: 25px;
-    height: 30px;
-    background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 25 19' fill='%23929292'><g><path d='M23,3h-4.1l-2.4-2.4c0,0,0,0,0,0l0,0C16.1,0.2,15.6,0,15,0h-5C9.5,0,8.9,0.3,8.6,0.6l0,0L6.2,3H2C0.9,3,0,3.9,0,5v12 c0,1.1,0.9,2,2,2h21c1.1,0,2-0.9,2-2V5C25,3.9,24.1,3,23,3z M24,17c0,0.6-0.4,1-1,1H2c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h4.2h0.4 l0.3-0.3l1.2-1.2l0,0.1l1.1-1.2C9.5,1.1,9.8,1,10,1h5c0.3,0,0.5,0.1,0.7,0.3l2.4,2.4L18.4,4h0.4H23c0.6,0,1,0.4,1,1V17z'/><path d='M12.5,4C8.9,4,6,6.9,6,10.5c0,3.6,2.9,6.5,6.5,6.5c3.6,0,6.5-2.9,6.5-6.5C19,6.9,16.1,4,12.5,4z M12.5,16 c-3,0-5.5-2.5-5.5-5.5C7,7.5,9.5,5,12.5,5S18,7.5,18,10.5C18,13.5,15.5,16,12.5,16z'/><path d='M12.5,6C10,6,8,8,8,10.5C8,13,10,15,12.5,15s4.5-2,4.5-4.5C17,8,15,6,12.5,6z M12.5,14C10.6,14,9,12.4,9,10.5 C9,8.6,10.6,7,12.5,7S16,8.6,16,10.5C16,12.4,14.4,14,12.5,14z'/></g></svg>");
-    .active & {
-        background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 25 19' fill='%23007aff'><g><path d='M23,3h-4.1l-2.4-2.4c0,0,0,0,0,0l0,0C16.1,0.2,15.6,0,15.1,0h-5C9.5,0,9,0.3,8.6,0.6l0,0L6.2,3H2C0.9,3,0,3.9,0,5v12 c0,1.1,0.9,2,2,2h21c1.1,0,2-0.9,2-2V5C25,3.9,24.1,3,23,3z M12.5,16c-3,0-5.5-2.5-5.5-5.5C7,7.5,9.5,5,12.5,5c3,0,5.5,2.5,5.5,5.5 C18,13.5,15.5,16,12.5,16z'/><circle cx='12.5' cy='10.5' r='4.5'/></g></svg>");
-    }
-}
-
-// Demo Slider
-.ks-demo-slider, .ks-carousel-slider{
-    font-size: 25px;
-    font-weight: 300;
-    .slider-slide {
-        display: -webkit-box;
-        display: -ms-flexbox;
-        display: -webkit-flex;
-        display: flex;
-        -webkit-box-pack: center;
-        -ms-flex-pack: center;
-        -webkit-justify-content: center;
-        justify-content: center;
-        -webkit-box-align: center;
-        -ms-flex-align: center;
-        -webkit-align-items: center;
-        align-items: center;
-        background: #fff;
-    }
-}
-.ks-carousel-slider{
-    .slider-slide {
-        box-sizing:border-box;
-        border: 1px solid #ccc;
-        background: #fff;
-    }
-}
-.page[data-page="slider-multiple"] .slider-container {
-    margin: 35px 0;
-    font-size: 18px;
-    height: 120px;
-}
-.ks-slider-custom {
-    height: 100%;
-    .slider-container {
-        background: #000;
-    }
-    .slider-slide {
-        -webkit-background-size: cover;
-        background-size: cover;
-        background-position: center;
-    }
-    .slider-pagination{
-        .slider-pagination-bullet {
-            cursor: pointer;
-            width: 10px;
-            height: 10px;
-            background: rgba(255,255,255,0);
-            opacity: 1;
-            border-radius: 0;
-            -webkit-transition: 200ms;
-            -moz-transition: 200ms;
-            -ms-transition: 200ms;
-            -o-transition: 200ms;
-            transition: 200ms;
-            position: relative;
-            -webkit-transform: scale(0.9);
-            -moz-transform: scale(0.9);
-            transform: scale(0.9);
-            box-sizing:border-box;
-            border: 1px solid rgba(255,255,255,0.8);
-        }
-        .slider-pagination-active {
-            z-index: 1;
-            border: 1px solid #007aff;
-            -webkit-transform: scale(1.4);
-            -moz-transform: scale(1.4);
-            transform: scale(1.4);
-        }
-    }
-    .slider-prev-button, .slider-next-button {
-        width: 44px;
-        height: 44px;
-        background: rgba(0,0,0,0.8);
-        position: absolute;
-        top: 50%;
-        text-align: center;
-        line-height: 44px;
-        margin-top: -22px;
-    }
-    .slider-next-button {
-        right: 0;
-    }
-    .slider-prev-button {
-        left: 0;
-    }
-}
-// Custom Accordion
-.custom-accordion {
-    padding-left: 0;
-    padding-right: 0;
-    .accordion-item-toggle {
-        padding: 0px 15px;
-        height: 44px;
-        line-height: 44px;
-        font-size: 17px;
-        color:#000;
-        border-bottom: 1px solid rgba(0,0,0,0.15);
-        cursor: pointer;
-        &:active {
-            background: rgba(0,0,0,0.15);
-        }
-        span {
-            display: inline-block;
-            margin-left: 15px;
-            html[dir="rtl"] & {
-                margin-left: 0;
-                margin-right: 15px;
-            }
-        }
-    }
-    .accordion-item:last-child .accordion-item-toggle {
-        border-bottom: none;
-    }
-    .icon-ks-plus, .icon-ks-minus {
-        display: inline-block;
-        width: 22px;
-        height: 22px;
-        border: 1px solid #000;
-        border-radius: 100%;
-        line-height: 20px;
-        text-align: center;
-    }
-    .icon-ks-minus {
-        display: none;
-    }
-    .accordion-item-expanded {
-        .icon-ks-minus {
-            display: inline-block;
-        }
-        .icon-ks-plus {
-            display: none;
-        }
-    }
-    .accordion-item-content {
-        padding: 0px 15px;
-    }
-}
-
-.ks-layout-theme {
-    height: 44px;
-    border: 1px solid #aaa;
-    cursor: pointer;
-    &.ks-layout-default {
-        background: #efeff4;
-    }
-    &.ks-layout-dark {
-        background: #222426;
-    }
-    &.ks-layout-white {
-        background: #fff;
-    }
-}
-.ks-color-theme {
-    height: 44px;
-    border: 1px solid #aaa;
-    cursor: pointer;
-    margin-bottom: 10px;
-}

data/Framework7-0.9.6/kitchen-sink/list-view.html

@@ -1,318 +0,0 @@
-
-<div class="navbar">
-  <div class="navbar-inner">
-    <div class="left sliding"><a href="index.html" class="back link"><i class="icon icon-back"></i><span>Back</span></a></div>
-    <div class="center sliding">List View</div>
-    <div class="right"><a href="#" class="open-panel link icon-only"><i class="icon icon-bars"></i></a></div>
-  </div>
-</div>
-<div class="pages navbar-through">
-  <div data-page="list-view" class="page">
-    <div class="page-content">
-      <div class="content-block">
-        <p>Framework7 allows you to be flexible with list views (table views). You can make them as navigation menus, you can use there icons, inputs, and any elements inside of the list, and even make them nested:</p>
-      </div>
-      <div class="content-block-title">Data list, with icons</div>
-      <div class="list-block">
-        <ul>
-          <li>
-            <div class="item-content">
-              <div class="item-media"><i class="icon icon-f7"></i></div>
-              <div class="item-inner">
-                <div class="item-title">Ivan Petrov</div>
-                <div class="item-after">CEO</div>
-              </div>
-            </div>
-          </li>
-          <li>
-            <div class="item-content">
-              <div class="item-media"><i class="icon icon-f7"></i></div>
-              <div class="item-inner">
-                <div class="item-title">John Doe</div>
-                <div class="item-after"><span class="badge">5</span></div>
-              </div>
-            </div>
-          </li>
-          <li>
-            <div class="item-content">
-              <div class="item-media"><i class="icon icon-f7"></i></div>
-              <div class="item-inner">
-                <div class="item-title">Jenna Smith</div>
-              </div>
-            </div>
-          </li>
-        </ul>
-      </div>
-      <div class="content-block-title">Links</div>
-      <div class="list-block">
-        <ul>
-          <li><a href="#" class="item-link item-content">
-              <div class="item-media"><i class="icon icon-f7"></i></div>
-              <div class="item-inner">
-                <div class="item-title">Ivan Petrov</div>
-                <div class="item-after">CEO</div>
-              </div></a></li>
-          <li><a href="#" class="item-link item-content">
-              <div class="item-media"><i class="icon icon-f7"></i></div>
-              <div class="item-inner">
-                <div class="item-title">John Doe</div>
-                <div class="item-after">Cleaner</div>
-              </div></a></li>
-          <li><a href="#" class="item-link item-content">
-              <div class="item-media"><i class="icon icon-f7"></i></div>
-              <div class="item-inner">
-                <div class="item-title">Jenna Smith</div>
-              </div></a></li>
-        </ul>
-      </div>
-      <div class="content-block-title">Links, no icons</div>
-      <div class="list-block">
-        <ul>
-          <li><a href="#" class="item-link item-content">
-              <div class="item-inner">
-                <div class="item-title">Ivan Petrov</div>
-              </div></a></li>
-          <li><a href="#" class="item-link item-content">
-              <div class="item-inner">
-                <div class="item-title">John Doe</div>
-              </div></a></li>
-          <li>
-            <div class="item-divider">Divider Here</div>
-          </li>
-          <li><a href="#" class="item-link item-content">
-              <div class="item-inner">
-                <div class="item-title">Ivan Petrov</div>
-              </div></a></li>
-          <li><a href="#" class="item-link item-content">
-              <div class="item-inner">
-                <div class="item-title">Jenna Smith</div>
-              </div></a></li>
-        </ul>
-      </div>
-      <div class="content-block-title">Grouped with sticky titles</div>
-      <div class="list-block">
-        <div class="list-group">
-          <ul>
-            <li class="list-group-title">A</li>
-            <li>
-              <div class="item-content">
-                <div class="item-inner">
-                  <div class="item-title">Aaron </div>
-                </div>
-              </div>
-            </li>
-            <li>
-              <div class="item-content">
-                <div class="item-inner">
-                  <div class="item-title">Abbie</div>
-                </div>
-              </div>
-            </li>
-            <li>
-              <div class="item-content">
-                <div class="item-inner">
-                  <div class="item-title">Adam</div>
-                </div>
-              </div>
-            </li>
-          </ul>
-        </div>
-        <div class="list-group">
-          <ul>
-            <li class="list-group-title">B</li>
-            <li>
-              <div class="item-content">
-                <div class="item-inner">
-                  <div class="item-title">Bailey</div>
-                </div>
-              </div>
-            </li>
-            <li>
-              <div class="item-content">
-                <div class="item-inner">
-                  <div class="item-title">Barclay</div>
-                </div>
-              </div>
-            </li>
-            <li>
-              <div class="item-content">
-                <div class="item-inner">
-                  <div class="item-title">Bartolo</div>
-                </div>
-              </div>
-            </li>
-          </ul>
-        </div>
-        <div class="list-group">
-          <ul>
-            <li class="list-group-title">C</li>
-            <li>
-              <div class="item-content">
-                <div class="item-inner">
-                  <div class="item-title">Caiden</div>
-                </div>
-              </div>
-            </li>
-            <li>
-              <div class="item-content">
-                <div class="item-inner">
-                  <div class="item-title">Calvin</div>
-                </div>
-              </div>
-            </li>
-            <li>
-              <div class="item-content">
-                <div class="item-inner">
-                  <div class="item-title">Candy</div>
-                </div>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </div>
-      <div class="content-block-title">Mixed and nested</div>
-      <div class="list-block">
-        <ul>
-          <li><a href="#" class="item-link item-content">
-              <div class="item-media"><i class="icon icon-f7"></i></div>
-              <div class="item-inner">
-                <div class="item-title">Ivan Petrov</div>
-                <div class="item-after">CEO</div>
-              </div></a></li>
-          <li><a href="#" class="item-link item-content">
-              <div class="item-media"><i class="icon icon-f7"></i><i class="icon icon-f7"></i></div>
-              <div class="item-inner">
-                <div class="item-title">Two icons here</div>
-              </div></a></li>
-          <li>
-            <div class="item-content">
-              <div class="item-inner">
-                <div class="item-title">No icons here</div>
-              </div>
-            </div>
-            <ul>
-              <li><a href="#" class="item-link item-content">
-                  <div class="item-media"><i class="icon icon-f7"></i></div>
-                  <div class="item-inner">
-                    <div class="item-title">Ivan Petrov</div>
-                    <div class="item-after">CEO</div>
-                  </div></a></li>
-              <li><a href="#" class="item-link item-content">
-                  <div class="item-media"><i class="icon icon-f7"></i><i class="icon icon-f7"></i></div>
-                  <div class="item-inner">
-                    <div class="item-title">Two icons here</div>
-                  </div></a></li>
-              <li>
-                <div class="item-content">
-                  <div class="item-inner">
-                    <div class="item-title">No icons here</div>
-                  </div>
-                </div>
-              </li>
-              <li><a href="#" class="item-link item-content">
-                  <div class="item-media"><i class="icon icon-f7"></i></div>
-                  <div class="item-inner">
-                    <div class="item-title">Ultra long text goes here, no, it is really really long</div>
-                  </div></a></li>
-              <li>
-                <div class="item-content">
-                  <div class="item-media"><i class="icon icon-f7"></i></div>
-                  <div class="item-inner">
-                    <div class="item-title">With switch</div>
-                    <div class="item-after">
-                      <label class="label-switch">
-                        <input type="checkbox"/>
-                        <div class="checkbox"></div>
-                      </label>
-                    </div>
-                  </div>
-                </div>
-              </li>
-            </ul>
-          </li>
-          <li><a href="#" class="item-link item-content">
-              <div class="item-media"><i class="icon icon-f7"></i></div>
-              <div class="item-inner">
-                <div class="item-title">Ultra long text goes here, no, it is really really long</div>
-              </div></a></li>
-          <li>
-            <div class="item-content">
-              <div class="item-media"><i class="icon icon-f7"></i></div>
-              <div class="item-inner">
-                <div class="item-title">With switch</div>
-                <div class="item-after">
-                  <label class="label-switch">
-                    <input type="checkbox"/>
-                    <div class="checkbox"></div>
-                  </label>
-                </div>
-              </div>
-            </div>
-          </li>
-        </ul>
-      </div>
-      <div class="content-block-title">Mixed, inset</div>
-      <div class="list-block inset">
-        <ul>
-          <li><a href="#" class="item-link item-content">
-              <div class="item-media"><i class="icon icon-f7"></i></div>
-              <div class="item-inner">
-                <div class="item-title">Ivan Petrov</div>
-                <div class="item-after">CEO</div>
-              </div></a></li>
-          <li><a href="#" class="item-link item-content">
-              <div class="item-media"><i class="icon icon-f7"></i><i class="icon icon-f7"></i></div>
-              <div class="item-inner">
-                <div class="item-title">Two icons here</div>
-              </div></a></li>
-          <li><a href="#" class="item-link item-content">
-              <div class="item-media"><i class="icon icon-f7"></i></div>
-              <div class="item-inner">
-                <div class="item-title">Ultra long text goes here, no, it is really really long</div>
-              </div></a></li>
-          <li>
-            <div class="item-content">
-              <div class="item-media"><i class="icon icon-f7"></i></div>
-              <div class="item-inner">
-                <div class="item-title">With switch</div>
-                <div class="item-after">
-                  <label class="label-switch">
-                    <input type="checkbox"/>
-                    <div class="checkbox"></div>
-                  </label>
-                </div>
-              </div>
-            </div>
-          </li>
-        </ul>
-        <div class="list-block-label">
-          <p>Here comes some useful information about list above</p>
-        </div>
-      </div>
-      <div class="content-block-title">Tablet inset</div>
-      <div class="list-block tablet-inset">
-        <ul>
-          <li><a href="#" class="item-link item-content">
-              <div class="item-media"><i class="icon icon-f7"></i></div>
-              <div class="item-inner">
-                <div class="item-title">Ivan Petrov</div>
-                <div class="item-after">CEO</div>
-              </div></a></li>
-          <li><a href="#" class="item-link item-content">
-              <div class="item-media"><i class="icon icon-f7"></i><i class="icon icon-f7"></i></div>
-              <div class="item-inner">
-                <div class="item-title">Two icons here</div>
-              </div></a></li>
-          <li><a href="#" class="item-link item-content">
-              <div class="item-media"><i class="icon icon-f7"></i></div>
-              <div class="item-inner">
-                <div class="item-title">Ultra long text goes here, no, it is really really long</div>
-              </div></a></li>
-        </ul>
-        <div class="list-block-label">
-          <p>This list block will look like "inset" only on tablets (iPad)</p>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>