Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Margin helper
//-- Helpers ----------------------------------------------------------
@function push-get-size($key) {
$sizes: map-get($push-config, sizes);
@return map-get($sizes, $key);
}
//-- Config -----------------------------------------------------------
$push-spacing: util-rhythm(1);
$push-key-half: "-_5x"; // 0.5 | half
$push-key-double: "-2x";
$push-key-triple: "-3x";
$push-config: (
modifiers: top bottom left right,
variations: null $push-key-half $push-key-double $push-key-triple,
sizes: (
null: $push-spacing,
$push-key-half: $push-spacing*0.5,
$push-key-double: $push-spacing*2,
$push-key-triple: $push-spacing*3
)
);
//-- Main -------------------------------------------------------------
@each $variation in map-get($push-config, variations) {
$size: push-get-size($variation);
$size-in-px: rem-to-px($size);
$modifiers: map-get($push-config, modifiers);
%push#{$variation},
.push#{$variation} {
margin: $size-in-px!important;
margin: $size!important;
}
%push#{$variation}--sides,
.push#{$variation}--sides {
margin-left: $size-in-px!important;
margin-left: $size!important;
margin-right: $size-in-px!important;
margin-right: $size!important;
}
%push#{$variation}--ends,
.push#{$variation}--ends {
margin-top: $size-in-px!important;
margin-top: $size!important;
margin-bottom: $size-in-px!important;
margin-bottom: $size!important;
}
@each $modifier in $modifiers {
%push#{$variation}--#{$modifier},
.push#{$variation}--#{$modifier} {
margin-#{$modifier}: $size-in-px!important;
margin-#{$modifier}: $size!important;
}
}
}
// Remove margins -----------------------------------------------------
.flush { margin: 0!important; }
.flush--top { margin-top: 0!important; }
.flush--right { margin-right: 0!important; }
.flush--bottom { margin-bottom:0!important; }
.flush--left { margin-left: 0!important; }
.flush--ends { margin-top: 0!important; margin-bottom:0!important; }
.flush--sides { margin-right: 0!important; margin-left: 0!important; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.