Tabs do not display properly

I tried to use the tab template code from the EPA Web Guide and it was not working properly. The tab functionality works and I see no console errors, but the look is off.

Expected:

Observed:

I was able to trace the source of this issue to the fact that the tabs.css rules lack type selectors so they have lower specificity than the rules in style.css. The browser chooses the more specific rule.

For example the rule at line 1077 in style.css has a section type selector so it takes precedence over the less specific rule in tabs.css. My proposed solution is to add section type selectors to the rules in tabs.css because presumably that is where users of the template should be entering these tabs.

style.css

section .menu-link, section .pipeline>li>a, section .tabs>li>a {
    display: block;
    margin: 0;
    padding: 0
}

tabs.css

.tabs > li > a,
.tabs > li > a:visited {
  background-color: #d6d7d9;
  color: #212121;
  line-height: 1;
  margin: 0;
  padding: .5882em 1.1765em;
  text-decoration: none;
}

Additionally, a rule that was present in previous versions appears to have been removed. This rule is present at line 734 of s.css but I don't see it anywhere in the new files. I suggest adding it to tabs.css.

s.css

@media screen and (min-width: 30em) {
  .pillbox > .menu-item,
  .tabs > li {
    float: left; /* LTR */
  }
...
}

Example of proposed change to tabs.css

section .tabs > li {
    border-bottom: 1px solid #aeb0b5;
    float: left;
    padding-right: .5em; /* LTR */
    margin-bottom: .5em;
  }

Finally, there were some CSS rules that were included in a media query that shouldn't have been which made the mobile view not change colors properly when active or focused. I think this was introduced in issue #12 because the closing bracket was not placed properly.

I have made changes which I think fix these issues and make the tabs function as they did before. Should I create a branch that someone can look over?

P.S. These li elements also had transitions effects that are no longer there due to #14 which removed the global selector transitions. If these tabs should have them or not in the first place is another question though.

USEPA / OneEPA-Standalone-App-Template

Tabs do not display properly #28