glittergallery/GlitterGallery

View on GitHub
app/assets/stylesheets/jeet/_grid.scss

Summary

Maintainability
Test Coverage
// Columns with Gutters
@mixin column($ratios: 1, $offset: 0, $cycle: 0, $uncycle: 0, $gutter: $jeet-gutter) {
  $side: -get_layout_direction();
  $column_widths: -get_column($ratios, $gutter);
  $margin_last: 0;
  $margin_l: $margin_last;
  $margin_r: nth($column_widths, 2);
  @if $offset != 0 {
    @if $offset < 0 {
      $offset: $offset * -1;
      $offset: nth(-get_column($offset, nth($column_widths, 2)), 1);
      $margin_last: $offset + nth($column_widths, 2) * 2;
      $margin_r: $margin_last;
    } @else {
      $offset: nth(-get_column($offset, nth($column_widths, 2)), 1);
      $margin_l: $offset + nth($column_widths, 2);
    }
  }
  @include cf();
  float: $side;
  display: inline;
  clear: none;
  text-align: inherit;
  padding-left: 0;
  padding-right: 0;
  width: nth($column_widths, 1) * 1%;
  margin-#{$side}: $margin_l * 1%;
  margin-#{opposite-direction($side)}: $margin_r  * 1%;
  @if $uncycle != 0 {
    &:nth-child(#{$uncycle}n) {
      margin-#{opposite-direction($side)}: $margin_r * 1%;
      float: $side;
    }

    &:nth-child(#{$uncycle}n + 1) {
      clear: none;
    }
  }
  @if $cycle != 0 {
    &:nth-child(#{$cycle}n) {
      margin-#{opposite-direction($side)}: $margin_last * 1%;
      float: opposite-direction($side);
    }

    &:nth-child(#{$cycle}n + 1) {
      clear: both;
    }
  } @else {
    &:last-child {
      margin-#{opposite-direction($side)}: $margin_last * 1%;
    }
  }
}
@mixin col($args...) {
  @include column($args...);
}

// Columns without Gutters
@mixin span($ratio: 1, $offset: 0) {
  $side: -get_layout_direction();
  $span_width: -get_span($ratio);
  $margin_r: 0;
  $margin_l: $margin_r;
  @if $offset != 0 {
    @if $offset < 0 {
      $offset: $offset * -1;
      $margin_r: -get_span($offset);
    } @else {
      $margin_l: -get_span($offset);
    }
  }
  @include cf();
  float: $side;
  display: inline;
  clear: none;
  padding-left: 0;
  padding-right: 0;
  text-align: inherit;
  width: $span_width * 1%;
  margin-#{$side}: $margin_l * 1%;
  margin-#{opposite-direction($side)}: $margin_r * 1%;
}

// Source Ordering
@mixin shift($ratios: 0, $col_or_span: column, $gutter: $jeet-gutter) {
  $translate: '';
  $side: -get_layout_direction();
  @if $side == right {
    $ratios: -replace_nth($ratios, 0, nth($ratios, 1) * -1);
  }
  @if $col_or_span == column or $col_or_span == col or $col_or_span == c {
    $column_widths: -get_column($ratios, $gutter);
    $translate: nth($column_widths, 1) + nth($column_widths, 2);
  } @else {
    $translate: -get_span($ratios);
  }
  position: relative;
  left: $translate * 1%;
}
@mixin unshift() {
  position: static;
  left: 0;
}

// Edit Mode
@mixin edit() {
  * {
    background: rgba(0, 0, 0, .05);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#10000000, endColorstr=#10000000);
  }
}

// Horizontal Centering Block Elements
@mixin center($max_width: 1410px, $pad: 0) {
  @include cf();
  width: auto;
  max-width: $max_width;
  float: none;
  display: block;
  margin-right: auto;
  margin-left: auto;
  padding-left: $pad;
  padding-right: $pad;
}

// Stacking/Unstacking Elements
@mixin stack($pad: 0, $align: false) {
  $side: -get_layout_direction();
  display: block;
  clear: both;
  float: none;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  &:first-child {
    margin-#{$side}: auto;
  }
  &:last-child {
    margin-#{opposite-direction($side)}: auto;
  }
  @if $pad != 0 {
    padding-left: $pad;
    padding-right: $pad;
  }
  @if ($align is not false) {
    @if ($align == center) or ($align == c) {
      text-align: center;
    }
    @if ($align == left) or ($align == l) {
      text-align: left;
    }
    @if ($align == right) or ($align == r) {
      text-align: right;
    }
  }
}
@mixin unstack() {
  $side: -get_layout_direction();
  display: inline;
  clear: none;
  width: auto;
  margin-left: 0;
  margin-right: 0;
  &:first-child {
    margin-#{$side}: 0;
  }
  &:last-child {
    margin-#{opposite-direction($side)}: 0;
  }
  @if ($jeet-layout-direction == RTL) {
    text-align: right;
  } @else {
    text-align: left;
  }
}

// Horizontal/Vertical/Both Alignment - Parent container needs position relative. IE9+
@mixin align($direction: both) {
  position: absolute;
  @include jeet-prefixer(transform-style, preserve-3d);
  @if ($direction == horizontal) or ($direction == h) {
    left: 50%;
    @include jeet-prefixer(transform, translateX(-50%));
  } @else if ($direction == vertical) or ($direction == v) {
    top: 50%;
    @include jeet-prefixer(transform, translateY(-50%));
  } @else {
    top: 50%;
    left: 50%;
    @include jeet-prefixer(transform, translate(-50%, -50%));
  }
}

// Clearfix
@mixin cf() {
  *zoom: 1;
  &:before, &:after {
    content: '';
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Define a rule with all vendor-specific prefixes
@mixin jeet-prefixer($name, $arguments) {
  -webkit-#{$name}: #{$arguments};
  -ms-#{$name}: #{$arguments};
  -moz-#{$name}: #{$arguments};
  -o-#{$name}: #{$arguments};
  #{$name}: #{$arguments};
}