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