You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
sqm-dashboards/app/assets/stylesheets/spacing.scss

56 lines
1.3 KiB

@import 'sizes';
.pv80 {
padding-top: 80px;
padding-bottom: 80px;
}
.ph120 {
padding-left: 120px;
padding-right: 120px;
}
$whitespace-keys: (p padding, m margin, a '', v -top -bottom, h -left -right, t -top, r -right, b -bottom, l -left);
@function expand_whitespace_key($key) {
@each $pair in $whitespace-keys {
$short: nth($pair, 1);
$long: nth($pair, 2);
// v and h need to pass in 2 parameters
@if (length($pair) == 3) {
$long: (nth($pair, 2) nth($pair, 3));
}
@if $short == $key {
@return $long;
}
}
@warn "Couldn't export #{$key}";
@return $key;
}
$types: (p, m);
$locations: (a, v, h, t, r, b, l);
$t-shirt-sizes: (n, xs, s, m, l, xl, xxl);
@mixin whitespace($units: ()) {
$units: join(0, $units);
@for $i from 1 through length($units) {
$t-shirt-size: nth($t-shirt-sizes, $i);
$size: nth($units, $i);
@each $location in $locations {
@each $type in $types {
.#{$type}#{$location}#{$t-shirt-size} {
@each $whitespace-location in expand_whitespace_key($location) {
#{expand_whitespace_key($type)}#{$whitespace-location}: $size !important;
}
}
}
}
}
}
@include whitespace(($xsmall, $small, $medium, $large, $xlarge, $xxlarge));