HTML and CSS Reference
In-Depth Information
Figure 8-3. Vanilla search results
The next thing to do is to style the movie list so that it looks a bit better. In the
view for the movie list, you can see that there are multiple classes assigned to it,
as follows.
_rootElement.classList.add('list');
_rootElement.classList.add('movie-list');
These provide essential hooks that the CSS styles can latch onto. The following
SASS/CSS style will style the additional content within each list item, such as
cutting off the synopsis so that it doesn't flow beyond the size of the list item's
height.
.movie-list {
li {
background: #A5CCEB;
border-bottom-colour: #FFFFFF;
.more {
display: block;
height: 100%;
overflow: hidden;
text-decoration: none;
h2 {
margin: 0 0 10px;
color: #BF2628;
}
 
Search WWH ::




Custom Search