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