Skip to content
GitLab
Switch branch/tag
Find file BlameHistoryPermalink
navs.less 5.10 KiB
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: #eee;
22 
}
23
24
25
26 
// NAV LIST
27 
// --------
28
29 
.nav.list {
30 
  padding-left: 14px;
31 
  padding-right: 14px;
32 
  margin-bottom: 0;
33 
}
34 
.nav.list > li > a,
35 
.nav.list .nav-header {
36 
  display: block;
37 
  padding: 3px 15px;
38 
  margin-left:  -15px;
39 
  margin-right: -15px;
40 
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
41 
}
42 
.nav.list .nav-header {
43 
  font-size: 11px;
44 
  font-weight: bold;
45 
  line-height: @baseLineHeight;
46 
  color: @grayLight;
47 
  text-transform: uppercase;
48 
}
49 
.nav.list > li + .nav-header {
50 
  margin-top: 9px;
51 
}
52 
.nav.list .active > a {
53 
  color: @white;
54 
  text-shadow: 0 -1px 0 rgba(0,0,0,.2);
55 
  background-color: @linkColor;
56 
}
57
58
59
60 
// TABS AND PILLS
61 
// -------------
62
63 
// Common styles
64 
.tabs,
65 
.pills {
66 
  .clearfix();
67 
}
68 
.tabs > li,
69 
.pills > li {
70 
  float: left;
7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
} .tabs > li > a, .pills > li > a { padding-right: 12px; padding-left: 12px; margin-right: 2px; line-height: 14px; // keeps the overall height an even number } // TABS // ---- // Give the tabs something to sit on .tabs { border-bottom: 1px solid #ddd; } // Make the list-items overlay the bottom border .tabs > li { margin-bottom: -1px; } // Actual tabs (as links) .tabs > li > a { padding-top: 9px; padding-bottom: 9px; border: 1px solid transparent; .border-radius(4px 4px 0 0); &:hover { border-color: #eee #eee #ddd; } } // Active state, and it's :hover to override normal :hover .tabs .active > a, .tabs .active > a:hover { color: @gray; background-color: @white; border: 1px solid #ddd; border-bottom-color: transparent; cursor: default; } // PILLS // ----- // Links rendered as pills .pills > li > a { padding-top: 8px; padding-bottom: 8px; margin-top: 2px; margin-bottom: 2px; .border-radius(5px); } // Active state .pills .active > a, .pills .active > a:hover { color: @white; background-color: @linkColor; } // STACKED NAV // ----------- // Stacked tabs and pills .nav.stacked > li { float: none; }
141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
.nav.stacked > li > a { margin-right: 0; // no need for the gap between nav items } // Tabs .tabs.stacked { border-bottom: 0; } .tabs.stacked > li > a { border: 1px solid #ddd; .border-radius(0); } .tabs.stacked > li:first-child > a { .border-radius(4px 4px 0 0); } .tabs.stacked > li:last-child > a { .border-radius(0 0 4px 4px); } .tabs.stacked > li > a:hover { border-color: #ddd; z-index: 2; } // Pills .pills.stacked > li > a { margin-bottom: 3px; } .pills.stacked > li:last-child > a { margin-bottom: 1px; // decrease margin to match sizing of stacked tabs } // DROPDOWNS // --------- // Position the menu .nav .dropdown-menu { top: 33px; border-width: 1px; } .pills .dropdown-menu { .border-radius(4px); } .tabs .dropdown-toggle .caret, .pills .dropdown-toggle .caret { border-top-color: @linkColor; margin-top: 6px; } .tabs .dropdown-toggle:hover .caret, .pills .dropdown-toggle:hover .caret { border-top-color: @linkColorHover; } .nav .open .dropdown-toggle { background-color: #999; border-color: #999; } .nav .open .caret, .nav .open a:hover .caret { border-top-color: #fff; .opacity(100); } // Dropdowns in stacked tabs .tabs.stacked .open > a:hover { border-color: #999; }
211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280
// TABBABLE // -------- // COMMON STYLES // ------------- // Clear any floats .tabbable { .clearfix(); } // Remove border on bottom, left, right .tabs-below .tabs, .tabs-right .tabs, .tabs-left .tabs { border-bottom: 0; } // Show/hide tabbable areas .tab-content > .tab-pane, .pill-content > .pill-pane { display: none; } .tab-content > .active, .pill-content > .active { display: block; } // BOTTOM // ------ .tabs-below .tabs { border-top: 1px solid #ddd; } .tabs-below .tabs > li { margin-top: -1px; margin-bottom: 0; } .tabs-below .tabs > li > a { .border-radius(0 0 4px 4px); &:hover { border-bottom-color: transparent; border-top-color: #ddd; } } .tabs-below .tabs .active > a, .tabs-below .tabs .active > a:hover { border-color: transparent #ddd #ddd #ddd; } // LEFT & RIGHT // ------------ // Common styles .tabs-left .tabs > li, .tabs-right .tabs > li { float: none; } .tabs-left .tabs > li > a, .tabs-right .tabs > li > a { min-width: 74px; margin-right: 0; margin-bottom: 3px; } // Tabs on the left .tabs-left .tabs { float: left;
281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313
margin-right: 19px; border-right: 1px solid #ddd; } .tabs-left .tabs > li > a { margin-right: -1px; .border-radius(4px 0 0 4px); } .tabs-left .tabs > li > a:hover { border-color: #eee #ddd #eee #eee; } .tabs-left .tabs .active > a, .tabs-left .tabs .active > a:hover { border-color: #ddd transparent #ddd #ddd; } // Tabs on the right .tabs-right .tabs { float: right; margin-left: 19px; border-left: 1px solid #ddd; } .tabs-right .tabs > li > a { margin-left: -1px; .border-radius(0 4px 4px 0); } .tabs-right .tabs > li > a:hover { border-color: #eee #eee #eee #ddd; } .tabs-right .tabs .active > a, .tabs-right .tabs .active > a:hover { border-color: #ddd #ddd #ddd transparent; }