.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
}