mirror of
https://github.com/primer/css.git
synced 2024-11-29 14:14:26 +03:00
Add blankslate classes to replace utilities (#1919)
This is part of the effort to remove all usages of utility classes to improve consistency and prevent specificity bugs.
This commit is contained in:
Hector Garcia
GitHub
parent
ce63d9783c
commit
21085f5c6c
5
.changeset/warm-bottles-arrive.md
Normal file
5
.changeset/warm-bottles-arrive.md
Normal file
@ -0,0 +1,5 @@
|
||||
---
|
||||
"@primer/css": minor
|
||||
---
|
||||
|
||||
Add blankslate classes to replace utilities
|
||||
@ -10,11 +10,11 @@ Blankslates are for when there is a lack of content within a page or section. Us
|
||||
|
||||
## Basic example
|
||||
|
||||
Wrap some content in the outer `.blankslate` wrapper to give it the blankslate appearance.
|
||||
Wrap some content in the outer `.blankslate` wrapper and add the `.blankslate-heading` class to headings to give it the blankslate appearance.
|
||||
|
||||
```html live
|
||||
<div class="blankslate">
|
||||
<h3 class="mb-1">This is a blank slate</h3>
|
||||
<h3 class="blankslate-heading">This is a blank slate</h3>
|
||||
<p>Use it to provide information when no dynamic content exists.</p>
|
||||
</div>
|
||||
```
|
||||
@ -27,22 +27,26 @@ When it helps the message, include (relevant) icons in your blank slate. Add the
|
||||
<div class="blankslate">
|
||||
<!-- <%= octicon "octoface", :height = 24, :class => "blankslate-icon" %> -->
|
||||
<svg class="octicon octicon-octoface blankslate-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M7.75 11c-.69 0-1.25.56-1.25 1.25v1.5a1.25 1.25 0 102.5 0v-1.5C9 11.56 8.44 11 7.75 11zm1.27 4.5a.469.469 0 01.48-.5h5a.47.47 0 01.48.5c-.116 1.316-.759 2.5-2.98 2.5s-2.864-1.184-2.98-2.5zm7.23-4.5c-.69 0-1.25.56-1.25 1.25v1.5a1.25 1.25 0 102.5 0v-1.5c0-.69-.56-1.25-1.25-1.25z"></path><path fill-rule="evenodd" d="M21.255 3.82a1.725 1.725 0 00-2.141-1.195c-.557.16-1.406.44-2.264.866-.78.386-1.647.93-2.293 1.677A18.442 18.442 0 0012 5c-.93 0-1.784.059-2.569.17-.645-.74-1.505-1.28-2.28-1.664a13.876 13.876 0 00-2.265-.866 1.725 1.725 0 00-2.141 1.196 23.645 23.645 0 00-.69 3.292c-.125.97-.191 2.07-.066 3.112C1.254 11.882 1 13.734 1 15.527 1 19.915 3.13 23 12 23c8.87 0 11-3.053 11-7.473 0-1.794-.255-3.647-.99-5.29.127-1.046.06-2.15-.066-3.125a23.652 23.652 0 00-.689-3.292zM20.5 14c.5 3.5-1.5 6.5-8.5 6.5s-9-3-8.5-6.5c.583-4 3-6 8.5-6s7.928 2 8.5 6z"></path></svg>
|
||||
<h3>This is a blank slate</h3>
|
||||
<h3 class="blankslate-heading">This is a blank slate</h3>
|
||||
<p>Use it to provide information when no dynamic content exists.</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
## With graphic, button and link
|
||||
|
||||
Add a graphic, button and/or link to add additional information and provide users a way to add content to this page.
|
||||
Add a graphic, button and/or link to add additional information and provide users a way to add content to this page. Add the `.blankslate-image` class to the image, and the `.blankslate-action` to any button or link wrappers.
|
||||
|
||||
```html live
|
||||
<div class="blankslate">
|
||||
<img src="https://ghicons.github.com/assets/images/blue/png/Pull%20request.png" alt="" class="mb-3" />
|
||||
<h3 class="mb-1">You don’t seem to have any pull requests.</h3>
|
||||
<img src="https://ghicons.github.com/assets/images/blue/png/Pull%20request.png" alt="" class="blankslate-image" />
|
||||
<h3 class="blankslate-heading">You don’t seem to have any pull requests.</h3>
|
||||
<p>Pull requests help you discuss potential changes before they are merged into the base branch.</p>
|
||||
<button class="btn btn-primary my-3" type="button">New pull request</button>
|
||||
<p><button class="btn-link" type="button">Learn more</button></p>
|
||||
<div class="blankslate-action">
|
||||
<button class="btn btn-primary" type="button">New pull request</button>
|
||||
</div>
|
||||
<div class="blankslate-action">
|
||||
<button class="btn-link" type="button">Learn more</button>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
@ -56,11 +60,15 @@ Add an additional optional class to the `.blankslate` to change its appearance.
|
||||
|
||||
```html live
|
||||
<div class="blankslate blankslate-narrow">
|
||||
<img src="https://ghicons.github.com/assets/images/blue/png/Pull%20request.png" alt="" class="mb-3" />
|
||||
<h3 class="mb-1">You don’t seem to have any pull requests.</h3>
|
||||
<img src="https://ghicons.github.com/assets/images/blue/png/Pull%20request.png" alt="" class="blankslate-image" />
|
||||
<h3 class="blankslate-heading">You don’t seem to have any pull requests.</h3>
|
||||
<p>Pull requests help you discuss potential changes before they are merged into the base branch.</p>
|
||||
<button class="btn btn-primary my-3" type="button">New pull request</button>
|
||||
<p><button class="btn-link" type="button">Learn more</button></p>
|
||||
<div class="blankslate-action">
|
||||
<button class="btn btn-primary" type="button">New pull request</button>
|
||||
</div>
|
||||
<div class="blankslate-action">
|
||||
<button class="btn-link" type="button">Learn more</button>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
@ -70,11 +78,15 @@ Add an additional optional class to the `.blankslate` to change its appearance.
|
||||
|
||||
```html live
|
||||
<div class="blankslate blankslate-large">
|
||||
<img src="https://ghicons.github.com/assets/images/blue/png/Pull%20request.png" alt="" class="mb-3" />
|
||||
<h3 class="mb-1">You don’t seem to have any pull requests.</h3>
|
||||
<img src="https://ghicons.github.com/assets/images/blue/png/Pull%20request.png" alt="" class="blankslate-image" />
|
||||
<h3 class="blankslate-heading">You don’t seem to have any pull requests.</h3>
|
||||
<p>Pull requests help you discuss potential changes before they are merged into the base branch.</p>
|
||||
<button class="btn btn-primary my-3" type="button">New pull request</button>
|
||||
<p><button class="btn-link" type="button">Learn more</button></p>
|
||||
<div class="blankslate-action">
|
||||
<button class="btn btn-primary" type="button">New pull request</button>
|
||||
</div>
|
||||
<div class="blankslate-action">
|
||||
<button class="btn-link" type="button">Learn more</button>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
@ -84,11 +96,15 @@ Add an additional optional class to the `.blankslate` to change its appearance.
|
||||
|
||||
```html live
|
||||
<div class="blankslate blankslate-spacious">
|
||||
<img src="https://ghicons.github.com/assets/images/blue/png/Pull%20request.png" alt="" class="mb-3" />
|
||||
<h3 class="mb-1">You don’t seem to have any pull requests.</h3>
|
||||
<img src="https://ghicons.github.com/assets/images/blue/png/Pull%20request.png" alt="" class="blankslate-image" />
|
||||
<h3 class="blankslate-heading">You don’t seem to have any pull requests.</h3>
|
||||
<p>Pull requests help you discuss potential changes before they are merged into the base branch.</p>
|
||||
<button class="btn btn-primary my-3" type="button">New pull request</button>
|
||||
<p><button class="btn-link" type="button">Learn more</button></p>
|
||||
<div class="blankslate-action">
|
||||
<button class="btn btn-primary" type="button">New pull request</button>
|
||||
</div>
|
||||
<div class="blankslate-action">
|
||||
<button class="btn-link" type="button">Learn more</button>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
@ -101,11 +117,15 @@ To add a border, wrap the blankstate component with the [Box component](/compone
|
||||
```html live
|
||||
<div class="Box">
|
||||
<div class="blankslate">
|
||||
<img src="https://ghicons.github.com/assets/images/blue/png/Pull%20request.png" alt="" class="mb-3" />
|
||||
<h3 class="mb-1">You don’t seem to have any pull requests.</h3>
|
||||
<img src="https://ghicons.github.com/assets/images/blue/png/Pull%20request.png" alt="" class="blankslate-image" />
|
||||
<h3 class="blankslate-heading">You don’t seem to have any pull requests.</h3>
|
||||
<p>Pull requests help you discuss potential changes before they are merged into the base branch.</p>
|
||||
<button class="btn btn-primary my-3" type="button">New pull request</button>
|
||||
<p><button class="btn-link" type="button">Learn more</button></p>
|
||||
<div class="blankslate-action">
|
||||
<button class="btn btn-primary" type="button">New pull request</button>
|
||||
</div>
|
||||
<div class="blankslate-action">
|
||||
<button class="btn-link" type="button">Learn more</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -117,11 +137,15 @@ Removes the `border-radius` on the top corners.
|
||||
```html live
|
||||
<div class="Box rounded-top-0">
|
||||
<div class="blankslate">
|
||||
<img src="https://ghicons.github.com/assets/images/blue/png/Pull%20request.png" alt="" class="mb-3" />
|
||||
<h3 class="mb-1">You don’t seem to have any pull requests.</h3>
|
||||
<img src="https://ghicons.github.com/assets/images/blue/png/Pull%20request.png" alt="" class="blankslate-image" />
|
||||
<h3 class="blankslate-heading">You don’t seem to have any pull requests.</h3>
|
||||
<p>Pull requests help you discuss potential changes before they are merged into the base branch.</p>
|
||||
<button class="btn btn-primary my-3" type="button">New pull request</button>
|
||||
<p><button class="btn-link" type="button">Learn more</button></p>
|
||||
<div class="blankslate-action">
|
||||
<button class="btn btn-primary" type="button">New pull request</button>
|
||||
</div>
|
||||
<div class="blankslate-action">
|
||||
<button class="btn-link" type="button">Learn more</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
@ -30,6 +30,26 @@
|
||||
color: var(--color-fg-muted);
|
||||
}
|
||||
|
||||
.blankslate-image {
|
||||
margin-bottom: $spacer-3;
|
||||
}
|
||||
|
||||
.blankslate-heading {
|
||||
margin-bottom: $spacer-1;
|
||||
}
|
||||
|
||||
.blankslate-action {
|
||||
margin-top: $spacer-3;
|
||||
|
||||
&:first-of-type {
|
||||
margin-top: $spacer-4;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
margin-bottom: $spacer-2;
|
||||
}
|
||||
}
|
||||
|
||||
.blankslate-capped {
|
||||
border-radius: 0 0 $border-radius $border-radius;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user