Created
August 11, 2013 08:43
-
-
Save gisu/6204026 to your computer and use it in GitHub Desktop.
A simple mixin for positioning elements.
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
// ============================================================ | |
// Positioning Mixins | |
// ------------------------------------------------------------ | |
//** | |
// Private Mixin: _set-position | |
// Set the Position for the Position Mixins | |
// | |
// @mixin _set-position | |
// @param $position {list} One Value = top, Two Value = top left, Four Values = top right bottom left (t = zero position) can be in px or % | |
// @usage: +_set-position($position) | |
// ... | |
//** | |
@mixin _set-position($position) | |
$targets: null !default | |
$count: null !default | |
$count: length($position) | |
@if $count == 1 | |
$targets: top | |
@if $count == 2 | |
$targets: top left | |
@if $count == 4 | |
$targets: top right bottom left | |
@for $i from 1 through $count | |
@if nth($position,$i) == t | |
#{nth($targets,($i))}: 0 | |
@else | |
@if nth($position,$i) > 0 or nth($position,$i) < 0 | |
@if unitless(nth($position,$i)) | |
#{nth($targets,($i))}: nth($position,$i) + 0px | |
@else | |
#{nth($targets,($i))}: nth($position,$i) | |
//** | |
// Mixin: relative | |
// Relative Positioning Elements | |
// | |
// @mixin relative | |
// @param $pos {list} One Value = top, Two Value = top left, Four Values = top right bottom left (t = zero position) can be in px or % | |
// @usage: +relative(1) | |
// ... | |
//** | |
@mixin relative($pos: 0) | |
position: relative | |
+_set-position($pos) | |
//** | |
// Mixin: absolute | |
// Absolute Positioning Elements | |
// | |
// @mixin absolute | |
// @param $pos {list} One Value = top, Two Value = top left, Four Values = top right bottom left (t = zero position) can be in px or % | |
// @usage: +absolute(10 10%) | |
// ... | |
//** | |
@mixin absolute($pos: 0 0 0 0) | |
position: absolute | |
+_set-position($pos) | |
//** | |
// Mixin: fixed | |
// Fixed Positioning Elements | |
// | |
// @mixin fixed | |
// @param $pos {list} One Value = top, Two Value = top left, Four Values = top right bottom left (t = zero position) can be in px or % | |
// @usage: +fixed(10) | |
// ... | |
//** | |
@mixin fixed($pos: 0 0 0 0) | |
position: fixed | |
+_set-position($pos) | |
//** | |
// Mixin: static | |
// Reset CSS Position Methods | |
// | |
// @mixin static | |
// @usage: +static | |
// ... | |
//** | |
@mixin static | |
position: static | |
left: inherit | |
right: inherit | |
top: inherit | |
bottom: inherit |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment