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: 10px 15px;
  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     // Space the headers out when they follow another list item (link)
  44     + .nav-header {
  45       margin-top: 9px;
  46     }
  47   }
  48
  49   // Open dropdowns
  50   &.open > a {
  51     &,
  52     &:hover,
  53     &:focus {
  54       color: @nav-open-link-hover-color;
  55       background-color: @link-color;
  56       border-color: @link-color;
  57       .caret {
  58         border-top-color: @nav-open-caret-border-color;
  59         border-bottom-color: @nav-open-caret-border-color;
  60       }
  61     }
  62   }
  63
  64   // Redeclare pull classes because of specificity
  65   // Todo: consider making these utilities !important to avoid this bullshit
  66   > .pull-right {
  67     float: right;
  68   }
  69
  70   // Dividers (basically an hr) within the dropdown
  71   .nav-divider {
  72     .nav-divider();
  73   }
  74 }
  75
  76
  77
  78 // Nav variations
  79 // --------------------------------------------------
  80
  81 // Tabs
  82 // -------------------------
  83
  84 // Give the tabs something to sit on
  85 .nav-tabs {
  86   border-bottom: 1px solid @nav-tabs-border-color;
  87   > li {
  88     float: left;
  89     // Make the list-items overlay the bottom border
  90     margin-bottom: -1px;
  91
  92     // Actual tabs (as links)
  93     > a {
  94       margin-right: 2px;
  95       line-height: @line-height-base;
  96       border: 1px solid transparent;
  97       border-radius: @border-radius-base @border-radius-base 0 0;
  98       &:hover {
  99         border-color: @nav-tabs-link-hover-border-color;
 100       }
 101     }
 102
 103     // Active state, and it's :hover to override normal :hover
 104     &.active > a {
 105       &,
 106       &:hover,
 107       &:focus {
 108         color: @nav-tabs-active-link-hover-color;
 109         background-color: @nav-tabs-active-link-hover-bg;
 110         border: 1px solid @nav-tabs-active-link-hover-border-color;
 111         border-bottom-color: transparent;
 112         cursor: default;
 113       }
 114     }
 115   }
 116   // pulling this in mainly for less shorthand
 117   &.nav-justified {
 118     .nav-justified();
 119     .nav-tabs-justified();
 120   }
 121 }
 122
 123
 124 // Pills
 125 // -------------------------
 126 .nav-pills {
 127   > li {
 128     float: left;
 129
 130     // Links rendered as pills
 131     > a {
 132       border-radius: 5px;
 133     }
 134     + li {
 135       margin-left: 2px;
 136     }
 137
 138     // Active state
 139     &.active > a {
 140       &,
 141       &:hover,
 142       &:focus {
 143         color: @nav-pills-active-link-hover-color;
 144         background-color: @nav-pills-active-link-hover-bg;
 145       }
 146     }
 147   }
 148 }
 149
 150
 151 // Stacked pills
 152 .nav-stacked {
 153   > li {
 154     float: none;
 155     + li {
 156       > a {
 157         margin-top: 2px;
 158         margin-left: 0; // no need for this gap between nav items
 159       }
 160     }
 161   }
 162 }
 163
 164 // Justified nav links
 165 // -------------------------
 166
 167 .nav-justified {
 168   width: 100%;
 169   > li {
 170     float: none;
 171     display: table-cell;
 172     width: 1%;
 173     > a {
 174       text-align: center;
 175     }
 176   }
 177 }
 178
 179 // Move borders to anchors instead of bottom of list
 180 .nav-tabs-justified {
 181   border-bottom: 0;
 182   > li > a {
 183     border-bottom: 1px solid @nav-tabs-justified-link-border-color;
 184
 185     // Override margin from .nav-tabs
 186     margin-right: 0;
 187   }
 188   > .active > a {
 189     border-bottom-color: @nav-tabs-justified-active-link-border-color;
 190   }
 191
 192 }
 193
 194
 195
 196 // Tabbable tabs
 197 // -------------------------
 198
 199 // Clear any floats
 200 .tabbable {
 201   .clearfix();
 202 }
 203
 204 // Show/hide tabbable areas
 205 .tab-content > .tab-pane,
 206 .pill-content > .pill-pane {
 207   display: none;
 208 }
 209 .tab-content,
 210 .pill-content {
 211   > .active {
 212     display: block;
 213   }
 214 }
 215
 216
 217
 218 // Dropdowns
 219 // -------------------------
 220
 221 // Make dropdown carets use link color in navs
 222 .nav .caret {
 223   border-top-color: @link-color;
 224   border-bottom-color: @link-color;
 225 }
 226 .nav a:hover .caret {
 227   border-top-color: @link-hover-color;
 228   border-bottom-color: @link-hover-color;
 229 }
 230
 231 // Specific dropdowns
 232 .nav-tabs .dropdown-menu {
 233   // make dropdown border overlap tab border
 234   margin-top: -1px;
 235   // Remove the top rounded corners here since there is a hard edge above the menu
 236   .border-top-radius(0);
 237 }