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

removed border from default

Browse Source
This commit is contained in:
Ash Guillaume 2019-08-09 14:33:27 -07:00
parent a9fb40031d
commit d4e4dff44d
2 changed files with 21 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -55,20 +55,6 @@ Narrows the blankslate container to not occupy the entire available width.
</div>
```
##### Capped
Removes the `border-radius` on the top corners.
```html
<div class="blankslate blankslate-capped">
<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>
```
##### Spacious
Significantly increases the vertical padding.
@ -97,28 +83,34 @@ Increases the size of the text in the blankslate
</div>
```
##### No border
##### Add border
To remove the border, use the [border utliity](/css/utilities/borders) `.border-0`.
To add a border, wrap the blankstate component with the [Box component](/css/components/box).
```html
<div class="blankslate border-0">
<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 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>
```
Due to a design refresh of the blank slate component, we will be deprecating the use of `.blankslate-clean-background` which removes the `background-color` and `border`.
##### Capped
Removes the `border-radius` on the top corners.
```html
<div class="blankslate blankslate-clean-background">
<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 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>
```

2
src/blankslate/blankslate.scss
View File

@ -3,8 +3,6 @@
position: relative;
padding: $spacer-5;
text-align: center;
border: 1px solid $gray-200;
border-radius: 3px;
code {
padding: 2px 5px 3px;