Tabs

Various "tab" styles. Can be used as links to other pages. To toggle hidden content or ajax sections, apply custom javascript and use <button> instead of <a> for accessibility. Basic and folder styles are responsive by default via horizontal scroll, and all tab styles have an custom Sass mixin for "stacking" tabs vertically for mobile screens.

Basic Tabs

To this achieve look apply class .basic-tabs. For colors, use .basic-tabs_theme-generated or a custom theme class.

The theme class .basic-tabs_theme-generated generates a theme based on the value assigned to $link-color. Use .basic-tabs__tab--current for the currently selected tab and .basic-tabs__tab--disabled for disabled tabs. All other tabs use class .basic-tabs__tab--default (swapping classes is easier than having them all on the element at once, competing with each other).

For a mobile friendly version, invoke .basic-tabs--mobile() at the appropriate screen width in Sass.

<!-- html -->
<ul class="basic-tabs basic-tabs_theme-generated">
	<li class="basic-tabs__list-item">
		<a href="" class="basic-tabs__tab basic-tabs__tab--current">Current Tab</a>
	</li>
	<li class="basic-tabs__list-item">
		<a href="" class="basic-tabs__tab basic-tabs__tab--default">Tab Two</a>
	</li>
	<li class="basic-tabs__list-item">
		<a href="" class="basic-tabs__tab basic-tabs__tab--disabled">Disabled Tab</a>
	</li>
</ul>

/* css with sass mixin */
#basic-tabs-test {
	@media screen and (max-width: 750px) {
		@include basic-tabs--mobile();
	}
}

Folder Tabs

Apply with class .folder-tabs. Supports up to 10 tabs (nature of using z-index in reverse order of html :P). Uses whatever color has been assigned to $link-color to generate default, hover, current, and disabled state colors. Use .folder-tabs__list-item--current for the currently selected tab on the <li> or .folder-tabs__list-item--disabled for disabled tabs. All other tabs use .folder-tabs__list-item--default.

<!-- html -->
<ul class="folder-tabs folder-tabs_theme-generated">
	<li class="folder-tabs__list-item folder-tabs__list-item--default">
		<button type="button" class="folder-tabs__tab">Tab One</button>
	</li>
	<li class="folder-tabs__list-item folder-tabs__list-item--current">
		<button type="button" class="folder-tabs__tab">Current Tab</button>
	</li>
	<li class="folder-tabs__list-item folder-tabs__list-item--disabled">
		<button type="button" class="folder-tabs__tab">Disabled Tab</button>
	</li>
</ul>

/* css with sass mixin */
#folder-tabs-test1 {
	@media screen and (max-width: 900px) {
		@include folder-tabs--mobile();
	}
}

#folder-tabs-test2 {
	@media screen and (max-width: 700px) {
		@include folder-tabs--mobile();
	}
}

Another version of the default theme with alternating colors. Requires modifying class on tabs .folder-tabs__list-item--default_color-alternate. The disabled and current versions are the same as the standard default theme, and do not require the default and default_color-alternate classes.

<!-- html -->
<ul class="folder-tabs folder-tabs_theme-generated">
	<li class="folder-tabs__list-item folder-tabs__list-item--default folder-tabs__list-item--default_color-alternate">
		<a href="" class="folder-tabs__tab">Tab One</a>
	</li>
	<li class="folder-tabs__list-item folder-tabs__list-item--current">
		<a href="" class="folder-tabs__tab">Current Tab</a>
	</li>
	<li class="folder-tabs__list-item folder-tabs__list-item--disabled">
		<a href="" class="folder-tabs__tab">Disabled Tab</a>
	</li>
</ul>

Joined Tabs

Create by applying class .joined-tabs. Uses value assigned to $link-color to generate a theme, .joined-tabs_theme-generated. Tabs are assigned .joined-tabs__list-item and joined-tabs__list-item--default. The "open" tab is assigned .joined-tabs__list-item--currentand disabled tabs are assigned .joined-tabs__list-item--disabled.

To trigger a mobile friendlier version of joined-tabs, include joined-tabs--mobile() at the appropriate screen width in Sass. If you have a theme with a particular border, you can pass the border value as a parameter.

<!-- html -->
<ul class="joined-tabs joined-tabs_theme-generated">
	<li class="joined-tabs__list-item joined-tabs__list-item--current">
		<a href="" class="joined-tabs__tab">Current</a>
	</li>
	<li class="joined-tabs__list-item joined-tabs__list-item--default">
		<a href="" class="joined-tabs__tab">Tab Two</a>
	</li>
	<li class="joined-tabs__list-item joined-tabs__list-item--disabled">
		<a href="" class="joined-tabs__tab">Disabled</a>
	</li>
</ul>

/* css with sass mixin */
#joined-tabs-test {
	$border: 2px solid lighten($link-color, 10%);
	@media screen and (max-width: 850px) {
		@include joined-tabs--mobile($border);
	}
}