Permalink
Fetching contributors…
Cannot retrieve contributors at this time
74 lines (65 sloc) 2.83 KB
// @page Pattern Library/Utilities
// @name Spacing
//
// @description
// Allow control of spacing around an element. You can set margin or padding for an element without creating an extra class.
// An example of this `.us-margin-top`, `.us-margin-top--small`, `.us-margin-top--large` where `margin` can be replaced by `padding` and `top` can be replaced by `bottom`, `left` or `right`.
// Default space for margin and padding is 1em, `small` modifier uses .5em and `large` modifier uses 1.5em.
//
// @state .us-margin-top - Use default top margin (1em).
// @state .us-margin-top--small - Use small top margin (.5em).
// @state .us-margin-top--large - Use large top margin (1.5em).
// @state .us-margin-bottom - Use default bottom margin (1em).
// @state .us-margin-bottom--small - Use small bottom margin (.5em).
// @state .us-margin-bottom--large - Use large bottom margin (1.5em).
// @state .us-margin-left - Use default left margin (1em).
// @state .us-margin-left--small - Use small left margin (.5em).
// @state .us-margin-left--large - Use large left margin (1.5em).
// @state .us-margin-right - Use default right margin (1em).
// @state .us-margin-right--small - Use small right margin (.5em).
// @state .us-margin-right--large - Use large right margin (1.5em).
// @state .us-padding-top - Use default top padding (1em).
// @state .us-padding-top--small - Use small top padding (.5em).
// @state .us-padding-top--large - Use large top padding (1.5em).
// @state .us-padding-bottom - Use default bottom padding (1em).
// @state .us-padding-bottom--small - Use small bottom padding (.5em).
// @state .us-padding-bottom--large - Use large bottom padding (1.5em).
// @state .us-padding-left - Use default left padding (1em).
// @state .us-padding-left--small - Use small left padding (.5em).
// @state .us-padding-left--large - Use large left padding (1.5em).
// @state .us-padding-right - Use default right padding (1em).
// @state .us-padding-right--small - Use small right padding (.5em).
// @state .us-padding-right--large - Use large right padding (1.5em).
// @state .us-reset--padding - Reset padding to 0.
// @state .us-reset--margin - Reset margin to 0.
// @state .us-reset - Reset padding and margin to 0.
//
// @markup
// <div class='class-goes-here {$modifiers}'>Sample content</div>
$positions: "top", "right", "bottom", "left";
$spacing: "small" .5em, "large" 1.5em;
.us-reset--padding {
padding: 0;
}
.us-reset--margin {
margin: 0;
}
.us-reset {
@extend %reset-box-model;
}
@each $position in $positions {
.us-margin-#{$position} {
margin-#{$position}: 1em;
}
.us-padding-#{$position} {
padding-#{$position}: 1em;
}
@each $space in $spacing {
.us-margin-#{$position}--#{nth($space,1)} {
margin-#{$position}: nth($space,2);
}
.us-padding-#{$position}--#{nth($space,1)} {
padding-#{$position}: nth($space,2);
}
}
}