jebu1104
2/26/2015 - 1:09 PM

Listing stylesheet


.listing {
  display: inline-block;
  margin: 0 0 20px;
  padding: 0;
  width: 100%;

  li {
    border-bottom: 1px solid $lt-lt-grey;
    list-style-type: none;
    // margin-bottom: 20px;
    padding: 10px;
    position: relative;
    vertical-align: top;

    a {
      cursor: pointer;
      display: block;
      }

    &:hover {
      background-color: $lt-lt-grey;

      .more {
        color: $yellow;
      }
    }

    p {
      margin: 0 0 rhythm(0.25, 16px); // 1 line below
    }

    h3 {
      line-height: 1.5rem;
      margin: 0 !important;
    }
  } // end nesting li

  li:last-child {
    border-bottom: 0;
  }

  li:last-of-type {
    margin-right: 0;
  }

  .cols {
    margin-left: 0;
  }

  &.horizontal {
    li {
      display: inline-block;
      width: 100%;
      margin-right: 20px;
    }
  } // end nesting &.horizontal

  &.horizontal.half,
  &.horizontal.single {
    li {
      display: inline-block;
      width: 100%;
    }
  }

  &.horizontal.third {
    li {
      display: inline-block;
      width: 30%;
    }
  }
  &.horizontal.fourth {
    li {
      display: inline-block;
      width: 22%;
    }
  } // end nesting &.horizontal

  &.vertical {
    li {
      display: inline-block;
      width: 100%;
    }
  }// end nesting &.vertical
}// end nesting listing



//----Provider Styles ----


.providers .listing {
  &.horizontal {
    li {
      border-bottom: 0;
      display: inline-block;
      vertical-align: top;
      width: 100%;

      &:nth-child(even) {
        margin-right: 0;
      }

      h4 {
        margin-bottom: 0;
      }

      a:hover {
        color: $blue;
      }
    } // end nesting li

    .details:hover h6,
    .details:hover h4,
    .details:hover h5,
    .details:hover p {
      color: $blue;
    }

    .details:hover .more {
      color: $yellow !important;
    }
  } // end nesting .horizontal
}// end nesting providers


Media Queires 1024px


//---- Listings ----
.listing {

  &.horizontal {
    li {
      width: 31%;
    }
  } // end nesting &.horizontal

  &.horizontal.half {
    li {
      width: 46%;
    }
  }

  &.horizontal.third {
    li {
      width: 29%;
    }
  }
  &.horizontal.fourth {
    li {
      width: 20%;
    }
  } // end nesting &.horizontal
}