diff options
Merge pull request #151 from picturepan2/feature/components v0.2.5
Feature/components
1 files changed, 80 insertions, 53 deletions
| -rw-r--r-- | docs/components.html | 133 |
diff --git a/docs/components.html b/docs/components.html index 46fc50a..4f06c68 100644 --- a/docs/components.html +++ b/docs/components.html @@ -12,7 +12,7 @@ <link rel="stylesheet" href="font/style.css" /> </head> <body> - <section class="section section-header bg-grey"> + <section class="section section-header bg-gray"> <section class="grid-header container grid-960"> <nav class="navbar"> <section class="navbar-section"> @@ -104,29 +104,29 @@ <div class="column col-9 col-xs-12"> <div class="form-group"> <div class="form-autocomplete"> - <div class="form-autocomplete-input"> - <div class="chip"> + <div class="form-autocomplete-input form-input"> + <label class="chip"> Bruce Banner <button class="btn btn-clear"></button> - </div> - <div class="chip"> + </label> + <label class="chip"> <img src="img/avatar-1.png" class="avatar avatar-sm" /> Thor Odinson <button class="btn btn-clear"></button> - </div> - <div class="chip"> + </label> + <label class="chip"> <img src="img/avatar-4.png" class="avatar avatar-sm" /> Steve Rogers <button class="btn btn-clear"></button> - </div> - <div class="chip"> + </label> + <label class="chip"> Tony Stark <button class="btn btn-clear"></button> - </div> - <div class="chip active"> + </label> + <label class="chip active"> Natasha Romanoff <button class="btn btn-clear"></button> - </div> + </label> <input class="form-input" type="text" placeholder="" /> </div> </div> @@ -135,17 +135,17 @@ <div class="column col-9 col-xs-12"> <div class="form-group"> <div class="form-autocomplete"> - <div class="form-autocomplete-input is-focused"> - <div class="chip"> + <div class="form-autocomplete-input form-input is-focused"> + <label class="chip"> Bruce Banner <button class="btn btn-clear"></button> - </div> - <div class="chip"> + </label> + <label class="chip"> <img src="img/avatar-1.png" class="avatar avatar-sm" alt="Thor Odinson"/> Thor Odinson <button class="btn btn-clear"></button> - </div> - <input class="form-input" type="text" placeholder="typing here" value="S" /> + </label> + <input class="form-input" type="text" placeholder="" value="S" /> </div> <ul class="menu"> <li class="menu-item"> @@ -183,16 +183,19 @@ <!-- autocomplete example --> <pre class="code" data-lang="HTML"><code><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-autocomplete"</span>> <span class="com"><!-- autocomplete input container --></span> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-autocomplete-input"</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-autocomplete-input form-input"</span>> + <span class="com"><!-- autocomplete chips --></span> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"chip"</span>> + <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"chip"</span>> <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-1.png"</span> <span class="atn">class</span>=<span class="atv">"avatar avatar-sm"</span> <span class="atn">alt</span>=<span class="atv">"Thor Odinson"</span> /> Thor Odinson <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-clear"</span>><<span class="tag">/button</span>> - <<span class="tag">/div</span>> + <<span class="tag">/label</span>> + <span class="com"><!-- autocomplete real input box --></span> <<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">"form-input"</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">placeholder</span>=<span class="atv">"typing here"</span> /> <<span class="tag">/div</span>> + <span class="com"><!-- autocomplete suggestion list --></span> <<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"menu"</span>> <span class="com"><!-- menu list chips --></span> @@ -378,19 +381,21 @@ <p><strong>Bars</strong> represent the progress of a task or the value within the known range. Bars are custom components for displaying HTML5 <code>progress</code> and <code>meter</code> elements.</p> </section> <div class="columns"> - <div class="column col-6 col-xs-12"> + <div class="column col-8 col-xs-12"> <div class="bar bar-sm"> <div class="bar-item tooltip" data-tooltip="25%" role="progressbar" style="width:25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div> </div> - <div class="column col-6 col-xs-12"> + </div> + <div class="columns"> + <div class="column col-8 col-xs-12"> <div class="bar"> <div class="bar-item tooltip" data-tooltip="50%" style="width:50%;"></div> </div> </div> </div> <div class="columns"> - <div class="column col-12 col-xs-12"> + <div class="column col-8 col-xs-12"> <div class="bar"> <div class="bar-item tooltip" data-tooltip="25%" style="width:25%;">25%</div> <div class="bar-item tooltip" data-tooltip="15%" style="width:15%;background:#818bd5;">15%</div> @@ -554,36 +559,36 @@ </section> <div class="columns"> <div class="column col-12"> - <div class="chip"> + <label class="chip"> Crime <button class="btn btn-clear"></button> - </div> - <div class="chip"> + </label> + <label class="chip"> Drama <button class="btn btn-clear"></button> - </div> - <div class="chip"> + </label> + <label class="chip"> Biography <button class="btn btn-clear"></button> - </div> - <div class="chip"> + </label> + <label class="chip"> Mystery <button class="btn btn-clear"></button> - </div> + </label> </div> <div class="column col-12"> - <div class="chip"> + <label class="chip"> <figure class="avatar avatar-sm" data-initial="TS" style="background-color: #5764c6;"></figure> Tony Stark - </div> - <div class="chip"> + </label> + <label class="chip"> <img src="img/avatar-1.png" class="avatar avatar-sm" /> Thor Odinson - </div> - <div class="chip"> + </label> + <label class="chip"> <img src="img/avatar-4.png" class="avatar avatar-sm" /> Steve Rogers - </div> + </label> </div> </div> <section class="notes"> @@ -591,16 +596,16 @@ </section> <!-- chips example --> -<pre class="code" data-lang="HTML"><code><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"chip"</span>> +<pre class="code" data-lang="HTML"><code><<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"chip"</span>> Crime <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-clear"</span>><<span class="tag">/button</span>> -<<span class="tag">/div</span>> +<<span class="tag">/label</span>> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"chip"</span>> +<<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"chip"</span>> <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-1.png"</span> <span class="atn">class</span>=<span class="atv">"avatar avatar-sm"</span> /> Yan Zhu <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-clear"</span>><<span class="tag">/button</span>> -<<span class="tag">/div</span>></code> +<<span class="tag">/label</span>></code> </pre> </section> @@ -729,7 +734,7 @@ <section id="menus" class="container"> <header class="text-center"><h3>Menus</h3></header> <section class="notes"> - <p>The <strong>menu</strong> is a vertical list of links or buttons for actions and navigation.</p> + <p><strong>Menus</strong> are vertical list of links or buttons for actions and navigation.</p> </section> <div class="columns"> <div class="column col-xs-12"> @@ -746,6 +751,9 @@ </li> <li class="divider"></li> <li class="menu-item"> + <div class="menu-badge"> + <label class="label label-primary">2</label> + </div> <a href="#menus" class="active"> My profile </a> @@ -766,7 +774,7 @@ <ul class="menu"> <li class="menu-header"> <span class="menu-header-text"> - Go to + LINKS </span> </li> <li class="menu-item"> @@ -796,7 +804,7 @@ <span class="com"><!-- menu header --></span> <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"menu-header"</span>> <<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"menu-header-text"</span>> - Go to + LINKS <<span class="tag">/span</span>> <<span class="tag">/li</span>> <span class="com"><!-- menu item --></span> @@ -818,6 +826,9 @@ <span class="com"><!-- menu divider --></span> <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"divider"</span>><<span class="tag">/li</span>> <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"menu-item"</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"menu-badge"</span>> + <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"label label-primary"</span>>2<<span class="tag">/label</span>> + <<span class="tag">/div</span>> <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>> <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-link"</span>><<span class="tag">/i</span>> Settings <<span class="tag">/a</span>> @@ -1473,10 +1484,11 @@ </div> <div class="tile-content"> <p class="tile-title">The Avengers</p> - <p>Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p> + <p class="tile-meta">Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p> </div> <div class="tile-action"> <button class="btn btn-primary">Join</button> + <button class="btn">Contact</button> </div> </div> </div> @@ -1489,7 +1501,7 @@ </div> <div class="tile-content"> <p class="tile-title">The S.H.I.E.L.D.</p> - <p>The Strategic Homeland Intervention, Enforcement, and Logistics Division...</p> + <p class="tile-meta">The Strategic Homeland Intervention, Enforcement, and Logistics Division...</p> <p> <button class="btn btn-primary btn-sm">Join</button> <button class="btn btn-sm">Contact</button> @@ -1525,7 +1537,7 @@ <p>Add the class <code>tile-centered</code> to the container <code>tile</code>. The <code>tile-icon</code>, <code>tile-content</code> and <code>tile-action</code> will be vertically centered.</p> </section> <div class="columns"> - <div class="column col-6 col-sm-12"> + <div class="column col-6 col-md-9 col-xs-12"> <div class="tile tile-centered"> <div class="tile-icon"> <div class="example-tile-icon"> @@ -1533,8 +1545,8 @@ </div> </div> <div class="tile-content"> - <div class="tile-title text-ellipsis">spectre-docs.pdf</div> - <div class="tile-meta text-ellipsis">14MB · Public · 1 Jan, 2017</div> + <div class="tile-title">spectre-docs.pdf</div> + <div class="tile-meta">14MB · Public · 1 Jan, 2017</div> </div> <div class="tile-action"> <button class="btn btn-link btn-action"><i class="icon icon-more_vert"></i></button> @@ -1551,8 +1563,8 @@ <<span class="tag">/div</span>> <<span class="tag">/div</span>> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"tile-content"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"tile-title text-ellipsis"</span>>spectre-docs.pdf<<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"tile-meta text-ellipsis"</span>>14MB · Public · 1 Jan, 2017<<span class="tag">/div</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"tile-title"</span>>spectre-docs.pdf<<span class="tag">/div</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"tile-meta"</span>>14MB · Public · 1 Jan, 2017<<span class="tag">/div</span>> <<span class="tag">/div</span>> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"tile-action"</span>> <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-link"</span>> @@ -1671,7 +1683,22 @@ </section> </section> - <footer class="bg-grey"> + <section class="container grid-960"> + <section class="grid-ads"> + <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> + <!-- Spectre.css --> + <ins class="adsbygoogle" + style="display:block" + data-ad-client="ca-pub-2225124559530218" + data-ad-slot="5007685125" + data-ad-format="auto"></ins> + <script> + (adsbygoogle = window.adsbygoogle || []).push({}); + </script> + </section> + </section> + + <footer class="bg-gray"> <section id="copyright" class="grid-footer container grid-960"> <p> <a href="index.html#introduction" target="_blank">Documents</a> | <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub Repo</a> | Version <span class="version"></span> |