Contents

.tab-nav {
	border-bottom: 1px solid $black-hint;
	margin-top: $line-height;
	margin-bottom: $line-height;
	position: relative;
	.nav {
		margin-top: 0;
		margin-bottom: -1px;
		> li {
			vertical-align: bottom;
			> a {
				color: $black-text;
				padding-right: ($grid-gutter / 2);
				padding-left: ($grid-gutter / 2);
				text-transform: uppercase;
				@include transition(border-bottom 0s, padding-bottom 0s);
				&:focus,
				&:hover {
					color: $link-color;
				}
			}
			&.active > a {
				border-bottom: 3px solid $link-color;
				color: $link-color;
				padding-bottom: ($line-height / 2 - 3);
				@include transition(border-bottom 0s 0.45s, padding-bottom 0s 0.45s);
			}
		}
	}
}

.tab-nav-indicator {
	background-color: $link-color;
	height: 3px;
	position: absolute;
		bottom: -1px;
	@include transition(left 0.3s $timing 0.15s, right 0.3s $timing);
	&.reverse {
		@include transition(left 0.3s $timing, right 0.3s $timing 0.15s);
	}
}

// colour
	@each $color in $palette-list {
		$i: index($palette-list, $color);
		
		.tab-nav-#{$color} {
			.nav {
				> li {
					> a {
						&:focus,
						&:hover {
							color: nth($palette-color, $i);
						}
					}
					&.active > a {
						border-bottom-color: nth($palette-color, $i);
						color: nth($palette-color, $i);
					}
				}
			}
			.tab-nav-indicator {
				background-color: nth($palette-color, $i);
			}
		}
	}

.tab-pane {
	display: none;
	visibility: hidden;
	&.active {
		display: block;
		visibility: visible;
	}
}

Version data entries

2 entries across 2 versions & 1 rubygems

Version	Path
material-sass-0.0.3	app/assets/stylesheets/material/element/_tab.scss
material-sass-0.0.2	app/assets/stylesheets/material/element/_tab.scss