mirror of
https://github.com/primer/css.git
synced 2024-12-23 14:13:14 +03:00
21c5ebc01b
* Add v18 migration guide * Update colors.mdx * Move theming to support * Delete color-system.mdx * Update nav.yml * Fix color imports in the docs * Create small-papayas-prove.md * Update theming.md * Update colors.mdx * Replace V1 with V2 classes * More docs updates
5.7 KiB
5.7 KiB
| title | path |
|---|---|
| Sticker Sheet | stickersheet/sizes |
Sizes
<span class="d-inline-block col-1 color-fg-subtle">16px</span>
<img class="mr-3 avatar avatar-1" src="https://avatars.githubusercontent.com/jonrohan?s=64" />
<!-- <%= octicon "comment" %> -->
<svg class="octicon octicon-comment" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M2.75 2.5C2.6837 2.5 2.62011 2.52634 2.57322 2.57322C2.52634 2.62011 2.5 2.6837 2.5 2.75V10.25C2.5 10.388 2.612 10.5 2.75 10.5H4.75C4.94891 10.5 5.13968 10.579 5.28033 10.7197C5.42098 10.8603 5.5 11.0511 5.5 11.25V13.44L8.22 10.72C8.36052 10.5793 8.55115 10.5002 8.75 10.5H13.25C13.3163 10.5 13.3799 10.4737 13.4268 10.4268C13.4737 10.3799 13.5 10.3163 13.5 10.25V2.75C13.5 2.6837 13.4737 2.62011 13.4268 2.57322C13.3799 2.52634 13.3163 2.5 13.25 2.5H2.75ZM1 2.75C1 1.784 1.784 1 2.75 1H13.25C14.216 1 15 1.784 15 2.75V10.25C15 10.7141 14.8156 11.1592 14.4874 11.4874C14.1592 11.8156 13.7141 12 13.25 12H9.06L6.487 14.573C6.28324 14.7767 6.02367 14.9153 5.74111 14.9715C5.45854 15.0277 5.16567 14.9988 4.8995 14.8886C4.63333 14.7784 4.40581 14.5917 4.24571 14.3522C4.08561 14.1127 4.0001 13.8311 4 13.543V12H2.75C2.28587 12 1.84075 11.8156 1.51256 11.4874C1.18437 11.1592 1 10.7141 1 10.25V2.75Z"></path></svg>
<div class="my-4"></div><!-- Spacer ------------------------ -->
<span class="d-inline-block col-1 color-fg-subtle">20px</span>
<img class="mr-3 avatar avatar-2" src="https://avatars.githubusercontent.com/jonrohan?s=64" />
<span class="mr-3 Label">Label</span>
<span class="mr-3 IssueLabel color-bg-accent-emphasis color-fg-on-emphasis">IssueLabel</span>
<span class="mr-3 Counter">1.5K</span>
<div class="my-4"></div><!-- Spacer ------------------------ -->
<span class="d-inline-block col-1 color-fg-subtle">24px</span>
<img class="mr-3 avatar avatar-3" src="https://avatars.githubusercontent.com/jonrohan?s=64" />
<span class="mr-3 Label Label--large">Label</span>
<span class="mr-3 IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis">IssueLabel</span>
<span class="mr-3 State State--small">State</span>
<div class="my-4"></div><!-- Spacer ------------------------ -->
<span class="d-inline-block col-1 color-fg-subtle">28px</span>
<img class="mr-3 avatar avatar-4" src="https://avatars.githubusercontent.com/jonrohan?s=64" />
<button class="mr-3 btn btn-sm" type="button">Button</button>
<input class="mr-3 form-control input-sm" type="text" placeholder="Input" />
<select class="mr-3 form-select select-sm"><option>Select</option><option value="option 2">Option 2</option></select>
<div class="my-4"></div><!-- Spacer ------------------------ -->
<span class="d-inline-block col-1 color-fg-subtle">32px</span>
<img class="mr-3 avatar avatar-5" src="https://avatars.githubusercontent.com/jonrohan?s=64" />
<button class="mr-3 btn" type="button">Button</button>
<input class="mr-3 form-control" type="text" placeholder="Input" />
<select class="mr-3 form-select"><option>Select</option><option value="option 2">Option 2</option></select>
<nav class="mr-3 subnav d-inline-block v-align-middle mb-0">
<a class="subnav-item" href="#url" aria-current="page">Filter 1</a>
<a class="subnav-item" href="#url">Filter 2</a>
</nav>
<span class="mr-3 State">State</span>
<div class="my-4"></div><!-- Spacer ------------------------ -->
<span class="d-inline-block col-1 color-fg-subtle">40px</span>
<img class="mr-3 avatar avatar-6" src="https://avatars.githubusercontent.com/jonrohan?s=80" />
<div class="mr-3 tabnav d-inline-block v-align-middle mb-0">
<nav class="tabnav-tabs">
<a class="tabnav-tab" href="#url" aria-current="page">Tab 1</a>
<a class="tabnav-tab" href="#url">Tab 2</a>
<a class="tabnav-tab" href="#url">Tab 3</a>
<a class="tabnav-tab" href="#url">Tab 4</a>
</nav>
</div>
<div class="my-4"></div><!-- Spacer ------------------------ -->
<span class="d-inline-block col-1 color-fg-subtle">48px</span>
<img class="mr-3 avatar avatar-7" src="https://avatars.githubusercontent.com/jonrohan?s=96" />
<nav class="mr-3 UnderlineNav d-inline-block v-align-middle">
<div class="UnderlineNav-body">
<button class="UnderlineNav-item" type="button" role="tab" aria-selected="true">Nav 1</button>
<button class="UnderlineNav-item" role="tab" type="button">Nav 2</button>
<button class="UnderlineNav-item" role="tab" type="button">Nav 3</button>
</div>
</nav>
<div class="mr-3 flash d-inline-block v-align-middle">Flash alert</div>
<div class="my-4"></div><!-- Spacer ------------------------ -->
<span class="d-inline-block col-1 color-fg-subtle">64px</span>
<img class="mr-3 avatar avatar-8" src="https://avatars.githubusercontent.com/jonrohan?s=128" />
<div class="mr-3 Header d-inline-block v-align-middle">
<div class="Header-item">
<a href="#" class="Header-link f4 d-flex flex-items-center">
<!-- <%= octicon "mark-github", class: "mr-2", height: 32 %> -->
<svg height="32" class="octicon octicon-mark-github mr-2" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
<span>Header</span>
</a>
</div>
</div>