bootstrap-sass-rails-rtl 2.0.4.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (142) hide show
  1. data/LICENSE +14 -0
  2. data/README.md +115 -0
  3. data/Rakefile +37 -0
  4. data/lib/bootstrap-sass-rails-rtl.rb +9 -0
  5. data/lib/bootstrap/sass/extensions.rb +5 -0
  6. data/lib/bootstrap/sass/extensions/functions.rb +15 -0
  7. data/lib/bootstrap/sass/rails.rb +2 -0
  8. data/lib/bootstrap/sass/rails/engine.rb +9 -0
  9. data/lib/bootstrap/sass/rails/version.rb +7 -0
  10. data/test/cases/usage_css_spec.rb +216 -0
  11. data/test/cases/usage_js_spec.rb +40 -0
  12. data/test/dummy/Rakefile +7 -0
  13. data/test/dummy/app/assets/javascripts/application.js +3 -0
  14. data/test/dummy/app/assets/javascripts/individual.js +1 -0
  15. data/test/dummy/app/assets/stylesheets/application-rtl.css.scss +3 -0
  16. data/test/dummy/app/assets/stylesheets/application.css.scss +3 -0
  17. data/test/dummy/app/assets/stylesheets/individual-rtl.css.scss +11 -0
  18. data/test/dummy/app/assets/stylesheets/individual.css.scss +11 -0
  19. data/test/dummy/app/assets/stylesheets/sprockets-rtl.css +3 -0
  20. data/test/dummy/app/assets/stylesheets/sprockets.css +3 -0
  21. data/test/dummy/app/controllers/application_controller.rb +3 -0
  22. data/test/dummy/app/helpers/application_helper.rb +2 -0
  23. data/test/dummy/app/views/layouts/application.html.erb +14 -0
  24. data/test/dummy/config.ru +4 -0
  25. data/test/dummy/config/application.rb +49 -0
  26. data/test/dummy/config/boot.rb +10 -0
  27. data/test/dummy/config/database.yml +25 -0
  28. data/test/dummy/config/environment.rb +5 -0
  29. data/test/dummy/config/environments/development.rb +30 -0
  30. data/test/dummy/config/environments/production.rb +60 -0
  31. data/test/dummy/config/environments/test.rb +39 -0
  32. data/test/dummy/config/initializers/backtrace_silencers.rb +7 -0
  33. data/test/dummy/config/initializers/inflections.rb +10 -0
  34. data/test/dummy/config/initializers/mime_types.rb +5 -0
  35. data/test/dummy/config/initializers/secret_token.rb +7 -0
  36. data/test/dummy/config/initializers/session_store.rb +8 -0
  37. data/test/dummy/config/initializers/wrap_parameters.rb +14 -0
  38. data/test/dummy/config/locales/en.yml +5 -0
  39. data/test/dummy/config/routes.rb +58 -0
  40. data/test/dummy/public/404.html +26 -0
  41. data/test/dummy/public/422.html +26 -0
  42. data/test/dummy/public/500.html +26 -0
  43. data/test/dummy/public/favicon.ico +0 -0
  44. data/test/dummy/script/rails +6 -0
  45. data/test/spec_helper.rb +13 -0
  46. data/test/support/helpers.rb +35 -0
  47. data/vendor/assets/images/twitter/bootstrap/glyphicons-halflings-white.png +0 -0
  48. data/vendor/assets/images/twitter/bootstrap/glyphicons-halflings.png +0 -0
  49. data/vendor/assets/javascripts/twitter/bootstrap.js +12 -0
  50. data/vendor/assets/javascripts/twitter/bootstrap/alert.js +90 -0
  51. data/vendor/assets/javascripts/twitter/bootstrap/button.js +96 -0
  52. data/vendor/assets/javascripts/twitter/bootstrap/carousel.js +169 -0
  53. data/vendor/assets/javascripts/twitter/bootstrap/collapse.js +157 -0
  54. data/vendor/assets/javascripts/twitter/bootstrap/dropdown.js +100 -0
  55. data/vendor/assets/javascripts/twitter/bootstrap/modal.js +218 -0
  56. data/vendor/assets/javascripts/twitter/bootstrap/popover.js +98 -0
  57. data/vendor/assets/javascripts/twitter/bootstrap/scrollspy.js +151 -0
  58. data/vendor/assets/javascripts/twitter/bootstrap/tab.js +135 -0
  59. data/vendor/assets/javascripts/twitter/bootstrap/tooltip.js +275 -0
  60. data/vendor/assets/javascripts/twitter/bootstrap/transition.js +61 -0
  61. data/vendor/assets/javascripts/twitter/bootstrap/typeahead.js +285 -0
  62. data/vendor/assets/stylesheets/twitter/bootstrap.css.scss +62 -0
  63. data/vendor/assets/stylesheets/twitter/bootstrap/_accordion.scss +33 -0
  64. data/vendor/assets/stylesheets/twitter/bootstrap/_alerts.scss +59 -0
  65. data/vendor/assets/stylesheets/twitter/bootstrap/_breadcrumbs.scss +24 -0
  66. data/vendor/assets/stylesheets/twitter/bootstrap/_button-groups.scss +190 -0
  67. data/vendor/assets/stylesheets/twitter/bootstrap/_buttons.scss +193 -0
  68. data/vendor/assets/stylesheets/twitter/bootstrap/_carousel.scss +121 -0
  69. data/vendor/assets/stylesheets/twitter/bootstrap/_close.scss +29 -0
  70. data/vendor/assets/stylesheets/twitter/bootstrap/_code.scss +57 -0
  71. data/vendor/assets/stylesheets/twitter/bootstrap/_component-animations.scss +20 -0
  72. data/vendor/assets/stylesheets/twitter/bootstrap/_dropdowns.scss +142 -0
  73. data/vendor/assets/stylesheets/twitter/bootstrap/_forms.scss +589 -0
  74. data/vendor/assets/stylesheets/twitter/bootstrap/_grid.scss +8 -0
  75. data/vendor/assets/stylesheets/twitter/bootstrap/_hero-unit.scss +22 -0
  76. data/vendor/assets/stylesheets/twitter/bootstrap/_labels-badges.scss +54 -0
  77. data/vendor/assets/stylesheets/twitter/bootstrap/_layouts.scss +17 -0
  78. data/vendor/assets/stylesheets/twitter/bootstrap/_mixins.scss +612 -0
  79. data/vendor/assets/stylesheets/twitter/bootstrap/_modals.scss +90 -0
  80. data/vendor/assets/stylesheets/twitter/bootstrap/_navbar.scss +358 -0
  81. data/vendor/assets/stylesheets/twitter/bootstrap/_navs.scss +364 -0
  82. data/vendor/assets/stylesheets/twitter/bootstrap/_pager.scss +36 -0
  83. data/vendor/assets/stylesheets/twitter/bootstrap/_pagination.scss +56 -0
  84. data/vendor/assets/stylesheets/twitter/bootstrap/_popovers.scss +49 -0
  85. data/vendor/assets/stylesheets/twitter/bootstrap/_progress-bars.scss +118 -0
  86. data/vendor/assets/stylesheets/twitter/bootstrap/_reset.scss +131 -0
  87. data/vendor/assets/stylesheets/twitter/bootstrap/_responsive-1200px-min.scss +26 -0
  88. data/vendor/assets/stylesheets/twitter/bootstrap/_responsive-767px-max.scss +150 -0
  89. data/vendor/assets/stylesheets/twitter/bootstrap/_responsive-768px-979px.scss +19 -0
  90. data/vendor/assets/stylesheets/twitter/bootstrap/_responsive-navbar.scss +153 -0
  91. data/vendor/assets/stylesheets/twitter/bootstrap/_responsive-utilities.scss +41 -0
  92. data/vendor/assets/stylesheets/twitter/bootstrap/_responsive.scss +48 -0
  93. data/vendor/assets/stylesheets/twitter/bootstrap/_scaffolding.scss +29 -0
  94. data/vendor/assets/stylesheets/twitter/bootstrap/_sprites.scss +178 -0
  95. data/vendor/assets/stylesheets/twitter/bootstrap/_tables.scss +175 -0
  96. data/vendor/assets/stylesheets/twitter/bootstrap/_thumbnails.scss +47 -0
  97. data/vendor/assets/stylesheets/twitter/bootstrap/_tooltip.scss +35 -0
  98. data/vendor/assets/stylesheets/twitter/bootstrap/_type.scss +232 -0
  99. data/vendor/assets/stylesheets/twitter/bootstrap/_utilities.scss +23 -0
  100. data/vendor/assets/stylesheets/twitter/bootstrap/_variables.scss +206 -0
  101. data/vendor/assets/stylesheets/twitter/bootstrap/_wells.scss +27 -0
  102. data/vendor/assets/stylesheets/twitter/bootstrap/rtl/_accordion.scss +33 -0
  103. data/vendor/assets/stylesheets/twitter/bootstrap/rtl/_alerts.scss +59 -0
  104. data/vendor/assets/stylesheets/twitter/bootstrap/rtl/_breadcrumbs.scss +24 -0
  105. data/vendor/assets/stylesheets/twitter/bootstrap/rtl/_button-groups.scss +190 -0
  106. data/vendor/assets/stylesheets/twitter/bootstrap/rtl/_buttons.scss +193 -0
  107. data/vendor/assets/stylesheets/twitter/bootstrap/rtl/_carousel.scss +121 -0
  108. data/vendor/assets/stylesheets/twitter/bootstrap/rtl/_close.scss +29 -0
  109. data/vendor/assets/stylesheets/twitter/bootstrap/rtl/_code.scss +57 -0
  110. data/vendor/assets/stylesheets/twitter/bootstrap/rtl/_component-animations.scss +20 -0
  111. data/vendor/assets/stylesheets/twitter/bootstrap/rtl/_dropdowns.scss +142 -0
  112. data/vendor/assets/stylesheets/twitter/bootstrap/rtl/_forms.scss +589 -0
  113. data/vendor/assets/stylesheets/twitter/bootstrap/rtl/_grid.scss +8 -0
  114. data/vendor/assets/stylesheets/twitter/bootstrap/rtl/_hero-unit.scss +22 -0
  115. data/vendor/assets/stylesheets/twitter/bootstrap/rtl/_labels-badges.scss +54 -0
  116. data/vendor/assets/stylesheets/twitter/bootstrap/rtl/_layouts.scss +17 -0
  117. data/vendor/assets/stylesheets/twitter/bootstrap/rtl/_mixins.scss +612 -0
  118. data/vendor/assets/stylesheets/twitter/bootstrap/rtl/_modals.scss +90 -0
  119. data/vendor/assets/stylesheets/twitter/bootstrap/rtl/_navbar.scss +358 -0
  120. data/vendor/assets/stylesheets/twitter/bootstrap/rtl/_navs.scss +364 -0
  121. data/vendor/assets/stylesheets/twitter/bootstrap/rtl/_pager.scss +36 -0
  122. data/vendor/assets/stylesheets/twitter/bootstrap/rtl/_pagination.scss +56 -0
  123. data/vendor/assets/stylesheets/twitter/bootstrap/rtl/_popovers.scss +49 -0
  124. data/vendor/assets/stylesheets/twitter/bootstrap/rtl/_progress-bars.scss +118 -0
  125. data/vendor/assets/stylesheets/twitter/bootstrap/rtl/_reset.scss +131 -0
  126. data/vendor/assets/stylesheets/twitter/bootstrap/rtl/_responsive-1200px-min.scss +26 -0
  127. data/vendor/assets/stylesheets/twitter/bootstrap/rtl/_responsive-767px-max.scss +150 -0
  128. data/vendor/assets/stylesheets/twitter/bootstrap/rtl/_responsive-768px-979px.scss +19 -0
  129. data/vendor/assets/stylesheets/twitter/bootstrap/rtl/_responsive-navbar.scss +153 -0
  130. data/vendor/assets/stylesheets/twitter/bootstrap/rtl/_responsive-utilities.scss +41 -0
  131. data/vendor/assets/stylesheets/twitter/bootstrap/rtl/_responsive.scss +48 -0
  132. data/vendor/assets/stylesheets/twitter/bootstrap/rtl/_scaffolding.scss +29 -0
  133. data/vendor/assets/stylesheets/twitter/bootstrap/rtl/_sprites.scss +178 -0
  134. data/vendor/assets/stylesheets/twitter/bootstrap/rtl/_tables.scss +175 -0
  135. data/vendor/assets/stylesheets/twitter/bootstrap/rtl/_thumbnails.scss +47 -0
  136. data/vendor/assets/stylesheets/twitter/bootstrap/rtl/_tooltip.scss +35 -0
  137. data/vendor/assets/stylesheets/twitter/bootstrap/rtl/_type.scss +232 -0
  138. data/vendor/assets/stylesheets/twitter/bootstrap/rtl/_utilities.scss +23 -0
  139. data/vendor/assets/stylesheets/twitter/bootstrap/rtl/_variables.scss +206 -0
  140. data/vendor/assets/stylesheets/twitter/bootstrap/rtl/_wells.scss +27 -0
  141. data/vendor/assets/stylesheets/twitter/bootstrap_rtl.css.scss +62 -0
  142. metadata +276 -0
@@ -0,0 +1,90 @@
1
+ // MODALS
2
+ // ------
3
+
4
+ // Recalculate z-index where appropriate
5
+ .modal-open {
6
+ .dropdown-menu { z-index: $zindexDropdown + $zindexModal; }
7
+ .dropdown.open { *z-index: $zindexDropdown + $zindexModal; }
8
+ .popover { z-index: $zindexPopover + $zindexModal; }
9
+ .tooltip { z-index: $zindexTooltip + $zindexModal; }
10
+ }
11
+
12
+ // Background
13
+ .modal-backdrop {
14
+ position: fixed;
15
+ top: 0;
16
+ left: 0;
17
+ bottom: 0;
18
+ right: 0;
19
+ z-index: $zindexModalBackdrop;
20
+ background-color: $black;
21
+ // Fade for backdrop
22
+ &.fade { opacity: 0; }
23
+ }
24
+
25
+ .modal-backdrop,
26
+ .modal-backdrop.fade.in {
27
+ @include opacity(80);
28
+ }
29
+
30
+ // Base modal
31
+ .modal {
32
+ position: fixed;
33
+ top: 50%;
34
+ right: 50%;
35
+ z-index: $zindexModal;
36
+ overflow: auto;
37
+ width: 560px;
38
+ margin: -250px 0 0 -280px;
39
+ background-color: $white;
40
+ border: 1px solid #999;
41
+ border: 1px solid rgba(0,0,0,.3);
42
+ *border: 1px solid #999; /* IE6-7 */
43
+ @include border-radius(6px);
44
+ @include box-shadow(0 3px 7px rgba(0,0,0,0.3));
45
+ @include background-clip(padding-box);
46
+ &.fade {
47
+ @include transition('opacity .3s linear, top .3s ease-out');
48
+ top: -25%;
49
+ }
50
+ &.fade.in { top: 50%; }
51
+ }
52
+ .modal-header {
53
+ padding: 9px 15px;
54
+ border-bottom: 1px solid #eee;
55
+ // Close icon
56
+ .close { margin-top: 2px; }
57
+ }
58
+
59
+ // Body (where all modal content resides)
60
+ .modal-body {
61
+ overflow-y: auto;
62
+ max-height: 400px;
63
+ padding: 15px;
64
+ }
65
+ // Remove bottom margin if need be
66
+ .modal-form {
67
+ margin-bottom: 0;
68
+ }
69
+
70
+ // Footer (for actions)
71
+ .modal-footer {
72
+ padding: 14px 15px 15px;
73
+ margin-bottom: 0;
74
+ text-align: left;
75
+ background-color: #f5f5f5;
76
+ border-top: 1px solid #ddd;
77
+ @include border-radius(0 0 6px 6px);
78
+ @include box-shadow(inset 0 1px 0 $white);
79
+ @include clearfix(); // clear it in case folks use .pull-* classes on buttons
80
+
81
+ // Properly space out buttons
82
+ .btn + .btn {
83
+ margin-right: 5px;
84
+ margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs
85
+ }
86
+ // but override tht for button groups
87
+ .btn-group .btn + .btn {
88
+ margin-right: -1px;
89
+ }
90
+ }
@@ -0,0 +1,358 @@
1
+ // NAVBAR (FIXED AND STATIC)
2
+ // -------------------------
3
+
4
+
5
+ // COMMON STYLES
6
+ // -------------
7
+
8
+ .navbar {
9
+ // Fix for IE7's bad z-indexing so dropdowns don't appear below content that follows the navbar
10
+ *position: relative;
11
+ *z-index: 2;
12
+
13
+ overflow: visible;
14
+ margin-bottom: $baseLineHeight;
15
+ }
16
+
17
+ // Gradient is applied to it's own element because overflow visible is not honored by IE when filter is present
18
+ .navbar-inner {
19
+ min-height: $navbarHeight;
20
+ padding-right: 20px;
21
+ padding-left: 20px;
22
+ @include gradient-vertical($navbarBackgroundHighlight, $navbarBackground);
23
+ @include border-radius(4px);
24
+ @include box-shadow("0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1)");
25
+ }
26
+
27
+ // Set width to auto for default container
28
+ // We then reset it for fixed navbars in the #gridSystem mixin
29
+ .navbar .container {
30
+ width: auto;
31
+ }
32
+
33
+ // Override the default collapsed state
34
+ .nav-collapse.collapse {
35
+ height: auto;
36
+ }
37
+
38
+
39
+ // Brand, links, text, and buttons
40
+ .navbar {
41
+ color: $navbarText;
42
+ // Hover and active states
43
+ .brand:hover {
44
+ text-decoration: none;
45
+ }
46
+ // Website or project name
47
+ .brand {
48
+ float: right;
49
+ display: block;
50
+ // Vertically center the text given $navbarHeight
51
+ $elementHeight: 20px;
52
+ padding: (($navbarHeight - $elementHeight) / 2 - 2) 20px (($navbarHeight - $elementHeight) / 2 + 2);
53
+ margin-right: -20px; // negative indent to left-align the text down the page
54
+ font-size: 20px;
55
+ font-weight: 200;
56
+ line-height: 1;
57
+ color: $navbarBrandColor;
58
+ }
59
+ // Plain text in topbar
60
+ .navbar-text {
61
+ margin-bottom: 0;
62
+ line-height: $navbarHeight;
63
+ }
64
+ // Janky solution for now to account for links outside the .nav
65
+ .navbar-link {
66
+ color: $navbarLinkColor;
67
+ &:hover {
68
+ color: $navbarLinkColorHover;
69
+ }
70
+ }
71
+ // Buttons in navbar
72
+ .btn,
73
+ .btn-group {
74
+ @include navbarVerticalAlign(30px); // Vertically center in navbar
75
+ }
76
+ .btn-group .btn {
77
+ margin: 0; // then undo the margin here so we don't accidentally double it
78
+ }
79
+ }
80
+
81
+ // Navbar forms
82
+ .navbar-form {
83
+ margin-bottom: 0; // remove default bottom margin
84
+ @include clearfix();
85
+ input,
86
+ select,
87
+ .radio,
88
+ .checkbox {
89
+ @include navbarVerticalAlign(30px); // Vertically center in navbar
90
+ }
91
+ input,
92
+ select {
93
+ display: inline-block;
94
+ margin-bottom: 0;
95
+ }
96
+ input[type="image"],
97
+ input[type="checkbox"],
98
+ input[type="radio"] {
99
+ margin-top: 3px;
100
+ }
101
+ .input-append,
102
+ .input-prepend {
103
+ margin-top: 6px;
104
+ white-space: nowrap; // preven two items from separating within a .navbar-form that has .pull-left
105
+ input {
106
+ margin-top: 0; // remove the margin on top since it's on the parent
107
+ }
108
+ }
109
+ }
110
+
111
+ // Navbar search
112
+ .navbar-search {
113
+ position: relative;
114
+ float: right;
115
+ @include navbarVerticalAlign(28px); // Vertically center in navbar
116
+ margin-bottom: 0;
117
+ .search-query {
118
+ padding: 4px 9px;
119
+ @include font-sans-serif(13px, normal, 1);
120
+ color: $white;
121
+ background-color: $navbarSearchBackground;
122
+ border: 1px solid $navbarSearchBorder;
123
+ @include box-shadow("inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15)");
124
+ @include transition(none);
125
+
126
+ @include placeholder($navbarSearchPlaceholderColor);
127
+
128
+ // Focus states (we use .focused since IE7-8 and down doesn't support :focus)
129
+ &:focus,
130
+ &.focused {
131
+ padding: 5px 10px;
132
+ color: $grayDark;
133
+ text-shadow: 0 1px 0 $white;
134
+ background-color: $navbarSearchBackgroundFocus;
135
+ border: 0;
136
+ @include box-shadow(0 0 3px rgba(0,0,0,.15));
137
+ outline: 0;
138
+ }
139
+ }
140
+ }
141
+
142
+
143
+ // FIXED NAVBAR
144
+ // ------------
145
+
146
+ // Shared (top/bottom) styles
147
+ .navbar-fixed-top,
148
+ .navbar-fixed-bottom {
149
+ position: fixed;
150
+ left: 0;
151
+ right: 0;
152
+ z-index: $zindexFixedNavbar;
153
+ margin-bottom: 0; // remove 18px margin from static navbar
154
+ }
155
+ .navbar-fixed-top .navbar-inner,
156
+ .navbar-fixed-bottom .navbar-inner {
157
+ padding-right: 0;
158
+ padding-left: 0;
159
+ @include border-radius(0);
160
+ }
161
+
162
+ .navbar-fixed-top .container,
163
+ .navbar-fixed-bottom .container {
164
+ @include grid-core-span($gridColumnWidth, $gridGutterWidth, $gridColumns);
165
+ }
166
+
167
+ // Fixed to top
168
+ .navbar-fixed-top {
169
+ top: 0;
170
+ }
171
+
172
+ // Fixed to bottom
173
+ .navbar-fixed-bottom {
174
+ bottom: 0;
175
+ }
176
+
177
+
178
+
179
+ // NAVIGATION
180
+ // ----------
181
+
182
+ .navbar .nav {
183
+ position: relative;
184
+ right: 0;
185
+ display: block;
186
+ float: right;
187
+ margin: 0 10px 0 0;
188
+ }
189
+ .navbar .nav.pull-right {
190
+ float: left; // redeclare due to specificity
191
+ }
192
+ .navbar .nav > li {
193
+ display: block;
194
+ float: right;
195
+ }
196
+
197
+ // Links
198
+ .navbar .nav > li > a {
199
+ float: none;
200
+ // Vertically center the text given @navbarHeight
201
+ $elementHeight: 20px;
202
+ padding: (($navbarHeight - $elementHeight) / 2 - 1) 10px (($navbarHeight - $elementHeight) / 2 + 1);
203
+ line-height: 19px;
204
+ color: $navbarLinkColor;
205
+ text-decoration: none;
206
+ text-shadow: 0 -1px 0 rgba(0,0,0,.25);
207
+ }
208
+ // Buttons
209
+ .navbar .btn {
210
+ display: inline-block;
211
+ padding: 4px 10px 4px;
212
+ // Vertically center the button given @navbarHeight
213
+ $elementHeight: 28px;
214
+ margin: (($navbarHeight - $elementHeight) / 2 - 1) 5px (($navbarHeight - $elementHeight) / 2);
215
+ line-height: $baseLineHeight;
216
+ }
217
+ .navbar .btn-group {
218
+ margin: 0;
219
+ // Vertically center the button given @navbarHeight
220
+ $elementHeight: 28px;
221
+ padding: (($navbarHeight - $elementHeight) / 2 - 1) 5px (($navbarHeight - $elementHeight) / 2);
222
+ }
223
+ // Hover
224
+ .navbar .nav > li > a:hover {
225
+ background-color: $navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover from .active
226
+ color: $navbarLinkColorHover;
227
+ text-decoration: none;
228
+ }
229
+
230
+ // Active nav items
231
+ .navbar .nav .active > a,
232
+ .navbar .nav .active > a:hover {
233
+ color: $navbarLinkColorActive;
234
+ text-decoration: none;
235
+ background-color: $navbarLinkBackgroundActive;
236
+ }
237
+
238
+ // Dividers (basically a vertical hr)
239
+ .navbar .divider-vertical {
240
+ height: $navbarHeight;
241
+ width: 1px;
242
+ margin: 0 9px;
243
+ overflow: hidden;
244
+ background-color: $navbarBackground;
245
+ border-left: 1px solid $navbarBackgroundHighlight;
246
+ }
247
+
248
+ // Secondary (floated right) nav in topbar
249
+ .navbar .nav.pull-right {
250
+ margin-right: 10px;
251
+ margin-left: 0;
252
+ }
253
+
254
+ // Navbar button for toggling navbar items in responsive layouts
255
+ // These definitions need to come after '.navbar .btn'
256
+ .navbar .btn-navbar {
257
+ display: none;
258
+ float: left;
259
+ padding: 7px 10px;
260
+ margin-right: 5px;
261
+ margin-left: 5px;
262
+ @include buttonBackground($navbarBackgroundHighlight, $navbarBackground);
263
+ @include box-shadow("inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075)");
264
+ }
265
+ .navbar .btn-navbar .icon-bar {
266
+ display: block;
267
+ width: 18px;
268
+ height: 2px;
269
+ background-color: #f5f5f5;
270
+ @include border-radius(1px);
271
+ @include box-shadow(0 1px 0 rgba(0,0,0,.25));
272
+ }
273
+ .btn-navbar .icon-bar + .icon-bar {
274
+ margin-top: 3px;
275
+ }
276
+
277
+
278
+ // Dropdown menus
279
+ // --------------
280
+
281
+ // Menu position and menu carets
282
+ .navbar .dropdown-menu {
283
+ &:before {
284
+ content: '';
285
+ display: inline-block;
286
+ border-right: 7px solid transparent;
287
+ border-left: 7px solid transparent;
288
+ border-bottom: 7px solid #ccc;
289
+ border-bottom-color: $dropdownBorder;
290
+ position: absolute;
291
+ top: -7px;
292
+ right: 9px;
293
+ }
294
+ &:after {
295
+ content: '';
296
+ display: inline-block;
297
+ border-right: 6px solid transparent;
298
+ border-left: 6px solid transparent;
299
+ border-bottom: 6px solid $dropdownBackground;
300
+ position: absolute;
301
+ top: -6px;
302
+ right: 10px;
303
+ }
304
+ }
305
+ // Menu position and menu caret support for dropups via extra dropup class
306
+ .navbar-fixed-bottom .dropdown-menu {
307
+ &:before {
308
+ border-top: 7px solid #ccc;
309
+ border-top-color: $dropdownBorder;
310
+ border-bottom: 0;
311
+ bottom: -7px;
312
+ top: auto;
313
+ }
314
+ &:after {
315
+ border-top: 6px solid $dropdownBackground;
316
+ border-bottom: 0;
317
+ bottom: -6px;
318
+ top: auto;
319
+ }
320
+ }
321
+
322
+ // Dropdown toggle caret
323
+ .navbar .nav li.dropdown .dropdown-toggle .caret,
324
+ .navbar .nav li.dropdown.open .caret {
325
+ border-top-color: $white;
326
+ border-bottom-color: $white;
327
+ }
328
+ .navbar .nav li.dropdown.active .caret {
329
+ @include opacity(100);
330
+ }
331
+
332
+ // Remove background color from open dropdown
333
+ .navbar .nav li.dropdown.open > .dropdown-toggle,
334
+ .navbar .nav li.dropdown.active > .dropdown-toggle,
335
+ .navbar .nav li.dropdown.open.active > .dropdown-toggle {
336
+ background-color: transparent;
337
+ }
338
+
339
+ // Dropdown link on hover
340
+ .navbar .nav li.dropdown.active > .dropdown-toggle:hover {
341
+ color: $white;
342
+ }
343
+
344
+ // Right aligned menus need alt position
345
+ // TODO: rejigger this at some point to simplify the selectors
346
+ .navbar .pull-right .dropdown-menu,
347
+ .navbar .dropdown-menu.pull-right {
348
+ right: auto;
349
+ left: 0;
350
+ &:before {
351
+ right: auto;
352
+ left: 12px;
353
+ }
354
+ &:after {
355
+ right: auto;
356
+ left: 13px;
357
+ }
358
+ }
@@ -0,0 +1,364 @@
1
+ // NAVIGATIONS
2
+ // -----------
3
+
4
+
5
+
6
+ // BASE CLASS
7
+ // ----------
8
+
9
+ .nav {
10
+ margin-right: 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
+ // Redeclare pull classes because of specifity
25
+ .nav > .pull-right {
26
+ float: left;
27
+ }
28
+
29
+ // Nav headers (for dropdowns and lists)
30
+ .nav .nav-header {
31
+ display: block;
32
+ padding: 3px 15px;
33
+ font-size: 11px;
34
+ font-weight: bold;
35
+ line-height: $baseLineHeight;
36
+ color: $grayLight;
37
+ text-shadow: 0 1px 0 rgba(255,255,255,.5);
38
+ text-transform: uppercase;
39
+ }
40
+ // Space them out when they follow another list item (link)
41
+ .nav li + .nav-header {
42
+ margin-top: 9px;
43
+ }
44
+
45
+
46
+ // NAV LIST
47
+ // --------
48
+
49
+ .nav-list {
50
+ padding-right: 15px;
51
+ padding-left: 15px;
52
+ margin-bottom: 0;
53
+ }
54
+ .nav-list > li > a,
55
+ .nav-list .nav-header {
56
+ margin-right: -15px;
57
+ margin-left: -15px;
58
+ text-shadow: 0 1px 0 rgba(255,255,255,.5);
59
+ }
60
+ .nav-list > li > a {
61
+ padding: 3px 15px;
62
+ }
63
+ .nav-list > .active > a,
64
+ .nav-list > .active > a:hover {
65
+ color: $white;
66
+ text-shadow: 0 -1px 0 rgba(0,0,0,.2);
67
+ background-color: $linkColor;
68
+ }
69
+ .nav-list [class^="icon-"] {
70
+ margin-left: 2px;
71
+ }
72
+ // Dividers (basically an hr) within the dropdown
73
+ .nav-list .divider {
74
+ @include nav-divider();
75
+ }
76
+
77
+
78
+
79
+ // TABS AND PILLS
80
+ // -------------
81
+
82
+ // Common styles
83
+ .nav-tabs,
84
+ .nav-pills {
85
+ @include clearfix();
86
+ }
87
+ .nav-tabs > li,
88
+ .nav-pills > li {
89
+ float: right;
90
+ }
91
+ .nav-tabs > li > a,
92
+ .nav-pills > li > a {
93
+ padding-left: 12px;
94
+ padding-right: 12px;
95
+ margin-left: 2px;
96
+ line-height: 14px; // keeps the overall height an even number
97
+ }
98
+
99
+ // TABS
100
+ // ----
101
+
102
+ // Give the tabs something to sit on
103
+ .nav-tabs {
104
+ border-bottom: 1px solid #ddd;
105
+ }
106
+ // Make the list-items overlay the bottom border
107
+ .nav-tabs > li {
108
+ margin-bottom: -1px;
109
+ }
110
+
111
+ // Actual tabs (as links)
112
+ .nav-tabs > li > a {
113
+ padding-top: 8px;
114
+ padding-bottom: 8px;
115
+ line-height: $baseLineHeight;
116
+ border: 1px solid transparent;
117
+ @include border-radius(4px 4px 0 0);
118
+ &:hover {
119
+ border-color: $grayLighter $grayLighter #ddd;
120
+ }
121
+ }
122
+ // Active state, and it's :hover to override normal :hover
123
+ .nav-tabs > .active > a,
124
+ .nav-tabs > .active > a:hover {
125
+ color: $gray;
126
+ background-color: $white;
127
+ border: 1px solid #ddd;
128
+ border-bottom-color: transparent;
129
+ cursor: default;
130
+ }
131
+
132
+
133
+ // PILLS
134
+ // -----
135
+
136
+ // Links rendered as pills
137
+ .nav-pills > li > a {
138
+ padding-top: 8px;
139
+ padding-bottom: 8px;
140
+ margin-top: 2px;
141
+ margin-bottom: 2px;
142
+ @include border-radius(5px);
143
+ }
144
+
145
+ // Active state
146
+ .nav-pills > .active > a,
147
+ .nav-pills > .active > a:hover {
148
+ color: $white;
149
+ background-color: $linkColor;
150
+ }
151
+
152
+
153
+
154
+ // STACKED NAV
155
+ // -----------
156
+
157
+ // Stacked tabs and pills
158
+ .nav-stacked > li {
159
+ float: none;
160
+ }
161
+ .nav-stacked > li > a {
162
+ margin-left: 0; // no need for the gap between nav items
163
+ }
164
+
165
+ // Tabs
166
+ .nav-tabs.nav-stacked {
167
+ border-bottom: 0;
168
+ }
169
+ .nav-tabs.nav-stacked > li > a {
170
+ border: 1px solid #ddd;
171
+ @include border-radius(0);
172
+ }
173
+ .nav-tabs.nav-stacked > li:first-child > a {
174
+ @include border-radius(4px 4px 0 0);
175
+ }
176
+ .nav-tabs.nav-stacked > li:last-child > a {
177
+ @include border-radius(0 0 4px 4px);
178
+ }
179
+ .nav-tabs.nav-stacked > li > a:hover {
180
+ border-color: #ddd;
181
+ z-index: 2;
182
+ }
183
+
184
+ // Pills
185
+ .nav-pills.nav-stacked > li > a {
186
+ margin-bottom: 3px;
187
+ }
188
+ .nav-pills.nav-stacked > li:last-child > a {
189
+ margin-bottom: 1px; // decrease margin to match sizing of stacked tabs
190
+ }
191
+
192
+
193
+
194
+ // DROPDOWNS
195
+ // ---------
196
+
197
+ .nav-tabs .dropdown-menu {
198
+ @include border-radius(0 0 5px 5px); // remove the top rounded corners here since there is a hard edge above the menu
199
+ }
200
+ .nav-pills .dropdown-menu {
201
+ @include border-radius(4px); // make rounded corners match the pills
202
+ }
203
+
204
+ // Default dropdown links
205
+ // -------------------------
206
+ // Make carets use linkColor to start
207
+ .nav-tabs .dropdown-toggle .caret,
208
+ .nav-pills .dropdown-toggle .caret {
209
+ border-top-color: $linkColor;
210
+ border-bottom-color: $linkColor;
211
+ margin-top: 6px;
212
+ }
213
+ .nav-tabs .dropdown-toggle:hover .caret,
214
+ .nav-pills .dropdown-toggle:hover .caret {
215
+ border-top-color: $linkColorHover;
216
+ border-bottom-color: $linkColorHover;
217
+ }
218
+
219
+ // Active dropdown links
220
+ // -------------------------
221
+ .nav-tabs .active .dropdown-toggle .caret,
222
+ .nav-pills .active .dropdown-toggle .caret {
223
+ border-top-color: $grayDark;
224
+ border-bottom-color: $grayDark;
225
+ }
226
+
227
+ // Active:hover dropdown links
228
+ // -------------------------
229
+ .nav > .dropdown.active > a:hover {
230
+ color: $black;
231
+ cursor: pointer;
232
+ }
233
+
234
+ // Open dropdowns
235
+ // -------------------------
236
+ .nav-tabs .open .dropdown-toggle,
237
+ .nav-pills .open .dropdown-toggle,
238
+ .nav > li.dropdown.open.active > a:hover {
239
+ color: $white;
240
+ background-color: $grayLight;
241
+ border-color: $grayLight;
242
+ }
243
+ .nav li.dropdown.open .caret,
244
+ .nav li.dropdown.open.active .caret,
245
+ .nav li.dropdown.open a:hover .caret {
246
+ border-top-color: $white;
247
+ border-bottom-color: $white;
248
+ @include opacity(100);
249
+ }
250
+
251
+ // Dropdowns in stacked tabs
252
+ .tabs-stacked .open > a:hover {
253
+ border-color: $grayLight;
254
+ }
255
+
256
+
257
+
258
+ // TABBABLE
259
+ // --------
260
+
261
+
262
+ // COMMON STYLES
263
+ // -------------
264
+
265
+ // Clear any floats
266
+ .tabbable {
267
+ @include clearfix();
268
+ }
269
+ .tab-content {
270
+ overflow: auto; // prevent content from running below tabs
271
+ }
272
+
273
+ // Remove border on bottom, left, right
274
+ .tabs-below > .nav-tabs,
275
+ .tabs-right > .nav-tabs,
276
+ .tabs-left > .nav-tabs {
277
+ border-bottom: 0;
278
+ }
279
+
280
+ // Show/hide tabbable areas
281
+ .tab-content > .tab-pane,
282
+ .pill-content > .pill-pane {
283
+ display: none;
284
+ }
285
+ .tab-content > .active,
286
+ .pill-content > .active {
287
+ display: block;
288
+ }
289
+
290
+
291
+ // BOTTOM
292
+ // ------
293
+
294
+ .tabs-below > .nav-tabs {
295
+ border-top: 1px solid #ddd;
296
+ }
297
+ .tabs-below > .nav-tabs > li {
298
+ margin-top: -1px;
299
+ margin-bottom: 0;
300
+ }
301
+ .tabs-below > .nav-tabs > li > a {
302
+ @include border-radius(0 0 4px 4px);
303
+ &:hover {
304
+ border-bottom-color: transparent;
305
+ border-top-color: #ddd;
306
+ }
307
+ }
308
+ .tabs-below > .nav-tabs .active > a,
309
+ .tabs-below > .nav-tabs .active > a:hover {
310
+ border-color: transparent #ddd #ddd #ddd;
311
+ }
312
+
313
+ // LEFT & RIGHT
314
+ // ------------
315
+
316
+ // Common styles
317
+ .tabs-left > .nav-tabs > li,
318
+ .tabs-right > .nav-tabs > li {
319
+ float: none;
320
+ }
321
+ .tabs-left > .nav-tabs > li > a,
322
+ .tabs-right > .nav-tabs > li > a {
323
+ min-width: 74px;
324
+ margin-left: 0;
325
+ margin-bottom: 3px;
326
+ }
327
+
328
+ // Tabs on the left
329
+ .tabs-left > .nav-tabs {
330
+ float: right;
331
+ margin-left: 19px;
332
+ border-left: 1px solid #ddd;
333
+ }
334
+ .tabs-left > .nav-tabs > li > a {
335
+ margin-left: -1px;
336
+ @include border-radius(4px 0 0 4px);
337
+ }
338
+ .tabs-left > .nav-tabs > li > a:hover {
339
+ border-color: $grayLighter #ddd $grayLighter $grayLighter;
340
+ }
341
+ .tabs-left > .nav-tabs .active > a,
342
+ .tabs-left > .nav-tabs .active > a:hover {
343
+ border-color: #ddd transparent #ddd #ddd;
344
+ *border-left-color: $white;
345
+ }
346
+
347
+ // Tabs on the right
348
+ .tabs-right > .nav-tabs {
349
+ float: left;
350
+ margin-right: 19px;
351
+ border-right: 1px solid #ddd;
352
+ }
353
+ .tabs-right > .nav-tabs > li > a {
354
+ margin-right: -1px;
355
+ @include border-radius(0 4px 4px 0);
356
+ }
357
+ .tabs-right > .nav-tabs > li > a:hover {
358
+ border-color: $grayLighter $grayLighter $grayLighter #ddd;
359
+ }
360
+ .tabs-right > .nav-tabs .active > a,
361
+ .tabs-right > .nav-tabs .active > a:hover {
362
+ border-color: #ddd #ddd #ddd transparent;
363
+ *border-right-color: $white;
364
+ }