_directional.scss

/**
* directional mixins and helpers
* @author Markus J Doetsch http://mdular.com
*
* list of substitutes:
*
* margin
* margin-left
* margin-right
*
* padding
* padding-left
* padding-right
*
* text-align
*
* float
* clear
*
* left
* right
*
* border-left
* border-right
* TODO: shorthand
*
* border-radius -> border-radius-lr
* 
* TODO: box & text shadow;
*/

@mixin direction {
  @if $ltr {
    direction: ltr;
  } @else {
    direction: rtl;
  }
}

@function switch-lr-values($values) {
  @if $ltr {
    @return $values;
  } @else {
    $len: length($values);

    @if $len == 1 {
      @return $values;
    } @else if $len == 2 {
      @return nth($values, 1) nth($values, 2);
    } @else if $len == 3 {
      @return nth($values, 1) nth($values, 2) nth($values, 3);
    } @else if $len == 4 {
      @return nth($values, 1) nth($values, 4) nth($values, 3) nth($values, 2);
    }
  }
}

/*
* margin
*/
@mixin margin($values) {
  margin: switch-lr-values($values);
}

@mixin margin-left($value) {
  @if $ltr {
    margin-left: $value;
  } @else {
    margin-right: $value;
  }
}

@mixin margin-right($value) {
  @if $ltr {
    margin-right: $value;
  } @else {
    margin-left: $value;
  }
}

/*
* padding
*/
@mixin padding($values) {
  padding: switch-lr-values($values);
}

@mixin padding-left($value) {
  @if $ltr {
    padding-left: $value;
  } @else {
    padding-right: $value;
  }
}

@mixin padding-right($value) {
  @if $ltr {
    padding-right: $value;
  } @else {
    padding-left: $value;
  }
}

/*
* text-align
*/
@mixin text-align($side: left) {
  @if $ltr {
    @if $side == left {
      text-align: left;
    } @else if $side == right {
      text-align: right;
    } @else {
      text-align: center;
    }
  } @else {
    @if $side == left {
      text-align: right;
    } @else if $side == right {
      text-align: left;
    } @else {
      text-align: center;
    }
  }
}

/*
* floating
*/
@mixin float($side: left) {
  @if $ltr {
    @if $side == left {
      float: left;
    } @else if $side == right {
      float: right;
    } @else {
      float: none;
    }
  } @else {
    @if $side == left {
      float: right;
    } @else if $side == right {
      float: left;
    } @else {
      float: none;
    }
  }
}

@mixin clear($side: left) {
  @if $ltr {
    @if $side == left {
      clear: left;
    } @else if $side == right {
      clear: right;
    } @else {
      clear: both;
    }
  } @else {
    @if $side == left {
      clear: right;
    } @else if $side == right {
      clear: left;
    } @else {
      clear: both;
    }
  }
}

/*
* position
*/
@mixin left($value) {
  @if $ltr {
    left: $value;
  } @else {
    right: $value;
  }
}

@mixin right($value) {
  @if $ltr {
    right: $value;
  } @else {
    left: $value;
  }
}

/*
* border
*/
@mixin border-left($value) {
  @if $ltr {
    border-left: $value;
  } @else {
    border-right: $value;
  }
}

@mixin border-right($value) {
  @if $ltr {
    border-right: $value;
  } @else {
    border-left: $value;
  }
}

/*
* border-radius
*/
@mixin border-radius-lr($values) {
  @if $ltr {
    @include border-radius($values);
  } @else {
    $len: length($values);

    @if $len == 1 {
      @include border-radius($values);
    } @else if $len == 2 {
      @include border-radius(nth($values, 2) nth($values, 1));
    } @else if $len == 3 {
      @include border-radius(nth($values, 2) nth($values, 1) nth($values, 3));
    } @else if $len == 4 {
      @include border-radius(nth($values, 2) nth($values, 1) nth($values, 4) nth($values, 3));
    }
  }
}