mirror of
https://github.com/primer/css.git
synced 2024-09-21 05:39:15 +03:00
Use svg for pagehead octicons
This commit is contained in:
simurai
parent
f97efec66f
commit
c7c86cc15f
@ -71,22 +71,26 @@ To add actions on the right side of the `pagehead`, use the `pagehead-actions` e
|
||||
<div class="pagehead orghead px-3">
|
||||
<nav class="orgnav clearfix" role="navigation">
|
||||
<a class="pagehead-tabs-item selected" href="#url">
|
||||
<%= octicon("repo") %>
|
||||
Repositories
|
||||
<!-- <%= octicon("repo") %> -->
|
||||
<svg class="octicon octicon-repo" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M4 9H3V8h1v1zm0-3H3v1h1V6zm0-2H3v1h1V4zm0-2H3v1h1V2zm8-1v12c0 .55-.45 1-1 1H6v2l-1.5-1.5L3 16v-2H1c-.55 0-1-.45-1-1V1c0-.55.45-1 1-1h10c.55 0 1 .45 1 1zm-1 10H1v2h2v-1h3v1h5v-2zm0-10H2v9h9V1z"></path></svg>
|
||||
<span>Repositories</span>
|
||||
</a>
|
||||
<a class="pagehead-tabs-item" href="#url">
|
||||
<%= octicon("jersey") %>
|
||||
Teams
|
||||
<!-- <%= octicon("jersey") %> -->
|
||||
<svg class="octicon octicon-jersey" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M4.5 6l-.5.5v5l.5.5h2l.5-.5v-5L6.5 6h-2zM6 11H5V7h1v4zm6.27-7.25C12.05 2.37 11.96 1.12 12 0H9.02c0 .27-.13.48-.39.69-.25.2-.63.3-1.13.3-.5 0-.88-.09-1.13-.3-.23-.2-.36-.42-.36-.69H3c.05 1.13-.03 2.38-.25 3.75C2.55 5.13 1.95 5.88 1 6v9c.02.27.11.48.31.69.2.21.42.3.69.31h11c.27-.02.48-.11.69-.31.21-.2.3-.42.31-.69V6c-.95-.13-1.53-.88-1.75-2.25h.02zM13 15H2V7c.89-.5 1.48-1.25 1.72-2.25S4.03 2.5 4 1h1c-.02.78.16 1.47.52 2.06.36.58 1.02.89 2 .94.98-.02 1.64-.33 2-.94.36-.59.5-1.28.48-2.06h1c.02 1.42.13 2.55.33 3.38.2.81.69 2 1.67 2.63v8V15zM8.5 6l-.5.5v5l.5.5h2l.5-.5v-5l-.5-.5h-2zm1.5 5H9V7h1v4z"></path></svg>
|
||||
<span>Teams</span>
|
||||
<span class="Counter">1</span>
|
||||
</a>
|
||||
<a class="pagehead-tabs-item" href="#url">
|
||||
<%= octicon("project") %>
|
||||
Projects
|
||||
<!-- <%= octicon("project") %> -->
|
||||
<svg class="octicon octicon-project" viewBox="0 0 15 16" version="1.1" width="15" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M10 12h3V2h-3v10zm-4-2h3V2H6v8zm-4 4h3V2H2v12zm-1 1h13V1H1v14zM14 0H1a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h13a1 1 0 0 0 1-1V1a1 1 0 0 0-1-1z"></path></svg>
|
||||
<span>Projects</span>
|
||||
<span class="Counter">2</span>
|
||||
</a>
|
||||
<a class="pagehead-tabs-item" href="#url">
|
||||
<%= octicon("briefcase") %>
|
||||
Jobs
|
||||
<!-- <%= octicon("briefcase") %> -->
|
||||
<svg class="octicon octicon-briefcase" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M9 4V3c0-.55-.45-1-1-1H6c-.55 0-1 .45-1 1v1H1c-.55 0-1 .45-1 1v8c0 .55.45 1 1 1h12c.55 0 1-.45 1-1V5c0-.55-.45-1-1-1H9zM6 3h2v1H6V3zm7 6H8v1H6V9H1V5h1v3h10V5h1v4z"></path></svg>
|
||||
<span>Jobs</span>
|
||||
<span class="Counter">3</span>
|
||||
</a>
|
||||
</nav>
|
||||
@ -106,8 +110,9 @@ Use `pagehead` to construct a header and navigation for a repository.
|
||||
<li>
|
||||
<div class="clearfix">
|
||||
<button class="btn btn-sm btn-with-count" href="#url" role="button">
|
||||
<%= octicon("eye")%>
|
||||
Watch
|
||||
<!-- <%= octicon("eye")%> -->
|
||||
<svg class="octicon octicon-eye" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.06 2C3 2 0 8 0 8s3 6 8.06 6C13 14 16 8 16 8s-3-6-7.94-6zM8 12c-2.2 0-4-1.78-4-4 0-2.2 1.8-4 4-4 2.22 0 4 1.8 4 4 0 2.22-1.78 4-4 4zm2-4c0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2 1.11 0 2 .89 2 2z"></path></svg>
|
||||
<span>Watch</span>
|
||||
</button>
|
||||
<button class="social-count" href="#url">6</button>
|
||||
</div>
|
||||
@ -115,15 +120,17 @@ Use `pagehead` to construct a header and navigation for a repository.
|
||||
<li>
|
||||
<div class="clearfix">
|
||||
<button class="btn btn-sm btn-with-count" href="#url" role="button">
|
||||
<%= octicon("repo-forked") %>
|
||||
Fork
|
||||
<!-- <%= octicon("repo-forked") %> -->
|
||||
<svg class="octicon octicon-repo-forked" viewBox="0 0 10 16" version="1.1" width="10" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8 1a1.993 1.993 0 0 0-1 3.72V6L5 8 3 6V4.72A1.993 1.993 0 0 0 2 1a1.993 1.993 0 0 0-1 3.72V6.5l3 3v1.78A1.993 1.993 0 0 0 5 15a1.993 1.993 0 0 0 1-3.72V9.5l3-3V4.72A1.993 1.993 0 0 0 8 1zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3 10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3-10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"></path></svg>
|
||||
<span>Fork</span>
|
||||
</button>
|
||||
<button class="social-count" href="#url">0</button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<h1>
|
||||
<%= octicon("repo") %>
|
||||
<!-- <%= octicon("repo") %> -->
|
||||
<svg class="octicon octicon-repo" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M4 9H3V8h1v1zm0-3H3v1h1V6zm0-2H3v1h1V4zm0-2H3v1h1V2zm8-1v12c0 .55-.45 1-1 1H6v2l-1.5-1.5L3 16v-2H1c-.55 0-1-.45-1-1V1c0-.55.45-1 1-1h10c.55 0 1 .45 1 1zm-1 10H1v2h2v-1h3v1h5v-2zm0-10H2v9h9V1z"></path></svg>
|
||||
<span class="author"><a href="#url" class="url fn" rel="author">cmwinters</a></span>
|
||||
<span class="path-divider">/</span>
|
||||
<strong><a href="#url">project</a></strong>
|
||||
@ -132,22 +139,26 @@ Use `pagehead` to construct a header and navigation for a repository.
|
||||
<div class="container-lg px-3">
|
||||
<nav class="reponav clearfix" role="navigation">
|
||||
<a class="reponav-item selected" href="#url">
|
||||
<%= octicon("code") %>
|
||||
Code
|
||||
<!-- <%= octicon("code") %> -->
|
||||
<svg class="octicon octicon-code" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M9.5 3L8 4.5 11.5 8 8 11.5 9.5 13 14 8 9.5 3zm-5 0L0 8l4.5 5L6 11.5 2.5 8 6 4.5 4.5 3z"></path></svg>
|
||||
<span>Code</span>
|
||||
</a>
|
||||
<a class="reponav-item" href="#url">
|
||||
<%= octicon("issue-opened") %>
|
||||
Issues
|
||||
<!-- <%= octicon("issue-opened") %> -->
|
||||
<svg class="octicon octicon-issue-opened" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg>
|
||||
<span>Issues</span>
|
||||
<span class="Counter">1</span>
|
||||
</a>
|
||||
<a class="reponav-item" href="#url">
|
||||
<%= octicon("git-pull-request") %>
|
||||
Pull requests
|
||||
<!-- <%= octicon("git-pull-request") %> -->
|
||||
<svg class="octicon octicon-git-pull-request" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M11 11.28V5c-.03-.78-.34-1.47-.94-2.06C9.46 2.35 8.78 2.03 8 2H7V0L4 3l3 3V4h1c.27.02.48.11.69.31.21.2.3.42.31.69v6.28A1.993 1.993 0 0 0 10 15a1.993 1.993 0 0 0 1-3.72zm-1 2.92c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zM4 3c0-1.11-.89-2-2-2a1.993 1.993 0 0 0-1 3.72v6.56A1.993 1.993 0 0 0 2 15a1.993 1.993 0 0 0 1-3.72V4.72c.59-.34 1-.98 1-1.72zm-.8 10c0 .66-.55 1.2-1.2 1.2-.65 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"></path></svg>
|
||||
<span>Pull requests</span>
|
||||
<span class="Counter">2</span>
|
||||
</a>
|
||||
<a class="reponav-item" href="#url">
|
||||
<%= octicon("project") %>
|
||||
Projects
|
||||
<!-- <%= octicon("project") %> -->
|
||||
<svg class="octicon octicon-project" viewBox="0 0 15 16" version="1.1" width="15" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M10 12h3V2h-3v10zm-4-2h3V2H6v8zm-4 4h3V2H2v12zm-1 1h13V1H1v14zM14 0H1a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h13a1 1 0 0 0 1-1V1a1 1 0 0 0-1-1z"></path></svg>
|
||||
<span>Projects</span>
|
||||
<span class="Counter">3</span>
|
||||
</a>
|
||||
</nav>
|
||||
@ -164,8 +175,9 @@ Use `pagehead` to construct a header and navigation for a repository.
|
||||
<li>
|
||||
<div class="clearfix">
|
||||
<button class="btn btn-sm btn-with-count" href="#url" role="button">
|
||||
<%= octicon("eye") %>
|
||||
Watch
|
||||
<!-- <%= octicon("eye") %> -->
|
||||
<svg class="octicon octicon-eye" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.06 2C3 2 0 8 0 8s3 6 8.06 6C13 14 16 8 16 8s-3-6-7.94-6zM8 12c-2.2 0-4-1.78-4-4 0-2.2 1.8-4 4-4 2.22 0 4 1.8 4 4 0 2.22-1.78 4-4 4zm2-4c0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2 1.11 0 2 .89 2 2z"></path></svg>
|
||||
<span>Watch</span>
|
||||
</button>
|
||||
<button class="social-count" href="#url">6</button>
|
||||
</div>
|
||||
@ -173,15 +185,17 @@ Use `pagehead` to construct a header and navigation for a repository.
|
||||
<li>
|
||||
<div class="clearfix">
|
||||
<button class="btn btn-sm btn-with-count" href="#url" role="button">
|
||||
<%= octicon("repo-forked") %>
|
||||
Fork
|
||||
<!-- <%= octicon("repo-forked") %> -->
|
||||
<svg class="octicon octicon-repo-forked" viewBox="0 0 10 16" version="1.1" width="10" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8 1a1.993 1.993 0 0 0-1 3.72V6L5 8 3 6V4.72A1.993 1.993 0 0 0 2 1a1.993 1.993 0 0 0-1 3.72V6.5l3 3v1.78A1.993 1.993 0 0 0 5 15a1.993 1.993 0 0 0 1-3.72V9.5l3-3V4.72A1.993 1.993 0 0 0 8 1zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3 10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3-10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"></path></svg>
|
||||
<span>Fork</span>
|
||||
</button>
|
||||
<button class="social-count" href="#url">0</button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<h1 class="private">
|
||||
<%= octicon("lock") %>
|
||||
<!-- <%= octicon("lock") %> -->
|
||||
<svg class="octicon octicon-lock" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M4 13H3v-1h1v1zm8-6v7c0 .55-.45 1-1 1H1c-.55 0-1-.45-1-1V7c0-.55.45-1 1-1h1V4c0-2.2 1.8-4 4-4s4 1.8 4 4v2h1c.55 0 1 .45 1 1zM3.8 6h4.41V4c0-1.22-.98-2.2-2.2-2.2-1.22 0-2.2.98-2.2 2.2v2H3.8zM11 7H2v7h9V7zM4 8H3v1h1V8zm0 2H3v1h1v-1z"></path></svg>
|
||||
<span class="author"><a href="#url" class="url fn" rel="author">cmwinters</a></span>
|
||||
<span class="path-divider">/</span>
|
||||
<strong><a href="#url">project</a></strong>
|
||||
@ -191,22 +205,26 @@ Use `pagehead` to construct a header and navigation for a repository.
|
||||
<div class="container-lg px-3">
|
||||
<nav class="reponav clearfix" role="navigation">
|
||||
<a class="reponav-item selected" href="#url">
|
||||
<%= octicon("code") %>
|
||||
Code
|
||||
<!-- <%= octicon("code") %> -->
|
||||
<svg class="octicon octicon-code" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M9.5 3L8 4.5 11.5 8 8 11.5 9.5 13 14 8 9.5 3zm-5 0L0 8l4.5 5L6 11.5 2.5 8 6 4.5 4.5 3z"></path></svg>
|
||||
<span>Code</span>
|
||||
</a>
|
||||
<a class="reponav-item" href="#url">
|
||||
<%= octicon("issue-opened") %>
|
||||
Issues
|
||||
<!-- <%= octicon("issue-opened") %> -->
|
||||
<svg class="octicon octicon-issue-opened" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg>
|
||||
<span>Issues</span>
|
||||
<span class="Counter">1</span>
|
||||
</a>
|
||||
<a class="reponav-item" href="#url">
|
||||
<%= octicon("git-pull-request") %>
|
||||
Pull requests
|
||||
<!-- <%= octicon("git-pull-request") %> -->
|
||||
<svg class="octicon octicon-git-pull-request" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M11 11.28V5c-.03-.78-.34-1.47-.94-2.06C9.46 2.35 8.78 2.03 8 2H7V0L4 3l3 3V4h1c.27.02.48.11.69.31.21.2.3.42.31.69v6.28A1.993 1.993 0 0 0 10 15a1.993 1.993 0 0 0 1-3.72zm-1 2.92c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zM4 3c0-1.11-.89-2-2-2a1.993 1.993 0 0 0-1 3.72v6.56A1.993 1.993 0 0 0 2 15a1.993 1.993 0 0 0 1-3.72V4.72c.59-.34 1-.98 1-1.72zm-.8 10c0 .66-.55 1.2-1.2 1.2-.65 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"></path></svg>
|
||||
<span>Pull requests</span>
|
||||
<span class="Counter">2</span>
|
||||
</a>
|
||||
<a class="reponav-item" href="#url">
|
||||
<%= octicon("project") %>
|
||||
Projects
|
||||
<!-- <%= octicon("project") %> -->
|
||||
<svg class="octicon octicon-project" viewBox="0 0 15 16" version="1.1" width="15" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M10 12h3V2h-3v10zm-4-2h3V2H6v8zm-4 4h3V2H2v12zm-1 1h13V1H1v14zM14 0H1a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h13a1 1 0 0 0 1-1V1a1 1 0 0 0-1-1z"></path></svg>
|
||||
<span>Projects</span>
|
||||
<span class="Counter">3</span>
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user