mirror of https://github.com/Wilfred/difftastic/
58 lines
1.1 KiB
SCSS
58 lines
1.1 KiB
SCSS
// from https://scotch.io/tutorials/getting-started-with-sass
|
|
|
|
// ----
|
|
// Sass (v3.4.4)
|
|
// Compass (v1.0.1)
|
|
// ----
|
|
|
|
@mixin renderGridStyles($settings) {
|
|
.container {
|
|
padding-right: map-get($settings, "margin");
|
|
padding-left: map-get($settings, "margin");
|
|
margin-right: auto;
|
|
margin-left: auto;
|
|
max-width: map-get($settings, "maxWidth");
|
|
}
|
|
|
|
.row {
|
|
margin-right: map-get($settings, "margin") * -1;
|
|
margin-left: map-get($settings, "margin") * -1;
|
|
}
|
|
|
|
$breakpoints: map-get($settings, "breakpoints");
|
|
|
|
@each $key, $breakpoint in $breakpoints {
|
|
@include media($breakpoint) {
|
|
@include renderGrid($key, $settings);
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin renderGrid($key, $settings) {
|
|
$i: 1;
|
|
|
|
@while $i <= map-get($settings, "columns") {
|
|
.col-#{$key}-#{$i} {
|
|
float: left;
|
|
width: 100% * $i / map-get($settings, "columns");
|
|
}
|
|
|
|
$i: $i + 1;
|
|
}
|
|
}
|
|
|
|
@mixin media($queryString) {
|
|
@media #{$queryString} {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@include renderGridStyles($settings);
|
|
|
|
p {
|
|
padding: 20px;
|
|
color: white;
|
|
background: #9b59b6;
|
|
margin: 20px;
|
|
}
|