scss/bootstrap/_nav.scss

0001 // Base class
0002 //
0003 // Kickstart any navigation component with a set of style resets. Works with
0004 // `<nav>`s, `<ul>`s or `<ol>`s.
0005
0006 .nav {
0007   display: flex;
0008   flex-wrap: wrap;
0009   padding-left: 0;
0010   margin-bottom: 0;
0011   list-style: none;
0012 }
0013
0014 .nav-link {
0015   display: block;
0016   padding: $nav-link-padding-y $nav-link-padding-x;
0017   @include font-size($nav-link-font-size);
0018   font-weight: $nav-link-font-weight;
0019   color: $nav-link-color;
0020   text-decoration: if($link-decoration == none, null, none);
0021   @include transition($nav-link-transition);
0022
0023   &:hover,
0024   &:focus {
0025     color: $nav-link-hover-color;
0026     text-decoration: if($link-hover-decoration == underline, none, null);
0027   }
0028
0029   // Disabled state lightens text
0030   &.disabled {
0031     color: $nav-link-disabled-color;
0032     pointer-events: none;
0033     cursor: default;
0034   }
0035 }
0036
0037 //
0038 // Tabs
0039 //
0040
0041 .nav-tabs {
0042   border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
0043
0044   .nav-link {
0045     margin-bottom: -$nav-tabs-border-width;
0046     border: $nav-tabs-border-width solid transparent;
0047     @include border-top-radius($nav-tabs-border-radius);
0048
0049     &:hover,
0050     &:focus {
0051       border-color: $nav-tabs-link-hover-border-color;
0052     }
0053
0054     &.disabled {
0055       color: $nav-link-disabled-color;
0056       background-color: transparent;
0057       border-color: transparent;
0058     }
0059   }
0060
0061   .nav-link.active,
0062   .nav-item.show .nav-link {
0063     color: $nav-tabs-link-active-color;
0064     background-color: $nav-tabs-link-active-bg;
0065     border-color: $nav-tabs-link-active-border-color;
0066   }
0067
0068   .dropdown-menu {
0069     // Make dropdown border overlap tab border
0070     margin-top: -$nav-tabs-border-width;
0071     // Remove the top rounded corners here since there is a hard edge above the menu
0072     @include border-top-radius(0);
0073   }
0074 }
0075
0076
0077 //
0078 // Pills
0079 //
0080
0081 .nav-pills {
0082   .nav-link {
0083     @include border-radius($nav-pills-border-radius);
0084   }
0085
0086   .nav-link.active,
0087   .show > .nav-link {
0088     color: $nav-pills-link-active-color;
0089     @include gradient-bg($nav-pills-link-active-bg);
0090   }
0091 }
0092
0093
0094 //
0095 // Justified variants
0096 //
0097
0098 .nav-fill {
0099   > .nav-link,
0100   .nav-item {
0101     flex: 1 1 auto;
0102     text-align: center;
0103   }
0104 }
0105
0106 .nav-justified {
0107   > .nav-link,
0108   .nav-item {
0109     flex-basis: 0;
0110     flex-grow: 1;
0111     text-align: center;
0112   }
0113 }
0114
0115
0116 // Tabbable tabs
0117 //
0118 // Hide tabbable panes to start, show them when `.active`
0119
0120 .tab-content {
0121   > .tab-pane {
0122     display: none;
0123   }
0124   > .active {
0125     display: block;
0126   }
0127 }