147 lines
2.0 KiB
SCSS
147 lines
2.0 KiB
SCSS
/*
|
|
* 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;
|
|
}
|
|
}
|
|
}
|
|
|
|
/*
|
|
* Two column (default)
|
|
*/
|
|
|
|
.h3-section-list,
|
|
.h3-section-list.-two-column {
|
|
@media (min-width: 769px) {
|
|
& > .h3-section {
|
|
width: 50%;
|
|
}
|
|
}
|
|
}
|
|
|
|
/*
|
|
* One column
|
|
*/
|
|
|
|
.h3-section-list.-versus,
|
|
.h3-section-list.-one-column {
|
|
& > .h3-section {
|
|
width: 100%;
|
|
}
|
|
|
|
& > .h3-section + .h3-section {
|
|
margin-top: 16px;
|
|
}
|
|
}
|
|
|
|
/*
|
|
* Three column
|
|
*/
|
|
|
|
.h3-section-list.-three-column {
|
|
@media (min-width: 769px) {
|
|
& > .h3-section {
|
|
width: 50%;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 961px) {
|
|
& > .h3-section {
|
|
width: 33.33%;
|
|
}
|
|
}
|
|
}
|
|
|
|
/*
|
|
* 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%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.h3-section-list.-versus {
|
|
& > .h3-section {
|
|
display: flex;
|
|
}
|
|
|
|
& > .h3-section + .h3-section {
|
|
margin-top: 0;
|
|
}
|
|
|
|
& > .h3-section > .body {
|
|
display: flex;
|
|
flex: 0 0 66.67%;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
& > .h3-section > .body > pre {
|
|
flex: 0 0 50%;
|
|
background: white;
|
|
}
|
|
|
|
& > .h3-section > .body > pre + pre {
|
|
background: #faf7ff;
|
|
}
|
|
|
|
& > .h3-section > .body > pre ~ p {
|
|
flex: 0 0 100%;
|
|
}
|
|
|
|
& > .h3-section > h3 {
|
|
@include font-size(0);
|
|
flex: 0 0 16.667%;
|
|
padding-right: 16px;
|
|
text-align: right;
|
|
}
|
|
|
|
& > .h3-section > h3::after {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
h2.-versus {
|
|
text-align: center;
|
|
}
|