static/scss/bootstrap-4.0.0-alpha.6/scss/_nav.scss

   1 // Base class
   2 //
   3 // Kickstart any navigation component with a set of style resets. Works with
   4 // `<nav>`s or `<ul>`s.
   5
   6 .nav {
   7   display: flex;
   8   padding-left: 0;
   9   margin-bottom: 0;
  10   list-style: none;
  11 }
  12
  13 .nav-link {
  14   display: block;
  15   padding: $nav-link-padding;
  16
  17   @include hover-focus {
  18     text-decoration: none;
  19   }
  20
  21   // Disabled state lightens text and removes hover/tab effects
  22   &.disabled {
  23     color: $nav-disabled-link-color;
  24     cursor: $cursor-disabled;
  25   }
  26 }
  27
  28
  29 //
  30 // Tabs
  31 //
  32
  33 .nav-tabs {
  34   border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
  35
  36   .nav-item {
  37     margin-bottom: -$nav-tabs-border-width;
  38   }
  39
  40   .nav-link {
  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 $nav-tabs-link-hover-border-color $nav-tabs-border-color;
  46     }
  47
  48     &.disabled {
  49       color: $nav-disabled-link-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-active-link-hover-color;
  58     background-color: $nav-tabs-active-link-hover-bg;
  59     border-color: $nav-tabs-active-link-hover-border-color $nav-tabs-active-link-hover-border-color $nav-tabs-active-link-hover-bg;
  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   .nav-item.show .nav-link {
  82     color: $nav-pills-active-link-color;
  83     cursor: default;
  84     background-color: $nav-pills-active-link-bg;
  85   }
  86 }
  87
  88
  89 //
  90 // Justified variants
  91 //
  92
  93 .nav-fill {
  94   .nav-item {
  95     flex: 1 1 auto;
  96     text-align: center;
  97   }
  98 }
  99
 100 .nav-justified {
 101   .nav-item {
 102     flex: 1 1 100%;
 103     text-align: center;
 104   }
 105 }
 106
 107
 108 // Tabbable tabs
 109 //
 110 // Hide tabbable panes to start, show them when `.active`
 111
 112 .tab-content {
 113   > .tab-pane {
 114     display: none;
 115   }
 116   > .active {
 117     display: block;
 118   }
 119 }