Material Design on Mobile

support
1

Currently attempting to add @rewphus’s excellent material design CSS to one of my sites. After some small modifications, everything is working great except one issue on mobile.

Here’s a screenshot of the issue. Notice the double shadow between the list of subcategories and the “category summary”:

image.png439×533 25.6 KB

Here’s the current mobile CSS. The first block is intended to target the topic views (latest, new, unread) and category boxes (thanks Neil!), while the second block targets the category page. Problem is, there is a topic-list class inside the category-list-item, and that is the same class I need to target for the topic views. I can’t figure out how to tell the first block not to target the category page, as all the pages appear to share parent classes and ids (container, full-width, list-area, contents). Is there a way to handle this via CSS, or does there need to be new classes added to the mobile HTML?

//add shadow behind the list of topics
.topic-list, .category-box{
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  background-color: lighten($secondary, 10%);
  border-collapse: collapse;
}


.category-list-item {
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  background-color: lighten($secondary, 10%);
  border-collapse: collapse;
  margin-bottom: 20px;
}
2

Figured it out. Not the cleanest solution (requires repeating rules), but it works. Ended up leaving the .topic-list declaration as it is and targeting .topic-list within .category-list-item using none properties.

//add shadow behind the list of topics
.topic-list, .category-box{
    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    background-color: lighten($secondary, 10%);
    border-collapse: collapse;
}

.category-list-item {
    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    background-color: lighten($secondary, 10%);
    border-collapse: collapse;
    margin-bottom: 20px;
    .topic-list {
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }
}
6 Likes