bootstrap-sass-rails-rtl 2.0.4.12

Sign up to get free protection for your applications and to get access to all the features.
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
+ }