[Summary view] [Print] [Text view]

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