Menu icon Foundation
Dividers for Tabs

In f4, the sections had nice little dividers around them that made them actually look like tabs. Since sections are deprecated now, is there a way to add dividers to tabs to make them look similar. Tabs now just look like horizontal-nav classes of f4 but even they had divders.

tabsdividersstyling

In f4, the sections had nice little dividers around them that made them actually look like tabs. Since sections are deprecated now, is there a way to add dividers to tabs to make them look similar. Tabs now just look like horizontal-nav classes of f4 but even they had divders.

Evan Rose almost 5 years ago

Hi. I had the same problem until I found this: https://gist.github.com/cavneb/07c34efc1b0b0da2045c

$tab-border-color: $tabs-navigation-bg-color;

dl.tabs {
  border-bottom: 1px solid $tab-border-color;
  dd {
    position: relative;
    bottom: -1px;
    border-top: 1px solid $tab-border-color;
    border-left: 1px solid $tab-border-color;
    border-right: 1px solid $tab-border-color;
    border-bottom: 1px solid $tab-border-color;
    &.active {
      border-bottom: 1px solid #fff;
    }
  }
}

Bryan Smith almost 5 years ago

I forked the gist to add in borders for the content as well as a fix for double borders on some edges.

https://gist.github.com/OrionSeven/80509245cbe3f2c11b41

$tab-border-color:#d9d9d9;

ul.tabs {
  border-bottom: 1px solid $tab-border-color;
  li {
    position: relative;
    bottom: -1px;
    border-top: 1px solid $tab-border-color;
    border-left: 1px solid $tab-border-color;
    border-bottom: 1px solid $tab-border-color;
    &.active {
        border-bottom: 1px solid #fff;
    }
    &:last-child {
        border-right: 1px solid $tab-border-color;
    }
  }  
}

div.tabs-content {
    border-left: 1px solid $tab-border-color;
    border-right: 1px solid $tab-border-color;
    border-bottom: 1px solid $tab-border-color;
    padding: 15px;
}