Contents

@mixin grid-item-columns($columns) {
  width: (100% / 12) * $columns;
}

.grid-items-lines {
  $grid-items-background: $base-background-color;
  $grid-item-background: $base-background-color;
  $grid-item-border: 1px solid transparentize($base-font-color, .8); 
  $grid-item-columns: 4;
  $grid-item-big-columns: 8;
  $grid-item-color: $base-font-color;
  $grid-item-height: 14em;

  @include clearfix;
  position: relative;
    
  .grid-item {
    @include transition (all 0.2s ease-in-out);
    height: $grid-item-height;
    background: $grid-item-background;
    width: 100%;
    overflow: hidden;
    float: left;
    padding: 2em;
    border-right: $grid-item-border;
    border-bottom: $grid-item-border;
    cursor: pointer;

    @include media($large-screen) {
      @include grid-item-columns($grid-item-columns);
    }

    &:hover {
      background: transparentize($grid-item-color, .95);
    }
  }

  .grid-item img {
      display: block;
      height: 2.5em;
      margin-bottom: 1.2em;
      opacity: .2;
    }

  .grid-item h1 {
      color: $grid-item-color;
      font-size: 1.3em;
      margin-bottom: .4em;
    }

  .grid-item p {
      color: transparentize($grid-item-color, .4);
      @include media($medium-screen) {
        max-width: 70%;
      }
    }

  .grid-item-big {
    @include media($large-screen) {
      @include grid-item-columns($grid-item-big-columns);
    }
    p {
      @include media($medium-screen) {
        max-width: 60%;
      }  
    }
  }

  // this, below, might not be the most beautiful solution but it removes the outer borders by using the background color.
  .bottom-cover {
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 3px;
    background: $grid-items-background;
  }

  .right-cover {
    position: absolute;
    right: 0px;
    height: 100%;
    width: 4px;
    background: $grid-items-background;
  }
}

Version data entries

8 entries across 8 versions & 1 rubygems

Version	Path
staple-0.0.9	source/stylesheets/staple/_grid-items-lines.scss
staple-0.0.8	source/stylesheets/staple/_grid-items-lines.scss
staple-0.0.7	source/stylesheets/staple/_grid-items-lines.scss
staple-0.0.6	source/stylesheets/staple/_grid-items-lines.scss
staple-0.0.5	source/stylesheets/staple/_grid-items-lines.scss
staple-0.0.4	source/stylesheets/staple/_grid-items-lines.scss
staple-0.0.3	source/stylesheets/staple/_grid-items-lines.scss
staple-0.0.2	source/stylesheets/staple/_grid-items-lines.scss