diff options
Add Grid offset, more margin and padding utilities
1 files changed, 56 insertions, 59 deletions
| -rw-r--r-- | docs/components.html | 115 |
diff --git a/docs/components.html b/docs/components.html index c87bd8e..0993a14 100644 --- a/docs/components.html +++ b/docs/components.html @@ -251,8 +251,8 @@ <a href="#sidebar-close" id="sidebar-close" class="docs-nav-clear"></a> <div id="content" class="s-content"> - <div class="container"> - <h3 id="accordions" class="s-title"><a href="#accordions" class="anchor" aria-hidden="true">#</a>Accordions</h3> + <div id="accordions" class="container"> + <h3 class="s-title"><a href="#accordions" class="anchor" aria-hidden="true">#</a>Accordions</h3> <div class="docs-note"> <p>Accordions are used to toggle sections of content.</p> </div> @@ -402,8 +402,8 @@ </div> - <div class="container"> - <h3 id="autocomplete" class="s-title"><a href="#autocomplete" class="anchor" aria-hidden="true">#</a>Autocomplete</h3> + <div id="autocomplete" class="container"> + <h3 class="s-title"><a href="#autocomplete" class="anchor" aria-hidden="true">#</a>Autocomplete</h3> <div class="docs-note"> <p>Autocomplete form component provides suggestions while you type. It is often used for tags and contacts input. </p> </div> @@ -529,8 +529,8 @@ </div> - <div class="container"> - <h3 id="avatars" class="s-title"><a href="#avatars" class="anchor" aria-hidden="true">#</a>Avatars</h3> + <div id="avatars" class="container"> + <h3 class="s-title"><a href="#avatars" class="anchor" aria-hidden="true">#</a>Avatars</h3> <div class="docs-note"> <p>Avatars are user profile pictures. </p> </div> @@ -610,8 +610,8 @@ </div> - <div class="container"> - <h3 id="badges" class="s-title"><a href="#badges" class="anchor" aria-hidden="true">#</a>Badges</h3> + <div id="badges" class="container"> + <h3 class="s-title"><a href="#badges" class="anchor" aria-hidden="true">#</a>Badges</h3> <div class="docs-note"> <p>Badges are often used as unread number indicators.</p> </div> @@ -686,8 +686,8 @@ </div> - <div class="container"> - <h3 id="bars" class="s-title"><a href="#bars" class="anchor" aria-hidden="true">#</a>Bars</h3> + <div id="bars" class="container"> + <h3 class="s-title"><a href="#bars" class="anchor" aria-hidden="true">#</a>Bars</h3> <div class="docs-note"> <p>Bars represent the progress of a task or the value within the known range. Bars are custom components for displaying HTML5 <code>progress</code>, <code>meter</code> and <code>input range</code> elements.</p> </div> @@ -781,8 +781,8 @@ </div> - <div class="container"> - <h3 id="breadcrumbs" class="s-title"><a href="#breadcrumbs" class="anchor" aria-hidden="true">#</a>Breadcrumbs</h3> + <div id="breadcrumbs" class="container"> + <h3 class="s-title"><a href="#breadcrumbs" class="anchor" aria-hidden="true">#</a>Breadcrumbs</h3> <div class="docs-note"> <p>Breadcrumbs are used as navigational hierarchies to indicate current location.</p> </div> @@ -861,8 +861,8 @@ </div> - <div class="container"> - <h3 id="cards" class="s-title"><a href="#cards" class="anchor" aria-hidden="true">#</a>Cards</h3> + <div id="cards" class="container"> + <h3 class="s-title"><a href="#cards" class="anchor" aria-hidden="true">#</a>Cards</h3> <div class="docs-note"> <p>Cards are flexible content containers.</p> </div> @@ -991,8 +991,8 @@ </div> - <div class="container"> - <h3 id="chips" class="s-title"><a href="#chips" class="anchor" aria-hidden="true">#</a>Chips</h3> + <div id="chips" class="container"> + <h3 class="s-title"><a href="#chips" class="anchor" aria-hidden="true">#</a>Chips</h3> <div class="docs-note"> <p>Chips are complex entities in small blocks. </p> </div> @@ -1049,8 +1049,8 @@ </div> - <div class="container"> - <h3 id="empty" class="s-title"><a href="#empty" class="anchor" aria-hidden="true">#</a>Empty states / blank slates</h3> + <div id="empty" class="container"> + <h3 class="s-title"><a href="#empty" class="anchor" aria-hidden="true">#</a>Empty states / blank slates</h3> <div class="docs-note"> <p>Empty states/blank slates are commonly used as placeholders for first time use, empty data and error screens.</p> </div> @@ -1116,8 +1116,8 @@ </div> - <div class="container"> - <h3 id="menus" class="s-title"><a href="#menus" class="anchor" aria-hidden="true">#</a>Menus</h3> + <div id="menus" class="container"> + <h3 class="s-title"><a href="#menus" class="anchor" aria-hidden="true">#</a>Menus</h3> <div class="docs-note"> <p>Menus are vertical list of links or buttons for actions and navigation.</p> </div> @@ -1243,8 +1243,8 @@ </div> </div> <div class="column col-xs-12"> - <div class="dropdown dropdown-right"> - <a class="btn btn-primary dropdown-toggle" tabindex="0">dropdown button <i class="icon icon-caret"></i></a> + <div class="dropdown"> + <a class="btn btn-link dropdown-toggle" tabindex="0">dropdown button <i class="icon icon-caret"></i></a> <ul class="menu"> <li class="menu-item"> <a href="#dropdowns"> @@ -1264,34 +1264,31 @@ </ul> </div> </div> - <div class="column col-xs-12"> - <div class="dropdown"> - <a class="btn btn-link dropdown-toggle" tabindex="0">dropdown button <i class="icon icon-caret"></i></a> - <ul class="menu"> + </div> + <div class="docs-note"> + <p>Dropdown menus component is built entirely in CSS. It is triggered by <code>:focus</code> event.</p> + <p>Add a container element with the <code>dropdown</code> class. And add a focusable element with the <code>dropdown-toggle</code> class for the button and a <code>menu</code> component right next to it. You also need to add <code>tabindex</code> to make the buttons focusable.</p> + <p>If the dropdown is close to the right edge of the browser, you can add the <code>dropdown-right</code> class to the container to prevent it appearing off screen.</p> + </div> + <div class="columns"> + <div class="column col-xs-12 text-right"> + <div class="dropdown dropdown-right"> + <a class="btn btn-primary dropdown-toggle" tabindex="0">dropdown button <i class="icon icon-caret"></i></a> + <ul class="menu text-left"> <li class="menu-item"> - <a href="#dropdowns"> - Slack - </a> + <a href="#dropdowns">Slack</a> </li> <li class="menu-item"> - <a href="#dropdowns"> - Hipchat - </a> + <a href="#dropdowns">Hipchat</a> </li> <li class="menu-item"> - <a href="#dropdowns"> - Skype - </a> + <a href="#dropdowns">Skype</a> </li> </ul> </div> </div> </div> <div class="docs-note"> - <p>Dropdown menus component is built entirely in CSS. It is triggered by <code>:focus</code> event.</p> - <p>Add a container element with the <code>dropdown</code> class. And add a focusable element with the <code>dropdown-toggle</code> class for the button and a <code>menu</code> component right next to it. You also need to add <code>tabindex</code> to make the buttons focusable. If the dropdown is close to the right edge of the browser, you can add the <code>dropdown-right</code> class to the container to prevent it appearing off screen.</p> - </div> - <div class="docs-note"> <p>Also, you can implement your JS to interact with the dropdown menus by adding the <code>active</code> class to the <code>dropdown</code> container.</p> </div> @@ -1327,8 +1324,8 @@ </div> - <div class="container"> - <h3 id="modals" class="s-title"><a href="#modals" class="anchor" aria-hidden="true">#</a>Modals</h3> + <div id="modals" class="container"> + <h3 class="s-title"><a href="#modals" class="anchor" aria-hidden="true">#</a>Modals</h3> <div class="docs-note"> <p>Modals are flexible dialog prompts.</p> </div> @@ -1463,8 +1460,8 @@ </div> - <div class="container"> - <h3 id="pagination" class="s-title"><a href="#pagination" class="anchor" aria-hidden="true">#</a>Pagination</h3> + <div id="pagination" class="container"> + <h3 class="s-title"><a href="#pagination" class="anchor" aria-hidden="true">#</a>Pagination</h3> <div class="columns"> <div class="column col-xs-12"> <ul class="pagination"> @@ -1594,8 +1591,8 @@ </div> - <div class="container"> - <h3 id="panels" class="s-title"><a href="#panels" class="anchor" aria-hidden="true">#</a>Panels</h3> + <div id="panels" class="container"> + <h3 class="s-title"><a href="#panels" class="anchor" aria-hidden="true">#</a>Panels</h3> <div class="docs-note"> <p>Panels are flexible view container with auto-expand content section.</p> </div> @@ -1755,8 +1752,8 @@ </div> - <div class="container"> - <h3 id="navs" class="s-title"><a href="#navs" class="anchor" aria-hidden="true">#</a>Navs</h3> + <div id="navs" class="container"> + <h3 class="s-title"><a href="#navs" class="anchor" aria-hidden="true">#</a>Navs</h3> <div class="columns"> <div class="column col-6 col-xs-12"> <ul class="nav"> @@ -1826,8 +1823,8 @@ </div> - <div class="container"> - <h3 id="popovers" class="s-title"><a href="#popovers" class="anchor" aria-hidden="true">#</a>Popovers</h3> + <div id="popovers" class="container"> + <h3 class="s-title"><a href="#popovers" class="anchor" aria-hidden="true">#</a>Popovers</h3> <div class="docs-note"> <p>Popovers are small overlay content containers. Popovers component is built entirely in CSS.</p> </div> @@ -1943,8 +1940,8 @@ </div> - <div class="container"> - <h3 id="steps" class="s-title"><a href="#steps" class="anchor" aria-hidden="true">#</a>Steps</h3> + <div id="steps" class="container"> + <h3 class="s-title"><a href="#steps" class="anchor" aria-hidden="true">#</a>Steps</h3> <div class="docs-note"> <p>Steps are progress indicators of a sequence of task steps.</p> </div> @@ -2005,8 +2002,8 @@ </div> - <div class="container"> - <h3 id="tabs" class="s-title"><a href="#tabs" class="anchor" aria-hidden="true">#</a>Tabs</h3> + <div id="tabs" class="container"> + <h3 class="s-title"><a href="#tabs" class="anchor" aria-hidden="true">#</a>Tabs</h3> <div class="docs-note"> <p>Tabs enable quick switch between different views.</p> </div> @@ -2185,8 +2182,8 @@ </div> - <div class="container"> - <h3 id="tiles" class="s-title"><a href="#tiles" class="anchor" aria-hidden="true">#</a>Tiles</h3> + <div id="tiles" class="container"> + <h3 class="s-title"><a href="#tiles" class="anchor" aria-hidden="true">#</a>Tiles</h3> <div class="docs-note"> <p>Tiles are repeatable or embeddable information blocks.</p> </div> @@ -2293,8 +2290,8 @@ </div> - <div class="container"> - <h3 id="toasts" class="s-title"><a href="#toasts" class="anchor" aria-hidden="true">#</a>Toasts</h3> + <div id="toasts" class="container"> + <h3 class="s-title"><a href="#toasts" class="anchor" aria-hidden="true">#</a>Toasts</h3> <div class="docs-note"> <p>Toasts are used to show alert or information to users.</p> </div> @@ -2353,8 +2350,8 @@ </div> - <div class="container"> - <h3 id="tooltips" class="s-title"><a href="#tooltips" class="anchor" aria-hidden="true">#</a>Tooltips</h3> + <div id="tooltips" class="container"> + <h3 class="s-title"><a href="#tooltips" class="anchor" aria-hidden="true">#</a>Tooltips</h3> <div class="docs-note"> <p>Tooltips provide context information labels that appear on hover and focus.</p> </div> |