primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-12-26 15:43:59 +03:00
Code Issues Projects Releases Wiki Activity

Improve dividers on mobile

Browse Source
This commit is contained in:
Manuel Puyol 2021-05-25 15:27:17 -05:00
parent f0fa3df553
commit d40018a715
2 changed files with 8 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -40,8 +40,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.
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.
```html live
@ -55,7 +55,7 @@ Add `Layout--divided-shallow` to change the divider on `sm` to be filled and 8px
<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 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>

10
src/layout/layout.scss
View File

@ -139,13 +139,13 @@
// Sidebar divider
&.Layout--divided {
&.Layout--divided-shallow {
@media (max-width: calc(#{$width-sm} - 1px)) {
--Layout-gutter: 0;
}
@media (max-width: calc(#{$width-sm} - 1px)) {
--Layout-gutter: 0;
.Layout-divider {
@media (max-width: calc(#{$width-sm} - 1px)) {
height: 1px;
&.Layout-divider--shallow {
margin-right: 0;
height: 8px;
background: var(--color-bg-canvas-inset);