109 lines
1.5 KiB
SCSS
109 lines
1.5 KiB
SCSS
@mixin section-gutter($property, $multiplier: 1) {
|
|
#{$property}: 12px * $multiplier;
|
|
}
|
|
|
|
/*
|
|
* H3 section list:
|
|
* The body that is isotoped.
|
|
*/
|
|
|
|
.h3-section-list {
|
|
& {
|
|
@include section-gutter(margin-left, $multiplier: -1);
|
|
@include section-gutter(margin-right, $multiplier: -1);
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
// Clearfix
|
|
&::after {
|
|
content: '';
|
|
display: table;
|
|
clear: both;
|
|
zoom: 1;
|
|
}
|
|
|
|
// Each section
|
|
& > .h3-section {
|
|
@include section-gutter(padding);
|
|
float: left;
|
|
width: 100%;
|
|
}
|
|
|
|
@media (min-width: 769px) {
|
|
& > .h3-section {
|
|
padding-top: 0;
|
|
padding-bottom: 16px;
|
|
}
|
|
}
|
|
}
|
|
|
|
/*
|
|
* Two column (default)
|
|
*/
|
|
|
|
.h3-section-list,
|
|
.h3-section-list.-two-column {
|
|
@media (min-width: 769px) {
|
|
& > .h3-section {
|
|
width: 50%;
|
|
}
|
|
}
|
|
}
|
|
|
|
/*
|
|
* One column
|
|
*/
|
|
|
|
.h3-section-list.-one-column {
|
|
& > .h3-section {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
/*
|
|
* Three column
|
|
*/
|
|
|
|
.h3-section-list.-three-column {
|
|
@media (min-width: 769px) {
|
|
& > .h3-section {
|
|
width: 50%;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 961px) {
|
|
& > .h3-section {
|
|
width: 33.33%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.h3-section-list.-wide-second {
|
|
& > .h3-section:nth-child(2) {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
/*
|
|
* Three column, left reference
|
|
*/
|
|
|
|
.h3-section-list.-left-reference {
|
|
@media (min-width: 769px) {
|
|
& > .h3-section {
|
|
width: 50%;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 961px) {
|
|
& > .h3-section {
|
|
width: 66.67%;
|
|
}
|
|
|
|
& > .h3-section:first-child {
|
|
width: 33.33%;
|
|
}
|
|
}
|
|
}
|