Tabcordion SCSS (Full)

tabcordion.scss

// Foundation for Apps Tabcordions

.tabs {
    display: flex;
    flex-flow: row wrap;
    border: 0px solid #ddd;
    border-width: 1px 0 0 1px;

    // Styling for the label element
    .tab {
        background: #f4f4f4;
        height: 40px;
        padding: 0 1rem;
        line-height: 40px;
        border: 0px solid #ddd;
        border-width: 0 1px 1px 0;
        margin: 0;

        flex: 1 1 auto;
    }

    // Styling to hide the radio (or checkbox) input
    &>input {
        position: absolute;
        height: 0;
        width: 0;
        opacity: 0;

        &:checked + label {
            border-bottom: none;
            background: none;

            &+.tab-content { display: block; }
        }
    }

    // Styling for the tab content blocks when they are not shown
    .tab-content {
        display: none;
        flex: 0 0 auto;
        flex-basis: 100%;
        width: 100%;
        border-right: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
        padding: 1rem;
    }

    // This loops through the N-up counts we want to support
    @for $i from 1 through 6 {
        &.small-#{$i}-up {
            .tab { 
                width: percentage(1 / $i); 
            }

            &>.tab, &>.tab-content, &>input {   
                @if $i == 2 {
                    &:nth-child(-n+30) { order: 5; 
                        &:checked + label + .tab-content { order: 6; }
                    }
                    &:nth-child(-n+24) { order: 4; 
                        &:checked + label + .tab-content { order: 5; }
                    }
                    &:nth-child(-n+18) { order: 3; 
                        &:checked + label + .tab-content { order: 4; }
                    }
                    &:nth-child(-n+12)  { order: 2; 
                        &:checked + label + .tab-content { order: 3; }
                    }
                    &:nth-child(-n+6)  { order: 1; 
                        &:checked + label + .tab-content { order: 2; }
                    }
                }

                @if $i == 3 {
                    &:nth-child(-n+36) { order: 4; 
                        &:checked + label + .tab-content { order: 5; }
                    }
                    &:nth-child(-n+27) { order: 3; 
                        &:checked + label + .tab-content { order: 4; }
                    }
                    &:nth-child(-n+18) { order: 2; 
                        &:checked + label + .tab-content { order: 3; }
                    }
                    &:nth-child(-n+9)  { order: 1; 
                        &:checked + label + .tab-content { order: 2; }
                    }
                }

                @if $i == 4 {
                    &:nth-child(-n+36) { order: 3; 
                        &:checked + label + .tab-content { order: 4; }
                    }
                    &:nth-child(-n+24) { order: 2; 
                        &:checked + label + .tab-content { order: 3; }
                    }
                    &:nth-child(-n+12)  { order: 1; 
                        &:checked + label + .tab-content { order: 2; }
                    }
                }

                @if $i == 5 {
                    &:nth-child(-n+30) { order: 2; 
                        &:checked + label + .tab-content { order: 3; }
                    }
                    &:nth-child(-n+15) { order: 1; 
                        &:checked + label + .tab-content { order: 2; }
                    }
                }
            }
        }

        // This uses Foundation media query shortcuts, but simply means we can only apply medium-2-up, etc when seen on screens > 640px across
        @media #{$medium-up} {

            &.medium-#{$i}-up {
                .tab { 
                    width: percentage(1 / $i); 
                }

                &>.tab, &>.tab-content, &>input {   
                    @if $i == 2 {
                        &:nth-child(-n+30) { order: 5; 
                            &:checked + label + .tab-content { order: 6; }
                        }
                        &:nth-child(-n+24) { order: 4; 
                            &:checked + label + .tab-content { order: 5; }
                        }
                        &:nth-child(-n+18) { order: 3; 
                            &:checked + label + .tab-content { order: 4; }
                        }
                        &:nth-child(-n+12)  { order: 2; 
                            &:checked + label + .tab-content { order: 3; }
                        }
                        &:nth-child(-n+6)  { order: 1; 
                            &:checked + label + .tab-content { order: 2; }
                        }
                    }

                    @if $i == 3 {
                        &:nth-child(-n+36) { order: 4; 
                            &:checked + label + .tab-content { order: 5; }
                        }
                        &:nth-child(-n+27) { order: 3; 
                            &:checked + label + .tab-content { order: 4; }
                        }
                        &:nth-child(-n+18) { order: 2; 
                            &:checked + label + .tab-content { order: 3; }
                        }
                        &:nth-child(-n+9)  { order: 1; 
                            &:checked + label + .tab-content { order: 2; }
                        }
                    }

                    @if $i == 4 {
                        &:nth-child(-n+36) { order: 3; 
                            &:checked + label + .tab-content { order: 4; }
                        }
                        &:nth-child(-n+24) { order: 2; 
                            &:checked + label + .tab-content { order: 3; }
                        }
                        &:nth-child(-n+12)  { order: 1; 
                            &:checked + label + .tab-content { order: 2; }
                        }
                    }

                    @if $i == 5 {
                        &:nth-child(-n+30) { order: 2; 
                            &:checked + label + .tab-content { order: 3; }
                        }
                        &:nth-child(-n+15) { order: 1; 
                            &:checked + label + .tab-content { order: 2; }
                        }
                    }
                }
            }

        }

        @media #{$large-up} {

            &.large-#{$i}-up {
                .tab { 
                    width: percentage(1 / $i); 
                }

                &>.tab, &>.tab-content, &>input {   
                    @if $i == 2 {
                        &:nth-child(-n+30) { order: 5; 
                            &:checked + label + .tab-content { order: 6; }
                        }
                        &:nth-child(-n+24) { order: 4; 
                            &:checked + label + .tab-content { order: 5; }
                        }
                        &:nth-child(-n+18) { order: 3; 
                            &:checked + label + .tab-content { order: 4; }
                        }
                        &:nth-child(-n+12)  { order: 2; 
                            &:checked + label + .tab-content { order: 3; }
                        }
                        &:nth-child(-n+6)  { order: 1; 
                            &:checked + label + .tab-content { order: 2; }
                        }
                    }

                    @if $i == 3 {
                        &:nth-child(-n+36) { order: 4; 
                            &:checked + label + .tab-content { order: 5; }
                        }
                        &:nth-child(-n+27) { order: 3; 
                            &:checked + label + .tab-content { order: 4; }
                        }
                        &:nth-child(-n+18) { order: 2; 
                            &:checked + label + .tab-content { order: 3; }
                        }
                        &:nth-child(-n+9)  { order: 1; 
                            &:checked + label + .tab-content { order: 2; }
                        }
                    }

                    @if $i == 4 {
                        &:nth-child(-n+36) { order: 3; 
                            &:checked + label + .tab-content { order: 4; }
                        }
                        &:nth-child(-n+24) { order: 2; 
                            &:checked + label + .tab-content { order: 3; }
                        }
                        &:nth-child(-n+12)  { order: 1; 
                            &:checked + label + .tab-content { order: 2; }
                        }
                    }

                    @if $i == 5 {
                        &:nth-child(-n+30) { order: 2; 
                            &:checked + label + .tab-content { order: 3; }
                        }
                        &:nth-child(-n+15) { order: 1; 
                            &:checked + label + .tab-content { order: 2; }
                        }
                    }
                }
            }
        }
    }
}