Le markup standard du composant Tabs de Foundation 6 est conservé. On adapte juste les styles.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
.tabs { &-title { text-transform: uppercase; font-weight: bold; > a { border-left: 2px solid #fff; border-right: 2px solid #fff; } &:first-child { > a { border-left: 2px solid $tab-background; border-right: 2px solid #fff; &:hover, &[aria-selected="true"] { border-left: 2px solid $tab-background-active; border-right: 2px solid #fff; } } } &:last-child { > a { border-left: 2px solid #fff; border-right: 2px solid $tab-background; &:hover, &[aria-selected="true"] { border-left: 2px solid #fff; border-right: 2px solid $tab-background-active; } } } } } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.tabs { width: 100%; display: table; table-layout: fixed; &::after, &::before { content: none; // F6 Tabs component core styles reset } &-title { float: none; // F6 Tabs component core styles reset display: table-cell; text-align: center; } } |
Ou sous forme de composant supplémentaire en rajoutant la classe tabs-table au <ul class="tabs"> standard :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.tabs { // table mode custom component &-table { width: 100%; display: table; table-layout: fixed; &.tabs::after, &.tabs::before { content: none; } .tabs-title { float: none; display: table-cell; text-align: center; } } } |