69 lines
1.9 KiB
SCSS
69 lines
1.9 KiB
SCSS
@charset "UTF-8";
|
|
|
|
/// Builds directional properties by parsing CSS shorthand values. For example,
|
|
/// a value of `10px null` will output top and bottom directional properties,
|
|
/// but the `null` skips left and right from being output.
|
|
///
|
|
/// @argument {string} $property
|
|
/// Base property.
|
|
///
|
|
/// @argument {string} $suffix
|
|
/// Suffix to append. Use `null` to omit.
|
|
///
|
|
/// @argument {list} $values
|
|
/// List of values to set for the property.
|
|
///
|
|
/// @example scss
|
|
/// .element {
|
|
/// @include _directional-property(border, width, null 5px);
|
|
/// }
|
|
///
|
|
/// // CSS Output
|
|
/// .element {
|
|
/// border-right-width: 5px;
|
|
/// border-left-width: 5px;
|
|
/// }
|
|
///
|
|
/// @require {function} _compact-shorthand
|
|
///
|
|
/// @require {function} _contains-falsy
|
|
///
|
|
/// @access private
|
|
|
|
@mixin _directional-property(
|
|
$property,
|
|
$suffix,
|
|
$values
|
|
) {
|
|
$top: $property + "-top" + if($suffix, "-#{$suffix}", "");
|
|
$bottom: $property + "-bottom" + if($suffix, "-#{$suffix}", "");
|
|
$left: $property + "-left" + if($suffix, "-#{$suffix}", "");
|
|
$right: $property + "-right" + if($suffix, "-#{$suffix}", "");
|
|
$all: $property + if($suffix, "-#{$suffix}", "");
|
|
|
|
$values: _compact-shorthand($values);
|
|
|
|
@if _contains-falsy($values) {
|
|
@if nth($values, 1) { #{$top}: nth($values, 1); }
|
|
|
|
@if length($values) == 1 {
|
|
@if nth($values, 1) { #{$right}: nth($values, 1); }
|
|
} @else {
|
|
@if nth($values, 2) { #{$right}: nth($values, 2); }
|
|
}
|
|
|
|
@if length($values) == 2 {
|
|
@if nth($values, 1) { #{$bottom}: nth($values, 1); }
|
|
@if nth($values, 2) { #{$left}: nth($values, 2); }
|
|
} @else if length($values) == 3 {
|
|
@if nth($values, 3) { #{$bottom}: nth($values, 3); }
|
|
@if nth($values, 2) { #{$left}: nth($values, 2); }
|
|
} @else if length($values) == 4 {
|
|
@if nth($values, 3) { #{$bottom}: nth($values, 3); }
|
|
@if nth($values, 4) { #{$left}: nth($values, 4); }
|
|
}
|
|
} @else {
|
|
#{$all}: $values;
|
|
}
|
|
}
|