primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-11-29 14:14:26 +03:00
Code Issues Projects Releases Wiki Activity

specify the divider flowrow variants

Browse Source
This commit is contained in:
Manuel Puyol 2021-05-26 10:33:29 -05:00
parent c2d4d73390
commit 3955254262
2 changed files with 16 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
docs/content/components/layout.md
View File

@ -41,7 +41,10 @@ of the sidebar position.
### Dividers
Use `Layout--divided` in conjuction with a `Layout-divider` to show a divider between the main content and the sidebar.
Add `Layout-divider--shallow` to change the divider on `sm` to be filled and 8px tall.
Flowing as row:
- default: shows a `1px` line between main and sidebar
- `Layout-divider--flowRow-shallow`: shows a filled `8px` divider.
- `Layout-divider--flowRow-hidden`: hides the divider
```html live
@ -57,8 +60,13 @@ Add `Layout-divider--shallow` to change the divider on `sm` to be filled and 8px
</div>
<div class="Layout Layout--divided">
<div class="Layout-main border">main content</div>
<div class="Layout-divider Layout-divider--shallow"></div>
<div class="Layout-sidebar border">shallow divider</div>
<div class="Layout-divider Layout-divider--flowRow-shallow"></div>
<div class="Layout-sidebar border">flowRow shallow divider</div>
</div>
<div class="Layout Layout--divided">
<div class="Layout-main border">main content</div>
<div class="Layout-divider Layout-divider--flowRow-hidden"></div>
<div class="Layout-sidebar border">flowRow hidden divider</div>
</div>
```

6
src/layout/mixins.scss
View File

@ -48,7 +48,11 @@
.Layout-divider {
height: 1px;
&.Layout-divider--shallow {
&.Layout-divider--flowRow-hidden {
display: none;
}
&.Layout-divider--flowRow-shallow {
height: 8px;
margin-right: 0;
background: var(--color-bg-canvas-inset);