bootstrap-generators 2.3.2 → 3.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (179) hide show
  1. checksums.yaml +4 -4
  2. data/Gemfile +12 -2
  3. data/{LICENSE.txt → MIT-LICENSE} +1 -3
  4. data/README.md +19 -64
  5. data/Rakefile +24 -22
  6. data/bootstrap-generators.gemspec +3 -1
  7. data/lib/bootstrap-generators.rb +12 -1
  8. data/lib/bootstrap/generators/version.rb +1 -1
  9. data/lib/generators/bootstrap/install/install_generator.rb +9 -24
  10. data/lib/generators/bootstrap/install/templates/assets/stylesheets/bootstrap-variables.less +498 -179
  11. data/lib/generators/bootstrap/install/templates/assets/stylesheets/bootstrap-variables.scss +620 -0
  12. data/lib/generators/bootstrap/install/templates/assets/stylesheets/{fluid.css → starter.css} +6 -6
  13. data/lib/generators/bootstrap/install/templates/assets/stylesheets/{fluid.css.less → starter.less} +7 -7
  14. data/lib/generators/bootstrap/install/templates/assets/stylesheets/{fluid.css.scss → starter.scss} +7 -8
  15. data/lib/generators/bootstrap/install/templates/form_builders/form_builder/_form.html.erb +11 -9
  16. data/lib/generators/bootstrap/install/templates/form_builders/form_builder/_form.html.haml +9 -8
  17. data/lib/generators/bootstrap/install/templates/layouts/starter.html.erb +50 -0
  18. data/lib/generators/bootstrap/install/templates/layouts/{hero.html.haml → starter.html.haml} +0 -0
  19. data/lib/generators/bootstrap/install/templates/lib/templates/erb/scaffold/edit.html.erb +3 -3
  20. data/lib/generators/bootstrap/install/templates/lib/templates/erb/scaffold/index.html.erb +25 -25
  21. data/lib/generators/bootstrap/install/templates/lib/templates/erb/scaffold/new.html.erb +2 -2
  22. data/lib/generators/bootstrap/install/templates/lib/templates/erb/scaffold/show.html.erb +5 -5
  23. data/lib/generators/bootstrap/install/templates/lib/templates/haml/scaffold/edit.html.haml +3 -3
  24. data/lib/generators/bootstrap/install/templates/lib/templates/haml/scaffold/index.html.haml +20 -19
  25. data/lib/generators/bootstrap/install/templates/lib/templates/haml/scaffold/new.html.haml +2 -2
  26. data/lib/generators/bootstrap/install/templates/lib/templates/haml/scaffold/show.html.haml +5 -5
  27. data/readme-template.md.erb +5 -48
  28. data/test/lib/generators/bootstrap/install_generator_test.rb +3 -33
  29. data/vendor/assets/fonts/glyphicons-halflings-regular.eot +0 -0
  30. data/vendor/assets/fonts/glyphicons-halflings-regular.svg +228 -0
  31. data/vendor/assets/fonts/glyphicons-halflings-regular.ttf +0 -0
  32. data/vendor/assets/fonts/glyphicons-halflings-regular.woff +0 -0
  33. data/vendor/assets/javascripts/bootstrap-ie.js +2 -0
  34. data/vendor/assets/javascripts/bootstrap-ie/html5shiv.js +8 -0
  35. data/vendor/assets/javascripts/bootstrap-ie/respond.min.js +6 -0
  36. data/vendor/assets/javascripts/bootstrap.js +12 -13
  37. data/vendor/assets/javascripts/bootstrap/affix.js +126 -0
  38. data/vendor/assets/javascripts/{bootstrap-alert.js → bootstrap/alert.js} +35 -36
  39. data/vendor/assets/javascripts/bootstrap/button.js +109 -0
  40. data/vendor/assets/javascripts/bootstrap/carousel.js +217 -0
  41. data/vendor/assets/javascripts/bootstrap/collapse.js +179 -0
  42. data/vendor/assets/javascripts/bootstrap/dropdown.js +154 -0
  43. data/vendor/assets/javascripts/bootstrap/modal.js +246 -0
  44. data/vendor/assets/javascripts/bootstrap/popover.js +117 -0
  45. data/vendor/assets/javascripts/bootstrap/scrollspy.js +158 -0
  46. data/vendor/assets/javascripts/bootstrap/tab.js +135 -0
  47. data/vendor/assets/javascripts/bootstrap/tooltip.js +386 -0
  48. data/vendor/assets/javascripts/bootstrap/transition.js +56 -0
  49. data/vendor/assets/stylesheets/bootstrap.css +4638 -4000
  50. data/vendor/twitter/bootstrap/less/alerts.less +46 -58
  51. data/vendor/twitter/bootstrap/less/badges.less +51 -0
  52. data/vendor/twitter/bootstrap/less/bootstrap.less +27 -31
  53. data/vendor/twitter/bootstrap/less/breadcrumbs.less +7 -8
  54. data/vendor/twitter/bootstrap/less/button-groups.less +173 -154
  55. data/vendor/twitter/bootstrap/less/buttons.less +97 -165
  56. data/vendor/twitter/bootstrap/less/carousel.less +115 -64
  57. data/vendor/twitter/bootstrap/less/close.less +20 -19
  58. data/vendor/twitter/bootstrap/less/code.less +17 -22
  59. data/vendor/twitter/bootstrap/less/component-animations.less +10 -3
  60. data/vendor/twitter/bootstrap/less/dropdowns.less +92 -147
  61. data/vendor/twitter/bootstrap/less/forms.less +224 -561
  62. data/vendor/twitter/bootstrap/less/glyphicons.less +232 -0
  63. data/vendor/twitter/bootstrap/less/grid.less +336 -11
  64. data/vendor/twitter/bootstrap/less/input-groups.less +127 -0
  65. data/vendor/twitter/bootstrap/less/jumbotron.less +40 -0
  66. data/vendor/twitter/bootstrap/less/labels.less +58 -0
  67. data/vendor/twitter/bootstrap/less/list-group.less +88 -0
  68. data/vendor/twitter/bootstrap/less/media.less +8 -7
  69. data/vendor/twitter/bootstrap/less/mixins.less +487 -466
  70. data/vendor/twitter/bootstrap/less/modals.less +98 -52
  71. data/vendor/twitter/bootstrap/less/navbar.less +507 -383
  72. data/vendor/twitter/bootstrap/less/navs.less +169 -349
  73. data/vendor/twitter/bootstrap/less/normalize.less +396 -0
  74. data/vendor/twitter/bootstrap/less/pager.less +45 -33
  75. data/vendor/twitter/bootstrap/less/pagination.less +65 -105
  76. data/vendor/twitter/bootstrap/less/panels.less +148 -0
  77. data/vendor/twitter/bootstrap/less/popovers.less +51 -51
  78. data/vendor/twitter/bootstrap/less/print.less +100 -0
  79. data/vendor/twitter/bootstrap/less/progress-bars.less +28 -55
  80. data/vendor/twitter/bootstrap/less/responsive-utilities.less +195 -34
  81. data/vendor/twitter/bootstrap/less/scaffolding.less +101 -24
  82. data/vendor/twitter/bootstrap/less/tables.less +170 -178
  83. data/vendor/twitter/bootstrap/less/theme.less +232 -0
  84. data/vendor/twitter/bootstrap/less/thumbnails.less +11 -33
  85. data/vendor/twitter/bootstrap/less/tooltip.less +45 -20
  86. data/vendor/twitter/bootstrap/less/type.less +100 -109
  87. data/vendor/twitter/bootstrap/less/utilities.less +19 -7
  88. data/vendor/twitter/bootstrap/less/variables.less +498 -179
  89. data/vendor/twitter/bootstrap/less/wells.less +7 -7
  90. data/vendor/twitter/bootstrap/sass/_alerts.scss +46 -58
  91. data/vendor/twitter/bootstrap/sass/_badges.scss +51 -0
  92. data/vendor/twitter/bootstrap/sass/_breadcrumbs.scss +8 -9
  93. data/vendor/twitter/bootstrap/sass/_button-groups.scss +173 -154
  94. data/vendor/twitter/bootstrap/sass/_buttons.scss +97 -165
  95. data/vendor/twitter/bootstrap/sass/_carousel.scss +116 -65
  96. data/vendor/twitter/bootstrap/sass/_close.scss +9 -8
  97. data/vendor/twitter/bootstrap/sass/_code.scss +16 -21
  98. data/vendor/twitter/bootstrap/sass/_component-animations.scss +10 -3
  99. data/vendor/twitter/bootstrap/sass/_dropdowns.scss +94 -148
  100. data/vendor/twitter/bootstrap/sass/_forms.scss +220 -559
  101. data/vendor/twitter/bootstrap/sass/_glyphicons.scss +232 -0
  102. data/vendor/twitter/bootstrap/sass/_grid.scss +336 -11
  103. data/vendor/twitter/bootstrap/sass/_input-groups.scss +127 -0
  104. data/vendor/twitter/bootstrap/sass/_jumbotron.scss +40 -0
  105. data/vendor/twitter/bootstrap/sass/_labels.scss +58 -0
  106. data/vendor/twitter/bootstrap/sass/_list-group.scss +88 -0
  107. data/vendor/twitter/bootstrap/sass/_media.scss +8 -7
  108. data/vendor/twitter/bootstrap/sass/_mixins.scss +465 -433
  109. data/vendor/twitter/bootstrap/sass/_modals.scss +102 -52
  110. data/vendor/twitter/bootstrap/sass/_navbar.scss +511 -383
  111. data/vendor/twitter/bootstrap/sass/_navs.scss +169 -349
  112. data/vendor/twitter/bootstrap/sass/_normalize.scss +396 -0
  113. data/vendor/twitter/bootstrap/sass/_pager.scss +45 -33
  114. data/vendor/twitter/bootstrap/sass/_pagination.scss +65 -105
  115. data/vendor/twitter/bootstrap/sass/_panels.scss +148 -0
  116. data/vendor/twitter/bootstrap/sass/_popovers.scss +51 -51
  117. data/vendor/twitter/bootstrap/sass/_print.scss +100 -0
  118. data/vendor/twitter/bootstrap/sass/_progress-bars.scss +28 -55
  119. data/vendor/twitter/bootstrap/sass/_responsive-utilities.scss +180 -45
  120. data/vendor/twitter/bootstrap/sass/_scaffolding.scss +101 -24
  121. data/vendor/twitter/bootstrap/sass/_tables.scss +169 -168
  122. data/vendor/twitter/bootstrap/sass/_theme.scss +232 -0
  123. data/vendor/twitter/bootstrap/sass/_thumbnails.scss +11 -33
  124. data/vendor/twitter/bootstrap/sass/_tooltip.scss +45 -20
  125. data/vendor/twitter/bootstrap/sass/_type.scss +101 -110
  126. data/vendor/twitter/bootstrap/sass/_utilities.scss +19 -22
  127. data/vendor/twitter/bootstrap/sass/_variables.scss +498 -179
  128. data/vendor/twitter/bootstrap/sass/_wells.scss +7 -7
  129. data/vendor/twitter/bootstrap/sass/bootstrap.scss +29 -33
  130. metadata +47 -56
  131. data/lib/bootstrap/generators/engine.rb +0 -14
  132. data/lib/generators/bootstrap/install/templates/assets/stylesheets/bootstrap-variables.css.scss +0 -301
  133. data/lib/generators/bootstrap/install/templates/assets/stylesheets/hero.css +0 -18
  134. data/lib/generators/bootstrap/install/templates/assets/stylesheets/hero.css.less +0 -19
  135. data/lib/generators/bootstrap/install/templates/assets/stylesheets/hero.css.scss +0 -19
  136. data/lib/generators/bootstrap/install/templates/config/initializers/simple_form.rb +0 -176
  137. data/lib/generators/bootstrap/install/templates/config/locales/simple_form.en.yml +0 -24
  138. data/lib/generators/bootstrap/install/templates/form_builders/simple_form/_form.html.erb +0 -13
  139. data/lib/generators/bootstrap/install/templates/form_builders/simple_form/_form.html.haml +0 -10
  140. data/lib/generators/bootstrap/install/templates/layouts/fluid.html.erb +0 -80
  141. data/lib/generators/bootstrap/install/templates/layouts/fluid.html.haml +0 -94
  142. data/lib/generators/bootstrap/install/templates/layouts/hero.html.erb +0 -53
  143. data/vendor/assets/images/glyphicons-halflings-white.png +0 -0
  144. data/vendor/assets/images/glyphicons-halflings.png +0 -0
  145. data/vendor/assets/javascripts/bootstrap-affix.js +0 -117
  146. data/vendor/assets/javascripts/bootstrap-button.js +0 -105
  147. data/vendor/assets/javascripts/bootstrap-carousel.js +0 -207
  148. data/vendor/assets/javascripts/bootstrap-collapse.js +0 -167
  149. data/vendor/assets/javascripts/bootstrap-dropdown.js +0 -169
  150. data/vendor/assets/javascripts/bootstrap-modal.js +0 -247
  151. data/vendor/assets/javascripts/bootstrap-popover.js +0 -114
  152. data/vendor/assets/javascripts/bootstrap-scrollspy.js +0 -162
  153. data/vendor/assets/javascripts/bootstrap-tab.js +0 -144
  154. data/vendor/assets/javascripts/bootstrap-tooltip.js +0 -361
  155. data/vendor/assets/javascripts/bootstrap-transition.js +0 -60
  156. data/vendor/assets/javascripts/bootstrap-typeahead.js +0 -335
  157. data/vendor/assets/stylesheets/bootstrap-responsive.css +0 -1109
  158. data/vendor/twitter/bootstrap/less/accordion.less +0 -34
  159. data/vendor/twitter/bootstrap/less/hero-unit.less +0 -25
  160. data/vendor/twitter/bootstrap/less/labels-badges.less +0 -84
  161. data/vendor/twitter/bootstrap/less/layouts.less +0 -16
  162. data/vendor/twitter/bootstrap/less/reset.less +0 -216
  163. data/vendor/twitter/bootstrap/less/responsive-1200px-min.less +0 -28
  164. data/vendor/twitter/bootstrap/less/responsive-767px-max.less +0 -193
  165. data/vendor/twitter/bootstrap/less/responsive-768px-979px.less +0 -19
  166. data/vendor/twitter/bootstrap/less/responsive-navbar.less +0 -189
  167. data/vendor/twitter/bootstrap/less/responsive.less +0 -48
  168. data/vendor/twitter/bootstrap/less/sprites.less +0 -197
  169. data/vendor/twitter/bootstrap/sass/_accordion.scss +0 -34
  170. data/vendor/twitter/bootstrap/sass/_hero-unit.scss +0 -25
  171. data/vendor/twitter/bootstrap/sass/_labels-badges.scss +0 -83
  172. data/vendor/twitter/bootstrap/sass/_layouts.scss +0 -16
  173. data/vendor/twitter/bootstrap/sass/_reset.scss +0 -216
  174. data/vendor/twitter/bootstrap/sass/_responsive-1200px-min.scss +0 -28
  175. data/vendor/twitter/bootstrap/sass/_responsive-767px-max.scss +0 -193
  176. data/vendor/twitter/bootstrap/sass/_responsive-768px-979px.scss +0 -19
  177. data/vendor/twitter/bootstrap/sass/_responsive-navbar.scss +0 -189
  178. data/vendor/twitter/bootstrap/sass/_sprites.scss +0 -197
  179. data/vendor/twitter/bootstrap/sass/responsive.scss +0 -48
@@ -2,81 +2,111 @@
2
2
  // Modals
3
3
  // --------------------------------------------------
4
4
 
5
- // Background
6
- .modal-backdrop {
5
+ // .modal-open - body class for killing the scroll
6
+ // .modal - container to scroll within
7
+ // .modal-dialog - positioning shell for the actual modal
8
+ // .modal-content - actual modal w/ bg and corners and shit
9
+
10
+ // Kill the scroll on the body
11
+ .modal-open {
12
+ overflow: hidden;
13
+
14
+
15
+ // Account for hiding of scrollbar
16
+ body&,
17
+ .navbar-fixed-top,
18
+ .navbar-fixed-bottom {
19
+ margin-right: 15px
20
+ }
21
+ }
22
+
23
+ // Container that the modal scrolls within
24
+ .modal {
25
+ display: none;
26
+ overflow: auto;
27
+ overflow-y: scroll;
7
28
  position: fixed;
8
29
  top: 0;
9
30
  right: 0;
10
31
  bottom: 0;
11
32
  left: 0;
12
- z-index: @zindexModalBackdrop;
13
- background-color: @black;
14
- // Fade for backdrop
15
- &.fade { opacity: 0; }
33
+ z-index: @zindex-modal-background;
34
+
35
+ // When fading in the modal, animate it to slide down
36
+ &.fade .modal-dialog {
37
+ .translate(0, -25%);
38
+ .transition-transform(~"0.3s ease-out");
39
+ }
40
+ &.in .modal-dialog { .translate(0, 0)}
16
41
  }
17
42
 
18
- .modal-backdrop,
19
- .modal-backdrop.fade.in {
20
- .opacity(80);
43
+ // Shell div to position the modal with bottom padding
44
+ .modal-dialog {
45
+ margin-left: auto;
46
+ margin-right: auto;
47
+ width: auto;
48
+ padding: 10px;
49
+ z-index: (@zindex-modal-background + 10);
21
50
  }
22
51
 
23
- // Base modal
24
- .modal {
25
- position: fixed;
26
- top: 10%;
27
- left: 50%;
28
- z-index: @zindexModal;
29
- width: 560px;
30
- margin-left: -280px;
31
- background-color: @white;
32
- border: 1px solid #999;
33
- border: 1px solid rgba(0,0,0,.3);
34
- *border: 1px solid #999; /* IE6-7 */
35
- .border-radius(6px);
36
- .box-shadow(0 3px 7px rgba(0,0,0,0.3));
37
- .background-clip(padding-box);
52
+ // Actual modal
53
+ .modal-content {
54
+ position: relative;
55
+ background-color: @modal-content-bg;
56
+ border: 1px solid @modal-content-fallback-border-color; //old browsers fallback (ie8 etc)
57
+ border: 1px solid @modal-content-border-color;
58
+ border-radius: @border-radius-large;
59
+ .box-shadow(0 3px 9px rgba(0,0,0,.5));
60
+ background-clip: padding-box;
38
61
  // Remove focus outline from opened modal
39
62
  outline: none;
63
+ }
40
64
 
41
- &.fade {
42
- .transition(e('opacity .3s linear, top .3s ease-out'));
43
- top: -25%;
44
- }
45
- &.fade.in { top: 10%; }
65
+ // Modal background
66
+ .modal-backdrop {
67
+ position: fixed;
68
+ top: 0;
69
+ right: 0;
70
+ bottom: 0;
71
+ left: 0;
72
+ z-index: (@zindex-modal-background - 10);
73
+ background-color: @modal-backdrop-bg;
74
+ // Fade for backdrop
75
+ &.fade { .opacity(0); }
76
+ &.in { .opacity(.5); }
46
77
  }
78
+
79
+ // Modal header
80
+ // Top section of the modal w/ title and dismiss
47
81
  .modal-header {
48
- padding: 9px 15px;
49
- border-bottom: 1px solid #eee;
50
- // Close icon
51
- .close { margin-top: 2px; }
52
- // Heading
53
- h3 {
54
- margin: 0;
55
- line-height: 30px;
56
- }
82
+ padding: @modal-title-padding;
83
+ border-bottom: 1px solid @modal-header-border-color;
84
+ min-height: (@modal-title-padding + @modal-title-line-height);
85
+ }
86
+ // Close icon
87
+ .modal-header .close {
88
+ margin-top: -2px;
57
89
  }
58
90
 
59
- // Body (where all modal content resides)
91
+ // Title text within header
92
+ .modal-title {
93
+ margin: 0;
94
+ line-height: @modal-title-line-height;
95
+ }
96
+
97
+ // Modal body
98
+ // Where all modal content resides (sibling of .modal-header and .modal-footer)
60
99
  .modal-body {
61
100
  position: relative;
62
- overflow-y: auto;
63
- max-height: 400px;
64
- padding: 15px;
65
- }
66
- // Remove bottom margin if need be
67
- .modal-form {
68
- margin-bottom: 0;
101
+ padding: @modal-inner-padding;
69
102
  }
70
103
 
71
104
  // Footer (for actions)
72
105
  .modal-footer {
73
- padding: 14px 15px 15px;
74
- margin-bottom: 0;
106
+ margin-top: 15px;
107
+ padding: (@modal-inner-padding - 1) @modal-inner-padding @modal-inner-padding;
75
108
  text-align: right; // right align buttons
76
- background-color: #f5f5f5;
77
- border-top: 1px solid #ddd;
78
- .border-radius(0 0 6px 6px);
79
- .box-shadow(inset 0 1px 0 @white);
109
+ border-top: 1px solid @modal-footer-border-color;
80
110
  .clearfix(); // clear it in case folks use .pull-* classes on buttons
81
111
 
82
112
  // Properly space out buttons
@@ -93,3 +123,19 @@
93
123
  margin-left: 0;
94
124
  }
95
125
  }
126
+
127
+ // Scale up the modal
128
+ @media screen and (min-width: @screen-tablet) {
129
+
130
+ .modal-dialog {
131
+ left: 50%;
132
+ right: auto;
133
+ width: 600px;
134
+ padding-top: 30px;
135
+ padding-bottom: 30px;
136
+ }
137
+ .modal-content {
138
+ .box-shadow(0 5px 15px rgba(0,0,0,.5));
139
+ }
140
+
141
+ }
@@ -1,497 +1,621 @@
1
1
  //
2
- // Navbars (Redux)
2
+ // Navbars
3
3
  // --------------------------------------------------
4
4
 
5
5
 
6
- // COMMON STYLES
7
- // -------------
6
+ // Wrapper and base class
7
+ //
8
+ // Provide a static navbar from which we expand to create full-width, fixed, and
9
+ // other navbar variations.
8
10
 
9
- // Base class and wrapper
10
11
  .navbar {
11
- overflow: visible;
12
- margin-bottom: @baseLineHeight;
13
-
14
- // Fix for IE7's bad z-indexing so dropdowns don't appear below content that follows the navbar
15
- *position: relative;
16
- *z-index: 2;
17
- }
18
-
19
- // Inner for background effects
20
- // Gradient is applied to its own element because overflow visible is not honored by IE when filter is present
21
- .navbar-inner {
22
- min-height: @navbarHeight;
23
- padding-left: 20px;
24
- padding-right: 20px;
25
- #gradient > .vertical(@navbarBackgroundHighlight, @navbarBackground);
26
- border: 1px solid @navbarBorder;
27
- .border-radius(@baseBorderRadius);
28
- .box-shadow(0 1px 4px rgba(0,0,0,.065));
12
+ position: relative;
13
+ z-index: @zindex-navbar;
14
+ min-height: @navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode)
15
+ margin-bottom: @navbar-margin-bottom;
16
+ border: 1px solid transparent;
29
17
 
30
18
  // Prevent floats from breaking the navbar
31
19
  .clearfix();
32
- }
33
20
 
34
- // Set width to auto for default container
35
- // We then reset it for fixed navbars in the #gridSystem mixin
36
- .navbar .container {
37
- width: auto;
21
+ @media (min-width: @grid-float-breakpoint) {
22
+ border-radius: @navbar-border-radius;
23
+ }
38
24
  }
39
25
 
40
- // Override the default collapsed state
41
- .nav-collapse.collapse {
42
- height: auto;
43
- overflow: visible;
44
- }
45
26
 
27
+ // Navbar heading
28
+ //
29
+ // Groups `.navbar-brand` and `.navbar-toggle` into a single component for easy
30
+ // styling of responsive aspects.
46
31
 
47
- // Brand: website or project name
48
- // -------------------------
49
- .navbar .brand {
50
- float: left;
51
- display: block;
52
- // Vertically center the text given @navbarHeight
53
- padding: ((@navbarHeight - @baseLineHeight) / 2) 20px ((@navbarHeight - @baseLineHeight) / 2);
54
- margin-left: -20px; // negative indent to left-align the text down the page
55
- font-size: 20px;
56
- font-weight: 200;
57
- color: @navbarBrandColor;
58
- text-shadow: 0 1px 0 @navbarBackgroundHighlight;
59
- &:hover,
60
- &:focus {
61
- text-decoration: none;
32
+ .navbar-header {
33
+ .clearfix();
34
+
35
+ @media (min-width: @grid-float-breakpoint) {
36
+ float: left;
62
37
  }
63
38
  }
64
39
 
65
- // Plain text in topbar
66
- // -------------------------
67
- .navbar-text {
68
- margin-bottom: 0;
69
- line-height: @navbarHeight;
70
- color: @navbarText;
71
- }
72
40
 
73
- // Janky solution for now to account for links outside the .nav
74
- // -------------------------
75
- .navbar-link {
76
- color: @navbarLinkColor;
77
- &:hover,
78
- &:focus {
79
- color: @navbarLinkColorHover;
41
+ // Navbar collapse (body)
42
+ //
43
+ // Group your navbar content into this for easy collapsing and expanding across
44
+ // various device sizes. By default, this content is collapsed when <768px, but
45
+ // will expand past that for a horizontal display.
46
+ //
47
+ // To start (on mobile devices) the navbar links, forms, and buttons are stacked
48
+ // vertically and include a `max-height` to overflow in case you have too much
49
+ // content for the user's viewport.
50
+
51
+ .navbar-collapse {
52
+ max-height: 340px;
53
+ overflow-x: visible;
54
+ padding-right: @navbar-padding-horizontal;
55
+ padding-left: @navbar-padding-horizontal;
56
+ border-top: 1px solid transparent;
57
+ box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
58
+ .clearfix();
59
+ -webkit-overflow-scrolling: touch;
60
+
61
+ &.in {
62
+ overflow-y: auto;
80
63
  }
81
- }
82
64
 
83
- // Dividers in navbar
84
- // -------------------------
85
- .navbar .divider-vertical {
86
- height: @navbarHeight;
87
- margin: 0 9px;
88
- border-left: 1px solid @navbarBackground;
89
- border-right: 1px solid @navbarBackgroundHighlight;
90
- }
65
+ @media (min-width: @grid-float-breakpoint) {
66
+ width: auto;
67
+ border-top: 0;
68
+ box-shadow: none;
91
69
 
92
- // Buttons in navbar
93
- // -------------------------
94
- .navbar .btn,
95
- .navbar .btn-group {
96
- .navbarVerticalAlign(30px); // Vertically center in navbar
97
- }
98
- .navbar .btn-group .btn,
99
- .navbar .input-prepend .btn,
100
- .navbar .input-append .btn,
101
- .navbar .input-prepend .btn-group,
102
- .navbar .input-append .btn-group {
103
- margin-top: 0; // then undo the margin here so we don't accidentally double it
104
- }
70
+ &.collapse {
71
+ display: block !important;
72
+ height: auto !important;
73
+ padding-bottom: 0; // Override default setting
74
+ overflow: visible !important;
75
+ }
105
76
 
106
- // Navbar forms
107
- // -------------------------
108
- .navbar-form {
109
- margin-bottom: 0; // remove default bottom margin
110
- .clearfix();
111
- input,
112
- select,
113
- .radio,
114
- .checkbox {
115
- .navbarVerticalAlign(30px); // Vertically center in navbar
116
- }
117
- input,
118
- select,
119
- .btn {
120
- display: inline-block;
121
- margin-bottom: 0;
122
- }
123
- input[type="image"],
124
- input[type="checkbox"],
125
- input[type="radio"] {
126
- margin-top: 3px;
127
- }
128
- .input-append,
129
- .input-prepend {
130
- margin-top: 5px;
131
- white-space: nowrap; // preven two items from separating within a .navbar-form that has .pull-left
132
- input {
133
- margin-top: 0; // remove the margin on top since it's on the parent
77
+ &.in {
78
+ overflow-y: visible;
134
79
  }
135
- }
136
- }
137
80
 
138
- // Navbar search
139
- // -------------------------
140
- .navbar-search {
141
- position: relative;
142
- float: left;
143
- .navbarVerticalAlign(30px); // Vertically center in navbar
144
- margin-bottom: 0;
145
- .search-query {
146
- margin-bottom: 0;
147
- padding: 4px 14px;
148
- #font > .sans-serif(13px, normal, 1);
149
- .border-radius(15px); // redeclare because of specificity of the type attribute
81
+ // Account for first and last children spacing
82
+ .navbar-nav.navbar-left:first-child {
83
+ margin-left: -@navbar-padding-horizontal;
84
+ }
85
+ .navbar-nav.navbar-right:last-child {
86
+ margin-right: -@navbar-padding-horizontal;
87
+ }
88
+ .navbar-text:last-child {
89
+ margin-right: 0;
90
+ }
150
91
  }
151
92
  }
152
93
 
153
94
 
95
+ // Both navbar header and collapse
96
+ //
97
+ // When a container is present, change the behavior of the header and collapse.
154
98
 
155
- // Static navbar
156
- // -------------------------
99
+ .container > .navbar-header,
100
+ .container > .navbar-collapse {
101
+ margin-right: -@navbar-padding-horizontal;
102
+ margin-left: -@navbar-padding-horizontal;
157
103
 
158
- .navbar-static-top {
159
- position: static;
160
- margin-bottom: 0; // remove 18px margin for default navbar
161
- .navbar-inner {
162
- .border-radius(0);
104
+ @media (min-width: @grid-float-breakpoint) {
105
+ margin-right: 0;
106
+ margin-left: 0;
163
107
  }
164
108
  }
165
109
 
166
110
 
111
+ //
112
+ // Navbar alignment options
113
+ //
114
+ // Display the navbar across the entirity of the page or fixed it to the top or
115
+ // bottom of the page.
167
116
 
168
- // Fixed navbar
169
- // -------------------------
117
+ // Static top (unfixed, but 100% wide) navbar
118
+ .navbar-static-top {
119
+ border-width: 0 0 1px;
120
+ @media (min-width: @grid-float-breakpoint) {
121
+ border-radius: 0;
122
+ }
123
+ }
170
124
 
171
- // Shared (top/bottom) styles
125
+ // Fix the top/bottom navbars when screen real estate supports it
172
126
  .navbar-fixed-top,
173
127
  .navbar-fixed-bottom {
174
128
  position: fixed;
175
129
  right: 0;
176
130
  left: 0;
177
- z-index: @zindexFixedNavbar;
178
- margin-bottom: 0; // remove 18px margin for default navbar
179
- }
180
- .navbar-fixed-top .navbar-inner,
181
- .navbar-static-top .navbar-inner {
182
131
  border-width: 0 0 1px;
183
- }
184
- .navbar-fixed-bottom .navbar-inner {
185
- border-width: 1px 0 0;
186
- }
187
- .navbar-fixed-top .navbar-inner,
188
- .navbar-fixed-bottom .navbar-inner {
189
- padding-left: 0;
190
- padding-right: 0;
191
- .border-radius(0);
192
- }
193
132
 
194
- // Reset container width
195
- // Required here as we reset the width earlier on and the grid mixins don't override early enough
196
- .navbar-static-top .container,
197
- .navbar-fixed-top .container,
198
- .navbar-fixed-bottom .container {
199
- #grid > .core > .span(@gridColumns);
133
+ // Undo the rounded corners
134
+ @media (min-width: @grid-float-breakpoint) {
135
+ border-radius: 0;
136
+ }
200
137
  }
201
-
202
- // Fixed to top
203
138
  .navbar-fixed-top {
139
+ z-index: @zindex-navbar-fixed;
204
140
  top: 0;
205
141
  }
206
- .navbar-fixed-top,
207
- .navbar-static-top {
208
- .navbar-inner {
209
- .box-shadow(~"0 1px 10px rgba(0,0,0,.1)");
210
- }
211
- }
212
-
213
- // Fixed to bottom
214
142
  .navbar-fixed-bottom {
215
143
  bottom: 0;
216
- .navbar-inner {
217
- .box-shadow(~"0 -1px 10px rgba(0,0,0,.1)");
218
- }
144
+ margin-bottom: 0; // override .navbar defaults
219
145
  }
220
146
 
221
147
 
148
+ // Brand/project name
222
149
 
223
- // NAVIGATION
224
- // ----------
225
-
226
- .navbar .nav {
227
- position: relative;
228
- left: 0;
229
- display: block;
230
- float: left;
231
- margin: 0 10px 0 0;
232
- }
233
- .navbar .nav.pull-right {
234
- float: right; // redeclare due to specificity
235
- margin-right: 0; // remove margin on float right nav
236
- }
237
- .navbar .nav > li {
150
+ .navbar-brand {
238
151
  float: left;
239
- }
152
+ padding: @navbar-padding-vertical @navbar-padding-horizontal;
153
+ font-size: @font-size-large;
154
+ line-height: @line-height-computed;
155
+ &:hover,
156
+ &:focus {
157
+ text-decoration: none;
158
+ }
240
159
 
241
- // Links
242
- .navbar .nav > li > a {
243
- float: none;
244
- // Vertically center the text given @navbarHeight
245
- padding: ((@navbarHeight - @baseLineHeight) / 2) 15px ((@navbarHeight - @baseLineHeight) / 2);
246
- color: @navbarLinkColor;
247
- text-decoration: none;
248
- text-shadow: 0 1px 0 @navbarBackgroundHighlight;
249
- }
250
- .navbar .nav .dropdown-toggle .caret {
251
- margin-top: 8px;
160
+ @media (min-width: @grid-float-breakpoint) {
161
+ .navbar > .container & {
162
+ margin-left: -@navbar-padding-horizontal;
163
+ }
164
+ }
252
165
  }
253
166
 
254
- // Hover/focus
255
- .navbar .nav > li > a:focus,
256
- .navbar .nav > li > a:hover {
257
- background-color: @navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover/:focus from .active
258
- color: @navbarLinkColorHover;
259
- text-decoration: none;
260
- }
261
167
 
262
- // Active nav items
263
- .navbar .nav > .active > a,
264
- .navbar .nav > .active > a:hover,
265
- .navbar .nav > .active > a:focus {
266
- color: @navbarLinkColorActive;
267
- text-decoration: none;
268
- background-color: @navbarLinkBackgroundActive;
269
- .box-shadow(inset 0 3px 8px rgba(0,0,0,.125));
270
- }
168
+ // Navbar toggle
169
+ //
170
+ // Custom button for toggling the `.navbar-collapse`, powered by the collapse
171
+ // JavaScript plugin.
271
172
 
272
- // Navbar button for toggling navbar items in responsive layouts
273
- // These definitions need to come after '.navbar .btn'
274
- .navbar .btn-navbar {
275
- display: none;
173
+ .navbar-toggle {
174
+ position: relative;
276
175
  float: right;
277
- padding: 7px 10px;
278
- margin-left: 5px;
279
- margin-right: 5px;
280
- .buttonBackground(darken(@navbarBackgroundHighlight, 5%), darken(@navbarBackground, 5%));
281
- .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075)");
282
- }
283
- .navbar .btn-navbar .icon-bar {
284
- display: block;
285
- width: 18px;
286
- height: 2px;
287
- background-color: #f5f5f5;
288
- .border-radius(1px);
289
- .box-shadow(0 1px 0 rgba(0,0,0,.25));
290
- }
291
- .btn-navbar .icon-bar + .icon-bar {
292
- margin-top: 3px;
176
+ margin-right: @navbar-padding-horizontal;
177
+ padding: 9px 10px;
178
+ .navbar-vertical-align(34px);
179
+ background-color: transparent;
180
+ border: 1px solid transparent;
181
+ border-radius: @border-radius-base;
182
+
183
+ // Bars
184
+ .icon-bar {
185
+ display: block;
186
+ width: 22px;
187
+ height: 2px;
188
+ border-radius: 1px;
189
+ }
190
+ .icon-bar + .icon-bar {
191
+ margin-top: 4px;
192
+ }
193
+
194
+ @media (min-width: @grid-float-breakpoint) {
195
+ display: none;
196
+ }
293
197
  }
294
198
 
295
199
 
200
+ // Navbar nav links
201
+ //
202
+ // Builds on top of the `.nav` components with it's own modifier class to make
203
+ // the nav the full height of the horizontal nav (above 768px).
296
204
 
297
- // Dropdown menus
298
- // --------------
205
+ .navbar-nav {
206
+ margin: (@navbar-padding-vertical / 2) -@navbar-padding-horizontal;
299
207
 
300
- // Menu position and menu carets
301
- .navbar .nav > li > .dropdown-menu {
302
- &:before {
303
- content: '';
304
- display: inline-block;
305
- border-left: 7px solid transparent;
306
- border-right: 7px solid transparent;
307
- border-bottom: 7px solid #ccc;
308
- border-bottom-color: @dropdownBorder;
309
- position: absolute;
310
- top: -7px;
311
- left: 9px;
312
- }
313
- &:after {
314
- content: '';
315
- display: inline-block;
316
- border-left: 6px solid transparent;
317
- border-right: 6px solid transparent;
318
- border-bottom: 6px solid @dropdownBackground;
319
- position: absolute;
320
- top: -6px;
321
- left: 10px;
208
+ > li > a {
209
+ padding-top: 10px;
210
+ padding-bottom: 10px;
211
+ line-height: @line-height-computed;
322
212
  }
323
- }
324
- // Menu position and menu caret support for dropups via extra dropup class
325
- .navbar-fixed-bottom .nav > li > .dropdown-menu {
326
- &:before {
327
- border-top: 7px solid #ccc;
328
- border-top-color: @dropdownBorder;
329
- border-bottom: 0;
330
- bottom: -7px;
331
- top: auto;
332
- }
333
- &:after {
334
- border-top: 6px solid @dropdownBackground;
335
- border-bottom: 0;
336
- bottom: -6px;
337
- top: auto;
213
+
214
+ @media (max-width: @screen-xs-max) {
215
+ // Dropdowns get custom display when collapsed
216
+ .open .dropdown-menu {
217
+ position: static;
218
+ float: none;
219
+ width: auto;
220
+ margin-top: 0;
221
+ background-color: transparent;
222
+ border: 0;
223
+ box-shadow: none;
224
+ > li > a,
225
+ .dropdown-header {
226
+ padding: 5px 15px 5px 25px;
227
+ }
228
+ > li > a {
229
+ line-height: @line-height-computed;
230
+ &:hover,
231
+ &:focus {
232
+ background-image: none;
233
+ }
234
+ }
235
+ }
236
+ }
237
+
238
+ // Uncollapse the nav
239
+ @media (min-width: @grid-float-breakpoint) {
240
+ float: left;
241
+ margin: 0;
242
+
243
+ > li {
244
+ float: left;
245
+ > a {
246
+ padding-top: ((@navbar-height - @line-height-computed) / 2);
247
+ padding-bottom: ((@navbar-height - @line-height-computed) / 2);
248
+ }
249
+ }
338
250
  }
251
+
339
252
  }
340
253
 
341
- // Caret should match text color on hover/focus
342
- .navbar .nav li.dropdown > a:hover .caret,
343
- .navbar .nav li.dropdown > a:focus .caret {
344
- border-top-color: @navbarLinkColorHover;
345
- border-bottom-color: @navbarLinkColorHover;
254
+
255
+ // Component alignment
256
+ //
257
+ // Repurpose the pull utilities as their own navbar utilities to avoid specifity
258
+ // issues with parents and chaining. Only do this when the navbar is uncollapsed
259
+ // though so that navbar contents properly stack and align in mobile.
260
+
261
+ @media (min-width: @grid-float-breakpoint) {
262
+ .navbar-left { .pull-left(); }
263
+ .navbar-right { .pull-right(); }
346
264
  }
347
265
 
348
- // Remove background color from open dropdown
349
- .navbar .nav li.dropdown.open > .dropdown-toggle,
350
- .navbar .nav li.dropdown.active > .dropdown-toggle,
351
- .navbar .nav li.dropdown.open.active > .dropdown-toggle {
352
- background-color: @navbarLinkBackgroundActive;
353
- color: @navbarLinkColorActive;
266
+
267
+ // Navbar form
268
+ //
269
+ // Extension of the `.form-inline` with some extra flavor for optimum display in
270
+ // our navbars.
271
+
272
+ .navbar-form {
273
+ margin-left: -@navbar-padding-horizontal;
274
+ margin-right: -@navbar-padding-horizontal;
275
+ padding: 10px @navbar-padding-horizontal;
276
+ border-top: 1px solid transparent;
277
+ border-bottom: 1px solid transparent;
278
+ @shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);
279
+ .box-shadow(@shadow);
280
+
281
+ // Mixin behavior for optimum display
282
+ .form-inline();
283
+
284
+ .form-group {
285
+ @media (max-width: @screen-xs-max) {
286
+ margin-bottom: 5px;
287
+ }
288
+ }
289
+
290
+ // Vertically center in expanded, horizontal navbar
291
+ .navbar-vertical-align(@input-height-base);
292
+
293
+ // Undo 100% width for pull classes
294
+ @media (min-width: @grid-float-breakpoint) {
295
+ width: auto;
296
+ border: 0;
297
+ margin-left: 0;
298
+ margin-right: 0;
299
+ padding-top: 0;
300
+ padding-bottom: 0;
301
+ .box-shadow(none);
302
+ }
354
303
  }
355
- .navbar .nav li.dropdown > .dropdown-toggle .caret {
356
- border-top-color: @navbarLinkColor;
357
- border-bottom-color: @navbarLinkColor;
304
+
305
+
306
+ // Dropdown menus
307
+
308
+ // Menu position and menu carets
309
+ .navbar-nav > li > .dropdown-menu {
310
+ margin-top: 0;
311
+ .border-top-radius(0);
358
312
  }
359
- .navbar .nav li.dropdown.open > .dropdown-toggle .caret,
360
- .navbar .nav li.dropdown.active > .dropdown-toggle .caret,
361
- .navbar .nav li.dropdown.open.active > .dropdown-toggle .caret {
362
- border-top-color: @navbarLinkColorActive;
363
- border-bottom-color: @navbarLinkColorActive;
313
+ // Menu position and menu caret support for dropups via extra dropup class
314
+ .navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
315
+ .border-bottom-radius(0);
364
316
  }
365
317
 
366
318
  // Right aligned menus need alt position
367
- .navbar .pull-right > li > .dropdown-menu,
368
- .navbar .nav > li > .dropdown-menu.pull-right {
319
+ .navbar-nav.pull-right > li > .dropdown-menu,
320
+ .navbar-nav > li > .dropdown-menu.pull-right {
369
321
  left: auto;
370
322
  right: 0;
371
- &:before {
372
- left: auto;
373
- right: 12px;
374
- }
375
- &:after {
376
- left: auto;
377
- right: 13px;
378
- }
379
- .dropdown-menu {
380
- left: auto;
381
- right: 100%;
382
- margin-left: 0;
383
- margin-right: -1px;
384
- .border-radius(6px 0 6px 6px);
385
- }
386
323
  }
387
324
 
388
325
 
389
- // Inverted navbar
390
- // -------------------------
326
+ // Buttons in navbars
327
+ //
328
+ // Vertically center a button within a navbar (when *not* in a form).
391
329
 
392
- .navbar-inverse {
330
+ .navbar-btn {
331
+ .navbar-vertical-align(@input-height-base);
332
+ }
333
+
334
+
335
+ // Text in navbars
336
+ //
337
+ // Add a class to make any element properly align itself vertically within the navbars.
338
+
339
+ .navbar-text {
340
+ float: left;
341
+ .navbar-vertical-align(@line-height-computed);
393
342
 
394
- .navbar-inner {
395
- #gradient > .vertical(@navbarInverseBackgroundHighlight, @navbarInverseBackground);
396
- border-color: @navbarInverseBorder;
343
+ @media (min-width: @grid-float-breakpoint) {
344
+ margin-left: @navbar-padding-horizontal;
345
+ margin-right: @navbar-padding-horizontal;
397
346
  }
347
+ }
348
+
349
+ // Alternate navbars
350
+ // --------------------------------------------------
351
+
352
+ // Default navbar
353
+ .navbar-default {
354
+ background-color: @navbar-default-bg;
355
+ border-color: @navbar-default-border;
398
356
 
399
- .brand,
400
- .nav > li > a {
401
- color: @navbarInverseLinkColor;
402
- text-shadow: 0 -1px 0 rgba(0,0,0,.25);
357
+ .navbar-brand {
358
+ color: @navbar-default-brand-color;
403
359
  &:hover,
404
360
  &:focus {
405
- color: @navbarInverseLinkColorHover;
361
+ color: @navbar-default-brand-hover-color;
362
+ background-color: @navbar-default-brand-hover-bg;
406
363
  }
407
364
  }
408
365
 
409
- .brand {
410
- color: @navbarInverseBrandColor;
366
+ .navbar-text {
367
+ color: @navbar-default-color;
368
+ }
369
+
370
+ .navbar-nav {
371
+ > li > a {
372
+ color: @navbar-default-link-color;
373
+
374
+ &:hover,
375
+ &:focus {
376
+ color: @navbar-default-link-hover-color;
377
+ background-color: @navbar-default-link-hover-bg;
378
+ }
379
+ }
380
+ > .active > a {
381
+ &,
382
+ &:hover,
383
+ &:focus {
384
+ color: @navbar-default-link-active-color;
385
+ background-color: @navbar-default-link-active-bg;
386
+ }
387
+ }
388
+ > .disabled > a {
389
+ &,
390
+ &:hover,
391
+ &:focus {
392
+ color: @navbar-default-link-disabled-color;
393
+ background-color: @navbar-default-link-disabled-bg;
394
+ }
395
+ }
411
396
  }
412
397
 
413
- .navbar-text {
414
- color: @navbarInverseText;
398
+ .navbar-toggle {
399
+ border-color: @navbar-default-toggle-border-color;
400
+ &:hover,
401
+ &:focus {
402
+ background-color: @navbar-default-toggle-hover-bg;
403
+ }
404
+ .icon-bar {
405
+ background-color: @navbar-default-toggle-icon-bar-bg;
406
+ }
415
407
  }
416
408
 
417
- .nav > li > a:focus,
418
- .nav > li > a:hover {
419
- background-color: @navbarInverseLinkBackgroundHover;
420
- color: @navbarInverseLinkColorHover;
409
+ .navbar-collapse,
410
+ .navbar-form {
411
+ border-color: darken(@navbar-default-bg, 7%);
421
412
  }
422
413
 
423
- .nav .active > a,
424
- .nav .active > a:hover,
425
- .nav .active > a:focus {
426
- color: @navbarInverseLinkColorActive;
427
- background-color: @navbarInverseLinkBackgroundActive;
414
+ // Dropdown menu items and carets
415
+ .navbar-nav {
416
+ // Caret should match text color on hover
417
+ > .dropdown > a:hover .caret,
418
+ > .dropdown > a:focus .caret {
419
+ border-top-color: @navbar-default-link-hover-color;
420
+ border-bottom-color: @navbar-default-link-hover-color;
421
+ }
422
+
423
+ // Remove background color from open dropdown
424
+ > .open > a {
425
+ &,
426
+ &:hover,
427
+ &:focus {
428
+ background-color: @navbar-default-link-active-bg;
429
+ color: @navbar-default-link-active-color;
430
+ .caret {
431
+ border-top-color: @navbar-default-link-active-color;
432
+ border-bottom-color: @navbar-default-link-active-color;
433
+ }
434
+ }
435
+ }
436
+ > .dropdown > a .caret {
437
+ border-top-color: @navbar-default-link-color;
438
+ border-bottom-color: @navbar-default-link-color;
439
+ }
440
+
441
+
442
+ @media (max-width: @screen-xs-max) {
443
+ // Dropdowns get custom display when collapsed
444
+ .open .dropdown-menu {
445
+ > li > a {
446
+ color: @navbar-default-link-color;
447
+ &:hover,
448
+ &:focus {
449
+ color: @navbar-default-link-hover-color;
450
+ background-color: @navbar-default-link-hover-bg;
451
+ }
452
+ }
453
+ > .active > a {
454
+ &,
455
+ &:hover,
456
+ &:focus {
457
+ color: @navbar-default-link-active-color;
458
+ background-color: @navbar-default-link-active-bg;
459
+ }
460
+ }
461
+ > .disabled > a {
462
+ &,
463
+ &:hover,
464
+ &:focus {
465
+ color: @navbar-default-link-disabled-color;
466
+ background-color: @navbar-default-link-disabled-bg;
467
+ }
468
+ }
469
+ }
470
+ }
428
471
  }
429
472
 
430
- // Inline text links
473
+
474
+ // Links in navbars
475
+ //
476
+ // Add a class to ensure links outside the navbar nav are colored correctly.
477
+
431
478
  .navbar-link {
432
- color: @navbarInverseLinkColor;
479
+ color: @navbar-default-link-color;
480
+ &:hover {
481
+ color: @navbar-default-link-hover-color;
482
+ }
483
+ }
484
+
485
+ }
486
+
487
+ // Inverse navbar
488
+
489
+ .navbar-inverse {
490
+ background-color: @navbar-inverse-bg;
491
+ border-color: @navbar-inverse-border;
492
+
493
+ .navbar-brand {
494
+ color: @navbar-inverse-brand-color;
495
+ &:hover,
496
+ &:focus {
497
+ color: @navbar-inverse-brand-hover-color;
498
+ background-color: @navbar-inverse-brand-hover-bg;
499
+ }
500
+ }
501
+
502
+ .navbar-text {
503
+ color: @navbar-inverse-color;
504
+ }
505
+
506
+ .navbar-nav {
507
+ > li > a {
508
+ color: @navbar-inverse-link-color;
509
+
510
+ &:hover,
511
+ &:focus {
512
+ color: @navbar-inverse-link-hover-color;
513
+ background-color: @navbar-inverse-link-hover-bg;
514
+ }
515
+ }
516
+ > .active > a {
517
+ &,
518
+ &:hover,
519
+ &:focus {
520
+ color: @navbar-inverse-link-active-color;
521
+ background-color: @navbar-inverse-link-active-bg;
522
+ }
523
+ }
524
+ > .disabled > a {
525
+ &,
526
+ &:hover,
527
+ &:focus {
528
+ color: @navbar-inverse-link-disabled-color;
529
+ background-color: @navbar-inverse-link-disabled-bg;
530
+ }
531
+ }
532
+ }
533
+
534
+ // Darken the responsive nav toggle
535
+ .navbar-toggle {
536
+ border-color: @navbar-inverse-toggle-border-color;
433
537
  &:hover,
434
538
  &:focus {
435
- color: @navbarInverseLinkColorHover;
539
+ background-color: @navbar-inverse-toggle-hover-bg;
540
+ }
541
+ .icon-bar {
542
+ background-color: @navbar-inverse-toggle-icon-bar-bg;
436
543
  }
437
544
  }
438
545
 
439
- // Dividers in navbar
440
- .divider-vertical {
441
- border-left-color: @navbarInverseBackground;
442
- border-right-color: @navbarInverseBackgroundHighlight;
546
+ .navbar-collapse,
547
+ .navbar-form {
548
+ border-color: darken(@navbar-inverse-bg, 7%);
443
549
  }
444
550
 
445
551
  // Dropdowns
446
- .nav li.dropdown.open > .dropdown-toggle,
447
- .nav li.dropdown.active > .dropdown-toggle,
448
- .nav li.dropdown.open.active > .dropdown-toggle {
449
- background-color: @navbarInverseLinkBackgroundActive;
450
- color: @navbarInverseLinkColorActive;
451
- }
452
- .nav li.dropdown > a:hover .caret,
453
- .nav li.dropdown > a:focus .caret {
454
- border-top-color: @navbarInverseLinkColorActive;
455
- border-bottom-color: @navbarInverseLinkColorActive;
456
- }
457
- .nav li.dropdown > .dropdown-toggle .caret {
458
- border-top-color: @navbarInverseLinkColor;
459
- border-bottom-color: @navbarInverseLinkColor;
460
- }
461
- .nav li.dropdown.open > .dropdown-toggle .caret,
462
- .nav li.dropdown.active > .dropdown-toggle .caret,
463
- .nav li.dropdown.open.active > .dropdown-toggle .caret {
464
- border-top-color: @navbarInverseLinkColorActive;
465
- border-bottom-color: @navbarInverseLinkColorActive;
466
- }
467
-
468
- // Navbar search
469
- .navbar-search {
470
- .search-query {
471
- color: @white;
472
- background-color: @navbarInverseSearchBackground;
473
- border-color: @navbarInverseSearchBorder;
474
- .box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15)");
475
- .transition(none);
476
- .placeholder(@navbarInverseSearchPlaceholderColor);
477
-
478
- // Focus states (we use .focused since IE7-8 and down doesn't support :focus)
479
- &:focus,
480
- &.focused {
481
- padding: 5px 15px;
482
- color: @grayDark;
483
- text-shadow: 0 1px 0 @white;
484
- background-color: @navbarInverseSearchBackgroundFocus;
485
- border: 0;
486
- .box-shadow(0 0 3px rgba(0,0,0,.15));
487
- outline: 0;
552
+ .navbar-nav {
553
+ > .open > a {
554
+ &,
555
+ &:hover,
556
+ &:focus {
557
+ background-color: @navbar-inverse-link-active-bg;
558
+ color: @navbar-inverse-link-active-color;
559
+ }
560
+ }
561
+ > .dropdown > a:hover .caret {
562
+ border-top-color: @navbar-inverse-link-hover-color;
563
+ border-bottom-color: @navbar-inverse-link-hover-color;
564
+ }
565
+ > .dropdown > a .caret {
566
+ border-top-color: @navbar-inverse-link-color;
567
+ border-bottom-color: @navbar-inverse-link-color;
568
+ }
569
+ > .open > a {
570
+ &,
571
+ &:hover,
572
+ &:focus {
573
+ .caret {
574
+ border-top-color: @navbar-inverse-link-active-color;
575
+ border-bottom-color: @navbar-inverse-link-active-color;
576
+ }
577
+ }
578
+ }
579
+
580
+ @media (max-width: @screen-xs-max) {
581
+ // Dropdowns get custom display
582
+ .open .dropdown-menu {
583
+ > .dropdown-header {
584
+ border-color: @navbar-inverse-border;
585
+ }
586
+ > li > a {
587
+ color: @navbar-inverse-link-color;
588
+ &:hover,
589
+ &:focus {
590
+ color: @navbar-inverse-link-hover-color;
591
+ background-color: @navbar-inverse-link-hover-bg;
592
+ }
593
+ }
594
+ > .active > a {
595
+ &,
596
+ &:hover,
597
+ &:focus {
598
+ color: @navbar-inverse-link-active-color;
599
+ background-color: @navbar-inverse-link-active-bg;
600
+ }
601
+ }
602
+ > .disabled > a {
603
+ &,
604
+ &:hover,
605
+ &:focus {
606
+ color: @navbar-inverse-link-disabled-color;
607
+ background-color: @navbar-inverse-link-disabled-bg;
608
+ }
609
+ }
488
610
  }
489
611
  }
490
612
  }
491
613
 
492
- // Navbar collapse button
493
- .btn-navbar {
494
- .buttonBackground(darken(@navbarInverseBackgroundHighlight, 5%), darken(@navbarInverseBackground, 5%));
614
+ .navbar-link {
615
+ color: @navbar-inverse-link-color;
616
+ &:hover {
617
+ color: @navbar-inverse-link-hover-color;
618
+ }
495
619
  }
496
620
 
497
621
  }