primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2025-01-05 21:22:57 +03:00
Code Issues Projects Releases Wiki Activity

updated blankslate component

Browse Source
This commit is contained in:
Ash Guillaume 2019-08-08 15:38:30 -07:00
parent 0600827cd8
commit cd53d679df
2 changed files with 47 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
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="Pull requests" 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 your changes 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,8 +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>
<img src="https://ghicons.github.com/assets/images/light/Pull%20Request.png" alt="Pull requests" 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 your changes 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>
```
@ -55,8 +61,11 @@ 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="Pull requests" 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 your changes 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 +75,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="Pull requests" 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 your changes 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 +89,24 @@ 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="Pull requests" 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 your changes 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
##### No border
Removes the `background-color` and `border`.
To remove the border, use the [border utliity](/css/utilities/borders) `.border-0`.
```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="blankslate border-0">
<img src="https://ghicons.github.com/assets/images/light/Pull%20Request.png" alt="Pull requests" 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 your changes 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>
```

19
src/blankslate/blankslate.scss
View File

@ -3,10 +3,8 @@
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 +13,11 @@
border: 1px solid $border-gray-light;
border-radius: 3px;
}
img {
width: 56px;
height: 56px;
}
}
.blankslate-icon {
@ -38,10 +41,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 +60,7 @@
}
// was .clean-background
// TO DO: deprecate this and use utility instead
.blankslate-clean-background {
background: none;
border: 0;
box-shadow: none;
}