Skip to content

Instantly share code, notes, and snippets.

@thybzi thybzi/position.less
Last active Aug 11, 2016

Embed
What would you like to do?
/**
* Apply position value, and 0 to 4 offset values
* Offsets (length or `auto`) are treated similar to `padding` value
* Any of offsets may be `null`, in that case it is counted but not used
* @example .position(absolute, 5px, 2px) // position: absolute, 5px for top and bottom, 2px for left and right
* @example .position(relative, 5px, 2px, 3px) // position: relative, top: 5px, bottom: 3px, 2px for left and right
* @example .position(fixed, 5px, 2px, null) // position: fixed, top: 5px, nothing for bottom, 2px for left and right
* @example .position(static) // applies just `position: static` (without any offsets)
*/
.position(@value, @offsets...) when (iskeyword(@value)) {
@count: length(@offsets);
& {
position: @value;
}
& when (@count >= 4) {
.offset(left, extract(@offsets, 4));
.offset(right, extract(@offsets, 2));
.offset(top, extract(@offsets, 1));
.offset(bottom, extract(@offsets, 3));
}
& when (@count = 3) {
@left-right: extract(@offsets, 2);
.offset(left, @left-right);
.offset(right, @left-right);
.offset(top, extract(@offsets, 1));
.offset(bottom, extract(@offsets, 3));
}
& when (@count = 2) {
@left-right: extract(@offsets, 2);
@top-bottom: extract(@offsets, 1);
.offset(left, @left-right);
.offset(right, @left-right);
.offset(top, @top-bottom);
.offset(bottom, @top-bottom);
}
& when (@count = 1) {
.offset(left, @offsets);
.offset(right, @offsets);
.offset(top, @offsets);
.offset(bottom, @offsets);
}
.offset(@side, @value) when (isnumber(@value)), (@value = auto) {
@{side}: @value;
}
}
/**
* Apply `position: absolute`, and 0 to 4 offset values
* Offsets (length or `auto`) are treated similar to `padding` value
* Any of offsets may be `null`, in that case it is counted but not used
* @example .absolute(5px, 2px) // applies 5px for top and bottom, 2px for left and right
* @example .absolute(5px, 2px, 3px) // applies 5px for top, 3px for bottom, 2px for left and right
* @example .absolute(5px, 2px, null) // applies 5px for top, nothing for bottom, 2px for left and right
* @example .absolute() // applies just `position: absolute` (without any offsets)
*/
.absolute(@offsets...) {
.position(absolute, @offsets);
}
/**
* Apply `position: fixed`, and 0 to 4 offset values
* Offsets (length or `auto`) are treated similar to `padding` value
* Any of offsets may be `null`, in that case it is counted but not used
* @example .fixed(5px, 2px) // applies 5px for top and bottom, 2px for left and right
* @example .fixed(5px, 2px, 3px) // applies 5px for top, 3px for bottom, 2px for left and right
* @example .fixed(5px, 2px, null) // applies 5px for top, nothing for bottom, 2px for left and right
* @example .fixed() // applies just `position: fixed` (without any offsets)
*/
.fixed(@offsets...) {
.position(fixed, @offsets);
}
/**
* Apply `position: relative`, and 0 to 4 offset values
* Offsets (length or `auto`) are treated similar to `padding` value
* Any of offsets may be `null`, in that case in is counted but not used
* @example .relative(5px, 2px) // applies 5px for top and bottom, 2px for left and right
* @example .relative(5px, 2px, 3px) // applies 5px for top, 3px for bottom, 2px for left and right
* @example .relative(5px, 2px, null) // applies 5px for top, nothing for bottom, 2px for left and right
* @example .relative() // applies just `position: relative` (without any offsets)
*/
.relative(@offsets...) {
.position(relative, @offsets);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.