Last active
August 11, 2016 20:49
-
-
Save thybzi/b657281fdcceec3c23b690ce106be3d2 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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