Skip to content

Instantly share code, notes, and snippets.

@smileyj68
Created February 19, 2015 18:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save smileyj68/ea0ff4c8c720cf7e97a5 to your computer and use it in GitHub Desktop.
Save smileyj68/ea0ff4c8c720cf7e97a5 to your computer and use it in GitHub Desktop.
Tabcordion SCSS (Full)
// 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; }
}
}
}
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment