primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-09-20 13:17:29 +03:00
Code Issues Projects Releases Wiki Activity

Add Layout--divided-shallow class

Browse Source
This commit is contained in:
Manuel Puyol 2021-05-25 15:18:50 -05:00
parent e02694d1ba
commit f0fa3df553
2 changed files with 24 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -41,6 +41,8 @@ of the sidebar position.
### Dividers
Add `Layout--divided` to the `Layout` to show the dividers.
Add `Layout--divided-shallow` to change the divider on `sm` to be filled and 8px tall.
```html live
<div class="Layout Layout--divided">
@ -53,6 +55,11 @@ Add `Layout--divided` to the `Layout` to show the dividers.
<div class="Layout-divider"></div>
<div class="Layout-sidebar border">divider hidden</div>
</div>
<div class="Layout Layout--divided Layout--divided-shallow ">
<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>
```
### Centered content

17
src/layout/layout.scss
View File

@ -139,6 +139,23 @@
// Sidebar divider
&.Layout--divided {
&.Layout--divided-shallow {
@media (max-width: calc(#{$width-sm} - 1px)) {
--Layout-gutter: 0;
}
.Layout-divider {
@media (max-width: calc(#{$width-sm} - 1px)) {
margin-right: 0;
height: 8px;
background: var(--color-bg-canvas-inset);
border-width: $border-width 0;
border-color: var(--color-border-primary);
border-style: solid;
}
}
}
.Layout-divider {
display: block;
grid-column: 2;