From: Jeremy Thomas <bbxdesign@gmail.com>
Date: Tue, 25 Jul 2017 18:12:00 +0000 (+0200)
Subject: Add new elements
X-Git-Tag: 0.5.0~29
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=c2654bd6c6794750fe292e4f599c482a3c591694;p=thirdparty%2Fbulma.git

Add new elements
---

diff --git a/docs/index.html b/docs/index.html
index ba4e9f809..0a2595526 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -494,125 +494,438 @@ route: index
         <span class="icon is-medium">
           <i class="fa fa-asterisk"></i>
         </span>
-        And all the usual <strong>elements</strong>
+        And all the usual <strong>elements</strong> and <strong>components</strong>
       </a>
     </h3>
-    <h4 class="subtitle is-4">Buttons, form controls, menus, tabs, titles, notifications, etc.</h4>
+  </div>
+</section>
+
+<section class="section is-medium" style="padding-top: 0;">
+  <div class="container">
 
     <div class="columns">
-      <div class="column is-one-third">
-        <div class="card">
-          <div class="card-image">
-            <figure class="image is-4by3">
-              <img src="{{site.url}}/images/placeholders/1280x960.png" alt="Image">
-            </figure>
+      <div class="column is-2">
+        <h4 class="title is-4"><strong>Elements</strong></h4>
+      </div>
+      <div class="column is-10">
+        <div class="columns">
+          <div class="column is-3">
+            <h4 class="subtitle is-4">Form</h4>
           </div>
-          <div class="card-content">
-            <div class="media">
-              <div class="media-left">
-                <figure class="image is-48x48">
-                  <img src="{{site.url}}/images/placeholders/96x96.png" alt="Image">
-                </figure>
-              </div>
-              <div class="media-content">
-                <p class="title is-4">Card</p>
-                <p class="subtitle is-6">Subtitle</p>
+          <div class="column is-9">
+            <div class="field">
+              <label class="label">Form label</label>
+              <div class="control">
+                <input class="input" type="text" placeholder="Input">
               </div>
             </div>
+            <div class="field">
+              <p class="control">
+                <span class="select">
+                  <select>
+                    <option>Select dropdown</option>
+                  </select>
+                </span>
+              </p>
+            </div>
+            <div class="field">
+              <p class="control">
+                <textarea class="textarea" placeholder="Textarea"></textarea>
+              </p>
+            </div>
+            <div class="field">
+              <p class="control">
+                <label class="checkbox">
+                  <input type="checkbox">
+                  Checkbox
+                </label>
+              </p>
+            </div>
+            <div class="field">
+              <p class="control">
+                <label class="radio">
+                  <input type="radio" name="question">
+                  Radio
+                </label>
+                <label class="radio">
+                  <input type="radio" name="question">
+                  Buttons
+                </label>
+              </p>
+            </div>
+            <div class="field">
+              <p class="control">
+                <a class="button is-primary">Button</a>
+              </p>
+            </div>
+          </div>
+        </div>
 
-            <div class="content">
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris. <a href="#">@bulmaio</a>. <a href="#">#css</a> <a href="#">#responsive</a>
-              <br>
-              <small>11:09 PM - 1 Jan 2016</small>
+        <div class="columns">
+          <div class="column is-3">
+            <h4 class="subtitle is-4">Box</h4>
+          </div>
+          <div class="column is-9">
+            <div class="box">
+              <article class="media">
+                <div class="media-left">
+                  <figure class="image is-64x64">
+                    <img src="{{site.url}}/images/placeholders/128x128.png" alt="Image">
+                  </figure>
+                </div>
+                <div class="media-content">
+                  <div class="content">
+                    <p>
+                      <strong>John Smith</strong> <small>@johnsmith</small> <small>31m</small>
+                      <br>
+                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.
+                    </p>
+                  </div>
+                  <nav class="level is-mobile">
+                    <div class="level-left">
+                      <a class="level-item">
+                        <span class="icon is-small"><i class="fa fa-reply"></i></span>
+                      </a>
+                      <a class="level-item">
+                        <span class="icon is-small"><i class="fa fa-retweet"></i></span>
+                      </a>
+                      <a class="level-item">
+                        <span class="icon is-small"><i class="fa fa-heart"></i></span>
+                      </a>
+                    </div>
+                  </nav>
+                </div>
+              </article>
+            </div>
+          </div>
+        </div>
+
+        <div class="columns">
+          <div class="column is-3">
+            <h4 class="subtitle is-4">Button</h4>
+          </div>
+          <div class="column is-9">
+            <div class="field is-grouped is-grouped-multiline">
+              <div class="control"><a class="button">Button</a></div>
+              <div class="control"><a class="button is-white">White</a></div>
+              <div class="control"><a class="button is-light">Light</a></div>
+              <div class="control"><a class="button is-dark">Dark</a></div>
+              <div class="control"><a class="button is-black">Black</a></div>
+              <div class="control"><a class="button is-link">Link</a></div>
+            </div>
+
+            <div class="field is-grouped is-grouped-multiline">
+              <div class="control"><a class="button is-primary">Primary</a></div>
+              <div class="control"><a class="button is-info">Info</a></div>
+              <div class="control"><a class="button is-success">Success</a></div>
+              <div class="control"><a class="button is-warning">Warning</a></div>
+              <div class="control"><a class="button is-danger">Danger</a></div>
+            </div>
+          </div>
+        </div>
+
+        <div class="columns">
+          <div class="column is-3">
+            <h4 class="subtitle is-4">Notification</h4>
+          </div>
+          <div class="column is-9">
+            <div class="notification">
+              <button class="delete"></button>
+              Lorem ipsum dolor sit amet, consectetur
+              adipiscing elit lorem ipsum dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet,
+              consectetur adipiscing elit
             </div>
           </div>
         </div>
+
+        <div class="columns">
+          <div class="column is-3">
+            <h4 class="subtitle is-4">Tags</h4>
+          </div>
+          <div class="column is-9">
+            <span class="tag is-black">Black</span>
+            <span class="tag is-dark">Dark</span>
+            <span class="tag is-light">Light</span>
+            <span class="tag is-white">White</span>
+            <span class="tag is-primary">Primary</span>
+            <span class="tag is-info">Info</span>
+            <span class="tag is-success">Success</span>
+            <span class="tag is-warning">Warning</span>
+            <span class="tag is-danger">Danger</span>
+          </div>
+        </div>
       </div>
-      <div class="column">
-        <p class="title">Title</p>
-        <p class="subtitle">Subtitle</p>
-        <div class="field is-grouped">
-          <p class="control">
-            <span class="select">
-              <select>
-                <option>Dropdown</option>
-              </select>
-            </span>
-          </p>
-          <p class="control is-expanded">
-            <input class="input" type="text" placeholder="Text input">
-          </p>
+    </div>
+
+    <div class="columns">
+      <div class="column is-2">
+        <h4 class="title is-4"><strong>Components</strong></h4>
+      </div>
+      <div class="column is-10">
+        <div class="columns">
+          <div class="column is-3">
+            <h4 class="subtitle is-4">Card</h4>
+          </div>
+          <div class="column is-9">
+            <div class="columns">
+              <div class="column is-half">
+                <div class="card">
+                  <div class="card-image">
+                    <figure class="image is-4by3">
+                      <img src="http://localhost:4000/images/placeholders/1280x960.png" alt="Image">
+                    </figure>
+                  </div>
+                  <div class="card-content">
+                    <div class="media">
+                      <div class="media-left">
+                        <figure class="image is-48x48">
+                          <img src="http://localhost:4000/images/placeholders/96x96.png" alt="Image">
+                        </figure>
+                      </div>
+                      <div class="media-content">
+                        <p class="title is-4">John Smith</p>
+                        <p class="subtitle is-6">@johnsmith</p>
+                      </div>
+                    </div>
+
+                    <div class="content">
+                      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                      Phasellus nec iaculis mauris. <a>@bulmaio</a>.
+                      <a>#css</a> <a>#responsive</a>
+                      <br>
+                      <small>11:09 PM - 1 Jan 2016</small>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div class="column is-half">
+                <div class="card">
+                  <div class="card-content">
+                    <p class="title">
+                      “There are two hard things in computer science: cache invalidation, naming things, and off-by-one errors.”
+                    </p>
+                    <p class="subtitle">
+                      Jeff Atwood
+                    </p>
+                  </div>
+                  <footer class="card-footer">
+                    <p class="card-footer-item">
+                      <span>
+                        View on <a href="https://twitter.com/codinghorror/status/506010907021828096">Twitter</a>
+                      </span>
+                    </p>
+                    <p class="card-footer-item">
+                      <span>
+                        Share on <a href="#">Facebook</a>
+                      </span>
+                    </p>
+                  </footer>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
-        <div class="field">
-          <p class="control">
-            <label class="checkbox">
-              <input type="checkbox">
-              Checkbox
-            </label>
-          </p>
+
+        <div class="columns">
+          <div class="column is-3">
+            <h4 class="subtitle is-4">Dropdown</h4>
+          </div>
+          <div class="column is-9" style="height: 16rem;">
+            <div class="dropdown is-active">
+              <div class="dropdown-trigger">
+                <a class="button">
+                  <span>Dropdown button</span>
+                  <span class="icon is-small">
+                    <i class="fa fa-angle-down"></i>
+                  </span>
+                </a>
+              </div>
+              <div class="dropdown-menu">
+                <div class="dropdown-content">
+                  <a class="dropdown-item">
+                    Dropdown item
+                  </a>
+                  <a class="dropdown-item">
+                    Other dropdown item
+                  </a>
+                  <a class="dropdown-item is-active">
+                    Active dropdown item
+                  </a>
+                  <a class="dropdown-item">
+                    Other item
+                  </a>
+                  <hr class="dropdown-divider">
+                  <a class="dropdown-item">
+                    With a divider
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
-        <div class="field">
-          <p class="control">
-            <label class="radio">
-              <input type="radio" name="question">
-              Radio
-            </label>
-            <label class="radio">
-              <input type="radio" name="question">
-              Buttons
-            </label>
-          </p>
+
+        <div class="columns">
+          <div class="column is-3">
+            <h4 class="subtitle is-4">Message</h4>
+          </div>
+          <div class="column is-9">
+            <article class="message is-primary">
+              <div class="message-header">
+                <p>Primary</p>
+                <button class="delete"></button>
+              </div>
+              <div class="message-body">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
+              </div>
+            </article>
+          </div>
         </div>
-        <div class="field">
-          <p class="control">
-            <a class="button is-primary">Button</a>
-          </p>
+
+        <div class="columns">
+          <div class="column is-3">
+            <h4 class="subtitle is-4">Pagination</h4>
+          </div>
+          <div class="column is-9">
+            <nav class="pagination">
+              <a class="pagination-previous">Previous</a>
+              <a class="pagination-next">Next page</a>
+              <ul class="pagination-list">
+                <li>
+                  <a class="pagination-link">1</a>
+                </li>
+                <li>
+                  <span class="pagination-ellipsis">&hellip;</span>
+                </li>
+                <li>
+                  <a class="pagination-link">45</a>
+                </li>
+                <li>
+                  <a class="pagination-link is-current">46</a>
+                </li>
+                <li>
+                  <a class="pagination-link">47</a>
+                </li>
+                <li>
+                  <span class="pagination-ellipsis">&hellip;</span>
+                </li>
+                <li>
+                  <a class="pagination-link">86</a>
+                </li>
+              </ul>
+            </nav>
+          </div>
         </div>
-        <div class="tabs is-boxed">
-          <ul>
-            <li class="is-active">
-              <a>
-                <span class="icon is-small"><i class="fa fa-inbox"></i></span>
-                <span>Inbox</span>
+
+        <div class="columns">
+          <div class="column is-3">
+            <h4 class="subtitle is-4">Panel</h4>
+          </div>
+          <div class="column is-6">
+            <nav class="panel" style="max-width: 320px;">
+              <p class="panel-heading">
+                Repositories
+              </p>
+              <div class="panel-block">
+                <p class="control has-icons-left">
+                  <input class="input is-small" type="text" placeholder="Search">
+                  <span class="icon is-small is-left">
+                    <i class="fa fa-search"></i>
+                  </span>
+                </p>
+              </div>
+              <p class="panel-tabs">
+                <a class="is-active">All</a>
+                <a>Public</a>
+                <a>Private</a>
+                <a>Sources</a>
+                <a>Forks</a>
+              </p>
+              <a class="panel-block is-active">
+                <span class="panel-icon">
+                  <i class="fa fa-book"></i>
+                </span>
+                bulma
+              </a>
+              <a class="panel-block">
+                <span class="panel-icon">
+                  <i class="fa fa-book"></i>
+                </span>
+                marksheet
+              </a>
+              <a class="panel-block">
+                <span class="panel-icon">
+                  <i class="fa fa-book"></i>
+                </span>
+                minireset.css
               </a>
-            </li>
-            <li>
-              <a>
-                <span class="icon is-small"><i class="fa fa-user"></i></span>
-                <span>Profile</span>
+              <a class="panel-block">
+                <span class="panel-icon">
+                  <i class="fa fa-book"></i>
+                </span>
+                jgthms.github.io
               </a>
-            </li>
-            <li>
-              <a>
-                <span class="icon is-small"><i class="fa fa-comments-o"></i></span>
-                <span>Comments</span>
+              <a class="panel-block">
+                <span class="panel-icon">
+                  <i class="fa fa-code-fork"></i>
+                </span>
+                daniellowtw/infBoard
               </a>
-            </li>
-            <li>
-              <a>
-                <span class="icon is-small"><i class="fa fa-cog"></i></span>
-                <span>Settings</span>
+              <a class="panel-block">
+                <span class="panel-icon">
+                  <i class="fa fa-code-fork"></i>
+                </span>
+                mojs
               </a>
-            </li>
-          </ul>
+              <label class="panel-block">
+                <input type="checkbox">
+                Remember me
+              </label>
+              <div class="panel-block">
+                <button class="button is-primary is-outlined is-fullwidth">
+                  Reset all filters
+                </button>
+              </div>
+            </nav>
+          </div>
         </div>
-        <p class="block">
-          <span class="tag is-dark">Tag<a class="delete is-small"></a></span>
-          <span class="tag is-info">Two<a class="delete is-small"></a></span>
-          <span class="tag is-danger">Three<a class="delete is-small"></a></span>
-        </p>
-        <div class="message is-warning">
-          <div class="message-header">
-            Hello world
+
+        <div class="columns">
+          <div class="column is-3">
+            <h4 class="subtitle is-4">Tabs</h4>
           </div>
-          <div class="message-body">
-            Message
+          <div class="column is-9">
+            <div class="tabs is-boxed">
+              <ul>
+                <li class="is-active">
+                  <a>
+                    <span class="icon is-small"><i class="fa fa-image"></i></span>
+                    <span>Pictures</span>
+                  </a>
+                </li>
+                <li>
+                  <a>
+                    <span class="icon is-small"><i class="fa fa-music"></i></span>
+                    <span>Music</span>
+                  </a>
+                </li>
+                <li>
+                  <a>
+                    <span class="icon is-small"><i class="fa fa-film"></i></span>
+                    <span>Videos</span>
+                  </a>
+                </li>
+                <li>
+                  <a>
+                    <span class="icon is-small"><i class="fa fa-file-text-o"></i></span>
+                    <span>Documents</span>
+                  </a>
+                </li>
+              </ul>
+            </div>
           </div>
         </div>
-        <div class="notification is-success">
-          <a class="delete"></a>
-          Success!
-        </div>
+
       </div>
     </div>
   </div>