Skip to content

Commit

Permalink
Fixes liferay#1242 - Clayui.com update SVG Icon markup
Browse files Browse the repository at this point in the history
  • Loading branch information
@pat270
pat270 committed Nov 13, 2018
1 parent 4fcd8b4 commit 20fed26
Show file tree
Hide file tree
Showing 57 changed files with 6,754 additions and 4,523 deletions.
304 changes: 190 additions & 114 deletions clayui.com/content/docs/components/alerts.md
View file

Large diffs are not rendered by default.

208 changes: 130 additions & 78 deletions clayui.com/content/docs/components/buttons.md
View file

Large diffs are not rendered by default.

192 changes: 120 additions & 72 deletions clayui.com/content/docs/components/cards.md
View file

Large diffs are not rendered by default.

162 changes: 90 additions & 72 deletions clayui.com/content/docs/components/dataset-display.md
View file

Large diffs are not rendered by default.

208 changes: 130 additions & 78 deletions clayui.com/content/docs/components/dropdowns.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -283,9 +283,11 @@ A dropdown is a list of options related to the element that triggers it.
<input class="form-control input-group-inset input-group-inset-after" placeholder="Search for..." type="text"/>
<span class="input-group-inset-item input-group-inset-item-after">
<button class="btn btn-unstyled" type="button">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-search">
<use href="/images/icons/icons.svg#search" />
</svg>
<span aria-label="icon-search" class="lexicon-icon-container" role="img">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-search">
<use href="/images/icons/icons.svg#search" />
</svg>
</span>
</button>
</span>
</div>
Expand Down Expand Up @@ -339,9 +341,11 @@ A dropdown is a list of options related to the element that triggers it.
<input class="form-control input-group-inset input-group-inset-after" placeholder="Search for..." type="text"/>
<span class="input-group-inset-item input-group-inset-item-after">
<button class="btn btn-unstyled" type="button">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-search">
<use href="/images/icons/icons.svg#search" />
</svg>
<span aria-label="icon-search" class="lexicon-icon-container" role="img">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-search">
<use href="/images/icons/icons.svg#search" />
</svg>
</span>
</button>
</span>
</div>
Expand All @@ -366,19 +370,23 @@ A dropdown is a list of options related to the element that triggers it.
<li>
<a class="dropdown-item" href="#1">
<div class="dropdown-item-indicator">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-check">
<use href="/images/icons/icons.svg#check" />
</svg>
<span aria-label="icon-check" class="lexicon-icon-container" role="img">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-check">
<use href="/images/icons/icons.svg#check" />
</svg>
</span>
</div>
Normal Option
</a>
</li>
<li>
<a class="dropdown-item" href="#1">
<div class="dropdown-item-indicator">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-check">
<use href="/images/icons/icons.svg#check" />
</svg>
<span aria-label="icon-check" class="lexicon-icon-container" role="img">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-check">
<use href="/images/icons/icons.svg#check" />
</svg>
</span>
</div>
Second Option
</a>
Expand Down Expand Up @@ -428,19 +436,23 @@ A dropdown is a list of options related to the element that triggers it.
<li>
<a class="dropdown-item" href="#1">
<div class="dropdown-item-indicator">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-check">
<use href="/images/icons/icons.svg#check" />
</svg>
<span aria-label="icon-check" class="lexicon-icon-container" role="img">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-check">
<use href="/images/icons/icons.svg#check" />
</svg>
</span>
</div>
Normal Option
</a>
</li>
<li>
<a class="dropdown-item" href="#1">
<div class="dropdown-item-indicator">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-check">
<use href="/images/icons/icons.svg#check" />
</svg>
<span aria-label="icon-check" class="lexicon-icon-container" role="img">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-check">
<use href="/images/icons/icons.svg#check" />
</svg>
</span>
</div>
Second Option
</a>
Expand All @@ -463,19 +475,23 @@ A dropdown is a list of options related to the element that triggers it.
<a class="active dropdown-item" href="#1">
Selected Option
<div class="dropdown-item-indicator">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-check">
<use href="/images/icons/icons.svg#check" />
</svg>
<span aria-label="icon-check" class="lexicon-icon-container" role="img">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-check">
<use href="/images/icons/icons.svg#check" />
</svg>
</span>
</div>
</a>
</li>
<li>
<a class="dropdown-item" href="#1">
Regular Option
<div class="dropdown-item-indicator">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-check">
<use href="/images/icons/icons.svg#check" />
</svg>
<span aria-label="icon-check" class="lexicon-icon-container" role="img">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-check">
<use href="/images/icons/icons.svg#check" />
</svg>
</span>
</div>
</a>
</li>
Expand Down Expand Up @@ -526,19 +542,23 @@ A dropdown is a list of options related to the element that triggers it.
<a class="active dropdown-item" href="#1">
Selected Option
<div class="dropdown-item-indicator">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-check">
<use href="/images/icons/icons.svg#check" />
</svg>
<span aria-label="icon-check" class="lexicon-icon-container" role="img">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-check">
<use href="/images/icons/icons.svg#check" />
</svg>
</span>
</div>
</a>
</li>
<li>
<a class="dropdown-item" href="#1">
Regular Option
<div class="dropdown-item-indicator">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-check">
<use href="/images/icons/icons.svg#check" />
</svg>
<span aria-label="icon-check" class="lexicon-icon-container" role="img">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-check">
<use href="/images/icons/icons.svg#check" />
</svg>
</span>
</div>
</a>
</li>
Expand All @@ -557,45 +577,57 @@ A dropdown is a list of options related to the element that triggers it.
<li>
<a class="dropdown-item" href="#1">
<span class="dropdown-item-indicator-start">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-pencil">
<use xlink:href="/images/icons/icons.svg#pencil" />
</svg>
<span aria-label="icon-pencil" class="lexicon-icon-container" role="img">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-pencil">
<use xlink:href="/images/icons/icons.svg#pencil" />
</svg>
</span>
</span>
Normal Option
<span class="dropdown-item-indicator-end">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
<use xlink:href="/images/icons/icons.svg#angle-right" />
</svg>
<span aria-label="icon-angle-right" class="lexicon-icon-container" role="img">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
<use xlink:href="/images/icons/icons.svg#angle-right" />
</svg>
</span>
</span>
</a>
</li>
<li>
<a class="dropdown-item" href="#1">
<span class="dropdown-item-indicator-start">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-view">
<use xlink:href="/images/icons/icons.svg#view" />
</svg>
<span aria-label="icon-view" class="lexicon-icon-container" role="img">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-view">
<use xlink:href="/images/icons/icons.svg#view" />
</svg>
</span>
</span>
Second Option
<span class="dropdown-item-indicator-end">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
<use xlink:href="/images/icons/icons.svg#angle-right" />
</svg>
<span aria-label="icon-angle-right" class="lexicon-icon-container" role="img">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
<use xlink:href="/images/icons/icons.svg#angle-right" />
</svg>
</span>
</span>
</a>
</li>
<li>
<a class="dropdown-item" href="#1">
<span class="dropdown-item-indicator-start">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-check">
<use xlink:href="/images/icons/icons.svg#check" />
</svg>
<span aria-label="icon-check" class="lexicon-icon-container" role="img">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-check">
<use xlink:href="/images/icons/icons.svg#check" />
</svg>
</span>
</span>
Third Option
<span class="dropdown-item-indicator-end">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
<use xlink:href="/images/icons/icons.svg#angle-right" />
</svg>
<span aria-label="icon-angle-right" class="lexicon-icon-container" role="img">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
<use xlink:href="/images/icons/icons.svg#angle-right" />
</svg>
</span>
</span>
</a>
</li>
Expand All @@ -609,45 +641,57 @@ A dropdown is a list of options related to the element that triggers it.
<li>
<a class="dropdown-item" href="#1">
<span class="dropdown-item-indicator-start">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-pencil">
<use xlink:href="/images/icons/icons.svg#pencil" />
</svg>
<span aria-label="icon-pencil" class="lexicon-icon-container" role="img">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-pencil">
<use xlink:href="/images/icons/icons.svg#pencil" />
</svg>
</span>
</span>
Normal Option
<span class="dropdown-item-indicator-end">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
<use xlink:href="/images/icons/icons.svg#angle-right" />
</svg>
<span aria-label="icon-angle-right" class="lexicon-icon-container" role="img">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
<use xlink:href="/images/icons/icons.svg#angle-right" />
</svg>
</span>
</span>
</a>
</li>
<li>
<a class="dropdown-item" href="#1">
<span class="dropdown-item-indicator-start">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-view">
<use xlink:href="/images/icons/icons.svg#view" />
</svg>
<span aria-label="icon-view" class="lexicon-icon-container" role="img">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-view">
<use xlink:href="/images/icons/icons.svg#view" />
</svg>
</span>
</span>
Second Option
<span class="dropdown-item-indicator-end">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
<use xlink:href="/images/icons/icons.svg#angle-right" />
</svg>
<span aria-label="icon-angle-right" class="lexicon-icon-container" role="img">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
<use xlink:href="/images/icons/icons.svg#angle-right" />
</svg>
</span>
</span>
</a>
</li>
<li>
<a class="dropdown-item" href="#1">
<span class="dropdown-item-indicator-start">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-check">
<use xlink:href="/images/icons/icons.svg#check" />
</svg>
<span aria-label="icon-check" class="lexicon-icon-container" role="img">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-check">
<use xlink:href="/images/icons/icons.svg#check" />
</svg>
</span>
</span>
Third Option
<span class="dropdown-item-indicator-end">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
<use xlink:href="/images/icons/icons.svg#angle-right" />
</svg>
<span aria-label="icon-angle-right" class="lexicon-icon-container" role="img">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
<use xlink:href="/images/icons/icons.svg#angle-right" />
</svg>
</span>
</span>
</a>
</li>
Expand All @@ -670,9 +714,11 @@ A dropdown is a list of options related to the element that triggers it.
<input class="form-control input-group-inset input-group-inset-after" placeholder="Search for..." type="text"/>
<span class="input-group-inset-item input-group-inset-item-after">
<button class="btn btn-unstyled" type="button">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-search">
<use href="/images/icons/icons.svg#search" />
</svg>
<span aria-label="icon-search" class="lexicon-icon-container" role="img">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-search">
<use href="/images/icons/icons.svg#search" />
</svg>
</span>
</button>
</span>
</div>
Expand Down Expand Up @@ -886,9 +932,11 @@ A dropdown is a list of options related to the element that triggers it.
<input class="form-control input-group-inset input-group-inset-after" placeholder="Search for..." type="text"/>
<span class="input-group-inset-item input-group-inset-item-after">
<button class="btn btn-unstyled" type="button">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-search">
<use href="/images/icons/icons.svg#search" />
</svg>
<span aria-label="icon-search" class="lexicon-icon-container" role="img">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-search">
<use href="/images/icons/icons.svg#search" />
</svg>
</span>
</button>
</span>
</div>
Expand Down Expand Up @@ -977,9 +1025,11 @@ A dropdown is a list of options related to the element that triggers it.
<div class="dropdown dropdown-action">
<button aria-expanded="false" aria-haspopup="true" class="component-action dropdown-toggle btn btn-unstyled" data-toggle="dropdown" id="dropdownAction1" role="button">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v">
<use href="/images/icons/icons.svg#ellipsis-v" />
</svg>
<span aria-label="icon-ellipsis-v" class="lexicon-icon-container" role="img">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v">
<use href="/images/icons/icons.svg#ellipsis-v" />
</svg>
</span>
</button>
<div aria-labelledby="dropdownAction1" class="dropdown-menu">
<ul class="list-unstyled">
Expand Down Expand Up @@ -1138,9 +1188,11 @@ A dropdown is a list of options related to the element that triggers it.
```html
<div aria-labelledby="theDropdownToggleId" class="dropdown-menu">
<button aria-expanded="false" aria-haspopup="true" class="dropdown-toggle btn btn-unstyled" data-toggle="dropdown" id="dropdownAction1" role="button">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v">
<use href="/images/icons/icons.svg#ellipsis-v" />
</svg>
<span aria-label="icon-ellipsis-v" class="lexicon-icon-container" role="img">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v">
<use href="/images/icons/icons.svg#ellipsis-v" />
</svg>
</span>
</button>
<div aria-labelledby="dropdownAction1" class="dropdown-menu">
<ul class="list-unstyled">
Expand Down
Loading

0 comments on commit 20fed26

Please sign in to comment.