1
1
mirror of https://github.com/primer/css.git synced 2024-11-23 11:27:26 +03:00
css/scss/_tabnav.scss
2016-03-04 12:28:38 -05:00

73 lines
1.2 KiB
SCSS

// Outer wrapper
.tabnav {
margin-top: 0;
margin-bottom: 15px;
border-bottom: 1px solid #ddd;
.counter {
margin-left: 5px;
}
}
.tabnav-tabs {
margin-bottom: -1px;
}
.tabnav-tab {
display: inline-block;
padding: 8px 12px;
font-size: 14px;
line-height: 20px;
color: #666;
text-decoration: none;
background-color: transparent;
border: 1px solid transparent;
border-bottom: 0;
&.selected {
color: $text-gray-dark;
background-color: $bg-white;
border-color: #ddd;
border-radius: 3px 3px 0 0;
}
&:hover,
&:focus {
text-decoration: none;
}
}
// Tabnav extras
//
// Tabnav extras are non-tab elements that sit in the tabnav. Usually they're
// inline text or links.
.tabnav-extra {
display: inline-block;
padding-top: 10px;
margin-left: 10px;
font-size: 12px;
color: #666;
> .octicon {
margin-right: 2px;
}
}
// When tabnav-extra are anchors
// scss-lint:disable QualifyingElement
a.tabnav-extra:hover {
color: $text-blue;
text-decoration: none;
}
// scss-lint:enable QualifyingElement
// Tabnav buttons
//
// For when there are multiple buttons, space them out appropriately. Requires
// the buttons to be floated or inline-block.
.tabnav-btn {
margin-left: 10px;
}