rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-19 16:54:24 +01:00
Code Issues Actions Packages Releases Activity

Revamp tabbed nav border variables

Browse Source 
- Add new $nav-tabs-border-width for the bottom border on the .nav-tabs
parent class
- Use that new variable for the negative margin on nav-items within it
for consistent customization
- Drop the $nav-tabs-link-border-width for the new variable so it’s all
tied together
This commit is contained in:
Mark Otto 2016-01-06 15:45:26 -08:00
parent 7668a66bbe
commit 93dda63b39
2 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
scss/_nav.scss
View File

@ -48,13 +48,13 @@
// //
.nav-tabs { .nav-tabs {
border-bottom: 1px solid $nav-tabs-border-color; border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
@include clearfix(); @include clearfix();
.nav-item { .nav-item {
float: left; float: left;
// Make the list-items overlay the bottom border // Make the list-items overlay the bottom border
margin-bottom: -1px; margin-bottom: -$nav-tabs-border-width;
+ .nav-item { + .nav-item {
margin-left: $nav-item-margin; margin-left: $nav-item-margin;
@ -64,7 +64,7 @@
.nav-link { .nav-link {
display: block; display: block;
padding: $nav-link-padding; padding: $nav-link-padding;
border: $nav-tabs-link-border-width solid transparent; border: $nav-tabs-border-width solid transparent;
@include border-radius($border-radius $border-radius 0 0); @include border-radius($border-radius $border-radius 0 0);
@include hover-focus { @include hover-focus {

2
scss/_variables.scss
View File

@ -399,8 +399,8 @@ $nav-disabled-link-hover-color: $gray-light !default;
$nav-disabled-link-hover-bg: transparent !default; $nav-disabled-link-hover-bg: transparent !default;
$nav-tabs-border-color: #ddd !default; $nav-tabs-border-color: #ddd !default;
$nav-tabs-border-width: $border-width !default;
$nav-tabs-link-border-width: $border-width !default;
$nav-tabs-link-hover-border-color: $gray-lighter !default; $nav-tabs-link-hover-border-color: $gray-lighter !default;
$nav-tabs-active-link-hover-bg: $body-bg !default; $nav-tabs-active-link-hover-bg: $body-bg !default;