SU-SWS/decanter

View on GitHub
core/src/scss/utilities/mixins/grid/_grid-item-spans.scss

Summary

Maintainability
Test Coverage

///
/// Mixin to render cssGrid column spans in all modern browsers, including IE11.
///
/// @name grid-item-spans
///
/// @param {integer} $col-start - The column integer to start at
/// @param {list} $col-end - A column integer or span
/// @param {integer} $row-start - The row integer to start at
/// @param {list} $row-end - A row integer or span
///
/// @group mixin
@mixin grid-item-spans($col-start: null, $col-end: null, $row-start: null, $row-end: null) {

  @if ($col-start != null) {
    -ms-grid-column: $col-start;
  }

  @if ($col-end != null and $col-start != null) {
    grid-column: #{$col-start} / #{$col-end};

    @if (str-index(#{$col-end}, 'span ')) {
      -ms-grid-column-span: str-replace(#{$col-end}, "span ", '');
    }
    @else {
      -ms-grid-column-span: $col-end - $col-start;
    }

  }

  @if ($row-start != null) {
    -ms-grid-row: $row-start;
  }

  @if ($row-end != null and $row-start != null) {
    grid-row: #{$row-start} / #{$row-end};

    @if (str-index(#{$row-end}, "span ")) {
      -ms-grid-row-span: str-replace(#{$row-end}, "span ", '');
    }
    @else {
      -ms-grid-row-span: $row-end - $row-start;
    }

  }

}