diff options
Merge pull request #29 from picturepan2/feature/more-chips
Feature/more chips
1 files changed, 48 insertions, 59 deletions
| -rw-r--r-- | index.html | 107 |
@@ -1033,26 +1033,6 @@ </div> </div> </div> - <!-- <div class="columns"> - <div class="column"> - <div class="chip"> - <div class="chip-list-icon"> - <img src="demo/img/avatar-1.png" class="avatar" /> - </div> - <div class="chip-list-content"> - Yan Zhu - </div> - <div class="chip-list-action"> - <button class="btn"> - <i class="icon icon-message"></i> - </button> - </div> - </div> - </div> - <div class="column"> - - </div> - </div> --> <section class="notes"> <p>Add a container element with the class <code>chip</code>. And add child text elements with <code>chip-name</code> or icons with <code>icon</code>.</p> @@ -1164,26 +1144,24 @@ <input class="form-input" type="text" placeholder="typing here" /> </div> <ul class="form-autocomplete-list"> - <li class="chip hand"> - <div class="chip-icon"> - <img src="demo/img/avatar-4.png" class="avatar" /> - </div> - <div class="chip-content"> - Steve Rogers - </div> - <div class="chip-action"> - + <li class="form-autocomplete-item"> + <div class="chip hand"> + <div class="chip-icon"> + <img src="demo/img/avatar-4.png" class="avatar" /> + </div> + <div class="chip-content"> + Steve Rogers + </div> </div> </li> - <li class="chip hand"> - <div class="chip-icon"> - <img src="demo/img/avatar-2.png" class="avatar" /> - </div> - <div class="chip-content"> - Yan Zhu - </div> - <div class="chip-action"> - + <li class="form-autocomplete-item"> + <div class="chip hand"> + <div class="chip-icon"> + <img src="demo/img/avatar-2.png" class="avatar" /> + </div> + <div class="chip-content"> + Yan Zhu + </div> </div> </li> </ul> @@ -1217,26 +1195,24 @@ <span class="com"><!-- autocomplete suggestion list --></span> <<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"form-autocomplete-list"</span>> <span class="com"><!-- autocomplete list chips --></span> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"chip hand"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"chip-icon"</span>> - <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-4.png"</span> <span class="atn">class</span>=<span class="atv">"avatar"</span> /> - <<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"chip-content"</span>> - Steve Rogers - <<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"chip-action"</span>> - <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn"</span>><<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"icon icon-markunread"</span>><<span class="tag">/span</span>><<span class="tag">/button</span>> + <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"form-autocomplete-item"</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"chip hand"</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"chip-icon"</span>> + <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-4.png"</span> <span class="atn">class</span>=<span class="atv">"avatar"</span> /> + <<span class="tag">/div</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"chip-content"</span>> + Steve Rogers + <<span class="tag">/div</span>> <<span class="tag">/div</span>> <<span class="tag">/li</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"chip hand"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"chip-icon"</span>> - <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-3.png"</span> <span class="atn">class</span>=<span class="atv">"avatar"</span> /> - <<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"chip-content"</span>> - Yan Zhu - <<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"chip-action"</span>> - <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn"</span>><<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"icon icon-markunread"</span>><<span class="tag">/span</span>><<span class="tag">/button</span>> + <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"form-autocomplete-item"</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"chip hand"</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"chip-icon"</span>> + <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-3.png"</span> <span class="atn">class</span>=<span class="atv">"avatar"</span> /> + <<span class="tag">/div</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"chip-content"</span>> + Yan Zhu + <<span class="tag">/div</span>> <<span class="tag">/div</span>> <<span class="tag">/li</span>> <<span class="tag">/ul</span>> @@ -1403,6 +1379,19 @@ <div class="column"> <ul class="menu"> <li class="menu-item"> + <div class="chip"> + <div class="chip-icon"> + <img src="demo/img/avatar-4.png" class="avatar" /> + </div> + <div class="chip-content"> + Steve Rogers + </div> + <div class="chip-action"> + + </div> + </div> + </li> + <li class="menu-item"> <a href="#menus" class="active"> My profile </a> @@ -1962,8 +1951,8 @@ <div class="card-body"> Organize the world’s information and make it universally accessible and useful. </div> - <div class="card-footer"> - <a href="#" class="btn btn-primary">Ad</a> + <div class="card-image"> + <img class="img-responsive" src="demo/img/osx-yosemite-2.jpg" /> </div> </div> </div> @@ -2156,7 +2145,7 @@ <footer class="bg-grey"> <section id="copyright" class="grid-footer grid-960"> <p> - <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub Repo</a> | <a href="#">Back to top</a> | version: 0.1.14 + <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub Repo</a> | <a href="#">Back to top</a> | version: 0.1.15 </p> <p>Designed and built with love by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p> </section> |