mirror of
https://github.com/Ocelot-Social-Community/Ocelot-Social.git
synced 2026-04-06 01:25:38 +00:00
55 lines
1.1 KiB
SCSS
55 lines
1.1 KiB
SCSS
/* VUE DESIGN SYSTEM SPACING HELPERS
|
|
--------------------------------------------- */
|
|
|
|
$spacing-ratio: 1.618;
|
|
|
|
/*
|
|
INSET-SPACE: For interface containers.
|
|
INSET-SQUISH-SPACE: For buttons, form elements, cells.
|
|
STACK-SPACE: For vertically stacked content.
|
|
INLINE-SPACE: For things displayed inline.
|
|
*/
|
|
|
|
// Create inset-space
|
|
//
|
|
// @param {Number} inset-space to set
|
|
@mixin inset-space($value) {
|
|
padding: $value;
|
|
}
|
|
|
|
// Create inset-squish-space
|
|
//
|
|
// @param {Number} inset-squish-space to set
|
|
@mixin inset-squish-space($value) {
|
|
padding: round($value / $spacing-ratio) $value;
|
|
}
|
|
|
|
// Create stack-space
|
|
//
|
|
// @param {bottom} margin-bottom to set
|
|
// @param {top} margin-top to set
|
|
@mixin stack-space($bottom, $top: 0) {
|
|
@if $bottom != 0 {
|
|
margin-bottom: $bottom;
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
@if $top != 0 {
|
|
margin-top: $top;
|
|
&:first-child {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Create inline-space
|
|
//
|
|
// @param {Number} inline-space to set
|
|
@mixin inline-space($value) {
|
|
margin-right: $value;
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
}
|