Skip to content

Commit

Permalink
Merge pull request #653 from pat270/claycss-docs
Browse files Browse the repository at this point in the history 
ClayCSS Update Several pages
  • Loading branch information
@matuzalemsteles
matuzalemsteles authored Feb 27, 2018
2 parents 274d1e8 + fd3a3e9 commit bd6fd77
Show file tree
Hide file tree
Showing 12 changed files with 806 additions and 198 deletions.
46 changes: 25 additions & 21 deletions packages/clay/src/content/dropdowns.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,11 +49,15 @@ <h3>Dropdown Action</h3>
<div class="col-md-12">
<h3>Dropdown Menu</h3>

<div class="alert alert-warning">
Disabled <code>a.dropdown-item</code> should have <code>tabindex="-1"</code> and <code>event.preventDefault();</code> on click or use <code>```<span class="dropdown-item">Disabled</span>```</code> for disabled dropdown-item.</code>
</div>

<div class="clay-site-dropdown-menu-container">
<ul aria-labelledby="theDropdownToggleId" class="dropdown-menu">
<li class="dropdown-subheader">Order by</li>
<li><a class="active dropdown-item" href="#1">Author</a></li>
<li><a class="disabled dropdown-item" href="#1">Title Entry</a></li>
<li><a class="disabled dropdown-item" href="#1" tabindex="-1">Title Entry</a></li>
<li class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#1">Date</a></li>
<li><a class="dropdown-item" href="#1">Description</a></li>
Expand Down Expand Up @@ -204,7 +208,7 @@ <h3>Dropdown Menu with Form Elements</h3>
</li>
<li class="dropdown-subheader">Order by</li>
<li><a class="active dropdown-item" href="#1">Author</a></li>
<li><a class="disabled dropdown-item" href="#1">Title Entry</a></li>
<li><a class="disabled dropdown-item" href="#1" tabindex="-1">Title Entry</a></li>
</ul>
</div>

Expand Down Expand Up @@ -278,7 +282,7 @@ <h6>dropdown-menu-indicator-end</h6>
</a>
</li>
<li>
<a class="disabled dropdown-item" href="#1">
<a class="disabled dropdown-item" href="#1" tabindex="-1">
Step 02
<div class="dropdown-item-indicator">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-check">
Expand Down Expand Up @@ -338,7 +342,7 @@ <h3>Scrolling Content</h3>
<li><a class="dropdown-item" href="#1">Permissions</a></li>
</ul>
</li>
<li><a class="disabled dropdown-item" href="#1">Disabled</a></li>
<li><a class="disabled dropdown-item" href="#1" tabindex="-1">Disabled</a></li>
<li class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#1">Scope</a></li>
</ul>
Expand All @@ -358,7 +362,7 @@ <h3>Scrolling Content</h3>
<ul class="inline-scroller">
<li><a class="dropdown-item" href="#1">D Structure</a></li>
<li><a class="dropdown-item" href="#1">F Structure</a></li>
<li><a class="disabled dropdown-item" href="#1">H Structure</a></li>
<li><a class="disabled dropdown-item" href="#1" tabindex="-1">H Structure</a></li>
<li><a class="dropdown-item" href="#1">J Structure</a></li>
<li><a class="dropdown-item" href="#1">L Structure</a></li>
<li><a class="dropdown-item" href="#1">M Structure</a></li>
Expand Down Expand Up @@ -393,7 +397,7 @@ <h3>Dropdown wide / full</h3>
<ul class="col-sm-4 list-unstyled">
<li class="dropdown-subheader">By Resource</li>
<li><a class="dropdown-item" href="#1">Support Home</a></li>
<li><a class="disabled dropdown-item" href="#1">Disabled Link</a></li>
<li><a class="disabled dropdown-item" href="#1" tabindex="-1">Disabled Link</a></li>
<li><a class="dropdown-item" href="#1">Chat or Call</a></li>
<li class="dropdown-subheader">By Product</li>
<li><a class="active dropdown-item" href="#1">Developing for the Platform</a></li>
Expand Down Expand Up @@ -445,7 +449,7 @@ <h3>Dropdown Alignment</h3>
<ul aria-labelledby="dropdownAlignment1" class="dropdown-menu">
<li class="dropdown-header">Dropdown Header</li>
<li><a class="dropdown-item" href="#1">Action</a></li>
<li><a class="disabled dropdown-item" href="#1">Disabled</a></li>
<li><a class="disabled dropdown-item" href="#1" tabindex="-1">Disabled</a></li>
<li class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#1">Scope</a></li>
</ul>
Expand All @@ -459,7 +463,7 @@ <h3>Dropdown Alignment</h3>
<ul aria-labelledby="dropdownAlignment2" class="dropdown-menu dropdown-menu-right">
<li class="dropdown-header">Dropdown Header</li>
<li><a class="dropdown-item" href="#1">Action</a></li>
<li><a class="disabled dropdown-item" href="#1">Disabled</a></li>
<li><a class="disabled dropdown-item" href="#1" tabindex="-1">Disabled</a></li>
<li class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#1">Scope</a></li>
</ul>
Expand All @@ -473,7 +477,7 @@ <h3>Dropdown Alignment</h3>
<ul aria-labelledby="dropdownAlignment3" class="dropdown-menu dropdown-menu-top">
<li class="dropdown-header">Dropdown Header</li>
<li><a class="dropdown-item" href="#1">Action</a></li>
<li><a class="disabled dropdown-item" href="#1">Disabled</a></li>
<li><a class="disabled dropdown-item" href="#1" tabindex="-1">Disabled</a></li>
<li class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#1">Scope</a></li>
</ul>
Expand All @@ -487,7 +491,7 @@ <h3>Dropdown Alignment</h3>
<ul aria-labelledby="dropdownAlignment4" class="dropdown-menu dropdown-menu-top-right">
<li class="dropdown-header">Dropdown Header</li>
<li><a class="dropdown-item" href="#1">Action</a></li>
<li><a class="disabled dropdown-item" href="#1">Disabled</a></li>
<li><a class="disabled dropdown-item" href="#1" tabindex="-1">Disabled</a></li>
<li class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#1">Scope</a></li>
</ul>
Expand All @@ -509,7 +513,7 @@ <h3>Dropdown Alignment</h3>
<ul aria-labelledby="dropdownAlignment5" class="dropdown-menu dropdown-menu-right-side">
<li class="dropdown-header">Dropdown Header</li>
<li><a class="dropdown-item" href="#1">Action</a></li>
<li><a class="disabled dropdown-item" href="#1">Disabled</a></li>
<li><a class="disabled dropdown-item" href="#1" tabindex="-1">Disabled</a></li>
<li class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#1">Scope</a></li>
</ul>
Expand All @@ -524,7 +528,7 @@ <h3>Dropdown Alignment</h3>
<li class="dropdown-header">Dropdown Header</li>
<ul class="inline-scroller">
<li><a class="dropdown-item" href="#1">Action</a></li>
<li><a class="disabled dropdown-item" href="#1">Disabled</a></li>
<li><a class="disabled dropdown-item" href="#1" tabindex="-1">Disabled</a></li>
<li class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#1">Scope</a></li>
<li><a class="dropdown-item" href="#1">Scope</a></li>
Expand All @@ -546,7 +550,7 @@ <h3>Dropdown Alignment</h3>
<ul class="inline-scroller">
<li class="dropdown-header">Dropdown Header</li>
<li><a class="dropdown-item" href="#1">Action</a></li>
<li><a class="disabled dropdown-item" href="#1">Disabled</a></li>
<li><a class="disabled dropdown-item" href="#1" tabindex="-1">Disabled</a></li>
<li class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#1">Scope</a></li>
<li><a class="dropdown-item" href="#1">Scope</a></li>
Expand All @@ -569,7 +573,7 @@ <h3>Dropdown Alignment</h3>
<ul class="inline-scroller">
<li class="dropdown-header">Dropdown Header</li>
<li><a class="dropdown-item" href="#1">Action</a></li>
<li><a class="disabled dropdown-item" href="#1">Disabled</a></li>
<li><a class="disabled dropdown-item" href="#1" tabindex="-1">Disabled</a></li>
<li class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#1">Scope</a></li>
<li><a class="dropdown-item" href="#1">Scope</a></li>
Expand Down Expand Up @@ -600,7 +604,7 @@ <h3>Dropdown Alignment</h3>
<ul aria-labelledby="dropdownAlignment9" class="dropdown-menu dropdown-menu-center">
<li class="dropdown-header">dropdown-menu-center</li>
<li><a class="dropdown-item" href="#1">Action</a></li>
<li><a class="disabled dropdown-item" href="#1">Disabled</a></li>
<li><a class="disabled dropdown-item" href="#1" tabindex="-1">Disabled</a></li>
<li class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#1">Scope</a></li>
</ul>
Expand All @@ -614,7 +618,7 @@ <h3>Dropdown Alignment</h3>
<ul aria-labelledby="dropdownAlignment10" class="dropdown-menu dropdown-menu-top-center">
<li class="dropdown-header">dropdown-menu-top-center</li>
<li><a class="dropdown-item" href="#1">Action</a></li>
<li><a class="disabled dropdown-item" href="#1">Disabled</a></li>
<li><a class="disabled dropdown-item" href="#1" tabindex="-1">Disabled</a></li>
<li class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#1">Scope</a></li>
</ul>
Expand All @@ -629,7 +633,7 @@ <h3>Dropdown Alignment</h3>
<li class="dropdown-header">Dropdown Header</li>
<ul class="inline-scroller">
<li><a class="dropdown-item" href="#1">Action</a></li>
<li><a class="disabled dropdown-item" href="#1">Disabled</a></li>
<li><a class="disabled dropdown-item" href="#1" tabindex="-1">Disabled</a></li>
<li class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#1">Scope</a></li>
<li><a class="dropdown-item" href="#1">Scope</a></li>
Expand All @@ -649,7 +653,7 @@ <h3>Dropdown Alignment</h3>
<ul aria-labelledby="dropdownAlignment12" class="dropdown-menu dropdown-menu-right-side-middle">
<li class="dropdown-header">Dropdown Header</li>
<li><a class="dropdown-item" href="#1">Action</a></li>
<li><a class="disabled dropdown-item" href="#1">Disabled</a></li>
<li><a class="disabled dropdown-item" href="#1" tabindex="-1">Disabled</a></li>
<li class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#1">Scope</a></li>
</ul>
Expand Down Expand Up @@ -772,7 +776,7 @@ <h3>Dropdown Examples</h3>
<div class="row">
<ul class="col-sm-6 list-unstyled">
<li class="dropdown-header">By Resource</li>
<li><a class="disabled dropdown-item" href="#1">Support Home</a></li>
<li><a class="disabled dropdown-item" href="#1" tabindex="-1">Support Home</a></li>
<li><a class="dropdown-item" href="#1">Ask the Experts</a></li>
<li><a class="dropdown-item" href="#1">Chat or Call</a></li>
<li class="dropdown-header">By Product</li>
Expand Down Expand Up @@ -809,7 +813,7 @@ <h3>Dropdown Examples</h3>
<ul class="col-sm-4 list-unstyled">
<li class="dropdown-header">By Resource</li>
<li><a class="dropdown-item" href="#1">Support Home</a></li>
<li><a class="disabled dropdown-item" href="#1">Disabled Link</a></li>
<li><a class="disabled dropdown-item" href="#1" tabindex="-1">Disabled Link</a></li>
<li><a class="dropdown-item" href="#1">Chat or Call</a></li>
<li class="dropdown-header">By Product</li>
<li><a class="dropdown-item" href="#1">Developing for the Platform</a></li>
Expand Down Expand Up @@ -876,7 +880,7 @@ <h3>Dropdown Examples</h3>
<li><a class="dropdown-item" href="#1">View</a></li>
<li><a class="dropdown-item" href="#1">Permissions</a></li>
</ul>
<li><a class="disabled dropdown-item" href="#1">Disabled</a></li>
<li><a class="disabled dropdown-item" href="#1" tabindex="-1">Disabled</a></li>
<li class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#1">Scope</a></li>
</ul>
Expand Down
Loading

0 comments on commit bd6fd77

Please sign in to comment.