mirror of
https://github.com/danog/sass-site.git
synced 2024-12-16 03:17:15 +01:00
126 lines
2.6 KiB
SCSS
126 lines
2.6 KiB
SCSS
|
.sl-l-grid {
|
||
|
|
||
|
&,
|
||
|
&--flex-columns > .sl-l-grid__column { display: flex; }
|
||
|
|
||
|
flex-wrap: wrap;
|
||
|
margin: 0;
|
||
|
padding: 0;
|
||
|
list-style: none;
|
||
|
|
||
|
&__column { flex: 1; }
|
||
|
}
|
||
|
|
||
|
@each $breakpoint,
|
||
|
$size in $sl-breakpoints {
|
||
|
$prefix: if(($breakpoint == 'none'), '', '#{$breakpoint}-');
|
||
|
|
||
|
@include sl-breakpoint-set($breakpoint,
|
||
|
$size) {
|
||
|
|
||
|
.sl-l-#{$prefix}grid {
|
||
|
|
||
|
&--top { align-items: flex-start; }
|
||
|
|
||
|
&--center { align-items: center; }
|
||
|
|
||
|
&--bottom { align-items: flex-end; }
|
||
|
|
||
|
&--stretch { align-items: stretch; }
|
||
|
|
||
|
&--baseline { align-items: baseline; }
|
||
|
|
||
|
&--justify {
|
||
|
|
||
|
&-left { justify-content: flex-start; }
|
||
|
|
||
|
&-center { justify-content: center; }
|
||
|
|
||
|
&-right { justify-content: flex-end; }
|
||
|
|
||
|
&-space {
|
||
|
|
||
|
&-between { justify-content: space-between; }
|
||
|
|
||
|
&-around { justify-content: space-around; }
|
||
|
|
||
|
&-evenly { justify-content: space-evenly; }
|
||
|
}
|
||
|
}
|
||
|
|
||
|
&--fit > .sl-l-grid__column { flex: 1; }
|
||
|
|
||
|
&--full > .sl-l-grid__column { flex: 0 0 100%; }
|
||
|
|
||
|
@for $i from 2 through 12 {
|
||
|
|
||
|
&--divide-by-#{$i} > .sl-l-grid__column { flex: 0 0 (100 / $i) * 1%; }
|
||
|
}
|
||
|
|
||
|
&__column {
|
||
|
|
||
|
&--top { align-self: flex-start !important; }
|
||
|
|
||
|
&--center { align-self: center !important; }
|
||
|
|
||
|
&--bottom { align-self: flex-end !important; }
|
||
|
|
||
|
&--baseline { align-self: baseline !important; }
|
||
|
|
||
|
&--stretch { align-self: stretch !important; }
|
||
|
|
||
|
&--auto-size { flex: none !important; }
|
||
|
|
||
|
@for $i from 1 through 11 {
|
||
|
|
||
|
&--#{$i}-of-12 { width: (100% / 12) * $i !important; }
|
||
|
}
|
||
|
|
||
|
&--full { width: 100% !important; }
|
||
|
}
|
||
|
|
||
|
&--gutters {
|
||
|
margin: {
|
||
|
right: -(sl-px-to-rem(16px));
|
||
|
left: -(sl-px-to-rem(16px));
|
||
|
};
|
||
|
|
||
|
> .sl-l-grid__column {
|
||
|
padding: {
|
||
|
right: sl-px-to-rem(16px);
|
||
|
left: sl-px-to-rem(16px);
|
||
|
};
|
||
|
}
|
||
|
|
||
|
&-large {
|
||
|
margin: {
|
||
|
right: -(sl-px-to-rem(32px));
|
||
|
left: -(sl-px-to-rem(32px));
|
||
|
};
|
||
|
|
||
|
> .sl-l-grid__column {
|
||
|
padding: {
|
||
|
right: sl-px-to-rem(32px);
|
||
|
left: sl-px-to-rem(32px);
|
||
|
};
|
||
|
}
|
||
|
}
|
||
|
|
||
|
&-small {
|
||
|
margin: {
|
||
|
right: -(sl-px-to-rem(8px));
|
||
|
left: -(sl-px-to-rem(8px));
|
||
|
};
|
||
|
|
||
|
> .sl-l-grid__column {
|
||
|
padding: {
|
||
|
right: sl-px-to-rem(8px);
|
||
|
left: sl-px-to-rem(8px);
|
||
|
};
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|