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

extract mixins to avoid repetition in flowRow classes

Browse Source
This commit is contained in:
Manuel Puyol 2021-05-25 15:38:41 -05:00
parent d40018a715
commit 25930ec8ef
3 changed files with 39 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/layout/index.scss
View File

@ -1,4 +1,6 @@
@import "../support/index.scss";
@import "./mixins.scss";
@import "./container.scss";
@import "./grid.scss";
@import "./grid-offset.scss";

47
src/layout/layout.scss
View File

@ -6,42 +6,18 @@
--Layout-gutter: 16px;
@media (max-width: calc(#{$width-sm} - 1px)) {
grid-auto-flow: row;
grid-template-columns: 1fr !important;
.Layout-sidebar,
.Layout-divider,
.Layout-main {
width: 100% !important;
grid-column: 1 !important;
}
@include flow-as-row;
}
&.Layout--flowRow-until-md {
@media (max-width: calc(#{$width-md} - 1px)) {
grid-auto-flow: row;
grid-template-columns: 1fr !important;
.Layout-sidebar,
.Layout-divider,
.Layout-main {
width: 100% !important;
grid-column: 1 !important;
}
@include flow-as-row;
}
}
&.Layout--flowRow-until-lg {
@media (max-width: calc(#{$width-lg} - 1px)) {
grid-auto-flow: row;
grid-template-columns: 1fr !important;
.Layout-sidebar,
.Layout-divider,
.Layout-main {
width: 100% !important;
grid-column: 1 !important;
}
@include flow-as-row;
}
}
@ -139,23 +115,6 @@
// Sidebar divider
&.Layout--divided {
@media (max-width: calc(#{$width-sm} - 1px)) {
--Layout-gutter: 0;
.Layout-divider {
height: 1px;
&.Layout-divider--shallow {
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;

34
src/layout/mixins.scss Normal file
View File

@ -0,0 +1,34 @@
// Layout mixins
@mixin flow-as-row {
grid-auto-flow: row;
grid-template-columns: 1fr !important;
.Layout-sidebar,
.Layout-divider,
.Layout-main {
width: 100% !important;
grid-column: 1 !important;
}
&.Layout--divided {
@include flow-as-row-divider
}
}
@mixin flow-as-row-divider {
--Layout-gutter: 0;
.Layout-divider {
height: 1px;
&.Layout-divider--shallow {
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;
}
}
}