themes/default/less/navs.less

   1 // NAVIGATIONS
   2 // -----------
   3
   4
   5
   6 // BASE CLASS
   7 // ----------
   8
   9 .nav {
  10   margin-left: 0;
  11   margin-bottom: @baseLineHeight;
  12   list-style: none;
  13 }
  14
  15 // Make links block level
  16 .nav > li > a {
  17   display: block;
  18 }
  19 .nav > li > a:hover {
  20   text-decoration: none;
  21   background-color: @grayLighter;
  22 }
  23
  24 // Nav headers (for dropdowns and lists)
  25 .nav .nav-header {
  26   display: block;
  27   padding: 3px 15px;
  28   font-size: 11px;
  29   font-weight: bold;
  30   line-height: @baseLineHeight;
  31   color: @grayLight;
  32   text-shadow: 0 1px 0 rgba(255,255,255,.5);
  33   text-transform: uppercase;
  34 }
  35 // Space them out when they follow another list item (link)
  36 .nav li + .nav-header {
  37   margin-top: 9px;
  38 }
  39
  40
  41 // NAV LIST
  42 // --------
  43
  44 .nav-list {
  45   padding-left: 14px;
  46   padding-right: 14px;
  47   margin-bottom: 0;
  48 }
  49 .nav-list > li > a,
  50 .nav-list .nav-header {
  51   margin-left:  -15px;
  52   margin-right: -15px;
  53   text-shadow: 0 1px 0 rgba(255,255,255,.5);
  54 }
  55 .nav-list > li > a {
  56   padding: 3px 15px;
  57 }
  58 .nav-list .active > a,
  59 .nav-list .active > a:hover {
  60   color: @white;
  61   text-shadow: 0 -1px 0 rgba(0,0,0,.2);
  62   background-color: @linkColor;
  63 }
  64 .nav-list [class^="icon-"] {
  65   margin-right: 2px;
  66 }
  67
  68
  69
  70 // TABS AND PILLS
  71 // -------------
  72
  73 // Common styles
  74 .nav-tabs,
  75 .nav-pills {
  76   .clearfix();
  77 }
  78 .nav-tabs > li,
  79 .nav-pills > li {
  80   float: left;
  81 }
  82 .nav-tabs > li > a,
  83 .nav-pills > li > a {
  84   padding-right: 12px;
  85   padding-left: 12px;
  86   margin-right: 2px;
  87   line-height: 14px; // keeps the overall height an even number
  88 }
  89
  90 // TABS
  91 // ----
  92
  93 // Give the tabs something to sit on
  94 .nav-tabs {
  95   border-bottom: 1px solid #ddd;
  96 }
  97
  98 // Make the list-items overlay the bottom border
  99 .nav-tabs > li {
 100   margin-bottom: -1px;
 101 }
 102
 103 // Actual tabs (as links)
 104 .nav-tabs > li > a {
 105   padding-top: 9px;
 106   padding-bottom: 9px;
 107   border: 1px solid transparent;
 108   .border-radius(4px 4px 0 0);
 109   &:hover {
 110     border-color: @grayLighter @grayLighter #ddd;
 111   }
 112 }
 113 // Active state, and it's :hover to override normal :hover
 114 .nav-tabs > .active > a,
 115 .nav-tabs > .active > a:hover {
 116   color: @gray;
 117   background-color: @white;
 118   border: 1px solid #ddd;
 119   border-bottom-color: transparent;
 120   cursor: default;
 121 }
 122
 123 // PILLS
 124 // -----
 125
 126 // Links rendered as pills
 127 .nav-pills > li > a {
 128   padding-top: 8px;
 129   padding-bottom: 8px;
 130   margin-top: 2px;
 131   margin-bottom: 2px;
 132   .border-radius(5px);
 133 }
 134
 135 // Active state
 136 .nav-pills .active > a,
 137 .nav-pills .active > a:hover {
 138   color: @white;
 139   background-color: @linkColor;
 140 }
 141
 142
 143
 144 // STACKED NAV
 145 // -----------
 146
 147 // Stacked tabs and pills
 148 .nav-stacked > li {
 149   float: none;
 150 }
 151 .nav-stacked > li > a {
 152   margin-right: 0; // no need for the gap between nav items
 153 }
 154
 155 // Tabs
 156 .nav-tabs.nav-stacked {
 157   border-bottom: 0;
 158 }
 159 .nav-tabs.nav-stacked > li > a {
 160   border: 1px solid #ddd;
 161   .border-radius(0);
 162 }
 163 .nav-tabs.nav-stacked > li:first-child > a {
 164   .border-radius(4px 4px 0 0);
 165 }
 166 .nav-tabs.nav-stacked > li:last-child > a {
 167   .border-radius(0 0 4px 4px);
 168 }
 169 .nav-tabs.nav-stacked > li > a:hover {
 170   border-color: #ddd;
 171   z-index: 2;
 172 }
 173
 174 // Pills
 175 .nav-pills.nav-stacked > li > a {
 176   margin-bottom: 3px;
 177 }
 178 .nav-pills.nav-stacked > li:last-child > a {
 179   margin-bottom: 1px; // decrease margin to match sizing of stacked tabs
 180 }
 181
 182
 183
 184 // DROPDOWNS
 185 // ---------
 186
 187 // Position the menu
 188 .nav-tabs .dropdown-menu,
 189 .nav-pills .dropdown-menu {
 190   margin-top: 1px;
 191   border-width: 1px;
 192 }
 193 .nav-pills .dropdown-menu {
 194   .border-radius(4px);
 195 }
 196
 197 // Default dropdown links
 198 // -------------------------
 199 // Make carets use linkColor to start
 200 .nav-tabs .dropdown-toggle .caret,
 201 .nav-pills .dropdown-toggle .caret {
 202   border-top-color: @linkColor;
 203   margin-top: 6px;
 204 }
 205 .nav-tabs .dropdown-toggle:hover .caret,
 206 .nav-pills .dropdown-toggle:hover .caret {
 207   border-top-color: @linkColorHover;
 208 }
 209
 210 // Active dropdown links
 211 // -------------------------
 212 .nav-tabs .active .dropdown-toggle .caret,
 213 .nav-pills .active .dropdown-toggle .caret {
 214   border-top-color: @grayDark;
 215 }
 216
 217 // Active:hover dropdown links
 218 // -------------------------
 219 .nav > .dropdown.active > a:hover {
 220   color: @black;
 221   cursor: pointer;
 222 }
 223
 224 // Open dropdowns
 225 // -------------------------
 226 .nav-tabs .open .dropdown-toggle,
 227 .nav-pills .open .dropdown-toggle,
 228 .nav > .open.active > a:hover {
 229   color: @white;
 230   background-color: @grayLight;
 231   border-color: @grayLight;
 232 }
 233 .nav .open .caret,
 234 .nav .open.active .caret,
 235 .nav .open a:hover .caret {
 236   border-top-color: @white;
 237   .opacity(100);
 238 }
 239
 240 // Dropdowns in stacked tabs
 241 .tabs-stacked .open > a:hover {
 242   border-color: @grayLight;
 243 }
 244
 245
 246
 247 // TABBABLE
 248 // --------
 249
 250
 251 // COMMON STYLES
 252 // -------------
 253
 254 // Clear any floats
 255 .tabbable {
 256   .clearfix();
 257 }
 258 .tab-content {
 259   overflow: hide; // prevent content from running below tabs
 260 }
 261
 262 // Remove border on bottom, left, right
 263 .tabs-below .nav-tabs,
 264 .tabs-right .nav-tabs,
 265 .tabs-left .nav-tabs {
 266   border-bottom: 0;
 267 }
 268
 269 // Show/hide tabbable areas
 270 .tab-content > .tab-pane,
 271 .pill-content > .pill-pane {
 272   display: none;
 273 }
 274 .tab-content > .active,
 275 .pill-content > .active {
 276   display: block;
 277 }
 278
 279
 280 // BOTTOM
 281 // ------
 282
 283 .tabs-below .nav-tabs {
 284   border-top: 1px solid #ddd;
 285 }
 286 .tabs-below .nav-tabs > li {
 287   margin-top: -1px;
 288   margin-bottom: 0;
 289 }
 290 .tabs-below .nav-tabs > li > a {
 291   .border-radius(0 0 4px 4px);
 292   &:hover {
 293     border-bottom-color: transparent;
 294     border-top-color: #ddd;
 295   }
 296 }
 297 .tabs-below .nav-tabs .active > a,
 298 .tabs-below .nav-tabs .active > a:hover {
 299   border-color: transparent #ddd #ddd #ddd;
 300 }
 301
 302 // LEFT & RIGHT
 303 // ------------
 304
 305 // Common styles
 306 .tabs-left .nav-tabs > li,
 307 .tabs-right .nav-tabs > li {
 308   float: none;
 309 }
 310 .tabs-left .nav-tabs > li > a,
 311 .tabs-right .nav-tabs > li > a {
 312   min-width: 74px;
 313   margin-right: 0;
 314   margin-bottom: 3px;
 315 }
 316
 317 // Tabs on the left
 318 .tabs-left .nav-tabs {
 319   float: left;
 320   margin-right: 19px;
 321   border-right: 1px solid #ddd;
 322 }
 323 .tabs-left .nav-tabs > li > a {
 324   margin-right: -1px;
 325   .border-radius(4px 0 0 4px);
 326 }
 327 .tabs-left .nav-tabs > li > a:hover {
 328   border-color: @grayLighter #ddd @grayLighter @grayLighter;
 329 }
 330 .tabs-left .nav-tabs .active > a,
 331 .tabs-left .nav-tabs .active > a:hover {
 332   border-color: #ddd transparent #ddd #ddd;
 333   *border-right-color: @white;
 334 }
 335
 336 // Tabs on the right
 337 .tabs-right .nav-tabs {
 338   float: right;
 339   margin-left: 19px;
 340   border-left: 1px solid #ddd;
 341 }
 342 .tabs-right .nav-tabs > li > a {
 343   margin-left: -1px;
 344   .border-radius(0 4px 4px 0);
 345 }
 346 .tabs-right .nav-tabs > li > a:hover {
 347   border-color: @grayLighter @grayLighter @grayLighter #ddd;
 348 }
 349 .tabs-right .nav-tabs .active > a,
 350 .tabs-right .nav-tabs .active > a:hover {
 351   border-color: #ddd #ddd #ddd transparent;
 352   *border-left-color: @white;
 353 }