mirror of
https://github.com/netzbegruenung/podcast.netzbegruenung.de.git
synced 2024-04-28 17:14:52 +02:00
90 lines
3.2 KiB
SCSS
90 lines
3.2 KiB
SCSS
// Define spacing (with fallbacks).
|
|
//
|
|
// @param string $type
|
|
// The type of spacing: margin, padding, margin-top, etc.
|
|
// @param number|list|string $spacing
|
|
// Multiple of $base-line-height to be used or px value to be converted.
|
|
// Can be a SASS list using the same parameters as the CSS margin property:
|
|
// i.e. top right bottom left, 1 0 2 0.
|
|
// Can also be the string "auto" when used as margin.
|
|
// @param number|string $context
|
|
// (optional) Only used if em is the $base-unit. The value of the elements/parents
|
|
// font-size if it differs from $base-font-size. Specified as a t-shirt size or
|
|
// value in px.
|
|
@mixin spacing($property, $spacing, $context: $base-font-size) {
|
|
$allowed-types: "multiplier", "px", "list";
|
|
$type: typey-validator($spacing, $allowed-types);
|
|
|
|
$px-fallback-list: ();
|
|
$converted-list: ();
|
|
|
|
@each $x in $spacing {
|
|
@if $base-unit == rem {
|
|
$allowed-types: "multiplier", "px", "auto";
|
|
$type: typey-validator($x, $allowed-types);
|
|
@if $type == "multiplier" {
|
|
$spacing: $x * $base-line-height;
|
|
$px-fallback-list: join($px-fallback-list, $spacing, $separator: space);
|
|
}
|
|
@if $type == "px" {
|
|
$px-fallback-list: join($px-fallback-list, $x, $separator: space);
|
|
}
|
|
@if $type == "auto" {
|
|
$px-fallback-list: join($px-fallback-list, $x, $separator: space);
|
|
}
|
|
}
|
|
$spacing: spacing($x, $context);
|
|
$converted-list: join($converted-list, $spacing, $separator: space);
|
|
}
|
|
|
|
@if $base-unit == rem {
|
|
@if $rem-fallback == true {
|
|
#{$property}: $px-fallback-list;
|
|
}
|
|
}
|
|
#{$property}: $converted-list;
|
|
}
|
|
|
|
// Wrapper mixins for various spacing properties.
|
|
// These can be used to provide easily sized spacing in the base unit.
|
|
//
|
|
// @param number|list|string $x
|
|
// Multiple of $base-line-height to be used or px value to be converted.
|
|
// Can be a SASS list using the same parameters as the CSS margin property:
|
|
// i.e. top right bottom left, 1 0 2 0.
|
|
// Can also be the string "auto" when used as margin.
|
|
// @param number|string $context
|
|
// (optional) Only used if em is the $base-unit. The value of the elements/parents
|
|
// font-size if it differs from $base-font-size. Specified as a t-shirt size or
|
|
// value in px.
|
|
@mixin margin($x, $context: $base-font-size) {
|
|
@include spacing(margin, $x, $context);
|
|
}
|
|
@mixin margin-top($x, $context: $base-font-size) {
|
|
@include spacing(margin-top, $x, $context);
|
|
}
|
|
@mixin margin-bottom($x, $context: $base-font-size) {
|
|
@include spacing(margin-bottom, $x, $context);
|
|
}
|
|
@mixin margin-left($x, $context: $base-font-size) {
|
|
@include spacing(margin-left, $x, $context);
|
|
}
|
|
@mixin margin-right($x, $context: $base-font-size) {
|
|
@include spacing(margin-right, $x, $context);
|
|
}
|
|
@mixin padding($x, $context: $base-font-size) {
|
|
@include spacing(padding, $x, $context);
|
|
}
|
|
@mixin padding-top($x, $context: $base-font-size) {
|
|
@include spacing(padding-top, $x, $context);
|
|
}
|
|
@mixin padding-bottom($x, $context: $base-font-size) {
|
|
@include spacing(padding-bottom, $x, $context);
|
|
}
|
|
@mixin padding-left($x, $context: $base-font-size) {
|
|
@include spacing(padding-left, $x, $context);
|
|
}
|
|
@mixin padding-right($x, $context: $base-font-size) {
|
|
@include spacing(padding-right, $x, $context);
|
|
}
|