Contents

.tab-nav {
	box-shadow: 0 1px 0 $black-divider;
	margin-top: $margin-md;
	margin-bottom: $margin-md;
	position: relative;
	.nav {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
		> li {
			vertical-align: bottom;
			> a,
			> .a {
				border-bottom: 2px solid transparent;
				color: inherit;
				padding-bottom: (($nav-height - $line-height) / 2 - 2);
				text-transform: uppercase;
				transition: border-bottom-color 0s;
				&:focus,
				&:hover {
					border-bottom-color: lighten($link-color, 30%);
					transition: border-bottom-color 0.3s $timing;
				}
			}
			&.active > a,
			&.active > .a {
				border-bottom-color: $brand-color-accent;
				color: $brand-color-accent;
				transition: border-bottom-color 0s 0.45s;
			}
		}
	}
}

.tab-nav-indicator {
	background-color: transparent;
	height: 2px;
	position: absolute;
		bottom: 0;
	&.animate {
		background-color: $brand-color-accent;
		transition: left 0.225s $timing 0.225s, right 0.45s $timing;
		will-change: left, right;
		&.reverse {
			transition: left 0.45s $timing, right 0.225s $timing 0.225s;
		}
	}
}

// colour
	@each $color in $palette-list-class {
		$i: index($palette-list-class, $color);

		@if $color != "brand-accent" {
			.tab-nav-#{$color} {
				.nav {
					> li {
						> a,
						> .a {
							&:focus,
							&:hover {
								border-bottom-color: nth($palette-list-light, $i);
							}
						}
						&.active > a,
						&.active > .a {
							border-bottom-color: nth($palette-list-color, $i);
							color: nth($palette-list-color, $i);
						}
					}
				}
				.tab-nav-indicator.animate {
					background-color: nth($palette-list-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-1.1.0	app/assets/stylesheets/material/components/_tab.scss
material-sass-1.0.0	app/assets/stylesheets/material/components/_tab.scss