css/bootstrap/_nav.scss

   1 // Base class
   2 //
   3 // Kickstart any navigation component with a set of style resets. Works with
   4 // `<nav>`s, `<ul>`s or `<ol>`s.
   5
   6 .nav {
   7   display: flex;
   8   flex-wrap: wrap;
   9   padding-left: 0;
  10   margin-bottom: 0;
  11   list-style: none;
  12 }
  13
  14 .nav-link {
  15   display: block;
  16   padding: $nav-link-padding-y $nav-link-padding-x;
  17   text-decoration: if($link-decoration == none, null, none);
  18
  19   @include hover-focus() {
  20     text-decoration: none;
  21     background: $nav-link-hover-bg; // Nick
  22   }
  23
  24   // Disabled state lightens text
  25   &.disabled {
  26     color: $nav-link-disabled-color;
  27     pointer-events: none;
  28     cursor: default;
  29   }
  30 }
  31
  32 // Nick (for sidebar)
  33 .nav-link2 {
  34   @include hover-focus() {
  35     background: $nav-link-hover-bg2; // Nick
  36   }
  37 }
  38
  39 // Nick (for stretched links)
  40 .nav-link-inner {
  41   display: block;
  42   padding: $nav-link-padding-y $nav-link-padding-x;
  43   text-decoration: if($link-decoration == none, null, none);
  44 }
  45 .nav-link-outer {
  46   @include hover-focus() {
  47     text-decoration: none;
  48     background: $nav-link-hover-bg; // Nick
  49   }
  50
  51   // Disabled state lightens text
  52   &.disabled {
  53     color: $nav-link-disabled-color;
  54     pointer-events: none;
  55     cursor: default;
  56   }
  57 }
  58
  59 //
  60 // Tabs
  61 //
  62
  63 .nav-tabs {
  64   border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
  65
  66   .nav-link {
  67     margin-bottom: -$nav-tabs-border-width;
  68     border: $nav-tabs-border-width solid transparent;
  69     @include border-top-radius($nav-tabs-border-radius);
  70
  71     @include hover-focus() {
  72       border-color: $nav-tabs-link-hover-border-color;
  73     }
  74
  75     &.disabled {
  76       color: $nav-link-disabled-color;
  77       background-color: transparent;
  78       border-color: transparent;
  79     }
  80   }
  81
  82   .nav-link.active,
  83   .nav-item.show .nav-link {
  84     color: $nav-tabs-link-active-color;
  85     background-color: $nav-tabs-link-active-bg;
  86     border-color: $nav-tabs-link-active-border-color;
  87   }
  88
  89   .dropdown-menu {
  90     // Make dropdown border overlap tab border
  91     margin-top: -$nav-tabs-border-width;
  92     // Remove the top rounded corners here since there is a hard edge above the menu
  93     @include border-top-radius(0);
  94   }
  95 }
  96
  97
  98 //
  99 // Pills
 100 //
 101
 102 .nav-pills {
 103   .nav-link {
 104     @include border-radius($nav-pills-border-radius);
 105   }
 106
 107   .nav-link.active,
 108   .show > .nav-link {
 109     color: $nav-pills-link-active-color;
 110     background-color: $nav-pills-link-active-bg;
 111   }
 112 }
 113
 114
 115 //
 116 // Justified variants
 117 //
 118
 119 .nav-fill {
 120   > .nav-link,
 121   .nav-item {
 122     flex: 1 1 auto;
 123     text-align: center;
 124   }
 125 }
 126
 127 .nav-justified {
 128   > .nav-link,
 129   .nav-item {
 130     flex-basis: 0;
 131     flex-grow: 1;
 132     text-align: center;
 133   }
 134 }
 135
 136
 137 // Tabbable tabs
 138 //
 139 // Hide tabbable panes to start, show them when `.active`
 140
 141 .tab-content {
 142   > .tab-pane {
 143     display: none;
 144   }
 145   > .active {
 146     display: block;
 147   }
 148 }