A lot more v3 docs

framework7io · Jun 24, 2018 · 7a9f8c0 · 7a9f8c0
1 parent fc0477c
commit 7a9f8c0
Show file tree

Hide file tree

Showing 26 changed files with 697 additions and 149 deletions.
diff --git a/css/main.css b/css/main.css
@@ -3112,6 +3112,7 @@ pre code {
   background: #fafafa;
   line-height: 21px;
   border: 1px solid #f3f3f3;
+  font-weight: normal;
 }
 pre {
   overflow: hidden;

diff --git a/js/highlight.min.js b/js/highlight.min.js
diff --git a/src/less/pre-code.less b/src/less/pre-code.less
@@ -20,6 +20,7 @@ code.hljs, pre code {
   background: #fafafa;
   line-height: 21px;
   border: 1px solid #f3f3f3;
+  font-weight: normal;
 }
 pre {
   overflow: hidden;

diff --git a/src/pug/_docs-menu.pug b/src/pug/_docs-menu.pug
@@ -11,6 +11,8 @@ ul
     ul
       li
         a(href="introduction.html") Introduction
+      li
+        a(href="kitchen-sink.html") Kitchen Sink
       li
         a(href="installation.html") Installation
       li
@@ -65,7 +67,9 @@ ul
       li
         a(href="dialog.html") Dialog
       li
-        a(href="floating-action-button.html") Floating Action Button
+        a(href="elevation.html") Elevation
+      li
+        a(href="floating-action-button.html") Floating Action Button / FAB
       li
         a(href="form.html") Form Data / Storage
       li

diff --git a/src/pug/docs-demos/_layout-ios.pug b/src/pug/docs-demos/_layout-ios.pug
diff --git a/src/pug/docs-demos/_layout-material.pug b/src/pug/docs-demos/_layout-material.pug
diff --git a/src/pug/docs-demos/cards.pug b/src/pug/docs-demos/cards.pug
@@ -20,6 +20,20 @@ block content
         <div class="card">
           <div class="card-content card-content-padding">Another card. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat sem est, non tincidunt ligula volutpat sit amet. Mauris aliquet magna justo. </div>
         </div>
+
+        <div class="block-title">Outline Cards</div>
+        <div class="card card-outline">
+          <div class="card-content card-content-padding">This is a simple card with plain text, but cards can also contain their own header, footer, list view, image, or any other element.</div>
+        </div>
+        <div class="card card-outline">
+          <div class="card-header">Card header</div>
+          <div class="card-content card-content-padding">Card with header and footer. Card headers are used to display card titles and footers for additional information or just for custom actions.</div>
+          <div class="card-footer">Card Footer</div>
+        </div>
+        <div class="card card-outline">
+          <div class="card-content card-content-padding">Another card. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat sem est, non tincidunt ligula volutpat sit amet. Mauris aliquet magna justo. </div>
+        </div>
+
         <div class="block-title">Styled Cards</div>
         <div class="card demo-card-header-pic">
           <div style="background-image:url(http://lorempixel.com/1000/600/nature/3/)" class="card-header align-items-flex-end">Journey To Mountains</div>

diff --git a/src/pug/docs-demos/chips.pug b/src/pug/docs-demos/chips.pug
@@ -29,6 +29,24 @@ block content
             <div class="chip-label">Last One</div>
           </div>
         </div>
+        <div class="block-title">Outline Chips</div>
+        <div class="block block-strong">
+          <div class="chip chip-outline">
+            <div class="chip-label">Example Chip</div>
+          </div>
+          <div class="chip chip-outline">
+            <div class="chip-label">Another Chip</div>
+          </div>
+          <div class="chip chip-outline">
+            <div class="chip-label">One More Chip</div>
+          </div>
+          <div class="chip chip-outline">
+            <div class="chip-label">Fourth Chip</div>
+          </div>
+          <div class="chip chip-outline">
+            <div class="chip-label">Last One</div>
+          </div>
+        </div>
         <div class="block-title">Icon Chips</div>
         <div class="block block-strong">
           <div class="chip">
@@ -122,6 +140,21 @@ block content
           <div class="chip color-pink">
             <div class="chip-label">Pink Chip</div>
           </div>
+          <div class="chip chip-outline color-red">
+            <div class="chip-label">Red Chip</div>
+          </div>
+          <div class="chip chip-outline color-green">
+            <div class="chip-label">Green Chip</div>
+          </div>
+          <div class="chip chip-outline color-blue">
+            <div class="chip-label">Blue Chip</div>
+          </div>
+          <div class="chip chip-outline color-orange">
+            <div class="chip-label">Orange Chip</div>
+          </div>
+          <div class="chip chip-outline color-pink">
+            <div class="chip-label">Pink Chip</div>
+          </div>
         </div>
 
 block scripts

diff --git a/src/pug/docs-demos/elevation.pug b/src/pug/docs-demos/elevation.pug
@@ -0,0 +1,124 @@
+extends _layout
+block vars
+  - var includeF7Icons = true;
+  - var includeMaterialIcons = true;
+block content
+  .view.view-main.view-init
+    .page
+      .navbar
+        .navbar-inner
+          .left
+          .title Elevation
+          .right
+
+      .page-content
+        <div class="block">
+          <div class="row">
+            <div class="col">
+              <div class="elevation-demo elevation-1">1</div>
+            </div>
+            <div class="col">
+              <div class="elevation-demo elevation-2">2</div>
+            </div>
+            <div class="col">
+              <div class="elevation-demo elevation-3">3</div>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col">
+              <div class="elevation-demo elevation-4">4</div>
+            </div>
+            <div class="col">
+              <div class="elevation-demo elevation-5">5</div>
+            </div>
+            <div class="col">
+              <div class="elevation-demo elevation-6">6</div>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col">
+              <div class="elevation-demo elevation-7">7</div>
+            </div>
+            <div class="col">
+              <div class="elevation-demo elevation-8">8</div>
+            </div>
+            <div class="col">
+              <div class="elevation-demo elevation-9">9</div>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col">
+              <div class="elevation-demo elevation-10">10</div>
+            </div>
+            <div class="col">
+              <div class="elevation-demo elevation-11">11</div>
+            </div>
+            <div class="col">
+              <div class="elevation-demo elevation-12">12</div>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col">
+              <div class="elevation-demo elevation-13">13</div>
+            </div>
+            <div class="col">
+              <div class="elevation-demo elevation-14">14</div>
+            </div>
+            <div class="col">
+              <div class="elevation-demo elevation-15">15</div>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col">
+              <div class="elevation-demo elevation-16">16</div>
+            </div>
+            <div class="col">
+              <div class="elevation-demo elevation-17">17</div>
+            </div>
+            <div class="col">
+              <div class="elevation-demo elevation-18">18</div>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col">
+              <div class="elevation-demo elevation-19">19</div>
+            </div>
+            <div class="col">
+              <div class="elevation-demo elevation-20">20</div>
+            </div>
+            <div class="col">
+              <div class="elevation-demo elevation-21">21</div>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col">
+              <div class="elevation-demo elevation-22">22</div>
+            </div>
+            <div class="col">
+              <div class="elevation-demo elevation-23">23</div>
+            </div>
+            <div class="col">
+              <div class="elevation-demo elevation-24">24</div>
+            </div>
+          </div>
+
+          <div class="row">
+            <div class="col">
+              <div class="elevation-demo elevation-6 elevation-hover-24 elevation-pressed-12 elevation-transition">6 + hover-24 + pressed-12</div>
+            </div>
+          </div>
+        </div>
+
+
+block scripts
+  style.
+    .elevation-demo {
+      height: 100px;
+      margin: 30px 10px;
+      background: #fff;
+      font-size: 18px;
+      text-align: center;
+      line-height: 100px;
+    }
+  script.
+    var app = new Framework7();
diff --git a/src/pug/docs-demos/floating-action-button.pug b/src/pug/docs-demos/floating-action-button.pug
@@ -45,22 +45,33 @@ block content
           a(href='') 3
           a(href='') 4
 
-      .fab.fab-left-bottom.color-orange
+      .fab.fab-left-bottom.fab-morph(data-morph-to=".toolbar")
         a(href='#')
           i.icon.f7-icons.ios-only add
           i.icon.f7-icons.ios-only close
           i.icon.material-icons.md-only add
           i.icon.material-icons.md-only close
-        .fab-buttons.fab-buttons-right
-          a(href='') 1
-          a(href='') 2
-          a(href='') 3
-      .fab.fab-right-bottom.fab-morph(data-morph-to=".toolbar")
+
+      .fab.fab-right-bottom.color-orange
         a(href='#')
           i.icon.f7-icons.ios-only add
           i.icon.f7-icons.ios-only close
           i.icon.material-icons.md-only add
           i.icon.material-icons.md-only close
+        .fab-buttons.fab-buttons-top
+          a(href='#').fab-label-button
+            span 1
+            span.fab-label Action 1
+          a(href='#').fab-label-button
+            span 2
+            span.fab-label Action 2
+
+      .fab.fab-extended.fab-center-bottom.color-red
+        a(href='#')
+          i.icon.f7-icons.ios-only add
+          i.icon.material-icons.md-only add
+          .fab-text Create
+
       .page-content
         .block
           p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae porta enim. Sed ultricies lacinia mauris, non tincidunt sem eleifend eget. Duis convallis quis sem non volutpat. Morbi risus lorem, dapibus et nulla ac, pharetra maximus elit. Etiam vitae lacus a dui hendrerit ornare vitae id est. Pellentesque ut tortor id sem maximus lobortis at egestas nulla. Nulla pretium, nunc et porta ullamcorper, sem lorem elementum massa, rhoncus ullamcorper odio dui vel mauris. Ut lobortis neque congue eros posuere blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. In sem dolor, tempus eu tellus quis, vulputate malesuada felis.

diff --git a/src/pug/docs/action-sheet.pug b/src/pug/docs/action-sheet.pug
@@ -282,6 +282,9 @@ block content
         tr
           td actions.params
           td Action sheet instance parameters
+        tr
+          td actions.opened
+          td Boolean prop indicating whether action sheet is opened or not
         tr
           th(colspan="2") Methods
         tr

diff --git a/src/pug/docs/app.pug b/src/pug/docs/app.pug
@@ -35,6 +35,11 @@ block content
           th Default
           th Description
       tbody
+        tr
+          td root
+          td string
+          td body
+          td App root element. If you main app layout is not a direct child of the <code>&lt;body&gt;</code> then it is required to specify root element here
         tr
           td id
           td string
@@ -65,11 +70,7 @@ block content
           td array
           td []
           td Array with default routes to all views.
-        tr
-          td root
-          td string
-          td body
-          td App root element.
+
         tr
           td data
           td function
@@ -103,6 +104,7 @@ block content
                       }
                     }
                   });
+            p Note, that <code>this</code> inside of each method points to app Framework7 instance.
         tr
           td on
           td object
@@ -258,7 +260,7 @@ block content
             },
           });
     h2 App Methods & Properties
-    p Returned Framework7 instance (<code>app</code>) contains a lot of useful properties and methods:
+    p Returned Framework7 instance <code>app</code> contains a lot of useful properties and methods:
     table.methods-table
       tbody
         tr