primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-12-01 12:42:32 +03:00
Code Issues Projects Releases Wiki Activity

Merge pull request #861 from primer/blankslate-update

Browse Source 
updated blankslate component
- restructured to include CTAs
- removed `box-shadow`
- default state without border
This commit is contained in:
Ash Guillaume 2019-08-12 11:46:15 -07:00 committed by GitHub
commit 6f4e0e5923
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 60 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
pages/css/components/blankslate.md
View File

@ -15,8 +15,11 @@ Wrap some content in the outer `.blankslate` wrapper to give it the blankslate a
```html
<div class="blankslate">
<h3>This is a blank slate</h3>
<p>Use it to provide information when no dynamic content exists.</p>
<img src="https://ghicons.github.com/assets/images/light/Pull%20Request.png" alt="" class="mb-3">
<h3 class="mb-1">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>
```
@ -44,19 +47,11 @@ Narrows the blankslate container to not occupy the entire available width.
```html
<div class="blankslate blankslate-narrow">
<h3>This is a blank slate</h3>
<p>Use it to provide information when no dynamic content exists.</p>
</div>
```
##### Capped
Removes the `border-radius` on the top corners.
```html
<div class="blankslate blankslate-capped">
<h3>This is a blank slate</h3>
<p>Use it to provide information when no dynamic content exists.</p>
<img src="https://ghicons.github.com/assets/images/light/Pull%20Request.png" alt="" class="mb-3">
<h3 class="mb-1">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>
```
@ -66,8 +61,11 @@ Significantly increases the vertical padding.
```html
<div class="blankslate blankslate-spacious">
<h3>This is a blank slate</h3>
<p>Use it to provide information when no dynamic content exists.</p>
<img src="https://ghicons.github.com/assets/images/light/Pull%20Request.png" alt="" class="mb-3">
<h3 class="mb-1">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>
```
@ -77,18 +75,42 @@ Increases the size of the text in the blankslate
```html
<div class="blankslate blankslate-large">
<h3>This is a blank slate</h3>
<p>Use it to provide information when no dynamic content exists.</p>
<img src="https://ghicons.github.com/assets/images/light/Pull%20Request.png" alt="" class="mb-3">
<h3 class="mb-1">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>
```
##### No background
##### Add border
Removes the `background-color` and `border`.
To add a border, wrap the blankstate component with the [Box component](/css/components/box).
```html
<div class="blankslate blankslate-clean-background">
<h3>This is a blank slate</h3>
<p>Use it to provide information when no dynamic content exists.</p>
<div class="Box">
<div class="blankslate">
<img src="https://ghicons.github.com/assets/images/light/Pull%20Request.png" alt="" class="mb-3">
<h3 class="mb-1">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>
</div>
```
##### Capped
Removes the `border-radius` on the top corners.
```html
<div class="Box rounded-top-0">
<div class="blankslate">
<img src="https://ghicons.github.com/assets/images/light/Pull%20Request.png" alt="" class="mb-3">
<h3 class="mb-1">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>
</div>
```

21
src/blankslate/blankslate.scss
View File

@ -3,10 +3,6 @@
position: relative;
padding: $spacer-5;
text-align: center;
background-color: $gray-000;
border: 1px solid $gray-200;
border-radius: 3px;
box-shadow: inset 0 0 10px rgba($black, 0.05);
code {
padding: 2px 5px 3px;
@ -15,6 +11,11 @@
border: 1px solid $border-gray-light;
border-radius: 3px;
}
img {
width: 56px;
height: 56px;
}
}
.blankslate-icon {
@ -38,10 +39,17 @@
}
// was .large-format
// QUESTION: should we deprecate this?
.blankslate-large {
img {
width: 80px;
height: 80px;
}
h3 {
margin: $spacer-3 0;
font-size: $h3-size;
//font-size: $h3-size; // This doesn't actually make the text larger. Should this be $h2-size?
font-size: $h2-size;
}
p {
@ -50,8 +58,7 @@
}
// was .clean-background
// TO DO: deprecate this and use utility instead
.blankslate-clean-background {
background: none;
border: 0;
box-shadow: none;
}