Zen Views

gistfile1.css

@mixin views-responsive-column-settings($column-count, $local-grid-width) {

  .views-column-1 {
    @include zen-grid-item(1, 1, $zen-float-direction, $column-count, $zen-gutter-width, $local-grid-width);
  }

  .views-column-2 {
    @include zen-grid-item(1, 2, $zen-float-direction, $column-count, $zen-gutter-width, $local-grid-width);
  }

  .views-column-3 {
    @include zen-grid-item(1, 3, $zen-float-direction, $column-count, $zen-gutter-width, $local-grid-width);
  }

  .views-column-4 {
    @include zen-grid-item(1, 4, $zen-float-direction, $column-count, $zen-gutter-width, $local-grid-width);
  }

  .views-column-5 {
    @include zen-grid-item(1, 5, $zen-float-direction, $column-count, $zen-gutter-width, $local-grid-width);
  }

  .views-column-6 {
    @include zen-grid-item(1, 6, $zen-float-direction, $column-count, $zen-gutter-width, $local-grid-width);
  }
}

@mixin views-responsive-columns($column-count, $grid-width: $grid-width-mobile) {

  .sidebar-first &,
  .sidebar-second & {

    @if unit($grid-width) == "px" {
      $grid-width: ($grid-width/3)*2;
    }

    @include views-responsive-column-settings($column-count, $grid-width);
  }
  .two-sidebars & {

    @if unit($grid-width) == "px" {
      $grid-width: $grid-width/2;
    }

    @include views-responsive-column-settings($column-count, $grid-width);
  }
}

.views-responsive-grid {

  &.views-columns-2 {
    @include views-responsive-columns(2, $grid-width-mobile);
  }

  &.views-columns-3 {
    @include views-responsive-columns(2, $grid-width-mobile);
  }

  &.views-columns-4 {
    @include views-responsive-columns(2, $grid-width-mobile);
  }

  &.views-columns-5 {
    @include views-responsive-columns(4, $grid-width-mobile);
  }

  &.views-columns-6 {
    @include views-responsive-columns(4, $grid-width-mobile);
  }
}

/**
 * Use 3 grid columns for smaller screens.
 */
@media all and (min-width: $bp-mobile-tablet) and (max-width: $bp-tablet-desktop) {
  .views-responsive-grid {

    &.views-columns-2 {
      @include views-responsive-columns(2, $grid-width-tablet);
    }

    &.views-columns-3 {
      @include views-responsive-columns(3, $grid-width-tablet);
    }

    &.views-columns-4 {
      @include views-responsive-columns(4, $grid-width-tablet);
    }

    &.views-columns-5 {
      @include views-responsive-columns(4, $grid-width-tablet);
    }

    &.views-columns-6 {
      @include views-responsive-columns(4, $grid-width-tablet);
    }
  }
}

/**
 * Use 12 grid columns for larger screens.
 */
@media all and (min-width: $bp-tablet-desktop) {
  .views-responsive-grid {

    &.views-columns-2 {
      @include views-responsive-columns(2, $grid-width-desktop);
    }

    &.views-columns-3 {
      @include views-responsive-columns(3, $grid-width-desktop);
    }

    &.views-columns-4 {
      @include views-responsive-columns(4, $grid-width-desktop);
    }

    &.views-columns-5 {
      @include views-responsive-columns(5, $grid-width-desktop);
    }

    &.views-columns-6 {
      @include views-responsive-columns(6, $grid-width-desktop);
    }
  }
}

.views-row {
  @include zen-nested-container();
  @include zen-clear();
}

.views-column {
//  @include zen-grid-item-base();
}