git.roojs.org Git - bootswatch/blob - bower_components/bootstrap/less/navs.less

   1 //
   2 // Navs
   3 // --------------------------------------------------
   4
   5
   6 // Base class
   7 // --------------------------------------------------
   8
   9 .nav {
  10   margin-bottom: 0;
  11   padding-left: 0; // Override default ul/ol
  12   list-style: none;
  13   .clearfix();
  14
  15   > li {
  16     position: relative;
  17     display: block;
  18
  19     > a {
  20       position: relative;
  21       display: block;
  22       padding: @nav-link-padding;
  23       &:hover,
  24       &:focus {
  25         text-decoration: none;
  26         background-color: @nav-link-hover-bg;
  27       }
  28     }
  29
  30     // Disabled state sets text to gray and nukes hover/tab effects
  31     &.disabled > a {
  32       color: @nav-disabled-link-color;
  33
  34       &:hover,
  35       &:focus {
  36         color: @nav-disabled-link-hover-color;
  37         text-decoration: none;
  38         background-color: transparent;
  39         cursor: not-allowed;
  40       }
  41     }
  42   }
  43
  44   // Open dropdowns
  45   .open > a {
  46     &,
  47     &:hover,
  48     &:focus {
  49       background-color: @nav-link-hover-bg;
  50       border-color: @link-color;
  51     }
  52   }
  53
  54   // Dividers (basically an hr) within the dropdown
  55   .nav-divider {
  56     .nav-divider();
  57   }
  58
  59   // Prevent IE8 from misplacing imgs
  60   // See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989
  61   > li > a > img {
  62     max-width: none;
  63   }
  64 }
  65
  66
  67 // Tabs
  68 // -------------------------
  69
  70 // Give the tabs something to sit on
  71 .nav-tabs {
  72   border-bottom: 1px solid @nav-tabs-border-color;
  73   > li {
  74     float: left;
  75     // Make the list-items overlay the bottom border
  76     margin-bottom: -1px;
  77
  78     // Actual tabs (as links)
  79     > a {
  80       margin-right: 2px;
  81       line-height: @line-height-base;
  82       border: 1px solid transparent;
  83       border-radius: @border-radius-base @border-radius-base 0 0;
  84       &:hover {
  85         border-color: @nav-tabs-link-hover-border-color @nav-tabs-link-hover-border-color @nav-tabs-border-color;
  86       }
  87     }
  88
  89     // Active state, and it's :hover to override normal :hover
  90     &.active > a {
  91       &,
  92       &:hover,
  93       &:focus {
  94         color: @nav-tabs-active-link-hover-color;
  95         background-color: @nav-tabs-active-link-hover-bg;
  96         border: 1px solid @nav-tabs-active-link-hover-border-color;
  97         border-bottom-color: transparent;
  98         cursor: default;
  99       }
 100     }
 101   }
 102   // pulling this in mainly for less shorthand
 103   &.nav-justified {
 104     .nav-justified();
 105     .nav-tabs-justified();
 106   }
 107 }
 108
 109
 110 // Pills
 111 // -------------------------
 112 .nav-pills {
 113   > li {
 114     float: left;
 115
 116     // Links rendered as pills
 117     > a {
 118       border-radius: 5px;
 119     }
 120     + li {
 121       margin-left: 2px;
 122     }
 123
 124     // Active state
 125     &.active > a {
 126       &,
 127       &:hover,
 128       &:focus {
 129         color: @nav-pills-active-link-hover-color;
 130         background-color: @nav-pills-active-link-hover-bg;
 131       }
 132     }
 133   }
 134 }
 135
 136
 137 // Stacked pills
 138 .nav-stacked {
 139   > li {
 140     float: none;
 141     + li {
 142       margin-top: 2px;
 143       margin-left: 0; // no need for this gap between nav items
 144     }
 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     }
 163   }
 164
 165   @media (min-width: @screen-small) {
 166     > li {
 167       display: table-cell;
 168       width: 1%;
 169     }
 170   }
 171 }
 172
 173 // Move borders to anchors instead of bottom of list
 174 .nav-tabs-justified {
 175   border-bottom: 0;
 176   > li > a {
 177     border-bottom: 1px solid @nav-tabs-justified-link-border-color;
 178
 179     // Override margin from .nav-tabs
 180     margin-right: 0;
 181   }
 182   > .active > a {
 183     border-bottom-color: @nav-tabs-justified-active-link-border-color;
 184   }
 185 }
 186
 187
 188 // Tabbable tabs
 189 // -------------------------
 190
 191 // Clear any floats
 192 .tabbable {
 193   .clearfix();
 194 }
 195
 196 // Show/hide tabbable areas
 197 .tab-content > .tab-pane,
 198 .pill-content > .pill-pane {
 199   display: none;
 200 }
 201 .tab-content,
 202 .pill-content {
 203   > .active {
 204     display: block;
 205   }
 206 }
 207
 208
 209
 210 // Dropdowns
 211 // -------------------------
 212
 213 // Make dropdown carets use link color in navs
 214 .nav .caret {
 215   border-top-color: @link-color;
 216   border-bottom-color: @link-color;
 217 }
 218 .nav a:hover .caret {
 219   border-top-color: @link-hover-color;
 220   border-bottom-color: @link-hover-color;
 221 }
 222
 223 // Specific dropdowns
 224 .nav-tabs .dropdown-menu {
 225   // make dropdown border overlap tab border
 226   margin-top: -1px;
 227   // Remove the top rounded corners here since there is a hard edge above the menu
 228   .border-top-radius(0);
 229 }