// lists-grid-stacked.scss.erb



//---------------
// Gridlist UL
// This UL aligns 1..n items in a visual grid. Each item is floated left and fills up available space 
// (20% width apiece). This UL is used extensively on browse content grids of content.

$griditem-width: 240px;
$griditem-height: 180px;

ul.new-grid {
  @include clearfix();
  margin: 0px;
  padding: 0px;

  li {
    list-style: none;
    float: left;
    margin: 1px;
    position: relative;

    a {
      display: block;
      width: $griditem-width;
      height: $griditem-height;
      background: $white;

      &:hover {
        text-decoration: none;

        .content {
          background: darken($grayLight, 6%);
        
          img { opacity: 1; }
        }

        .info {
          opacity: 1;
        }

      }

      @include transition(all .1s linear);
    }

    .content {
      display: block;
      z-index: 1;
      background: $grayLight;
      height: $griditem-height;

      img {
        max-width: 100%;
        opacity: 0.8;
      }

      p {
        padding: 12px;
        font-size: 1.6em;
        line-height: normal;
      }
    }

    .info {
      z-index: 2;
      background: $black;
      opacity: 0.5;
      display: block;
      color: $white;
      position: absolute;
      bottom: 0px;
      left: 0px;
      width: 100%;
      @include transition(all .1s linear);
    }

  }
}

ul.list-grid {
	margin: 0px;
	padding: 0px;
  @include clearfix();
	
  > li {
	  list-style: none;
    float: left;
    min-width: 200px;
    height: 60px;
    width: 23%;
    margin: 8px 4px;
    display: table;

    .cont {
      display: table-cell;
      vertical-align: top;
      padding: 0px;
      min-height: 64px;
      text-decoration:none;
      
      &.thumb-icon { 
        width: 64px;

        a {
          text-decoration: none;
        }

        i {
          font-size: 45px;
          color: $black;
          line-height: 0.8em;
        }
      }

      // these elements come along for the ride by bringing in gridlist-item mixin:
      b {
        color: $black;
      }
      
      .controls {
        display: block;
        margin-top: 4px;
      }

      h1 {
        font-size: 1.2em;
        color: #333;
        background:none;
        padding: 0px;
        margin: 0px;
        font-weight: bold;
        text-align: center;
      }
      
      p {
        margin-bottom: 0px;
      }


      
    }
    
    img {
      @extend .with-shadow;
      float: left;
      margin-bottom:6px;
      margin-right:10px;
    }

    i {
      margin-bottom: 6px;
      margin-right: 10px;
    }

  }

  // inset-selection gridlists appear inside forms and while they use 
  // the base styles of list-grid, several attributes are different
  // these gridlists are used to make a selection of one or more items
  // within them (hence their usage in forms)
  &.inset-selection {
    border-top: none;

    // a common use for inset gridlists is to have each item in the list-grid
    // be a clickable link - each item appears with a slight rounded 
    // border and is a fully clickable region

    > li {
      margin-right: 6px;
      margin-bottom: 6px;
    }

    > li {
      > a, > div {
        @include border-radius(4px);
        display: block;
        color: $gray;
        $transition: border linear .1s, background linear .1s;
        @include transition($transition);
      }

      > a:hover {
        background: $concerto-blue-6;
        text-decoration: none;

        .inp {
          background: $concerto-blue-4;
        }
      }
    }
    
    .inp {
      float: left;
      background: $grayLightest;
      min-height: 46px;
      padding: 8px 5px;
      @include border-radius(4px 0px 0px 4px);
    }

    .cont {
      border: none;
      float: left;
    }
  }

  // this class can be applied to a list-grid to compress the size of each
  // list item inside the grid
  &.small {
    > li {
      min-height: 60px;

      .cont {
        padding: 8px;
        min-height: 40px;
      }
    }

  }
}

// variant: for span columns that are small enough, override the 
// width to make it appear flush:
.row-fluid .span3 ul.list-grid > li, .row-fluid .span2 ul.list-grid > li, .row-fluid .span1 ul.list-grid > li {
  width: 100%;
}


//---------------
// Stacked lists UL
// An alternative to gridlists, this UL simply stacks its list items
// on top of one another with visual elements. It is often used for 
// nested lists, such as the feed list on contents#index.

ul.list-stacked {
  margin-left: 0px;
  margin-bottom: 12px;

  > li {
    padding: 12px 12px 0px 12px;
    list-style: none;

    // this is the second level of UL, which represents a nested list
    // we only recommend one level deep of visual nesting
    ul {
      margin-left: 0px;

      > li {
        padding-left: 25px;
        background: #efefef;
      }
    }

  }

  p {
    margin:0px;
  }
  
  .indented {
    padding-left: 20px;
  }
}
ul.list-stacked.condensed > li { padding: 6px 12px; }
