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