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 //
  33 // Tabs
  34 //
  35
  36 .nav-tabs {
  37   border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
  38
  39   .nav-link {
  40     margin-bottom: -$nav-tabs-border-width;
  41     border: $nav-tabs-border-width solid transparent;
  42     @include border-top-radius($nav-tabs-border-radius);
  43
  44     @include hover-focus() {
  45       border-color: $nav-tabs-link-hover-border-color;
  46     }
  47
  48     &.disabled {
  49       color: $nav-link-disabled-color;
  50       background-color: transparent;
  51       border-color: transparent;
  52     }
  53   }
  54
  55   .nav-link.active,
  56   .nav-item.show .nav-link {
  57     color: $nav-tabs-link-active-color;
  58     background-color: $nav-tabs-link-active-bg;
  59     border-color: $nav-tabs-link-active-border-color;
  60   }
  61
  62   .dropdown-menu {
  63     // Make dropdown border overlap tab border
  64     margin-top: -$nav-tabs-border-width;
  65     // Remove the top rounded corners here since there is a hard edge above the menu
  66     @include border-top-radius(0);
  67   }
  68 }
  69
  70
  71 //
  72 // Pills
  73 //
  74
  75 .nav-pills {
  76   .nav-link {
  77     @include border-radius($nav-pills-border-radius);
  78   }
  79
  80   .nav-link.active,
  81   .show > .nav-link {
  82     color: $nav-pills-link-active-color;
  83     background-color: $nav-pills-link-active-bg;
  84   }
  85 }
  86
  87
  88 //
  89 // Justified variants
  90 //
  91
  92 .nav-fill {
  93   > .nav-link,
  94   .nav-item {
  95     flex: 1 1 auto;
  96     text-align: center;
  97   }
  98 }
  99
 100 .nav-justified {
 101   > .nav-link,
 102   .nav-item {
 103     flex-basis: 0;
 104     flex-grow: 1;
 105     text-align: center;
 106   }
 107 }
 108
 109
 110 // Tabbable tabs
 111 //
 112 // Hide tabbable panes to start, show them when `.active`
 113
 114 .tab-content {
 115   > .tab-pane {
 116     display: none;
 117   }
 118   > .active {
 119     display: block;
 120   }
 121 }