resources/scss/bootstrap/_navs.scss

   1 //
   2 // Navs
   3 // --------------------------------------------------
   4
   5 // Base class
   6 // --------------------------------------------------
   7
   8 .nav {
   9   margin-bottom: 0;
  10   padding-left: 0; // Override default ul/ol
  11   list-style: none;
  12   @include clearfix;
  13
  14   > li {
  15         position: relative;
  16         display: block;
  17
  18         > a {
  19           position: relative;
  20           display: block;
  21           padding: $nav-link-padding;
  22           &:hover,
  23           &:focus {
  24                 text-decoration: none;
  25                 background-color: $nav-link-hover-bg;
  26           }
  27         }
  28
  29         // Disabled state sets text to gray and nukes hover/tab effects
  30         &.disabled > a {
  31           color: $nav-disabled-link-color;
  32
  33           &:hover,
  34           &:focus {
  35                 color: $nav-disabled-link-hover-color;
  36                 text-decoration: none;
  37                 background-color: transparent;
  38                 cursor: $cursor-disabled;
  39           }
  40         }
  41   }
  42
  43   // Open dropdowns
  44   .open > a {
  45         &,
  46         &:hover,
  47         &:focus {
  48           background-color: $nav-link-hover-bg;
  49           border-color: $link-color;
  50         }
  51   }
  52
  53   // Nav dividers (deprecated with v3.0.1)
  54   //
  55   // This should have been removed in v3 with the dropping of `.nav-list`, but
  56   // we missed it. We don't currently support this anywhere, but in the interest
  57   // of maintaining backward compatibility in case you use it, it's deprecated.
  58   .nav-divider {
  59         @include nav-divider;
  60   }
  61
  62   // Prevent IE8 from misplacing imgs
  63   //
  64   // See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989
  65   > li > a > img {
  66         max-width: none;
  67   }
  68 }
  69
  70 // Tabs
  71 // -------------------------
  72
  73 // Give the tabs something to sit on
  74 .nav-tabs {
  75   border-bottom: 1px solid $nav-tabs-border-color;
  76   > li {
  77         float: left;
  78         // Make the list-items overlay the bottom border
  79         margin-bottom: -1px;
  80
  81         // Actual tabs (as links)
  82         > a {
  83           margin-right: 2px;
  84           line-height: $line-height-base;
  85           border: 1px solid transparent;
  86           border-radius: $border-radius-base $border-radius-base 0 0;
  87           &:hover {
  88                 border-color: $nav-tabs-link-hover-border-color $nav-tabs-link-hover-border-color $nav-tabs-border-color;
  89           }
  90         }
  91
  92         // Active state, and its :hover to override normal :hover
  93         &.active > a {
  94           &,
  95           &:hover,
  96           &:focus {
  97                 color: $nav-tabs-active-link-hover-color;
  98                 background-color: $nav-tabs-active-link-hover-bg;
  99                 border: 1px solid $nav-tabs-active-link-hover-border-color;
 100                 border-bottom-color: transparent;
 101                 cursor: default;
 102           }
 103         }
 104   }
 105   // pulling this in mainly for less shorthand
 106   &.nav-justified {
 107         @extend .nav-justified;
 108         @extend .nav-tabs-justified;
 109   }
 110 }
 111
 112 // Pills
 113 // -------------------------
 114 .nav-pills {
 115   > li {
 116         float: left;
 117
 118         // Links rendered as pills
 119         > a {
 120           border-radius: $nav-pills-border-radius;
 121         }
 122         + li {
 123           margin-left: 2px;
 124         }
 125
 126         // Active state
 127         &.active > a {
 128           &,
 129           &:hover,
 130           &:focus {
 131                 color: $nav-pills-active-link-hover-color;
 132                 background-color: $nav-pills-active-link-hover-bg;
 133           }
 134         }
 135   }
 136 }
 137
 138 // Stacked pills
 139 .nav-stacked {
 140   > li {
 141         float: none;
 142         + li {
 143           margin-top: 2px;
 144           margin-left: 0; // no need for this gap between nav items
 145         }
 146   }
 147 }
 148
 149 // Nav variations
 150 // --------------------------------------------------
 151
 152 // Justified nav links
 153 // -------------------------
 154
 155 .nav-justified {
 156   width: 100%;
 157
 158   > li {
 159         float: none;
 160         > a {
 161           text-align: center;
 162           margin-bottom: 5px;
 163         }
 164   }
 165
 166   > .dropdown .dropdown-menu {
 167         top: auto;
 168         left: auto;
 169   }
 170
 171   @media (min-width: $screen-sm-min) {
 172         > li {
 173           display: table-cell;
 174           width: 1%;
 175           > a {
 176                 margin-bottom: 0;
 177           }
 178         }
 179   }
 180 }
 181
 182 // Move borders to anchors instead of bottom of list
 183 //
 184 // Mixin for adding on top the shared `.nav-justified` styles for our tabs
 185 .nav-tabs-justified {
 186   border-bottom: 0;
 187
 188   > li > a {
 189         // Override margin from .nav-tabs
 190         margin-right: 0;
 191         border-radius: $border-radius-base;
 192   }
 193
 194   > .active > a,
 195   > .active > a:hover,
 196   > .active > a:focus {
 197         border: 1px solid $nav-tabs-justified-link-border-color;
 198   }
 199
 200   @media (min-width: $screen-sm-min) {
 201         > li > a {
 202           border-bottom: 1px solid $nav-tabs-justified-link-border-color;
 203           border-radius: $border-radius-base $border-radius-base 0 0;
 204         }
 205         > .active > a,
 206         > .active > a:hover,
 207         > .active > a:focus {
 208           border-bottom-color: $nav-tabs-justified-active-link-border-color;
 209         }
 210   }
 211 }
 212
 213 // Tabbable tabs
 214 // -------------------------
 215
 216 // Hide tabbable panes to start, show them when `.active`
 217 .tab-content {
 218   > .tab-pane {
 219         display: none;
 220   }
 221   > .active {
 222         display: block;
 223   }
 224 }
 225
 226 // Dropdowns
 227 // -------------------------
 228
 229 // Specific dropdowns
 230 .nav-tabs .dropdown-menu {
 231   // make dropdown border overlap tab border
 232   margin-top: -1px;
 233   // Remove the top rounded corners here since there is a hard edge above the menu
 234   @include border-top-radius(0);
 235 }