diff options
CHG: Cleanup codes and add more focus style
1 files changed, 41 insertions, 58 deletions
| -rw-r--r-- | index.html | 99 |
@@ -666,29 +666,6 @@ </div> </div> <div class="form-group"> - <div class="col-3"> - <label class="form-label">Tags</label> - </div> - <div class="col-9"> - <div class="chip-sm"> - <span class="chip-name">Crime</span> - <button class="btn btn-clear"></button> - </div> - <div class="chip-sm"> - <span class="chip-name">Drama</span> - <button class="btn btn-clear"></button> - </div> - <div class="chip-sm"> - <span class="chip-name">Biography</span> - <button class="btn btn-clear"></button> - </div> - <div class="chip-sm"> - <span class="chip-name">Mystery</span> - <button class="btn btn-clear"></button> - </div> - </div> - </div> - <div class="form-group"> <div class="col-3"></div> <div class="col-9"> <label class="form-switch"> @@ -1560,39 +1537,44 @@ <div class="columns"> <div class="column col-xs-12"> <div class="chip-sm"> - <span class="chip-name">Crime</span> + Crime <button class="btn btn-clear"></button> </div> <div class="chip-sm"> - <span class="chip-name">Drama</span> + Drama <button class="btn btn-clear"></button> </div> <div class="chip-sm"> - <span class="chip-name">Biography</span> + Biography <button class="btn btn-clear"></button> </div> <div class="chip-sm"> - <span class="chip-name">Mystery</span> + Mystery <button class="btn btn-clear"></button> </div> </div> <div class="column col-xs-12"> <div class="chip-sm"> <figure class="avatar" data-initial="TS" style="background-color: #5764c6;"></figure> - <span class="chip-name">Tony Stark</span> + Tony Stark <button class="btn btn-clear"></button> </div> <div class="chip-sm"> <img src="demo/img/avatar-1.png" class="avatar" /> - <span class="chip-name">Thor Odinson</span> + Thor Odinson <button class="btn btn-clear"></button> </div> <div class="chip-sm"> <img src="demo/img/avatar-4.png" class="avatar" /> - <span class="chip-name">Steve Rogers</span> + Steve Rogers </div> </div> </div> + + <section class="notes"> + <p>Add a container element with the class <code>chip-sm</code>. And add child text element, buttons or avatars with the class <code>avatar</code>.</p> + </section> + <div class="columns hide"> <div class="column col-4 col-xs-12"> <div class="chip"> @@ -1601,29 +1583,25 @@ </div> <div class="chip-content"> <div class="chip-title">Tony Stark</div> - <div class="chip-meta">Iron Man</div> + <div class="chip-meta">Iron man</div> </div> <div class="chip-action"> - <button class="btn btn-clear"></button> + <button class="btn btn-primary"><i class="icon icon-playlist_add"></i></button> </div> </div> </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> - </section> - <!-- chips example --> <pre class="code lang-html"> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"chip-sm"</span>> - <<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"chip-name"</span>>Crime<<span class="tag">/span</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">div</span> <span class="atn">class</span>=<span class="atv">"chip-sm"</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"</span> /> - <<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"chip-name"</span>>Yan Zhu<<span class="tag">/span</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>> </pre> @@ -1642,25 +1620,25 @@ <div class="form-autocomplete-input"> <div class="chip-sm"> <figure class="avatar" data-initial="TS" style="background-color: #A2A8E1;"></figure> - <span class="chip-name">Tony Stark</span> + Tony Stark <button class="btn btn-clear"></button> </div> <div class="chip-sm"> <img src="demo/img/avatar-1.png" class="avatar" /> - <span class="chip-name">Thor Odinson</span> + Thor Odinson <button class="btn btn-clear"></button> </div> <div class="chip-sm"> <img src="demo/img/avatar-4.png" class="avatar" /> - <span class="chip-name">Steve Rogers</span> + Steve Rogers <button class="btn btn-clear"></button> </div> <div class="chip-sm"> - <span class="chip-name">Bruce Banner</span> + Bruce Banner <button class="btn btn-clear"></button> </div> <div class="chip-sm selected"> - <span class="chip-name">Natasha Romanoff</span> + Natasha Romanoff <button class="btn btn-clear"></button> </div> <input class="form-input" type="text" placeholder="" /> @@ -1671,23 +1649,23 @@ <div class="form-autocomplete"> <div class="form-autocomplete-input"> <div class="chip-sm"> - <span class="chip-name">Tony Stark</span> + Tony Stark <button class="btn btn-clear"></button> </div> <div class="chip-sm"> - <span class="chip-name">Thor Odinson</span> + Thor Odinson <button class="btn btn-clear"></button> </div> <div class="chip-sm"> - <span class="chip-name">Steve Rogers</span> + Steve Rogers <button class="btn btn-clear"></button> </div> <div class="chip-sm"> - <span class="chip-name">Bruce Banner</span> + Bruce Banner <button class="btn btn-clear"></button> </div> <div class="chip-sm selected"> - <span class="chip-name">Natasha Romanoff</span> + Natasha Romanoff <button class="btn btn-clear"></button> </div> <input class="form-input" type="text" placeholder="" /> @@ -1700,12 +1678,12 @@ <div class="form-autocomplete"> <div class="form-autocomplete-input"> <div class="chip-sm"> - <span class="chip-name">Bruce Banner</span> + Bruce Banner <button class="btn btn-clear"></button> </div> <div class="chip-sm"> <img src="demo/img/avatar-1.png" class="avatar" /> - <span class="chip-name">Thor Odinson</span> + Thor Odinson <button class="btn btn-clear"></button> </div> <input class="form-input" type="text" placeholder="typing here" value="S" /> @@ -1751,12 +1729,12 @@ <span class="com"><!-- autocomplete chips --></span> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"chip-sm"</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"</span> /> - <<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"chip-name"</span>>Yan Zhu<<span class="tag">/span</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>> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"chip-sm selected"</span>> <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-2.png"</span> <span class="atn">class</span>=<span class="atv">"avatar"</span> /> - <<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"chip-name"</span>>Yan Zhu<<span class="tag">/span</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>> <span class="com"><!-- autocomplete real input box --></span> @@ -1875,7 +1853,6 @@ <div class="columns"> <div class="column col-sm-12 col-6"> <div class="toast"> - <a class="btn btn-clear float-right"></a> <i class="icon icon-error_outline"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div> </div> @@ -1939,9 +1916,6 @@ <div class="chip-content"> Steve Rogers </div> - <div class="chip-action"> - - </div> </div> </li> <li class="menu-item"> @@ -2347,6 +2321,7 @@ </ul> </div> </div> + <section class="notes"> <p>If you need <code>badges</code> on tabs, you can add badge class to the element within <code>tab-item</code>. </p> </section> @@ -2461,7 +2436,7 @@ </section> <div class="columns"> <div class="column"> - <div class="modal active"> + <div class="modal-temp"> <div class="modal-overlay"></div> <div class="modal-container" role="document"> <div class="modal-header"> @@ -2696,7 +2671,15 @@ An immersive, three-day experience focused on exploring the next generation of technology, mobile and beyond. </div> <div class="card-footer"> - <a href="#" class="btn btn-primary">Add to calendar</a> + <div class="chip"> + <div class="chip-content"> + <div class="chip-title">Google</div> + <div class="chip-meta">Software and hardware</div> + </div> + <div class="chip-action"> + <button class="btn btn-primary"><i class="icon icon-playlist_add"></i></button> + </div> + </div> </div> </div> </div> |