twitter-bootstrap 0.0.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (59) hide show
  1. data/MIT-LICENSE +20 -0
  2. data/README.rdoc +3 -0
  3. data/Rakefile +39 -0
  4. data/app/assets/javascripts/bootstrap-alerts.js +111 -0
  5. data/app/assets/javascripts/bootstrap-dropdown.js +53 -0
  6. data/app/assets/javascripts/bootstrap-modal.js +244 -0
  7. data/app/assets/javascripts/bootstrap-popover.js +77 -0
  8. data/app/assets/javascripts/bootstrap-scrollspy.js +105 -0
  9. data/app/assets/javascripts/bootstrap-tabs.js +77 -0
  10. data/app/assets/javascripts/bootstrap-twipsy.js +303 -0
  11. data/app/assets/javascripts/twitter_bootstrap/application.js +9 -0
  12. data/app/assets/stylesheets/bootsrap-defaults.css.less +26 -0
  13. data/app/assets/stylesheets/bootsrap-forms.css.less +464 -0
  14. data/app/assets/stylesheets/bootsrap-mixins.css.less +217 -0
  15. data/app/assets/stylesheets/bootsrap-patterns.css.less +1006 -0
  16. data/app/assets/stylesheets/bootsrap-reset.css.less +141 -0
  17. data/app/assets/stylesheets/bootsrap-scaffolding.css.less +135 -0
  18. data/app/assets/stylesheets/bootsrap-tables.css.less +170 -0
  19. data/app/assets/stylesheets/bootsrap-type.css.less +187 -0
  20. data/app/assets/stylesheets/bootsrap-variables.css.less +60 -0
  21. data/app/controllers/twitter_bootstrap/application_controller.rb +4 -0
  22. data/app/helpers/twitter_bootstrap/application_helper.rb +4 -0
  23. data/app/views/layouts/twitter_bootstrap/application.html.erb +14 -0
  24. data/config/routes.rb +2 -0
  25. data/lib/tasks/twitter_bootstrap_tasks.rake +4 -0
  26. data/lib/twitter_bootstrap.rb +4 -0
  27. data/lib/twitter_bootstrap/engine.rb +5 -0
  28. data/lib/twitter_bootstrap/version.rb +3 -0
  29. data/test/dummy/Rakefile +7 -0
  30. data/test/dummy/app/assets/javascripts/application.js +9 -0
  31. data/test/dummy/app/assets/stylesheets/application.css +7 -0
  32. data/test/dummy/app/controllers/application_controller.rb +3 -0
  33. data/test/dummy/app/helpers/application_helper.rb +2 -0
  34. data/test/dummy/app/views/layouts/application.html.erb +14 -0
  35. data/test/dummy/config.ru +4 -0
  36. data/test/dummy/config/application.rb +45 -0
  37. data/test/dummy/config/boot.rb +10 -0
  38. data/test/dummy/config/database.yml +25 -0
  39. data/test/dummy/config/environment.rb +5 -0
  40. data/test/dummy/config/environments/development.rb +30 -0
  41. data/test/dummy/config/environments/production.rb +60 -0
  42. data/test/dummy/config/environments/test.rb +42 -0
  43. data/test/dummy/config/initializers/backtrace_silencers.rb +7 -0
  44. data/test/dummy/config/initializers/inflections.rb +10 -0
  45. data/test/dummy/config/initializers/mime_types.rb +5 -0
  46. data/test/dummy/config/initializers/secret_token.rb +7 -0
  47. data/test/dummy/config/initializers/session_store.rb +8 -0
  48. data/test/dummy/config/initializers/wrap_parameters.rb +14 -0
  49. data/test/dummy/config/locales/en.yml +5 -0
  50. data/test/dummy/config/routes.rb +4 -0
  51. data/test/dummy/public/404.html +26 -0
  52. data/test/dummy/public/422.html +26 -0
  53. data/test/dummy/public/500.html +26 -0
  54. data/test/dummy/public/favicon.ico +0 -0
  55. data/test/dummy/script/rails +6 -0
  56. data/test/integration/navigation_test.rb +10 -0
  57. data/test/test_helper.rb +10 -0
  58. data/test/twitter_bootstrap_test.rb +7 -0
  59. metadata +168 -0
@@ -0,0 +1,217 @@
1
+ /* Mixins.less
2
+ * Snippets of reusable CSS to develop faster and keep code readable
3
+ * ----------------------------------------------------------------- */
4
+
5
+
6
+ // Clearfix for clearing floats like a boss h5bp.com/q
7
+ .clearfix() {
8
+ zoom: 1;
9
+ &:before,
10
+ &:after {
11
+ display: table;
12
+ content: "";
13
+ zoom: 1;
14
+ *display: inline;
15
+ }
16
+ &:after {
17
+ clear: both;
18
+ }
19
+ }
20
+
21
+ // Center-align a block level element
22
+ .center-block() {
23
+ display: block;
24
+ margin-left: auto;
25
+ margin-right: auto;
26
+ }
27
+
28
+ // Sizing shortcuts
29
+ .size(@height: 5px, @width: 5px) {
30
+ height: @height;
31
+ width: @width;
32
+ }
33
+ .square(@size: 5px) {
34
+ .size(@size, @size);
35
+ }
36
+
37
+ // Input placeholder text
38
+ .placeholder(@color: @grayLight) {
39
+ :-moz-placeholder {
40
+ color: @color;
41
+ }
42
+ ::-webkit-input-placeholder {
43
+ color: @color;
44
+ }
45
+ }
46
+
47
+ // Font Stacks
48
+ #font {
49
+ .shorthand(@weight: normal, @size: 14px, @lineHeight: 20px) {
50
+ font-size: @size;
51
+ font-weight: @weight;
52
+ line-height: @lineHeight;
53
+ }
54
+ .sans-serif(@weight: normal, @size: 14px, @lineHeight: 20px) {
55
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
56
+ font-size: @size;
57
+ font-weight: @weight;
58
+ line-height: @lineHeight;
59
+ }
60
+ .serif(@weight: normal, @size: 14px, @lineHeight: 20px) {
61
+ font-family: "Georgia", Times New Roman, Times, serif;
62
+ font-size: @size;
63
+ font-weight: @weight;
64
+ line-height: @lineHeight;
65
+ }
66
+ .monospace(@weight: normal, @size: 12px, @lineHeight: 20px) {
67
+ font-family: "Monaco", Courier New, monospace;
68
+ font-size: @size;
69
+ font-weight: @weight;
70
+ line-height: @lineHeight;
71
+ }
72
+ }
73
+
74
+ // Grid System
75
+ .fixed-container() {
76
+ width: @siteWidth;
77
+ margin-left: auto;
78
+ margin-right: auto;
79
+ .clearfix();
80
+ }
81
+ .columns(@columnSpan: 1) {
82
+ width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
83
+ }
84
+ .offset(@columnOffset: 1) {
85
+ margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @extraSpace;
86
+ }
87
+ // Necessary grid styles for every column to make them appear next to each other horizontally
88
+ .gridColumn() {
89
+ display: inline;
90
+ float: left;
91
+ margin-left: @gridGutterWidth;
92
+ }
93
+ // makeColumn can be used to mark any element (e.g., .content-primary) as a column without changing markup to .span something
94
+ .makeColumn(@columnSpan: 1) {
95
+ .gridColumn();
96
+ .columns(@columnSpan);
97
+ }
98
+
99
+ // Border Radius
100
+ .border-radius(@radius: 5px) {
101
+ -webkit-border-radius: @radius;
102
+ -moz-border-radius: @radius;
103
+ border-radius: @radius;
104
+ }
105
+
106
+ // Drop shadows
107
+ .box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
108
+ -webkit-box-shadow: @shadow;
109
+ -moz-box-shadow: @shadow;
110
+ box-shadow: @shadow;
111
+ }
112
+
113
+ // Transitions
114
+ .transition(@transition) {
115
+ -webkit-transition: @transition;
116
+ -moz-transition: @transition;
117
+ -ms-transition: @transition;
118
+ -o-transition: @transition;
119
+ transition: @transition;
120
+ }
121
+
122
+ // Background clipping
123
+ .background-clip(@clip) {
124
+ -webkit-background-clip: @clip;
125
+ -moz-background-clip: @clip;
126
+ background-clip: @clip;
127
+ }
128
+
129
+ // CSS3 Content Columns
130
+ .content-columns(@columnCount, @columnGap: 20px) {
131
+ -webkit-column-count: @columnCount;
132
+ -moz-column-count: @columnCount;
133
+ column-count: @columnCount;
134
+ -webkit-column-gap: @columnGap;
135
+ -moz-column-gap: @columnGap;
136
+ column-gap: @columnGap;
137
+ }
138
+
139
+ // Add an alphatransparency value to any background or border color (via Elyse Holladay)
140
+ #translucent {
141
+ .background(@color: @white, @alpha: 1) {
142
+ background-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
143
+ }
144
+ .border(@color: @white, @alpha: 1) {
145
+ border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
146
+ background-clip: padding-box;
147
+ }
148
+ }
149
+
150
+ // Gradient Bar Colors for buttons and allerts
151
+ .gradientBar(@primaryColor, @secondaryColor) {
152
+ #gradient > .vertical(@primaryColor, @secondaryColor);
153
+ text-shadow: 0 -1px 0 rgba(0,0,0,.25);
154
+ border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%);
155
+ border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
156
+ }
157
+
158
+ // Gradients
159
+ #gradient {
160
+ .horizontal (@startColor: #555, @endColor: #333) {
161
+ background-color: @endColor;
162
+ background-repeat: repeat-x;
163
+ background-image: -khtml-gradient(linear, left top, right top, from(@startColor), to(@endColor)); // Konqueror
164
+ background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
165
+ background-image: -ms-linear-gradient(left, @startColor, @endColor); // IE10
166
+ background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+
167
+ background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
168
+ background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
169
+ background-image: linear-gradient(left, @startColor, @endColor); // Le standard
170
+ filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor)); // IE9 and down
171
+ }
172
+ .vertical (@startColor: #555, @endColor: #333) {
173
+ background-color: @endColor;
174
+ background-repeat: repeat-x;
175
+ background-image: -khtml-gradient(linear, left top, left bottom, from(@startColor), to(@endColor)); // Konqueror
176
+ background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
177
+ background-image: -ms-linear-gradient(top, @startColor, @endColor); // IE10
178
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+
179
+ background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
180
+ background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
181
+ background-image: linear-gradient(top, @startColor, @endColor); // The standard
182
+ filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down
183
+ }
184
+ .directional (@startColor: #555, @endColor: #333, @deg: 45deg) {
185
+ background-color: @endColor;
186
+ background-repeat: repeat-x;
187
+ background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+
188
+ background-image: -ms-linear-gradient(@deg, @startColor, @endColor); // IE10
189
+ background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+
190
+ background-image: -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10
191
+ background-image: linear-gradient(@deg, @startColor, @endColor); // The standard
192
+ }
193
+ .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
194
+ background-color: @endColor;
195
+ background-repeat: no-repeat;
196
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
197
+ background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor);
198
+ background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor);
199
+ background-image: -ms-linear-gradient(@startColor, @midColor @colorStop, @endColor);
200
+ background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor);
201
+ background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor);
202
+ filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down, gets no color-stop at all for proper fallback
203
+ }
204
+ }
205
+
206
+ // Reset filters for IE
207
+ .reset-filter() {
208
+ filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
209
+ }
210
+
211
+ // Opacity
212
+ .opacity(@opacity: 100) {
213
+ filter: e(%("alpha(opacity=%d)", @opacity));
214
+ -khtml-opacity: @opacity / 100;
215
+ -moz-opacity: @opacity / 100;
216
+ opacity: @opacity / 100;
217
+ }
@@ -0,0 +1,1006 @@
1
+ /* Patterns.less
2
+ * Repeatable UI elements outside the base styles provided from the scaffolding
3
+ * ---------------------------------------------------------------------------- */
4
+
5
+
6
+ // TOPBAR
7
+ // ------
8
+
9
+ // Topbar for Branding and Nav
10
+ .topbar {
11
+ height: 40px;
12
+ position: fixed;
13
+ top: 0;
14
+ left: 0;
15
+ right: 0;
16
+ z-index: 10000;
17
+ overflow: visible;
18
+
19
+ // Links get text shadow
20
+ a {
21
+ color: @grayLight;
22
+ text-shadow: 0 -1px 0 rgba(0,0,0,.25);
23
+ }
24
+
25
+ // Hover and active states
26
+ // h3 for backwards compatibility
27
+ h3 a:hover,
28
+ .brand a:hover,
29
+ ul .active > a {
30
+ background-color: #333;
31
+ background-color: rgba(255,255,255,.05);
32
+ color: @white;
33
+ text-decoration: none;
34
+ }
35
+
36
+ // Website name
37
+ // h3 left for backwards compatibility
38
+ h3 {
39
+ position: relative;
40
+ }
41
+ h3 a,
42
+ .brand {
43
+ float: left;
44
+ display: block;
45
+ padding: 8px 20px 12px;
46
+ margin-left: -20px; // negative indent to left-align the text down the page
47
+ color: @white;
48
+ font-size: 20px;
49
+ font-weight: 200;
50
+ line-height: 1;
51
+ }
52
+
53
+ // Plain text in topbar
54
+ p {
55
+ margin: 0;
56
+ line-height: 40px;
57
+ a:hover {
58
+ background-color: transparent;
59
+ color: @white;
60
+ }
61
+ }
62
+
63
+ // Search Form
64
+ form {
65
+ float: left;
66
+ margin: 5px 0 0 0;
67
+ position: relative;
68
+ .opacity(100);
69
+ }
70
+ // Todo: remove from v2.0 when ready, added for legacy
71
+ form.pull-right {
72
+ float: right;
73
+ }
74
+ input {
75
+ background-color: #444;
76
+ background-color: rgba(255,255,255,.3);
77
+ #font > .sans-serif(13px, normal, 1);
78
+ padding: 4px 9px;
79
+ color: @white;
80
+ color: rgba(255,255,255,.75);
81
+ border: 1px solid #111;
82
+ .border-radius(4px);
83
+ @shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.25);
84
+ .box-shadow(@shadow);
85
+ .transition(none);
86
+
87
+ // Placeholder text gets special styles; can't be bundled together though for some reason
88
+ &:-moz-placeholder {
89
+ color: @grayLighter;
90
+ }
91
+ &::-webkit-input-placeholder {
92
+ color: @grayLighter;
93
+ }
94
+ // Hover states
95
+ &:hover {
96
+ background-color: @grayLight;
97
+ background-color: rgba(255,255,255,.5);
98
+ color: @white;
99
+ }
100
+ // Focus states (we use .focused since IE8 and down doesn't support :focus)
101
+ &:focus,
102
+ &.focused {
103
+ outline: 0;
104
+ background-color: @white;
105
+ color: @grayDark;
106
+ text-shadow: 0 1px 0 @white;
107
+ border: 0;
108
+ padding: 5px 10px;
109
+ .box-shadow(0 0 3px rgba(0,0,0,.15));
110
+ }
111
+ }
112
+ }
113
+
114
+ // gradient is applied to it's own element because overflow visible is not honored by ie when filter is present
115
+ // For backwards compatibility, include .topbar .fill
116
+ .topbar-inner,
117
+ .topbar .fill {
118
+ background-color: #222;
119
+ #gradient > .vertical(#333, #222);
120
+ @shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
121
+ .box-shadow(@shadow);
122
+ }
123
+
124
+
125
+ // NAVIGATION
126
+ // ----------
127
+
128
+ // Topbar Nav
129
+ // ul.nav for all topbar based navigation to avoid inheritance issues and over-specificity
130
+ // For backwards compatibility, leave in .topbar div > ul
131
+ .topbar div > ul,
132
+ .nav {
133
+ display: block;
134
+ float: left;
135
+ margin: 0 10px 0 0;
136
+ position: relative;
137
+ left: 0;
138
+ > li {
139
+ display: block;
140
+ float: left;
141
+ }
142
+ a {
143
+ display: block;
144
+ float: none;
145
+ padding: 10px 10px 11px;
146
+ line-height: 19px;
147
+ text-decoration: none;
148
+ &:hover {
149
+ color: @white;
150
+ text-decoration: none;
151
+ }
152
+ }
153
+ .active > a {
154
+ background-color: #222;
155
+ background-color: rgba(0,0,0,.5);
156
+ }
157
+
158
+ // Secondary (floated right) nav in topbar
159
+ &.secondary-nav {
160
+ float: right;
161
+ margin-left: 10px;
162
+ margin-right: 0;
163
+ // backwards compatibility
164
+ .menu-dropdown,
165
+ .dropdown-menu {
166
+ right: 0;
167
+ border: 0;
168
+ }
169
+ }
170
+ // Dropdowns within the .nav
171
+ // a.menu:hover and li.open .menu for backwards compatibility
172
+ a.menu:hover,
173
+ li.open .menu,
174
+ .dropdown-toggle:hover,
175
+ .dropdown.open .dropdown-toggle {
176
+ background: #444;
177
+ background: rgba(255,255,255,.05);
178
+ }
179
+ // .menu-dropdown for backwards compatibility
180
+ .menu-dropdown,
181
+ .dropdown-menu {
182
+ background-color: #333;
183
+ // a.menu for backwards compatibility
184
+ a.menu,
185
+ .dropdown-toggle {
186
+ color: @white;
187
+ &.open {
188
+ background: #444;
189
+ background: rgba(255,255,255,.05);
190
+ }
191
+ }
192
+ li a {
193
+ color: #999;
194
+ text-shadow: 0 1px 0 rgba(0,0,0,.5);
195
+ &:hover {
196
+ #gradient > .vertical(#292929,#191919);
197
+ color: @white;
198
+ }
199
+ }
200
+ .active a {
201
+ color: @white;
202
+ }
203
+ .divider {
204
+ background-color: #222;
205
+ border-color: #444;
206
+ }
207
+ }
208
+ }
209
+
210
+ // For backwards compatibility with new dropdowns, redeclare dropdown link padding
211
+ .topbar ul .menu-dropdown li a,
212
+ .topbar ul .dropdown-menu li a {
213
+ padding: 4px 15px;
214
+ }
215
+
216
+ // Dropdown Menus
217
+ // Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns
218
+ // li.menu for backwards compatibility
219
+ li.menu,
220
+ .dropdown {
221
+ position: relative;
222
+ }
223
+ // The link that is clicked to toggle the dropdown
224
+ // a.menu for backwards compatibility
225
+ a.menu:after,
226
+ .dropdown-toggle:after {
227
+ width: 0;
228
+ height: 0;
229
+ display: inline-block;
230
+ content: "&darr;";
231
+ text-indent: -99999px;
232
+ vertical-align: top;
233
+ margin-top: 8px;
234
+ margin-left: 4px;
235
+ border-left: 4px solid transparent;
236
+ border-right: 4px solid transparent;
237
+ border-top: 4px solid @white;
238
+ .opacity(50);
239
+ }
240
+ // The dropdown menu (ul)
241
+ // .menu-dropdown for backwards compatibility
242
+ .menu-dropdown,
243
+ .dropdown-menu {
244
+ background-color: @white;
245
+ float: left;
246
+ display: none; // None by default, but block on "open" of the menu
247
+ position: absolute;
248
+ top: 40px;
249
+ z-index: 900;
250
+ min-width: 160px;
251
+ max-width: 220px;
252
+ _width: 160px;
253
+ margin-left: 0; // override default ul styles
254
+ margin-right: 0;
255
+ padding: 6px 0;
256
+ zoom: 1; // do we need this?
257
+ border-color: #999;
258
+ border-color: rgba(0,0,0,.2);
259
+ border-style: solid;
260
+ border-width: 0 1px 1px;
261
+ .border-radius(0 0 6px 6px);
262
+ .box-shadow(0 2px 4px rgba(0,0,0,.2));
263
+ .background-clip(padding-box);
264
+
265
+ // Unfloat any li's to make them stack
266
+ li {
267
+ float: none;
268
+ display: block;
269
+ background-color: none;
270
+ }
271
+ // Dividers (basically an hr) within the dropdown
272
+ .divider {
273
+ height: 1px;
274
+ margin: 5px 0;
275
+ overflow: hidden;
276
+ background-color: #eee;
277
+ border-bottom: 1px solid @white;
278
+ }
279
+ }
280
+
281
+ .topbar .dropdown-menu, .dropdown-menu {
282
+ // Links within the dropdown menu
283
+ a {
284
+ display: block;
285
+ padding: 4px 15px;
286
+ clear: both;
287
+ font-weight: normal;
288
+ line-height: 18px;
289
+ color: @gray;
290
+ text-shadow: 0 1px 0 @white;
291
+ // Hover state
292
+ &:hover {
293
+ #gradient > .vertical(#eeeeee, #dddddd);
294
+ color: @grayDark;
295
+ text-decoration: none;
296
+ @shadow: inset 0 1px 0 rgba(0,0,0,.025), inset 0 -1px rgba(0,0,0,.025);
297
+ .box-shadow(@shadow);
298
+ }
299
+ }
300
+ }
301
+
302
+ // Open state for the dropdown
303
+ // .open for backwards compatibility
304
+ .open,
305
+ .dropdown.open {
306
+ // .menu for backwards compatibility
307
+ .menu,
308
+ .dropdown-toggle {
309
+ color: @white;
310
+ background: #ccc;
311
+ background: rgba(0,0,0,.3);
312
+ }
313
+ // .menu-dropdown for backwards compatibility
314
+ .menu-dropdown,
315
+ .dropdown-menu {
316
+ display: block;
317
+ }
318
+ }
319
+
320
+
321
+ // Tabs and Pills
322
+ .tabs,
323
+ .pills {
324
+ margin: 0 0 20px;
325
+ padding: 0;
326
+ list-style: none;
327
+ .clearfix();
328
+ > li {
329
+ float: left;
330
+ > a {
331
+ display: block;
332
+ }
333
+ }
334
+ }
335
+
336
+ // Basic Tabs
337
+ .tabs {
338
+ float: left;
339
+ width: 100%;
340
+ border-bottom: 1px solid #ddd;
341
+ > li {
342
+ position: relative; // For the dropdowns mostly
343
+ top: 1px;
344
+ > a {
345
+ padding: 0 15px;
346
+ margin-right: 2px;
347
+ line-height: @baseline * 2;
348
+ border: 1px solid transparent;
349
+ .border-radius(4px 4px 0 0);
350
+ &:hover {
351
+ text-decoration: none;
352
+ background-color: #eee;
353
+ border-color: #eee #eee #ddd;
354
+ }
355
+ }
356
+ &.active > a {
357
+ color: @gray;
358
+ background-color: @white;
359
+ border: 1px solid #ddd;
360
+ border-bottom-color: transparent;
361
+ }
362
+ }
363
+ // first one for backwards compatibility
364
+ .menu-dropdown,
365
+ .dropdown-menu {
366
+ top: 35px;
367
+ border-width: 1px;
368
+ .border-radius(0 6px 6px 6px);
369
+ }
370
+ // first one for backwards compatibility
371
+ a.menu:after,
372
+ .dropdown-toggle:after {
373
+ border-top-color: #999;
374
+ margin-top: 15px;
375
+ margin-left: 5px;
376
+ }
377
+ // first one for backwards compatibility
378
+ li.open.menu .menu,
379
+ .open.dropdown .dropdown-toggle {
380
+ border-color: #999;
381
+ }
382
+ // first one for backwards compatibility
383
+ li.open a.menu:after,
384
+ .dropdown.open .dropdown-toggle:after {
385
+ border-top-color: #555;
386
+ }
387
+ }
388
+ .tab-content {
389
+ clear: both;
390
+ }
391
+
392
+ // Basic pill nav
393
+ .pills {
394
+ a {
395
+ margin: 5px 3px 5px 0;
396
+ padding: 0 15px;
397
+ text-shadow: 0 1px 1px @white;
398
+ line-height: 30px;
399
+ .border-radius(15px);
400
+ &:hover {
401
+ background: @linkColorHover;
402
+ color: @white;
403
+ text-decoration: none;
404
+ text-shadow: 0 1px 1px rgba(0,0,0,.25);
405
+ }
406
+ }
407
+ .active a {
408
+ background: @linkColor;
409
+ color: @white;
410
+ text-shadow: 0 1px 1px rgba(0,0,0,.25);
411
+ }
412
+ }
413
+
414
+ .tab-content > *,
415
+ .pill-content > * {
416
+ display: none;
417
+ }
418
+
419
+ .tab-content > .active,
420
+ .pill-content > .active {
421
+ display:block;
422
+ }
423
+
424
+
425
+ // BREADCRUMBS
426
+ // -----------
427
+
428
+ .breadcrumb {
429
+ margin: 0 0 @baseline;
430
+ padding: 7px 14px;
431
+ #gradient > .vertical(#ffffff, #f5f5f5);
432
+ border: 1px solid #ddd;
433
+ .border-radius(3px);
434
+ .box-shadow(inset 0 1px 0 @white);
435
+ li {
436
+ display: inline;
437
+ text-shadow: 0 1px 0 @white;
438
+ }
439
+ .divider {
440
+ padding: 0 5px;
441
+ color: @grayLight;
442
+ }
443
+ a {
444
+ }
445
+ .active a {
446
+ color: @grayDark;
447
+ }
448
+ }
449
+
450
+
451
+ // PAGE HEADERS
452
+ // ------------
453
+
454
+ .hero-unit {
455
+ background-color: #f5f5f5;
456
+ margin-bottom: 30px;
457
+ padding: 60px;
458
+ .border-radius(6px);
459
+ h1 {
460
+ margin-bottom: 0;
461
+ font-size: 60px;
462
+ line-height: 1;
463
+ letter-spacing: -1px;
464
+ }
465
+ p {
466
+ font-size: 18px;
467
+ font-weight: 200;
468
+ line-height: @baseline * 1.5;
469
+ }
470
+ }
471
+ footer {
472
+ margin-top: @baseline - 1;
473
+ padding-top: @baseline - 1;
474
+ border-top: 1px solid #eee;
475
+ }
476
+
477
+
478
+ // PAGE HEADERS
479
+ // ------------
480
+
481
+ .page-header {
482
+ margin-bottom: @baseline - 1;
483
+ border-bottom: 1px solid #ddd;
484
+ .box-shadow(0 1px 0 rgba(255,255,255,.5));
485
+ h1 {
486
+ margin-bottom: (@baseline / 2) - 1px;
487
+ }
488
+ }
489
+
490
+
491
+ // BUTTON STYLES
492
+ // -------------
493
+
494
+ // Shared colors for buttons and alerts
495
+ .btn,
496
+ .alert-message {
497
+ // Set text color
498
+ &.danger,
499
+ &.danger:hover,
500
+ &.error,
501
+ &.error:hover,
502
+ &.success,
503
+ &.success:hover,
504
+ &.info,
505
+ &.info:hover {
506
+ color: @white
507
+ }
508
+ // Danger and error appear as red
509
+ &.danger,
510
+ &.error {
511
+ .gradientBar(#ee5f5b, #c43c35);
512
+ }
513
+ // Success appears as green
514
+ &.success {
515
+ .gradientBar(#62c462, #57a957);
516
+ }
517
+ // Info appears as a neutral blue
518
+ &.info {
519
+ .gradientBar(#5bc0de, #339bb9);
520
+ }
521
+ }
522
+
523
+ // Base .btn styles
524
+ .btn {
525
+ // Button Base
526
+ cursor: pointer;
527
+ display: inline-block;
528
+ #gradient > .vertical-three-colors(#ffffff, #ffffff, 25%, darken(#ffffff, 10%)); // Don't use .gradientbar() here since it does a three-color gradient
529
+ padding: 5px 14px 6px;
530
+ text-shadow: 0 1px 1px rgba(255,255,255,.75);
531
+ color: #333;
532
+ font-size: @basefont;
533
+ line-height: normal;
534
+ border: 1px solid #ccc;
535
+ border-bottom-color: #bbb;
536
+ .border-radius(4px);
537
+ @shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
538
+ .box-shadow(@shadow);
539
+
540
+ &:hover {
541
+ background-position: 0 -15px;
542
+ color: #333;
543
+ text-decoration: none;
544
+ }
545
+
546
+ // Focus state for keyboard and accessibility
547
+ &:focus {
548
+ outline: 1px dotted #666;
549
+ }
550
+
551
+ // Primary Button Type
552
+ &.primary {
553
+ color: @white;
554
+ .gradientBar(@blue, @blueDark)
555
+ }
556
+
557
+ // Transitions
558
+ .transition(.1s linear all);
559
+
560
+ // Active and Disabled states
561
+ &:active {
562
+ @shadow: inset 0 2px 4px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.05);
563
+ .box-shadow(@shadow);
564
+ }
565
+ &.disabled {
566
+ cursor: default;
567
+ background-image: none;
568
+ .reset-filter();
569
+ .opacity(65);
570
+ .box-shadow(none);
571
+ }
572
+ &[disabled] {
573
+ // disabled pseudo can't be included with .disabled
574
+ // def because IE8 and below will drop it ;_;
575
+ cursor: default;
576
+ background-image: none;
577
+ .reset-filter();
578
+ .opacity(65);
579
+ .box-shadow(none);
580
+ }
581
+
582
+ // Button Sizes
583
+ &.large {
584
+ font-size: @basefont + 2px;
585
+ line-height: normal;
586
+ padding: 9px 14px 9px;
587
+ .border-radius(6px);
588
+ }
589
+ &.small {
590
+ padding: 7px 9px 7px;
591
+ font-size: @basefont - 2px;
592
+ }
593
+ }
594
+ // Super jank hack for removing border-radius from IE9 so we can keep filter gradients on alerts and buttons
595
+ :root .alert-message,
596
+ :root .btn {
597
+ border-radius: 0 \0;
598
+ }
599
+
600
+ // Help Firefox not be a jerk about adding extra padding to buttons
601
+ button.btn,
602
+ input[type=submit].btn {
603
+ &::-moz-focus-inner {
604
+ padding: 0;
605
+ border: 0;
606
+ }
607
+ }
608
+
609
+
610
+ // CLOSE ICONS
611
+ // -----------
612
+ .close {
613
+ float: right;
614
+ color: @black;
615
+ font-size: 20px;
616
+ font-weight: bold;
617
+ line-height: @baseline * .75;
618
+ text-shadow: 0 1px 0 rgba(255,255,255,1);
619
+ .opacity(20);
620
+ &:hover {
621
+ color: @black;
622
+ text-decoration: none;
623
+ .opacity(40);
624
+ }
625
+ }
626
+
627
+
628
+ // ERROR STYLES
629
+ // ------------
630
+
631
+ // Base alert styles
632
+ .alert-message {
633
+ position: relative;
634
+ padding: 7px 15px;
635
+ margin-bottom: @baseline;
636
+ color: @grayDark;
637
+ .gradientBar(#fceec1, #eedc94); // warning by default
638
+ text-shadow: 0 1px 0 rgba(255,255,255,.5);
639
+ border-width: 1px;
640
+ border-style: solid;
641
+ .border-radius(4px);
642
+ .box-shadow(inset 0 1px 0 rgba(255,255,255,.25));
643
+
644
+ // Adjust close icon
645
+ .close {
646
+ *margin-top: 3px; /* IE7 spacing */
647
+ }
648
+
649
+ // Remove extra margin from content
650
+ h5 {
651
+ line-height: @baseline;
652
+ }
653
+ p {
654
+ margin-bottom: 0;
655
+ }
656
+ div {
657
+ margin-top: 5px;
658
+ margin-bottom: 2px;
659
+ line-height: 28px;
660
+ }
661
+ .btn {
662
+ // Provide actions with buttons
663
+ .box-shadow(0 1px 0 rgba(255,255,255,.25));
664
+ }
665
+
666
+ &.block-message {
667
+ background-image: none;
668
+ background-color: lighten(#fceec1, 5%);
669
+ .reset-filter();
670
+ padding: 14px;
671
+ border-color: #fceec1;
672
+ .box-shadow(none);
673
+ ul, p {
674
+ margin-right: 30px;
675
+ }
676
+ ul {
677
+ margin-bottom: 0;
678
+ }
679
+ li {
680
+ color: @grayDark;
681
+ }
682
+ .alert-actions {
683
+ margin-top: 5px;
684
+ }
685
+ &.error,
686
+ &.success,
687
+ &.info {
688
+ color: @grayDark;
689
+ text-shadow: 0 1px 0 rgba(255,255,255,.5);
690
+ }
691
+ &.error {
692
+ background-color: lighten(#f56a66, 25%);
693
+ border-color: lighten(#f56a66, 20%);
694
+ }
695
+ &.success {
696
+ background-color: lighten(#62c462, 30%);
697
+ border-color: lighten(#62c462, 25%);
698
+ }
699
+ &.info {
700
+ background-color: lighten(#6bd0ee, 25%);
701
+ border-color: lighten(#6bd0ee, 20%);
702
+ }
703
+ }
704
+ }
705
+
706
+
707
+ // PAGINATION
708
+ // ----------
709
+
710
+ .pagination {
711
+ height: @baseline * 2;
712
+ margin: @baseline 0;
713
+ ul {
714
+ float: left;
715
+ margin: 0;
716
+ border: 1px solid #ddd;
717
+ border: 1px solid rgba(0,0,0,.15);
718
+ .border-radius(3px);
719
+ .box-shadow(0 1px 2px rgba(0,0,0,.05));
720
+ }
721
+ li {
722
+ display: inline;
723
+ }
724
+ a {
725
+ float: left;
726
+ padding: 0 14px;
727
+ line-height: (@baseline * 2) - 2;
728
+ border-right: 1px solid;
729
+ border-right-color: #ddd;
730
+ border-right-color: rgba(0,0,0,.15);
731
+ *border-right-color: #ddd; /* IE6-7 */
732
+ text-decoration: none;
733
+ }
734
+ a:hover,
735
+ .active a {
736
+ background-color: lighten(@blue, 45%);
737
+ }
738
+ .disabled a,
739
+ .disabled a:hover {
740
+ background-color: transparent;
741
+ color: @grayLight;
742
+ }
743
+ .next a {
744
+ border: 0;
745
+ }
746
+ }
747
+
748
+
749
+ // WELLS
750
+ // -----
751
+
752
+ .well {
753
+ background-color: #f5f5f5;
754
+ margin-bottom: 20px;
755
+ padding: 19px;
756
+ min-height: 20px;
757
+ border: 1px solid #eee;
758
+ border: 1px solid rgba(0,0,0,.05);
759
+ .border-radius(4px);
760
+ .box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
761
+ blockquote {
762
+ border-color: #ddd;
763
+ border-color: rgba(0,0,0,.15);
764
+ }
765
+ }
766
+
767
+
768
+ // MODALS
769
+ // ------
770
+
771
+ .modal-backdrop {
772
+ background-color: @black;
773
+ position: fixed;
774
+ top: 0;
775
+ left: 0;
776
+ right: 0;
777
+ bottom: 0;
778
+ z-index: 10000;
779
+ // Fade for backdrop
780
+ &.fade { opacity: 0; }
781
+ }
782
+
783
+ .modal-backdrop, .modal-backdrop.fade.in {
784
+ .opacity(80);
785
+ }
786
+
787
+ .modal {
788
+ position: fixed;
789
+ top: 50%;
790
+ left: 50%;
791
+ z-index: 11000;
792
+ width: 560px;
793
+ margin: -250px 0 0 -250px;
794
+ background-color: @white;
795
+ border: 1px solid #999;
796
+ border: 1px solid rgba(0,0,0,.3);
797
+ *border: 1px solid #999; /* IE6-7 */
798
+ .border-radius(6px);
799
+ .box-shadow(0 3px 7px rgba(0,0,0,0.3));
800
+ .background-clip(padding-box);
801
+ .close { margin-top: 7px; }
802
+ &.fade {
803
+ .transition(e('opacity .3s linear, top .3s ease-out'));
804
+ top: -25%;
805
+ }
806
+ &.fade.in { top: 50%; }
807
+ }
808
+ .modal-header {
809
+ border-bottom: 1px solid #eee;
810
+ padding: 5px 15px;
811
+ }
812
+ .modal-body {
813
+ padding: 15px;
814
+ }
815
+ .modal-footer {
816
+ background-color: #f5f5f5;
817
+ padding: 14px 15px 15px;
818
+ border-top: 1px solid #ddd;
819
+ .border-radius(0 0 6px 6px);
820
+ .box-shadow(inset 0 1px 0 @white);
821
+ .clearfix();
822
+ margin-bottom: 0;
823
+ .btn {
824
+ float: right;
825
+ margin-left: 5px;
826
+ }
827
+ }
828
+
829
+
830
+ // POPOVER ARROWS
831
+ // --------------
832
+
833
+ #popoverArrow {
834
+ .above(@arrowWidth: 5px) {
835
+ bottom: 0;
836
+ left: 50%;
837
+ margin-left: -@arrowWidth;
838
+ border-left: @arrowWidth solid transparent;
839
+ border-right: @arrowWidth solid transparent;
840
+ border-top: @arrowWidth solid @black;
841
+ }
842
+ .left(@arrowWidth: 5px) {
843
+ top: 50%;
844
+ right: 0;
845
+ margin-top: -@arrowWidth;
846
+ border-top: @arrowWidth solid transparent;
847
+ border-bottom: @arrowWidth solid transparent;
848
+ border-left: @arrowWidth solid @black;
849
+ }
850
+ .below(@arrowWidth: 5px) {
851
+ top: 0;
852
+ left: 50%;
853
+ margin-left: -@arrowWidth;
854
+ border-left: @arrowWidth solid transparent;
855
+ border-right: @arrowWidth solid transparent;
856
+ border-bottom: @arrowWidth solid @black;
857
+ }
858
+ .right(@arrowWidth: 5px) {
859
+ top: 50%;
860
+ left: 0;
861
+ margin-top: -@arrowWidth;
862
+ border-top: @arrowWidth solid transparent;
863
+ border-bottom: @arrowWidth solid transparent;
864
+ border-right: @arrowWidth solid @black;
865
+ }
866
+ }
867
+
868
+ // TWIPSY
869
+ // ------
870
+
871
+ .twipsy {
872
+ display: block;
873
+ position: absolute;
874
+ visibility: visible;
875
+ padding: 5px;
876
+ font-size: 11px;
877
+ z-index: 1000;
878
+ .opacity(80);
879
+ &.fade.in {
880
+ .opacity(80);
881
+ }
882
+ &.above .twipsy-arrow { #popoverArrow > .above(); }
883
+ &.left .twipsy-arrow { #popoverArrow > .left(); }
884
+ &.below .twipsy-arrow { #popoverArrow > .below(); }
885
+ &.right .twipsy-arrow { #popoverArrow > .right(); }
886
+ }
887
+ .twipsy-inner {
888
+ padding: 3px 8px;
889
+ background-color: @black;
890
+ color: white;
891
+ text-align: center;
892
+ max-width: 200px;
893
+ text-decoration: none;
894
+ .border-radius(4px);
895
+ }
896
+ .twipsy-arrow {
897
+ position: absolute;
898
+ width: 0;
899
+ height: 0;
900
+ }
901
+
902
+
903
+ // POPOVERS
904
+ // --------
905
+
906
+ .popover {
907
+ position: absolute;
908
+ top: 0;
909
+ left: 0;
910
+ z-index: 1000;
911
+ padding: 5px;
912
+ display: none;
913
+ &.above .arrow { #popoverArrow > .above(); }
914
+ &.right .arrow { #popoverArrow > .right(); }
915
+ &.below .arrow { #popoverArrow > .below(); }
916
+ &.left .arrow { #popoverArrow > .left(); }
917
+ .arrow {
918
+ position: absolute;
919
+ width: 0;
920
+ height: 0;
921
+ }
922
+ .inner {
923
+ background-color: @black;
924
+ background-color: rgba(0,0,0,.8);
925
+ padding: 3px;
926
+ overflow: hidden;
927
+ width: 280px;
928
+ .border-radius(6px);
929
+ .box-shadow(0 3px 7px rgba(0,0,0,0.3));
930
+ }
931
+ .title {
932
+ background-color: #f5f5f5;
933
+ padding: 9px 15px;
934
+ line-height: 1;
935
+ .border-radius(3px 3px 0 0);
936
+ border-bottom:1px solid #eee;
937
+ }
938
+ .content {
939
+ background-color: @white;
940
+ padding: 14px;
941
+ .border-radius(0 0 3px 3px);
942
+ .background-clip(padding-box);
943
+ p, ul, ol {
944
+ margin-bottom: 0;
945
+ }
946
+ }
947
+ }
948
+
949
+
950
+ // PATTERN ANIMATIONS
951
+ // ------------------
952
+
953
+ .fade {
954
+ .transition(opacity .15s linear);
955
+ opacity: 0;
956
+ &.in {
957
+ opacity: 1;
958
+ }
959
+ }
960
+
961
+
962
+ // LABELS
963
+ // ------
964
+
965
+ .label {
966
+ padding: 1px 3px 2px;
967
+ background-color: @grayLight;
968
+ font-size: @basefont * .75;
969
+ font-weight: bold;
970
+ color: @white;
971
+ text-transform: uppercase;
972
+ white-space: nowrap;
973
+ .border-radius(3px);
974
+ &.important { background-color: #c43c35; }
975
+ &.warning { background-color: @orange; }
976
+ &.success { background-color: @green; }
977
+ &.notice { background-color: lighten(@blue, 25%); }
978
+ }
979
+
980
+
981
+ // MEDIA GRIDS
982
+ // -----------
983
+
984
+ .media-grid {
985
+ margin-left: -20px;
986
+ margin-bottom: 0;
987
+ .clearfix();
988
+ li {
989
+ display: inline;
990
+ }
991
+ a {
992
+ float: left;
993
+ padding: 4px;
994
+ margin: 0 0 20px 20px;
995
+ border: 1px solid #ddd;
996
+ .border-radius(4px);
997
+ .box-shadow(0 1px 1px rgba(0,0,0,.075));
998
+ img {
999
+ display: block;
1000
+ }
1001
+ &:hover {
1002
+ border-color: @linkColor;
1003
+ .box-shadow(0 1px 4px rgba(0,105,214,.25));
1004
+ }
1005
+ }
1006
+ }