63 lines
1.3 KiB
SCSS
63 lines
1.3 KiB
SCSS
|
@charset "UTF-8";
|
|||
|
|
|
|||
|
|
/// Provides a concise, one-line method for setting an element’s positioning
|
|||
|
|
/// properties: `position`, `top`, `right`, `bottom` and `left`. Use a `null`
|
|||
|
|
/// value to “skip” an edge of the box.
|
|||
|
|
///
|
|||
|
|
/// @argument {string} $position
|
|||
|
|
/// A CSS position value.
|
|||
|
|
///
|
|||
|
|
/// @argument {list} $box-edge-values
|
|||
|
|
/// List of lengths; accepts CSS shorthand.
|
|||
|
|
///
|
|||
|
|
/// @example scss
|
|||
|
|
/// .element {
|
|||
|
|
/// @include position(relative, 0 null null 10em);
|
|||
|
|
/// }
|
|||
|
|
///
|
|||
|
|
/// // CSS Output
|
|||
|
|
/// .element {
|
|||
|
|
/// left: 10em;
|
|||
|
|
/// position: relative;
|
|||
|
|
/// top: 0;
|
|||
|
|
/// }
|
|||
|
|
///
|
|||
|
|
/// @example scss
|
|||
|
|
/// .element {
|
|||
|
|
/// @include position(absolute, 0);
|
|||
|
|
/// }
|
|||
|
|
///
|
|||
|
|
/// // CSS Output
|
|||
|
|
/// .element {
|
|||
|
|
/// position: absolute;
|
|||
|
|
/// top: 0;
|
|||
|
|
/// right: 0;
|
|||
|
|
/// bottom: 0;
|
|||
|
|
/// left: 0;
|
|||
|
|
/// }
|
|||
|
|
///
|
|||
|
|
/// @require {function} _is-length
|
|||
|
|
///
|
|||
|
|
/// @require {function} _unpack-shorthand
|
|||
|
|
|
|||
|
|
@mixin position(
|
|||
|
|
$position,
|
|||
|
|
$box-edge-values
|
|||
|
|
) {
|
|||
|
|
$box-edge-values: _unpack-shorthand($box-edge-values);
|
|||
|
|
$offsets: (
|
|||
|
|
"top": nth($box-edge-values, 1),
|
|||
|
|
"right": nth($box-edge-values, 2),
|
|||
|
|
"bottom": nth($box-edge-values, 3),
|
|||
|
|
"left": nth($box-edge-values, 4),
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
position: $position;
|
|||
|
|
|
|||
|
|
@each $offset, $value in $offsets {
|
|||
|
|
@if _is-length($value) {
|
|||
|
|
#{$offset}: $value;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|