133 lines
1.9 KiB
SCSS
133 lines
1.9 KiB
SCSS
@import 'queries';
|
|
@import 'vars';
|
|
|
|
/////////////////////////////
|
|
// STRUCTURE
|
|
/////////////////////////////
|
|
|
|
@mixin default-template-width {
|
|
padding-left: $base;
|
|
padding-right: $base;
|
|
margin-left: base(6);
|
|
width: calc(100% - #{base(6)});
|
|
|
|
.wrap {
|
|
max-width: $content-width;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
|
|
/////////////////////////////
|
|
// PADDING
|
|
/////////////////////////////
|
|
|
|
@mixin pad {
|
|
padding: $base;
|
|
|
|
@include mid-break {
|
|
padding: base(.75);
|
|
}
|
|
|
|
@include small-break {
|
|
padding: base(.5);
|
|
}
|
|
}
|
|
|
|
@mixin pad-x2 {
|
|
padding: base(2) base(2) base(1);
|
|
|
|
@include mid-break {
|
|
padding: base(1) base(1) 0;
|
|
}
|
|
}
|
|
|
|
/////////////////////////////
|
|
// VERTICAL PADDING
|
|
/////////////////////////////
|
|
|
|
@mixin pad-vert {
|
|
padding-top: $base;
|
|
|
|
@include mid-break {
|
|
padding-top: base(.5);
|
|
}
|
|
}
|
|
|
|
@mixin pad-vert-x2 {
|
|
padding-top: base(2);
|
|
padding-bottom: $base;
|
|
|
|
@include mid-break {
|
|
padding-top: $base;
|
|
padding-bottom: 0;
|
|
}
|
|
}
|
|
|
|
@mixin pad-vert-x3 {
|
|
padding-top: base(3);
|
|
padding-bottom: base(2);
|
|
|
|
@include mid-break {
|
|
padding-top: base(2);
|
|
padding-bottom: $base;
|
|
}
|
|
}
|
|
|
|
@mixin pad-vert-x4 {
|
|
padding-top: base(4);
|
|
padding-bottom: base(3);
|
|
|
|
@include mid-break {
|
|
padding-top: base(2);
|
|
padding-bottom: $base;
|
|
}
|
|
}
|
|
|
|
/////////////////////////////
|
|
// MARGIN
|
|
/////////////////////////////
|
|
|
|
@mixin m {
|
|
margin-bottom: $base;
|
|
|
|
@include small-break {
|
|
margin-bottom: base(.75);
|
|
}
|
|
}
|
|
|
|
@mixin m-x2 {
|
|
margin-bottom: base(2);
|
|
|
|
@include mid-break {
|
|
margin-bottom: $base;
|
|
}
|
|
|
|
@include small-break {
|
|
margin-bottom: base(.75);
|
|
}
|
|
}
|
|
|
|
@mixin m-x3 {
|
|
margin-bottom: base(3);
|
|
|
|
@include mid-break {
|
|
margin-bottom: base(2);
|
|
}
|
|
|
|
@include small-break {
|
|
margin-bottom: base(1);
|
|
}
|
|
}
|
|
|
|
@mixin m-x4 {
|
|
margin-bottom: base(4);
|
|
|
|
@include mid-break {
|
|
margin-bottom: base(3);
|
|
}
|
|
|
|
@include small-break {
|
|
margin-bottom: base(2);
|
|
}
|
|
}
|