themes/default/less/navbar.less

   1 // NAVBAR (FIXED AND STATIC)
   2 // -------------------------
   3
   4
   5 // COMMON STYLES
   6 // -------------
   7
   8 .navbar {
   9   overflow: visible;
  10   margin-bottom: @baseLineHeight;
  11 }
  12
  13 // Gradient is applied to it's own element because overflow visible is not honored by IE when filter is present
  14 .navbar-inner {
  15   padding-left:  20px;
  16   padding-right: 20px;
  17   #gradient > .vertical(@navbarBackgroundHighlight, @navbarBackground);
  18   .border-radius(4px);
  19   @shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1), 0 4px 0 @red;
  20   .box-shadow(@shadow);
  21 }
  22
  23 // Navbar button for toggling navbar items in responsive layouts
  24 .btn-navbar {
  25   display: none;
  26   float: right;
  27   padding: 7px 10px;
  28   margin-left: 5px;
  29   margin-right: 5px;
  30   .buttonBackground(@navbarBackgroundHighlight, @navbarBackground);
  31   @shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075);
  32   .box-shadow(@shadow);
  33 }
  34 .btn-navbar .icon-bar {
  35   display: block;
  36   width: 18px;
  37   height: 2px;
  38   background-color: #f5f5f5;
  39   .border-radius(1px);
  40   .box-shadow(0 1px 0 rgba(0,0,0,.25));
  41 }
  42 .btn-navbar .icon-bar + .icon-bar {
  43   margin-top: 3px;
  44 }
  45 // Override the default collapsed state
  46 .nav-collapse.collapse {
  47   height: auto;
  48 }
  49
  50
  51 // Brand, links, text, and buttons
  52 .navbar {
  53   // Hover and active states
  54   .brand:hover {
  55     text-decoration: none;
  56   }
  57   // Website or project name
  58   .brand {
  59     float: left;
  60     display: block;
  61     padding: 8px 20px 12px;
  62     margin-left: -20px; // negative indent to left-align the text down the page
  63     font-size: 20px;
  64     font-weight: 200;
  65     line-height: 1;
  66     color: @white;
  67   }
  68   // Plain text in topbar
  69   .navbar-text {
  70     margin-bottom: 0;
  71     line-height: 40px;
  72     color: @navbarText;
  73     a:hover {
  74       color: @white;
  75       background-color: transparent;
  76     }
  77   }
  78   // Buttons in navbar
  79   .btn,
  80   .btn-group {
  81     margin: 0 10px 0; // make buttons vertically centered in navbar
  82   }
  83   .btn-group .btn {
  84     margin-top: 0; // then undo the margin here so we don't accidentally double it
  85   }
  86 }
  87
  88 // Navbar forms
  89 .navbar-form {
  90   margin-bottom: 0; // remove default bottom margin
  91   .clearfix();
  92   input,
  93   select {
  94     display: inline-block;
  95     margin-top: 5px;
  96     margin-bottom: 0;
  97   }
  98   .radio,
  99   .checkbox {
 100     margin-top: 5px;
 101   }
 102   input[type="image"],
 103   input[type="checkbox"],
 104   input[type="radio"] {
 105     margin-top: 3px;
 106   }
 107   .input-append,
 108   .input-prepend {
 109     margin-top: 6px;
 110     white-space: nowrap; // preven two  items from separating within a .navbar-form that has .pull-left
 111     input {
 112       margin-top: 0; // remove the margin on top since it's on the parent
 113     }
 114   }
 115 }
 116
 117 // Navbar search
 118 .navbar-search {
 119   position: relative;
 120   float: left;
 121   margin-top: 8px;
 122   margin-bottom: 0;
 123   .search-query {
 124     padding: 4px 9px;
 125     #font > .sans-serif(13px, normal, 1);
 126     color: @grayLighter;
 127     background: @white;
 128     border: 1px solid #111;
 129     @shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.15);
 130     .box-shadow(@shadow);
 131     .transition(none);
 132
 133     // Placeholder text gets special styles; can't be bundled together though for some reason
 134     .placeholder(@grayLighter);
 135
 136     // Hover states
 137     &:hover {
 138       color: @white;
 139       background-color: @grayLight;
 140       background-color: rgba(255,255,255,.5);
 141     }
 142     // Focus states (we use .focused since IE7-8 and down doesn't support :focus)
 143     &:focus,
 144     &.focused {
 145       padding: 5px 10px;
 146       color: @grayDark;
 147       text-shadow: 0 1px 0 @white;
 148       background-color: @white;
 149       border: 0;
 150       .box-shadow(0 0 3px rgba(0,0,0,.15));
 151       outline: 0;
 152     }
 153   }
 154 }
 155
 156
 157 // FIXED NAVBAR
 158 // ------------
 159
 160 .navbar-fixed-top {
 161   position: fixed;
 162   top: 0;
 163   right: 0;
 164   left: 0;
 165   z-index: @zindexFixedNavbar;
 166 }
 167 .navbar-fixed-top .navbar-inner {
 168   padding-left:  0;
 169   padding-right: 0;
 170   .border-radius(0);
 171 }
 172
 173
 174 // NAVIGATION
 175 // ----------
 176
 177 .navbar .nav {
 178   position: relative;
 179   left: 0;
 180   display: block;
 181   float: left;
 182   margin: 0 10px 0 0;
 183 }
 184 .navbar .nav.pull-right {
 185   float: right; // redeclare due to specificity
 186 }
 187 .navbar .nav > li {
 188   display: block;
 189   float: left;
 190 }
 191
 192 // Links
 193 .navbar .nav > li > a {
 194   float: none;
 195   padding: 12px 9px 12px;
 196   line-height: 19px;
 197   color: @navbarLinkColor;
 198   text-decoration: none;
 199   text-shadow: 0 -1px 1px rgba(0,0,0,.25);
 200 }
 201 // Hover
 202 .navbar .nav > li > a:hover {
 203   background-color:  @grayDark; // "transparent" is default to differentiate :hover from .active
 204   color: @white;
 205   text-decoration: none;
 206   text-shadow: 0 -1px 0 rgb(0,0,0);
 207 }
 208
 209 // Active nav items
 210 .navbar .nav .active > a,
 211 .navbar .nav .active > a:hover {
 212   color: @white;
 213   text-decoration: none;
 214   background-color: @black;
 215   @shadow: inset 0 -1px 0 rgba(0,0,0,.4);
 216   .box-shadow(@shadow);
 217   text-shadow: 0 -1px 0 rgb(0,0,0);
 218 }
 219
 220 // Dividers (basically a vertical hr)
 221 .navbar .divider-vertical {
 222   height: @navbarHeight;
 223   width: 1px;
 224   margin: 0;
 225   overflow: hide;
 226   background-color: @navbarBackground;
 227   border-right: 1px solid @navbarBackgroundHighlight;
 228 }
 229
 230 // Secondary (floated right) nav in topbar
 231 .navbar .nav.pull-right {
 232   margin-left: 10px;
 233   margin-right: 0;
 234 }
 235
 236
 237
 238 // Dropdown menus
 239 // --------------
 240
 241 // Menu position and menu carets
 242 .navbar .dropdown-menu {
 243   margin-top: 1px;
 244   .border-radius(4px);
 245   &:before {
 246     content: '';
 247     display: inline-block;
 248     border-left:   7px solid transparent;
 249     border-right:  7px solid transparent;
 250     border-bottom: 7px solid #ccc;
 251     border-bottom-color: rgba(0,0,0,.2);
 252     position: absolute;
 253     top: -7px;
 254     left: 9px;
 255   }
 256   &:after {
 257     content: '';
 258     display: inline-block;
 259     border-left:   6px solid transparent;
 260     border-right:  6px solid transparent;
 261     border-bottom: 6px solid @white;
 262     position: absolute;
 263     top: -6px;
 264     left: 10px;
 265   }
 266 }
 267
 268 // Dropdown toggle caret
 269 .navbar .nav .dropdown-toggle .caret,
 270 .navbar .nav .open.dropdown .caret {
 271   border-top-color: @white;
 272 }
 273 .navbar .nav .active .caret {
 274   .opacity(100);
 275 }
 276
 277 // Remove background color from open dropdown
 278 .navbar .nav .open > .dropdown-toggle,
 279 .navbar .nav .active > .dropdown-toggle,
 280 .navbar .nav .open.active > .dropdown-toggle {
 281   background-color: transparent;
 282 }
 283
 284 // Dropdown link on hover
 285 .navbar .nav .active > .dropdown-toggle:hover {
 286   color: @white;
 287 }
 288
 289 // Right aligned menus need alt position
 290 .pull-right .dropdown-menu {
 291   left: auto;
 292   right: 0;
 293   &:before {
 294     left: auto;
 295     right: 12px;
 296   }
 297   &:after {
 298     left: auto;
 299     right: 13px;
 300   }
 301 }