mirror of
https://github.com/primer/css.git
synced 2024-09-20 05:07:11 +03:00
Add Layout--divided-shallow class
This commit is contained in:
parent
e02694d1ba
commit
f0fa3df553
@ -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
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user