@angular2-material/tabs
Version:
Angular 2 Material Tabs
64 lines (56 loc) • 1.4 kB
CSS
:host {
display: flex;
flex-direction: column;
font-family: Roboto, "Helvetica Neue", sans-serif; }
/** The top section of the view; contains the tab labels */
.md-tab-header {
overflow: hidden;
position: relative;
display: flex;
flex-direction: row;
border-bottom: 1px solid #e0e0e0;
flex-shrink: 0; }
/** Wraps each tab label */
.md-tab-label {
line-height: 48px;
height: 48px;
padding: 0 12px;
font-size: 14px;
font-family: Roboto, "Helvetica Neue", sans-serif;
font-weight: 500;
cursor: pointer;
box-sizing: border-box;
color: currentColor;
opacity: 0.6;
min-width: 160px;
text-align: center; }
.md-tab-label:focus {
outline: none;
opacity: 1;
background-color: rgba(178, 223, 219, 0.3); }
.md-tab-disabled {
cursor: default;
pointer-events: none; }
/** The bottom section of the view; contains the tab bodies */
.md-tab-body-wrapper {
position: relative;
overflow: hidden;
flex-grow: 1;
display: flex; }
/** Wraps each tab body */
.md-tab-body {
display: none;
overflow: auto;
box-sizing: border-box;
flex-grow: 1;
flex-shrink: 1; }
.md-tab-body.md-tab-active {
display: block; }
/** The colored bar that underlines the active tab */
md-ink-bar {
position: absolute;
bottom: 0;
height: 2px;
background-color: #009688;
transition: 350ms ease-out; }
/*# sourceMappingURL=tab-group.css.map */