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 or `<ul>`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
  18   @include hover-focus {
  19     text-decoration: none;
  20   }
  21
  22   // Disabled state lightens text
  23   &.disabled {
  24     color: $nav-link-disabled-color;
  25     pointer-events: none;
  26     cursor: default;
  27   }
  28 }
  29
  30 //
  31 // Tabs
  32 //
  33
  34 .nav-tabs {
  35   border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
  36
  37   .nav-item {
  38     margin-bottom: -$nav-tabs-border-width;
  39   }
  40
  41   .nav-link {
  42     border: $nav-tabs-border-width solid transparent;
  43     @include border-top-radius($nav-tabs-border-radius);
  44
  45     @include hover-focus {
  46       border-color: $nav-tabs-link-hover-border-color;
  47     }
  48
  49     &.disabled {
  50       color: $nav-link-disabled-color;
  51       background-color: transparent;
  52       border-color: transparent;
  53     }
  54   }
  55
  56   .nav-link.active,
  57   .nav-item.show .nav-link {
  58     color: $nav-tabs-link-active-color;
  59     background-color: $nav-tabs-link-active-bg;
  60     border-color: $nav-tabs-link-active-border-color;
  61   }
  62
  63   .dropdown-menu {
  64     // Make dropdown border overlap tab border
  65     margin-top: -$nav-tabs-border-width;
  66     // Remove the top rounded corners here since there is a hard edge above the menu
  67     @include border-top-radius(0);
  68   }
  69 }
  70
  71
  72 //
  73 // Pills
  74 //
  75
  76 .nav-pills {
  77   .nav-link {
  78     @include border-radius($nav-pills-border-radius);
  79   }
  80
  81   .nav-link.active,
  82   .show > .nav-link {
  83     color: $nav-pills-link-active-color;
  84     background-color: $nav-pills-link-active-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-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 }